@descope/flow-components 3.13.3 → 3.14.0

package/dist/index.cjs.js

@@ -79914,7 +79914,7 @@ function requireIndex_cjs () {
 	  let style;
 
 	  try {
-	    // eslint-disable-next-line no-undef
+	     
 	    style = new CSSStyleSheet();
 	  } catch {
 	    // fallback for browsers that don't support CSSStyleSheet
@@ -79980,6 +79980,21 @@ function requireIndex_cjs () {
 	    .map((s) => s[0]?.toUpperCase())
 	    .join('');
 
+	const cloneSlottedNodes = (element, slotName) => {
+	  if (!element || !slotName) return null;
+	  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
+	  if (!sources.length) return null;
+	  const fragment = document.createDocumentFragment();
+	  sources.forEach((source) => {
+	    const clone = source.content
+	      ? source.content.cloneNode(true)
+	      : source.cloneNode(true);
+	    if (clone.removeAttribute) clone.removeAttribute('slot');
+	    fragment.append(clone);
+	  });
+	  return fragment;
+	};
+
 	class ComponentsThemeManager {
 	  static mountOnPropName = 'DescopeThemeManager';
 
@@ -80932,7 +80947,7 @@ function requireIndex_cjs () {
 	  fonts: fonts$1,
 	  direction: direction$1,
 	};
-	const vars$1a = getThemeVars(globals$1);
+	const vars$1b = getThemeVars(globals$1);
 
 	const direction = 'ltr';
 
@@ -82782,12 +82797,12 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	const componentName$1p = getComponentName('image');
+	const componentName$1q = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
 
 	class RawImage extends createBaseClass$1({
-	  componentName: componentName$1p,
+	  componentName: componentName$1q,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -82915,7 +82930,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const componentName$1o = getComponentName('icon');
+	const componentName$1p = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -82940,7 +82955,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class', 'style', 'st-height', 'st-width'],
-	    componentName: componentName$1o,
+	    componentName: componentName$1p,
 	  }),
 	);
 
@@ -82955,7 +82970,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1n = getComponentName('button');
+	const componentName$1o = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -82993,7 +83008,7 @@ function requireIndex_cjs () {
 
 	const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-	const { host: host$A, label: label$a, slottedIcon } = {
+	const { host: host$B, label: label$a, slottedIcon } = {
 	  host: { selector: () => ':host' },
 	  label: { selector: '::part(label)' },
 	  slottedIcon: { selector: () => '::slotted(descope-icon)' },
@@ -83006,8 +83021,9 @@ function requireIndex_cjs () {
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: { property: 'width' },
+	      hostMaxWidth: { ...host$B, property: 'max-width' },
 	      hostHeight: { property: 'height' },
-	      hostDirection: { ...host$A, property: 'direction' },
+	      hostDirection: { ...host$B, property: 'direction' },
 	      fontSize: {},
 	      fontFamily: {},
 	      fontWeight: {},
@@ -83076,7 +83092,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1n,
+	    componentName: componentName$1o,
 	  }),
 	);
 
@@ -83113,35 +83129,35 @@ function requireIndex_cjs () {
 	}
 `;
 
-	const globalRefs$I = getThemeRefs$1(globals);
+	const globalRefs$J = getThemeRefs$1(globals);
 	const compVars$9 = 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$7, helperRefs$7, helperVars$6] = createHelperVars$1(
 	  { mode },
-	  componentName$1n,
+	  componentName$1o,
 	);
 
 	const button = {
 	  ...helperTheme$7,
 
-	  [compVars$9.fontFamily]: globalRefs$I.fonts.font1.family,
+	  [compVars$9.fontFamily]: globalRefs$J.fonts.font1.family,
 	  [compVars$9.fontWeight]: '400',
 
 	  [compVars$9.cursor]: 'pointer',
 	  [compVars$9.hostHeight]: '3em',
 	  [compVars$9.hostWidth]: 'auto',
-	  [compVars$9.hostDirection]: globalRefs$I.direction,
+	  [compVars$9.hostDirection]: globalRefs$J.direction,
 
-	  [compVars$9.borderRadius]: globalRefs$I.radius.sm,
-	  [compVars$9.borderWidth]: globalRefs$I.border.xs,
+	  [compVars$9.borderRadius]: globalRefs$J.radius.sm,
+	  [compVars$9.borderWidth]: globalRefs$J.border.xs,
 	  [compVars$9.borderStyle]: 'solid',
 	  [compVars$9.borderColor]: 'transparent',
 
@@ -83187,11 +83203,11 @@ function requireIndex_cjs () {
 	  },
 
 	  _disabled: {
-	    [helperVars$6.main]: globalRefs$I.colors.surface.light,
-	    [helperVars$6.dark]: globalRefs$I.colors.surface.dark,
-	    [helperVars$6.light]: globalRefs$I.colors.surface.light,
-	    [helperVars$6.contrast]: globalRefs$I.colors.surface.main,
-	    [compVars$9.iconColor]: globalRefs$I.colors.surface.main,
+	    [helperVars$6.main]: globalRefs$J.colors.surface.light,
+	    [helperVars$6.dark]: globalRefs$J.colors.surface.dark,
+	    [helperVars$6.light]: globalRefs$J.colors.surface.light,
+	    [helperVars$6.contrast]: globalRefs$J.colors.surface.main,
+	    [compVars$9.iconColor]: globalRefs$J.colors.surface.main,
 	  },
 
 	  variant: {
@@ -83240,7 +83256,7 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$19 = {
+	const vars$1a = {
 	  ...compVars$9,
 	  ...helperVars$6,
 	};
@@ -83248,13 +83264,13 @@ function requireIndex_cjs () {
 	var button$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: button,
-	  vars: vars$19
+	  vars: vars$1a
 	});
 
-	const componentName$1m = getComponentName('text');
+	const componentName$1n = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$1m,
+	  componentName: componentName$1n,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -83293,15 +83309,15 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$z } = {
+	const { host: host$A } = {
 	  host: { selector: () => ':host' },
 	};
 
 	const TextClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$z, property: 'width' },
-	      hostDirection: { ...host$z, property: 'direction' },
+	      hostWidth: { ...host$A, property: 'width' },
+	      hostDirection: { ...host$A, property: 'direction' },
 	      fontSize: {},
 	      textColor: [{ property: 'color' }],
 	      textLineHeight: { property: 'line-height' },
@@ -83322,107 +83338,107 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawText);
 
-	const globalRefs$H = getThemeRefs$1(globals);
-	const vars$18 = TextClass.cssVarList;
+	const globalRefs$I = getThemeRefs$1(globals);
+	const vars$19 = TextClass.cssVarList;
 
 	const text$3 = {
-	  [vars$18.hostDirection]: globalRefs$H.direction,
-	  [vars$18.textLineHeight]: '1.35em',
-	  [vars$18.textAlign]: 'start',
-	  [vars$18.textColor]: globalRefs$H.colors.surface.dark,
+	  [vars$19.hostDirection]: globalRefs$I.direction,
+	  [vars$19.textLineHeight]: '1.35em',
+	  [vars$19.textAlign]: 'start',
+	  [vars$19.textColor]: globalRefs$I.colors.surface.dark,
 
 	  variant: {
 	    h1: {
-	      [vars$18.fontSize]: globalRefs$H.typography.h1.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.h1.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.h1.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.h1.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.h1.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.h1.font,
 	    },
 	    h2: {
-	      [vars$18.fontSize]: globalRefs$H.typography.h2.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.h2.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.h2.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.h2.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.h2.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.h2.font,
 	    },
 	    h3: {
-	      [vars$18.fontSize]: globalRefs$H.typography.h3.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.h3.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.h3.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.h3.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.h3.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.h3.font,
 	    },
 	    subtitle1: {
-	      [vars$18.fontSize]: globalRefs$H.typography.subtitle1.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.subtitle1.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.subtitle1.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.subtitle1.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.subtitle1.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.subtitle1.font,
 	    },
 	    subtitle2: {
-	      [vars$18.fontSize]: globalRefs$H.typography.subtitle2.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.subtitle2.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.subtitle2.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.subtitle2.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.subtitle2.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.subtitle2.font,
 	    },
 	    body1: {
-	      [vars$18.fontSize]: globalRefs$H.typography.body1.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.body1.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.body1.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.body1.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.body1.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.body1.font,
 	    },
 	    body2: {
-	      [vars$18.fontSize]: globalRefs$H.typography.body2.size,
-	      [vars$18.fontWeight]: globalRefs$H.typography.body2.weight,
-	      [vars$18.fontFamily]: globalRefs$H.typography.body2.font,
+	      [vars$19.fontSize]: globalRefs$I.typography.body2.size,
+	      [vars$19.fontWeight]: globalRefs$I.typography.body2.weight,
+	      [vars$19.fontFamily]: globalRefs$I.typography.body2.font,
 	    },
 	  },
 
 	  mode: {
 	    primary: {
-	      [vars$18.textColor]: globalRefs$H.colors.surface.contrast,
+	      [vars$19.textColor]: globalRefs$I.colors.surface.contrast,
 	    },
 	    secondary: {
-	      [vars$18.textColor]: globalRefs$H.colors.surface.dark,
+	      [vars$19.textColor]: globalRefs$I.colors.surface.dark,
 	    },
 	    error: {
-	      [vars$18.textColor]: globalRefs$H.colors.error.main,
+	      [vars$19.textColor]: globalRefs$I.colors.error.main,
 	    },
 	    'error-dark': {
-	      [vars$18.textColor]: globalRefs$H.colors.error.dark,
+	      [vars$19.textColor]: globalRefs$I.colors.error.dark,
 	    },
 	    success: {
-	      [vars$18.textColor]: globalRefs$H.colors.success.main,
+	      [vars$19.textColor]: globalRefs$I.colors.success.main,
 	    },
 	    'success-dark': {
-	      [vars$18.textColor]: globalRefs$H.colors.success.dark,
+	      [vars$19.textColor]: globalRefs$I.colors.success.dark,
 	    },
 	    warning: {
-	      [vars$18.textColor]: globalRefs$H.colors.warning.main,
+	      [vars$19.textColor]: globalRefs$I.colors.warning.main,
 	    },
 	    'warning-dark': {
-	      [vars$18.textColor]: globalRefs$H.colors.warning.dark,
+	      [vars$19.textColor]: globalRefs$I.colors.warning.dark,
 	    },
 	  },
 
 	  textAlign: {
-	    right: { [vars$18.textAlign]: 'right' },
-	    left: { [vars$18.textAlign]: 'left' },
-	    center: { [vars$18.textAlign]: 'center' },
+	    right: { [vars$19.textAlign]: 'right' },
+	    left: { [vars$19.textAlign]: 'left' },
+	    center: { [vars$19.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$18.hostWidth]: '100%',
+	    [vars$19.hostWidth]: '100%',
 	  },
 
 	  _italic: {
-	    [vars$18.fontStyle]: 'italic',
+	    [vars$19.fontStyle]: 'italic',
 	  },
 
 	  _uppercase: {
-	    [vars$18.textTransform]: 'uppercase',
+	    [vars$19.textTransform]: 'uppercase',
 	  },
 
 	  _lowercase: {
-	    [vars$18.textTransform]: 'lowercase',
+	    [vars$19.textTransform]: 'lowercase',
 	  },
 	};
 
 	var text$4 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: text$3,
-	  vars: vars$18
+	  vars: vars$19
 	});
 
 	const disableRules = [
@@ -83446,10 +83462,10 @@ function requireIndex_cjs () {
 	  return textArea.value;
 	};
 
-	const componentName$1l = getComponentName('enriched-text');
+	const componentName$1m = getComponentName('enriched-text');
 
 	class EnrichedText extends createBaseClass$1({
-	  componentName: componentName$1l,
+	  componentName: componentName$1m,
 	  baseSelector: ':host > div',
 	}) {
 	  #origLinkRenderer;
@@ -83686,12 +83702,12 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(EnrichedText);
 
-	const componentName$1k = getComponentName('link');
+	const componentName$1l = getComponentName('link');
 
 	const observedAttrs$8 = ['href', 'readonly'];
 
 	class RawLink extends createBaseClass$1({
-	  componentName: componentName$1k,
+	  componentName: componentName$1l,
 	  baseSelector: ':host a',
 	}) {
 	  static get observedAttributes() {
@@ -83766,12 +83782,12 @@ function requireIndex_cjs () {
 	  text: { selector: () => TextClass.componentName },
 	};
 
-	const { anchor, text: text$2, host: host$y, wrapper: wrapper$1, link: link$3 } = selectors$3;
+	const { anchor, text: text$2, host: host$z, wrapper: wrapper$1, link: link$3 } = selectors$3;
 
 	const LinkClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$y, property: 'width' },
+	      hostWidth: { ...host$z, property: 'width' },
 	      hostDirection: { ...text$2, property: 'direction' },
 	      textAlign: wrapper$1,
 	      textDecoration: {
@@ -83791,32 +83807,32 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawLink);
 
-	const globalRefs$G = getThemeRefs$1(globals);
-	const vars$17 = LinkClass.cssVarList;
+	const globalRefs$H = getThemeRefs$1(globals);
+	const vars$18 = LinkClass.cssVarList;
 
 	const link$1 = {
-	  [vars$17.hostDirection]: globalRefs$G.direction,
-	  [vars$17.cursor]: 'pointer',
+	  [vars$18.hostDirection]: globalRefs$H.direction,
+	  [vars$18.cursor]: 'pointer',
 
-	  [vars$17.textColor]: globalRefs$G.colors.primary.main,
+	  [vars$18.textColor]: globalRefs$H.colors.primary.main,
 
 	  textAlign: {
-	    right: { [vars$17.textAlign]: 'right' },
-	    left: { [vars$17.textAlign]: 'left' },
-	    center: { [vars$17.textAlign]: 'center' },
+	    right: { [vars$18.textAlign]: 'right' },
+	    left: { [vars$18.textAlign]: 'left' },
+	    center: { [vars$18.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$17.hostWidth]: '100%',
+	    [vars$18.hostWidth]: '100%',
 	  },
 
 	  _hover: {
-	    [vars$17.textDecoration]: 'underline',
+	    [vars$18.textDecoration]: 'underline',
 	  },
 
 	  mode: {
 	    secondary: {
-	      [vars$17.textColor]: globalRefs$G.colors.secondary.main,
+	      [vars$18.textColor]: globalRefs$H.colors.secondary.main,
 	    },
 	  },
 	};
@@ -83824,37 +83840,37 @@ function requireIndex_cjs () {
 	var link$2 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: link$1,
-	  vars: vars$17
+	  vars: vars$18
 	});
 
-	const globalRefs$F = getThemeRefs$1(globals);
-	const vars$16 = EnrichedTextClass.cssVarList;
+	const globalRefs$G = getThemeRefs$1(globals);
+	const vars$17 = EnrichedTextClass.cssVarList;
 
 	const enrichedText = {
-	  [vars$16.hostDirection]: globalRefs$F.direction,
-	  [vars$16.hostWidth]: useVar$1(vars$18.hostWidth),
+	  [vars$17.hostDirection]: globalRefs$G.direction,
+	  [vars$17.hostWidth]: useVar$1(vars$19.hostWidth),
 
-	  [vars$16.textLineHeight]: useVar$1(vars$18.textLineHeight),
-	  [vars$16.textColor]: useVar$1(vars$18.textColor),
-	  [vars$16.textAlign]: useVar$1(vars$18.textAlign),
+	  [vars$17.textLineHeight]: useVar$1(vars$19.textLineHeight),
+	  [vars$17.textColor]: useVar$1(vars$19.textColor),
+	  [vars$17.textAlign]: useVar$1(vars$19.textAlign),
 
-	  [vars$16.fontSize]: useVar$1(vars$18.fontSize),
-	  [vars$16.fontWeight]: useVar$1(vars$18.fontWeight),
-	  [vars$16.fontFamily]: useVar$1(vars$18.fontFamily),
+	  [vars$17.fontSize]: useVar$1(vars$19.fontSize),
+	  [vars$17.fontWeight]: useVar$1(vars$19.fontWeight),
+	  [vars$17.fontFamily]: useVar$1(vars$19.fontFamily),
 
-	  [vars$16.linkColor]: useVar$1(vars$17.textColor),
-	  [vars$16.linkTextDecoration]: 'none',
-	  [vars$16.linkHoverTextDecoration]: 'underline',
+	  [vars$17.linkColor]: useVar$1(vars$18.textColor),
+	  [vars$17.linkTextDecoration]: 'none',
+	  [vars$17.linkHoverTextDecoration]: 'underline',
 
-	  [vars$16.fontWeightBold]: '900',
-	  [vars$16.minWidth]: '0.25em',
-	  [vars$16.minHeight]: '1.35em',
+	  [vars$17.fontWeightBold]: '900',
+	  [vars$17.minWidth]: '0.25em',
+	  [vars$17.minHeight]: '1.35em',
 
-	  [vars$16.hostDisplay]: 'inline-block',
+	  [vars$17.hostDisplay]: 'inline-block',
 
 	  _empty: {
 	    _hideWhenEmpty: {
-	      [vars$16.hostDisplay]: 'none',
+	      [vars$17.hostDisplay]: 'none',
 	    },
 	  },
 	};
@@ -83862,10 +83878,10 @@ function requireIndex_cjs () {
 	var enrichedText$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: enrichedText,
-	  vars: vars$16
+	  vars: vars$17
 	});
 
-	const componentName$1j = getComponentName('combo-box');
+	const componentName$1k = getComponentName('combo-box');
 
 	const ComboBoxMixin = (superclass) =>
 	  class ComboBoxMixinClass extends superclass {
@@ -84255,7 +84271,7 @@ function requireIndex_cjs () {
 	  };
 
 	const {
-	  host: host$x,
+	  host: host$y,
 	  inputField: inputField$6,
 	  inputElement: inputElement$3,
 	  placeholder: placeholder$3,
@@ -84287,10 +84303,10 @@ function requireIndex_cjs () {
 	const ComboBoxClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$x, property: 'width' },
-	      hostDirection: { ...host$x, property: 'direction' },
+	      hostWidth: { ...host$y, property: 'width' },
+	      hostDirection: { ...host$y, property: 'direction' },
 	      // we apply font-size also on the host so we can set its width with em
-	      fontSize: [{}, host$x],
+	      fontSize: [{}, host$y],
 	      fontFamily: [label$9, placeholder$3, inputField$6, helperText$a, errorMessage$d],
 	      labelFontSize: { ...label$9, property: 'font-size' },
 	      labelFontWeight: { ...label$9, property: 'font-weight' },
@@ -84558,35 +84574,35 @@ function requireIndex_cjs () {
 	    // and reset items to an empty array, and opening the list box with no items
 	    // to display.
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading', 'style'],
-	    componentName: componentName$1j,
+	    componentName: componentName$1k,
 	    includeForwardProps: ['items', 'renderer', 'selectedItem'],
 	  }),
 	);
 
-	const componentName$1i = getComponentName('input-wrapper');
-	const globalRefs$E = getThemeRefs$1(globals);
+	const componentName$1j = getComponentName('input-wrapper');
+	const globalRefs$F = getThemeRefs$1(globals);
 
 	const [theme$2, refs$1] = createHelperVars$1(
 	  {
-	    labelTextColor: globalRefs$E.colors.surface.dark,
+	    labelTextColor: globalRefs$F.colors.surface.dark,
 	    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
 	    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
 	    inputValueFontWeight: '400',
 	    inputPlaceholderFontWeight: '400',
 	    helperTextFontWeight: '400',
 	    errorMessageFontWeight: '400',
-	    valueTextColor: globalRefs$E.colors.surface.contrast,
-	    placeholderTextColor: globalRefs$E.colors.surface.dark,
+	    valueTextColor: globalRefs$F.colors.surface.contrast,
+	    placeholderTextColor: globalRefs$F.colors.surface.dark,
 	    requiredIndicator: "'*'",
-	    helperTextColor: globalRefs$E.colors.surface.dark,
-	    errorMessageTextColor: globalRefs$E.colors.error.main,
-	    successMessageTextColor: globalRefs$E.colors.success.main,
+	    helperTextColor: globalRefs$F.colors.surface.dark,
+	    errorMessageTextColor: globalRefs$F.colors.error.main,
+	    successMessageTextColor: globalRefs$F.colors.success.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
@@ -84600,11 +84616,11 @@ function requireIndex_cjs () {
 
 	    textAlign: 'start',
 
-	    backgroundColor: globalRefs$E.colors.surface.main,
+	    backgroundColor: globalRefs$F.colors.surface.main,
 
-	    fontFamily: globalRefs$E.fonts.font1.family,
+	    fontFamily: globalRefs$F.fonts.font1.family,
 
-	    direction: globalRefs$E.direction,
+	    direction: globalRefs$F.direction,
 
 	    overlayOpacity: '0.3',
 
@@ -84665,135 +84681,135 @@ function requireIndex_cjs () {
 	    },
 
 	    _focused: {
-	      outlineColor: globalRefs$E.colors.surface.light,
+	      outlineColor: globalRefs$F.colors.surface.light,
 	      _invalid: {
-	        outlineColor: globalRefs$E.colors.error.main,
+	        outlineColor: globalRefs$F.colors.error.main,
 	      },
 	    },
 
 	    _bordered: {
-	      outlineWidth: globalRefs$E.border.xs,
-	      borderColor: globalRefs$E.colors.surface.light,
+	      outlineWidth: globalRefs$F.border.xs,
+	      borderColor: globalRefs$F.colors.surface.light,
 	      borderStyle: 'solid',
 	      _invalid: {
-	        borderColor: globalRefs$E.colors.error.main,
+	        borderColor: globalRefs$F.colors.error.main,
 	      },
 	    },
 
 	    _disabled: {
-	      labelTextColor: globalRefs$E.colors.surface.light,
-	      borderColor: globalRefs$E.colors.surface.light,
-	      valueTextColor: globalRefs$E.colors.surface.light,
-	      placeholderTextColor: globalRefs$E.colors.surface.light,
-	      helperTextColor: globalRefs$E.colors.surface.light,
-	      backgroundColor: globalRefs$E.colors.surface.main,
+	      labelTextColor: globalRefs$F.colors.surface.light,
+	      borderColor: globalRefs$F.colors.surface.light,
+	      valueTextColor: globalRefs$F.colors.surface.light,
+	      placeholderTextColor: globalRefs$F.colors.surface.light,
+	      helperTextColor: globalRefs$F.colors.surface.light,
+	      backgroundColor: globalRefs$F.colors.surface.main,
 	    },
 
 	    _obfuscated: {
 	      inputTextSecurity: 'disc',
 	    },
 	  },
-	  componentName$1i,
+	  componentName$1j,
 	);
 
-	const globalRefs$D = getThemeRefs$1(globals);
-	const vars$15 = ComboBoxClass.cssVarList;
+	const globalRefs$E = getThemeRefs$1(globals);
+	const vars$16 = ComboBoxClass.cssVarList;
 
 	const comboBox = {
-	  [vars$15.hostWidth]: refs$1.width,
-	  [vars$15.hostDirection]: refs$1.direction,
-	  [vars$15.fontSize]: refs$1.fontSize,
-	  [vars$15.fontFamily]: refs$1.fontFamily,
-	  [vars$15.labelFontSize]: refs$1.labelFontSize,
-	  [vars$15.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$15.inputValueFontWeight]: refs$1.inputValueFontWeight,
-	  [vars$15.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-	  [vars$15.helperTextFontWeight]: refs$1.helperTextFontWeight,
-	  [vars$15.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-	  [vars$15.labelTextColor]: refs$1.labelTextColor,
-	  [vars$15.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$15.inputBorderColor]: refs$1.borderColor,
-	  [vars$15.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$15.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$15.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$15.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$15.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$15.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$15.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$15.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$15.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$15.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$15.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$15.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$15.inputHeight]: refs$1.inputHeight,
-	  [vars$15.inputDropdownButtonColor]: globalRefs$D.colors.surface.dark,
-	  [vars$15.inputDropdownButtonCursor]: 'pointer',
-	  [vars$15.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-	  [vars$15.inputDropdownButtonOffset]: globalRefs$D.spacing.xs,
-	  [vars$15.overlayItemPaddingInlineStart]: globalRefs$D.spacing.xs,
-	  [vars$15.overlayItemPaddingInlineEnd]: globalRefs$D.spacing.lg,
-	  [vars$15.labelPosition]: refs$1.labelPosition,
-	  [vars$15.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$15.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$15.inputTransformY]: refs$1.inputTransformY,
-	  [vars$15.inputTransition]: refs$1.inputTransition,
-	  [vars$15.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$15.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$15.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$15.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$15.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$16.hostWidth]: refs$1.width,
+	  [vars$16.hostDirection]: refs$1.direction,
+	  [vars$16.fontSize]: refs$1.fontSize,
+	  [vars$16.fontFamily]: refs$1.fontFamily,
+	  [vars$16.labelFontSize]: refs$1.labelFontSize,
+	  [vars$16.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$16.inputValueFontWeight]: refs$1.inputValueFontWeight,
+	  [vars$16.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+	  [vars$16.helperTextFontWeight]: refs$1.helperTextFontWeight,
+	  [vars$16.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+	  [vars$16.labelTextColor]: refs$1.labelTextColor,
+	  [vars$16.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$16.inputBorderColor]: refs$1.borderColor,
+	  [vars$16.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$16.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$16.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$16.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$16.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$16.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$16.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$16.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$16.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$16.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$16.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$16.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$16.inputHeight]: refs$1.inputHeight,
+	  [vars$16.inputDropdownButtonColor]: globalRefs$E.colors.surface.dark,
+	  [vars$16.inputDropdownButtonCursor]: 'pointer',
+	  [vars$16.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+	  [vars$16.inputDropdownButtonOffset]: globalRefs$E.spacing.xs,
+	  [vars$16.overlayItemPaddingInlineStart]: globalRefs$E.spacing.xs,
+	  [vars$16.overlayItemPaddingInlineEnd]: globalRefs$E.spacing.lg,
+	  [vars$16.labelPosition]: refs$1.labelPosition,
+	  [vars$16.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$16.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$16.inputTransformY]: refs$1.inputTransformY,
+	  [vars$16.inputTransition]: refs$1.inputTransition,
+	  [vars$16.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$16.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$16.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$16.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$16.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$15.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$15.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$15.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$15.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$15.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$15.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$16.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$16.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$16.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$16.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$16.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$16.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _readonly: {
-	    [vars$15.inputDropdownButtonCursor]: 'default',
+	    [vars$16.inputDropdownButtonCursor]: 'default',
 	  },
 
 	  // Overlay theme exposed via the component:
-	  [vars$15.overlayFontSize]: refs$1.fontSize,
-	  [vars$15.overlayFontFamily]: refs$1.fontFamily,
-	  [vars$15.overlayCursor]: 'pointer',
-	  [vars$15.overlayItemBoxShadow]: 'none',
-	  [vars$15.overlayBackground]: refs$1.backgroundColor,
-	  [vars$15.overlayTextColor]: refs$1.valueTextColor,
-	  [vars$15.overlayCheckmarkDisplay]: 'initial',
-	  [vars$15.overlaySelectedItemBackground]: 'initial',
-	  [vars$15.overlaySelectedItemHoverBackground]:
-	    globalRefs$D.colors.primary.highlight,
-	  [vars$15.overlaySelectedItemFocusBackground]:
-	    globalRefs$D.colors.primary.highlight,
-	  [vars$15.overlayItemHoverBackground]: globalRefs$D.colors.primary.highlight,
-	  [vars$15.overlayItemFocusBackground]: globalRefs$D.colors.primary.highlight,
+	  [vars$16.overlayFontSize]: refs$1.fontSize,
+	  [vars$16.overlayFontFamily]: refs$1.fontFamily,
+	  [vars$16.overlayCursor]: 'pointer',
+	  [vars$16.overlayItemBoxShadow]: 'none',
+	  [vars$16.overlayBackground]: refs$1.backgroundColor,
+	  [vars$16.overlayTextColor]: refs$1.valueTextColor,
+	  [vars$16.overlayCheckmarkDisplay]: 'initial',
+	  [vars$16.overlaySelectedItemBackground]: 'initial',
+	  [vars$16.overlaySelectedItemHoverBackground]:
+	    globalRefs$E.colors.primary.highlight,
+	  [vars$16.overlaySelectedItemFocusBackground]:
+	    globalRefs$E.colors.primary.highlight,
+	  [vars$16.overlayItemHoverBackground]: globalRefs$E.colors.primary.highlight,
+	  [vars$16.overlayItemFocusBackground]: globalRefs$E.colors.primary.highlight,
 
 	  // Overlay direct theme:
-	  [vars$15.overlay.minHeight]: '400px',
-	  [vars$15.overlay.margin]: '0',
+	  [vars$16.overlay.minHeight]: '400px',
+	  [vars$16.overlay.margin]: '0',
 
-	  [vars$15.overlay.contentHeight]: '100%',
-	  [vars$15.overlay.contentOpacity]: '1',
-	  [vars$15.overlay.scrollerMinHeight]: '1px',
+	  [vars$16.overlay.contentHeight]: '100%',
+	  [vars$16.overlay.contentOpacity]: '1',
+	  [vars$16.overlay.scrollerMinHeight]: '1px',
 	  _loading: {
-	    [vars$15.overlay.loaderTop]: '50%',
-	    [vars$15.overlay.loaderLeft]: '50%',
-	    [vars$15.overlay.loaderRight]: 'auto',
+	    [vars$16.overlay.loaderTop]: '50%',
+	    [vars$16.overlay.loaderLeft]: '50%',
+	    [vars$16.overlay.loaderRight]: 'auto',
 	    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
 	    // Margin has to be half of the width/height of the loader to center it
-	    [vars$15.overlay.loaderMargin]: '-15px 0 0 -15px',
-	    [vars$15.overlay.loaderWidth]: '30px',
-	    [vars$15.overlay.loaderHeight]: '30px',
-	    [vars$15.overlay.loaderBorder]: '2px solid transparent',
-	    [vars$15.overlay.loaderBorderColor]:
-	      `${globalRefs$D.colors.primary.highlight} ${globalRefs$D.colors.primary.highlight} ${globalRefs$D.colors.primary.main} ${globalRefs$D.colors.primary.main}`,
-	    [vars$15.overlay.loaderBorderRadius]: '50%',
-	    [vars$15.overlay.contentHeight]: '100px',
-	    [vars$15.overlay.scrollerMinHeight]: '100px',
-	    [vars$15.overlay.contentOpacity]: '0',
+	    [vars$16.overlay.loaderMargin]: '-15px 0 0 -15px',
+	    [vars$16.overlay.loaderWidth]: '30px',
+	    [vars$16.overlay.loaderHeight]: '30px',
+	    [vars$16.overlay.loaderBorder]: '2px solid transparent',
+	    [vars$16.overlay.loaderBorderColor]:
+	      `${globalRefs$E.colors.primary.highlight} ${globalRefs$E.colors.primary.highlight} ${globalRefs$E.colors.primary.main} ${globalRefs$E.colors.primary.main}`,
+	    [vars$16.overlay.loaderBorderRadius]: '50%',
+	    [vars$16.overlay.contentHeight]: '100px',
+	    [vars$16.overlay.scrollerMinHeight]: '100px',
+	    [vars$16.overlay.contentOpacity]: '0',
 	  },
 	};
 
@@ -84801,13 +84817,13 @@ function requireIndex_cjs () {
 	  __proto__: null,
 	  comboBox: comboBox,
 	  default: comboBox,
-	  vars: vars$15
+	  vars: vars$16
 	});
 
-	const componentName$1h = getComponentName('badge');
+	const componentName$1i = getComponentName('badge');
 
 	class RawBadge extends createBaseClass$1({
-	  componentName: componentName$1h,
+	  componentName: componentName$1i,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -84896,52 +84912,52 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawBadge);
 
-	const globalRefs$C = getThemeRefs$1(globals);
+	const globalRefs$D = getThemeRefs$1(globals);
 
 	const [helperTheme$6, helperRefs$6] = createHelperVars$1(
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$1h,
+	  componentName$1i,
 	);
 
 	const { shadowColor: shadowColor$7 } = helperRefs$6;
 
-	const vars$14 = BadgeClass.cssVarList;
+	const vars$15 = BadgeClass.cssVarList;
 
 	const badge$2 = {
 	  ...helperTheme$6,
 
-	  [vars$14.hostWidth]: 'fit-content',
-	  [vars$14.hostDirection]: globalRefs$C.direction,
+	  [vars$15.hostWidth]: 'fit-content',
+	  [vars$15.hostDirection]: globalRefs$D.direction,
 
-	  [vars$14.textAlign]: 'center',
+	  [vars$15.textAlign]: 'center',
 
-	  [vars$14.fontFamily]: globalRefs$C.fonts.font1.family,
-	  [vars$14.fontWeight]: '400',
+	  [vars$15.fontFamily]: globalRefs$D.fonts.font1.family,
+	  [vars$15.fontWeight]: '400',
 
-	  [vars$14.verticalPadding]: '0.25em',
-	  [vars$14.horizontalPadding]: '0.5em',
+	  [vars$15.verticalPadding]: '0.25em',
+	  [vars$15.horizontalPadding]: '0.5em',
 
-	  [vars$14.borderWidth]: globalRefs$C.border.xs,
-	  [vars$14.borderRadius]: globalRefs$C.radius.xs,
-	  [vars$14.borderColor]: 'transparent',
-	  [vars$14.borderStyle]: 'solid',
+	  [vars$15.borderWidth]: globalRefs$D.border.xs,
+	  [vars$15.borderRadius]: globalRefs$D.radius.xs,
+	  [vars$15.borderColor]: 'transparent',
+	  [vars$15.borderStyle]: 'solid',
 
 	  _fullWidth: {
-	    [vars$14.hostWidth]: '100%',
+	    [vars$15.hostWidth]: '100%',
 	  },
 
 	  size: {
-	    xs: { [vars$14.fontSize]: '12px' },
-	    sm: { [vars$14.fontSize]: '14px' },
-	    md: { [vars$14.fontSize]: '16px' },
-	    lg: { [vars$14.fontSize]: '18px' },
+	    xs: { [vars$15.fontSize]: '12px' },
+	    sm: { [vars$15.fontSize]: '14px' },
+	    md: { [vars$15.fontSize]: '16px' },
+	    lg: { [vars$15.fontSize]: '18px' },
 	  },
 
 	  variant: {
 	    contained: {
-	      [vars$14.backgroundColor]: globalRefs$C.colors.surface.main,
+	      [vars$15.backgroundColor]: globalRefs$D.colors.surface.main,
 	    },
 	  },
 
@@ -84960,58 +84976,58 @@ function requireIndex_cjs () {
 	  // },
 
 	  _shrinkToIndicator: {
-	    [vars$14.hostWidth]: '13px',
-	    [vars$14.hostHeight]: '13px',
-	    [vars$14.borderRadius]: '50%',
-	    [vars$14.fontSize]: '0',
-	    [vars$14.textIndent]: '-9999px',
+	    [vars$15.hostWidth]: '13px',
+	    [vars$15.hostHeight]: '13px',
+	    [vars$15.borderRadius]: '50%',
+	    [vars$15.fontSize]: '0',
+	    [vars$15.textIndent]: '-9999px',
 	  },
 
 	  mode: {
 	    default: {
-	      [vars$14.textColor]: globalRefs$C.colors.surface.dark,
+	      [vars$15.textColor]: globalRefs$D.colors.surface.dark,
 	      _bordered: {
-	        [vars$14.borderColor]: globalRefs$C.colors.surface.light,
+	        [vars$15.borderColor]: globalRefs$D.colors.surface.light,
 	      },
 	    },
 	    primary: {
-	      [vars$14.textColor]: globalRefs$C.colors.primary.main,
+	      [vars$15.textColor]: globalRefs$D.colors.primary.main,
 	      _bordered: {
-	        [vars$14.borderColor]: globalRefs$C.colors.primary.light,
+	        [vars$15.borderColor]: globalRefs$D.colors.primary.light,
 	      },
 	    },
 	    secondary: {
-	      [vars$14.textColor]: globalRefs$C.colors.secondary.main,
+	      [vars$15.textColor]: globalRefs$D.colors.secondary.main,
 	      _bordered: {
-	        [vars$14.borderColor]: globalRefs$C.colors.secondary.light,
+	        [vars$15.borderColor]: globalRefs$D.colors.secondary.light,
 	      },
 	    },
 	    error: {
-	      [vars$14.textColor]: globalRefs$C.colors.error.main,
+	      [vars$15.textColor]: globalRefs$D.colors.error.main,
 	      _bordered: {
-	        [vars$14.borderColor]: globalRefs$C.colors.error.light,
+	        [vars$15.borderColor]: globalRefs$D.colors.error.light,
 	      },
 	    },
 	    success: {
-	      [vars$14.textColor]: globalRefs$C.colors.success.main,
+	      [vars$15.textColor]: globalRefs$D.colors.success.main,
 	      _bordered: {
-	        [vars$14.borderColor]: globalRefs$C.colors.success.light,
+	        [vars$15.borderColor]: globalRefs$D.colors.success.light,
 	      },
 	    },
 	  },
 
 	  shadow: {
 	    sm: {
-	      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.sm} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.sm} ${shadowColor$7}`,
+	      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.sm} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.sm} ${shadowColor$7}`,
 	    },
 	    md: {
-	      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.md} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.md} ${shadowColor$7}`,
+	      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.md} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.md} ${shadowColor$7}`,
 	    },
 	    lg: {
-	      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.lg} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.lg} ${shadowColor$7}`,
+	      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.lg} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.lg} ${shadowColor$7}`,
 	    },
 	    xl: {
-	      [vars$14.boxShadow]: `${globalRefs$C.shadow.wide.xl} ${shadowColor$7}, ${globalRefs$C.shadow.narrow.xl} ${shadowColor$7}`,
+	      [vars$15.boxShadow]: `${globalRefs$D.shadow.wide.xl} ${shadowColor$7}, ${globalRefs$D.shadow.narrow.xl} ${shadowColor$7}`,
 	    },
 	  },
 	};
@@ -85019,12 +85035,12 @@ function requireIndex_cjs () {
 	var badge$3 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: badge$2,
-	  vars: vars$14
+	  vars: vars$15
 	});
 
-	const componentName$1g = getComponentName('avatar');
+	const componentName$1h = getComponentName('avatar');
 	class RawAvatar extends createBaseClass$1({
-	  componentName: componentName$1g,
+	  componentName: componentName$1h,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  constructor() {
@@ -85102,7 +85118,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$w, editableBadge, avatar: avatar$2 } = {
+	const { host: host$x, editableBadge, avatar: avatar$2 } = {
 	  host: { selector: () => ':host' },
 	  editableBadge: { selector: '> .editableBadge' },
 	  avatar: { selector: 'vaadin-avatar' },
@@ -85112,12 +85128,12 @@ function requireIndex_cjs () {
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: [
-	        { ...host$w, property: 'width' },
-	        { ...host$w, property: 'min-width' },
+	        { ...host$x, property: 'width' },
+	        { ...host$x, property: 'min-width' },
 	      ],
-	      hostHeight: { ...host$w, property: 'height' },
-	      cursor: [avatar$2, host$w],
-	      hostDirection: { ...host$w, property: 'direction' },
+	      hostHeight: { ...host$x, property: 'height' },
+	      cursor: [avatar$2, host$x],
+	      hostDirection: { ...host$x, property: 'direction' },
 	      avatarTextColor: { ...avatar$2, property: 'color' },
 	      avatarBackgroundColor: { ...avatar$2, property: 'background-color' },
 	      editableIconColor: { ...editableBadge, property: 'color' },
@@ -85132,16 +85148,16 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawAvatar);
 
-	const globalRefs$B = getThemeRefs$1(globals);
+	const globalRefs$C = getThemeRefs$1(globals);
 	const compVars$8 = AvatarClass.cssVarList;
 
 	const avatar = {
-	  [compVars$8.hostDirection]: globalRefs$B.direction,
-	  [compVars$8.editableIconColor]: globalRefs$B.colors.surface.dark,
-	  [compVars$8.editableBorderColor]: globalRefs$B.colors.surface.dark,
-	  [compVars$8.editableBackgroundColor]: globalRefs$B.colors.surface.main,
-	  [compVars$8.avatarTextColor]: globalRefs$B.colors.surface.main,
-	  [compVars$8.avatarBackgroundColor]: globalRefs$B.colors.surface.dark,
+	  [compVars$8.hostDirection]: globalRefs$C.direction,
+	  [compVars$8.editableIconColor]: globalRefs$C.colors.surface.dark,
+	  [compVars$8.editableBorderColor]: globalRefs$C.colors.surface.dark,
+	  [compVars$8.editableBackgroundColor]: globalRefs$C.colors.surface.main,
+	  [compVars$8.avatarTextColor]: globalRefs$C.colors.surface.main,
+	  [compVars$8.avatarBackgroundColor]: globalRefs$C.colors.surface.dark,
 
 	  _editable: {
 	    [compVars$8.cursor]: 'pointer',
@@ -85175,37 +85191,37 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$13 = {
+	const vars$14 = {
 	  ...compVars$8,
 	};
 
 	var avatar$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: avatar,
-	  vars: vars$13
+	  vars: vars$14
 	});
 
-	const vars$12 = IconClass.cssVarList;
+	const vars$13 = IconClass.cssVarList;
 
 	const icon$3 = {};
 
 	var icon$4 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: icon$3,
-	  vars: vars$12
+	  vars: vars$13
 	});
 
-	const vars$11 = ImageClass.cssVarList;
+	const vars$12 = ImageClass.cssVarList;
 
 	const image = {};
 
 	var image$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: image,
-	  vars: vars$11
+	  vars: vars$12
 	});
 
-	const componentName$1f = getComponentName('list-item');
+	const componentName$1g = getComponentName('list-item');
 
 	const customMixin$f = (superclass) =>
 	  class ListItemMixinClass extends superclass {
@@ -85262,12 +85278,12 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	  customMixin$f,
 	  activeableMixin,
-	)(createBaseClass$1({ componentName: componentName$1f, baseSelector: 'slot' }));
+	)(createBaseClass$1({ componentName: componentName$1g, baseSelector: 'slot' }));
 
-	const componentName$1e = getComponentName('list');
+	const componentName$1f = getComponentName('list');
 
 	class RawList extends createBaseClass$1({
-	  componentName: componentName$1e,
+	  componentName: componentName$1f,
 	  baseSelector: '.wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -85438,9 +85454,9 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawList);
 
-	const componentName$1d = getComponentName('apps-list');
+	const componentName$1e = getComponentName('apps-list');
 
-	const itemRenderer$5 = ({ name, icon, url }, _, ref) => `
+	const itemRenderer$6 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
     <descope-list-item>
     <div class="avatar-wrapper">
@@ -85546,7 +85562,7 @@ function requireIndex_cjs () {
 	    },
 	  }),
 	  createDynamicDataMixin$1({
-	    itemRenderer: itemRenderer$5,
+	    itemRenderer: itemRenderer$6,
 	    rerenderAttrsList: [
 	      'size',
 	      'item-text-variant',
@@ -85562,7 +85578,7 @@ function requireIndex_cjs () {
 	    slots: ['empty-state'],
 	    wrappedEleName: 'descope-list',
 	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-	    componentName: componentName$1d,
+	    componentName: componentName$1e,
 	    style: () => `
       :host {
         width: 100%;
@@ -85597,60 +85613,60 @@ function requireIndex_cjs () {
 	  }),
 	);
 
-	const vars$10 = AppsListClass.cssVarList;
-	const globalRefs$A = getThemeRefs$1(globals);
+	const vars$11 = AppsListClass.cssVarList;
+	const globalRefs$B = getThemeRefs$1(globals);
 
 	const defaultHeight = '400px';
 
 	const appsList = {
-	  [vars$10.itemsTextAlign]: 'start',
-	  [vars$10.hostDirection]: globalRefs$A.direction,
-	  [vars$10.maxHeight]: defaultHeight,
-	  [vars$10.itemHoverBackgroundColor]: globalRefs$A.colors.surface.highlight,
+	  [vars$11.itemsTextAlign]: 'start',
+	  [vars$11.hostDirection]: globalRefs$B.direction,
+	  [vars$11.maxHeight]: defaultHeight,
+	  [vars$11.itemHoverBackgroundColor]: globalRefs$B.colors.surface.highlight,
 
 	  _empty: {
-	    [vars$10.minHeight]: defaultHeight,
+	    [vars$11.minHeight]: defaultHeight,
 	  },
 
 	  size: {
 	    xs: {
-	      [vars$10.itemsFontSize]: '14px',
-	      [vars$10.itemsFontWeight]: 'normal',
+	      [vars$11.itemsFontSize]: '14px',
+	      [vars$11.itemsFontWeight]: 'normal',
 	    },
 	    sm: {
-	      [vars$10.itemsFontSize]: '14px',
-	      [vars$10.itemsFontWeight]: 'normal',
+	      [vars$11.itemsFontSize]: '14px',
+	      [vars$11.itemsFontWeight]: 'normal',
 	    },
 	    md: {
-	      [vars$10.itemsFontSize]: '16px',
-	      [vars$10.itemsFontWeight]: 'normal',
+	      [vars$11.itemsFontSize]: '16px',
+	      [vars$11.itemsFontWeight]: 'normal',
 	    },
 	    lg: {
-	      [vars$10.itemsFontSize]: '20px',
-	      [vars$10.itemsFontWeight]: 'normal',
+	      [vars$11.itemsFontSize]: '20px',
+	      [vars$11.itemsFontWeight]: 'normal',
 	    },
 	  },
 
 	  itemPadding: {
 	    xs: {
-	      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.xs,
-	      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.xs,
+	      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.xs,
+	      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.xs,
 	    },
 	    sm: {
-	      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.sm,
-	      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.sm,
+	      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.sm,
+	      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.sm,
 	    },
 	    md: {
-	      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.md,
-	      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.md,
+	      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.md,
+	      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.md,
 	    },
 	    lg: {
-	      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.lg,
-	      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.lg,
+	      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.lg,
+	      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.lg,
 	    },
 	    xl: {
-	      [vars$10.itemVerticalPadding]: globalRefs$A.spacing.xl,
-	      [vars$10.itemHorizontalPadding]: globalRefs$A.spacing.xl,
+	      [vars$11.itemVerticalPadding]: globalRefs$B.spacing.xl,
+	      [vars$11.itemHorizontalPadding]: globalRefs$B.spacing.xl,
 	    },
 	  },
 	};
@@ -85658,16 +85674,16 @@ function requireIndex_cjs () {
 	var appsList$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: appsList,
-	  vars: vars$10
+	  vars: vars$11
 	});
 
-	const globalRefs$z = getThemeRefs$1(globals);
+	const globalRefs$A = getThemeRefs$1(globals);
 
 	const compVars$7 = ListClass.cssVarList;
 
 	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$1e,
+	  componentName$1f,
 	);
 
 	const { shadowColor: shadowColor$6 } = helperRefs$5;
@@ -85676,25 +85692,25 @@ function requireIndex_cjs () {
 	  ...helperTheme$5,
 
 	  [compVars$7.hostWidth]: '100%',
-	  [compVars$7.backgroundColor]: globalRefs$z.colors.surface.main,
-	  [compVars$7.fontFamily]: globalRefs$z.fonts.font1.family,
-	  [compVars$7.borderColor]: globalRefs$z.colors.surface.light,
+	  [compVars$7.backgroundColor]: globalRefs$A.colors.surface.main,
+	  [compVars$7.fontFamily]: globalRefs$A.fonts.font1.family,
+	  [compVars$7.borderColor]: globalRefs$A.colors.surface.light,
 	  [compVars$7.borderStyle]: 'solid',
-	  [compVars$7.borderWidth]: globalRefs$z.border.xs,
-	  [compVars$7.borderRadius]: globalRefs$z.radius.sm,
-	  [compVars$7.gap]: globalRefs$z.spacing.md,
-	  [compVars$7.verticalPadding]: globalRefs$z.spacing.lg,
-	  [compVars$7.horizontalPadding]: globalRefs$z.spacing.lg,
-	  [compVars$7.boxShadow]: `${globalRefs$z.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$z.shadow.narrow.sm} ${shadowColor$6}`,
+	  [compVars$7.borderWidth]: globalRefs$A.border.xs,
+	  [compVars$7.borderRadius]: globalRefs$A.radius.sm,
+	  [compVars$7.gap]: globalRefs$A.spacing.md,
+	  [compVars$7.verticalPadding]: globalRefs$A.spacing.lg,
+	  [compVars$7.horizontalPadding]: globalRefs$A.spacing.lg,
+	  [compVars$7.boxShadow]: `${globalRefs$A.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$A.shadow.narrow.sm} ${shadowColor$6}`,
 	  [compVars$7.maxHeight]: '100%',
-	  [compVars$7.hostDirection]: globalRefs$z.direction,
+	  [compVars$7.hostDirection]: globalRefs$A.direction,
 	  [compVars$7.minItemsWidth]: '150px',
 	  [compVars$7.maxRowItems]: '1000', // effectively no limit
 
 	  _empty: {
 	    [compVars$7.minHeight]: '150px',
-	    [compVars$7.emptyStateTextColor]: globalRefs$z.colors.surface.dark,
-	    [compVars$7.emptyStateTextFontFamily]: globalRefs$z.fonts.font1.family,
+	    [compVars$7.emptyStateTextColor]: globalRefs$A.colors.surface.dark,
+	    [compVars$7.emptyStateTextFontFamily]: globalRefs$A.fonts.font1.family,
 	  },
 
 	  variant: {
@@ -85711,24 +85727,24 @@ function requireIndex_cjs () {
 
 	  gap: {
 	    xs: {
-	      [compVars$7.gap]: globalRefs$z.spacing.xs,
+	      [compVars$7.gap]: globalRefs$A.spacing.xs,
 	    },
 	    sm: {
-	      [compVars$7.gap]: globalRefs$z.spacing.sm,
+	      [compVars$7.gap]: globalRefs$A.spacing.sm,
 	    },
 	    md: {
-	      [compVars$7.gap]: globalRefs$z.spacing.md,
+	      [compVars$7.gap]: globalRefs$A.spacing.md,
 	    },
 	    lg: {
-	      [compVars$7.gap]: globalRefs$z.spacing.lg,
+	      [compVars$7.gap]: globalRefs$A.spacing.lg,
 	    },
 	    xl: {
-	      [compVars$7.gap]: globalRefs$z.spacing.xl,
+	      [compVars$7.gap]: globalRefs$A.spacing.xl,
 	    },
 	  },
 	};
 
-	const vars$$ = {
+	const vars$10 = {
 	  ...compVars$7,
 	  ...helperVars$5,
 	};
@@ -85736,53 +85752,53 @@ function requireIndex_cjs () {
 	var list$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: list,
-	  vars: vars$$
+	  vars: vars$10
 	});
 
-	const globalRefs$y = getThemeRefs$1(globals);
+	const globalRefs$z = getThemeRefs$1(globals);
 
-	const vars$_ = ListItemClass.cssVarList;
+	const vars$$ = ListItemClass.cssVarList;
 
 	const listItem = {
-	  [vars$_.backgroundColor]: globalRefs$y.colors.surface.main,
-	  [vars$_.verticalPadding]: globalRefs$y.spacing.lg,
-	  [vars$_.horizontalPadding]: globalRefs$y.spacing.lg,
-	  [vars$_.gap]: globalRefs$y.spacing.md,
-	  [vars$_.borderStyle]: 'solid',
-	  [vars$_.borderWidth]: globalRefs$y.border.xs,
-	  [vars$_.borderColor]: globalRefs$y.colors.surface.main,
-	  [vars$_.borderRadius]: globalRefs$y.radius.sm,
-	  [vars$_.cursor]: 'pointer',
-	  [vars$_.alignItems]: 'center',
-	  [vars$_.flexDirection]: 'row',
-	  [vars$_.transition]: 'border-color 0.2s, background-color 0.2s',
+	  [vars$$.backgroundColor]: globalRefs$z.colors.surface.main,
+	  [vars$$.verticalPadding]: globalRefs$z.spacing.lg,
+	  [vars$$.horizontalPadding]: globalRefs$z.spacing.lg,
+	  [vars$$.gap]: globalRefs$z.spacing.md,
+	  [vars$$.borderStyle]: 'solid',
+	  [vars$$.borderWidth]: globalRefs$z.border.xs,
+	  [vars$$.borderColor]: globalRefs$z.colors.surface.main,
+	  [vars$$.borderRadius]: globalRefs$z.radius.sm,
+	  [vars$$.cursor]: 'pointer',
+	  [vars$$.alignItems]: 'center',
+	  [vars$$.flexDirection]: 'row',
+	  [vars$$.transition]: 'border-color 0.2s, background-color 0.2s',
 
 	  variant: {
 	    tile: {
-	      [vars$_.alignItems]: 'flex-start',
-	      [vars$_.flexDirection]: 'column',
-	      [vars$_.borderColor]: globalRefs$y.colors.surface.light,
+	      [vars$$.alignItems]: 'flex-start',
+	      [vars$$.flexDirection]: 'column',
+	      [vars$$.borderColor]: globalRefs$z.colors.surface.light,
 	    },
 	  },
 
 	  _hover: {
-	    [vars$_.backgroundColor]: globalRefs$y.colors.surface.highlight,
+	    [vars$$.backgroundColor]: globalRefs$z.colors.surface.highlight,
 	  },
 
 	  _active: {
-	    [vars$_.backgroundColor]: globalRefs$y.colors.surface.main,
-	    [vars$_.borderColor]: globalRefs$y.colors.primary.light,
-	    [vars$_.outline]: `1px solid ${globalRefs$y.colors.primary.light}`,
+	    [vars$$.backgroundColor]: globalRefs$z.colors.surface.main,
+	    [vars$$.borderColor]: globalRefs$z.colors.primary.light,
+	    [vars$$.outline]: `1px solid ${globalRefs$z.colors.primary.light}`,
 	  },
 	};
 
 	var listItem$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: listItem,
-	  vars: vars$_
+	  vars: vars$$
 	});
 
-	const componentName$1c = getComponentName('multi-select-combo-box');
+	const componentName$1d = getComponentName('multi-select-combo-box');
 
 	const multiSelectComboBoxMixin = (superclass) =>
 	  class MultiSelectComboBoxMixinClass extends superclass {
@@ -86161,7 +86177,7 @@ function requireIndex_cjs () {
 	  };
 
 	const {
-	  host: host$v,
+	  host: host$w,
 	  inputField: inputField$5,
 	  inputElement: inputElement$2,
 	  placeholder: placeholder$2,
@@ -86201,9 +86217,9 @@ function requireIndex_cjs () {
 	const MultiSelectComboBoxClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$v, property: 'width' },
-	      hostDirection: { ...host$v, property: 'direction' },
-	      fontSize: [{}, host$v],
+	      hostWidth: { ...host$w, property: 'width' },
+	      hostDirection: { ...host$w, property: 'direction' },
+	      fontSize: [{}, host$w],
 	      chipFontSize: { ...chipLabel, property: 'font-size' },
 	      fontFamily: [
 	        label$8,
@@ -86445,13 +86461,13 @@ function requireIndex_cjs () {
 
 		`,
 	    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder', 'style'],
-	    componentName: componentName$1c,
+	    componentName: componentName$1d,
 	    includeForwardProps: ['items', 'renderer', 'selectedItems'],
 	  }),
 	);
 
-	const componentName$1b = getComponentName('multi-line-mappings');
-	const BaseClass$8 = createBaseClass$1({ componentName: componentName$1b });
+	const componentName$1c = getComponentName('multi-line-mappings');
+	const BaseClass$9 = createBaseClass$1({ componentName: componentName$1c });
 
 	const parseJSON = (value, fallback, source = 'unknown') => {
 	  if (typeof value !== 'string' || !value?.trim()) {
@@ -86521,7 +86537,7 @@ function requireIndex_cjs () {
 	const areSameValues = (first = [], second = []) =>
 	  first.length === second.length && first.every((v, i) => v === second[i]);
 
-	class RawMultiLineMappingsClass extends BaseClass$8 {
+	class RawMultiLineMappingsClass extends BaseClass$9 {
 	  static get observedAttributes() {
 	    return [
 	      'data',
@@ -87158,7 +87174,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const host$u = { selector: () => ':host' };
+	const host$v = { selector: () => ':host' };
 	const rows = { selector: '.rows' };
 	const row = { selector: '.row' };
 	const addAction = { selector: '.add-action' };
@@ -87166,9 +87182,9 @@ function requireIndex_cjs () {
 	const MultiLineMappingsClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$u, property: 'width' },
+	      hostWidth: { ...host$v, property: 'width' },
 	      hostDirection: [
-	        { ...host$u, property: 'direction' },
+	        { ...host$v, property: 'direction' },
 	        {
 	          selector: MultiSelectComboBoxClass.componentName,
 	          property: MultiSelectComboBoxClass.cssVarList.hostDirection,
@@ -87189,126 +87205,126 @@ function requireIndex_cjs () {
 	  draggableMixin$1,
 	)(RawMultiLineMappingsClass);
 
-	const vars$Z = MultiLineMappingsClass.cssVarList;
+	const vars$_ = MultiLineMappingsClass.cssVarList;
 
 	const multiLineMappings = {
-	  [vars$Z.hostDirection]: refs$1.direction,
+	  [vars$_.hostDirection]: refs$1.direction,
 
-	  [vars$Z.rowsGap]: globals.spacing.sm,
-	  [vars$Z.rowGap]: globals.spacing.sm,
-	  [vars$Z.rowAlignItems]: 'flex-end',
-	  [vars$Z.rowWrap]: 'nowrap',
+	  [vars$_.rowsGap]: globals.spacing.sm,
+	  [vars$_.rowGap]: globals.spacing.sm,
+	  [vars$_.rowAlignItems]: 'flex-end',
+	  [vars$_.rowWrap]: 'nowrap',
 
-	  [vars$Z.addActionJustifyContent]: 'flex-start',
-	  [vars$Z.addActionMarginTop]: globals.spacing.xs,
+	  [vars$_.addActionJustifyContent]: 'flex-start',
+	  [vars$_.addActionMarginTop]: globals.spacing.xs,
 
 	  _fullWidth: {
-	    [vars$Z.hostWidth]: '100%',
+	    [vars$_.hostWidth]: '100%',
 	  },
 	};
 
 	var multiLineMappings$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: multiLineMappings,
-	  vars: vars$Z
+	  vars: vars$_
 	});
 
-	const globalRefs$x = getThemeRefs$1(globals);
-	const vars$Y = MultiSelectComboBoxClass.cssVarList;
+	const globalRefs$y = getThemeRefs$1(globals);
+	const vars$Z = MultiSelectComboBoxClass.cssVarList;
 
 	const multiSelectComboBox = {
-	  [vars$Y.hostWidth]: refs$1.width,
-	  [vars$Y.hostDirection]: refs$1.direction,
-	  [vars$Y.fontSize]: refs$1.fontSize,
-	  [vars$Y.fontFamily]: refs$1.fontFamily,
-	  [vars$Y.labelFontSize]: refs$1.labelFontSize,
-	  [vars$Y.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$Y.inputValueFontWeight]: refs$1.inputValueFontWeight,
-	  [vars$Y.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
-	  [vars$Y.helperTextFontWeight]: refs$1.helperTextFontWeight,
-	  [vars$Y.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
-	  [vars$Y.labelTextColor]: refs$1.labelTextColor,
-	  [vars$Y.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$Y.inputBorderColor]: refs$1.borderColor,
-	  [vars$Y.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$Y.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$Y.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$Y.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$Y.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$Y.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$Y.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$Y.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$Y.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$Y.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$Y.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$Y.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$Y.inputVerticalPadding]: refs$1.verticalPadding,
-	  [vars$Y.inputHeight]: refs$1.inputHeight,
-	  [vars$Y.inputDropdownButtonColor]: globalRefs$x.colors.surface.dark,
-	  [vars$Y.inputDropdownButtonCursor]: 'pointer',
-	  [vars$Y.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-	  [vars$Y.inputDropdownButtonOffset]: globalRefs$x.spacing.xs,
-	  [vars$Y.overlayItemPaddingInlineStart]: globalRefs$x.spacing.xs,
-	  [vars$Y.overlayItemPaddingInlineEnd]: globalRefs$x.spacing.lg,
-	  [vars$Y.chipFontSize]: refs$1.chipFontSize,
-	  [vars$Y.chipTextColor]: globalRefs$x.colors.surface.contrast,
-	  [vars$Y.chipBackgroundColor]: globalRefs$x.colors.surface.light,
-	  [vars$Y.labelPosition]: refs$1.labelPosition,
-	  [vars$Y.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$Y.labelLeftPosition]: refs$1.labelLeftPosition,
-	  [vars$Y.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$Y.inputTransformY]: refs$1.inputTransformY,
-	  [vars$Y.inputTransition]: refs$1.inputTransition,
-	  [vars$Y.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$Y.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$Y.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-
-	  [vars$Y.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$Y.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$Y.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$Y.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$Y.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$Y.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$Z.hostWidth]: refs$1.width,
+	  [vars$Z.hostDirection]: refs$1.direction,
+	  [vars$Z.fontSize]: refs$1.fontSize,
+	  [vars$Z.fontFamily]: refs$1.fontFamily,
+	  [vars$Z.labelFontSize]: refs$1.labelFontSize,
+	  [vars$Z.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$Z.inputValueFontWeight]: refs$1.inputValueFontWeight,
+	  [vars$Z.inputPlaceholderFontWeight]: refs$1.inputPlaceholderFontWeight,
+	  [vars$Z.helperTextFontWeight]: refs$1.helperTextFontWeight,
+	  [vars$Z.errorMessageFontWeight]: refs$1.errorMessageFontWeight,
+	  [vars$Z.labelTextColor]: refs$1.labelTextColor,
+	  [vars$Z.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$Z.inputBorderColor]: refs$1.borderColor,
+	  [vars$Z.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$Z.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$Z.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$Z.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$Z.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$Z.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$Z.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$Z.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$Z.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$Z.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$Z.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$Z.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$Z.inputVerticalPadding]: refs$1.verticalPadding,
+	  [vars$Z.inputHeight]: refs$1.inputHeight,
+	  [vars$Z.inputDropdownButtonColor]: globalRefs$y.colors.surface.dark,
+	  [vars$Z.inputDropdownButtonCursor]: 'pointer',
+	  [vars$Z.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+	  [vars$Z.inputDropdownButtonOffset]: globalRefs$y.spacing.xs,
+	  [vars$Z.overlayItemPaddingInlineStart]: globalRefs$y.spacing.xs,
+	  [vars$Z.overlayItemPaddingInlineEnd]: globalRefs$y.spacing.lg,
+	  [vars$Z.chipFontSize]: refs$1.chipFontSize,
+	  [vars$Z.chipTextColor]: globalRefs$y.colors.surface.contrast,
+	  [vars$Z.chipBackgroundColor]: globalRefs$y.colors.surface.light,
+	  [vars$Z.labelPosition]: refs$1.labelPosition,
+	  [vars$Z.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$Z.labelLeftPosition]: refs$1.labelLeftPosition,
+	  [vars$Z.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$Z.inputTransformY]: refs$1.inputTransformY,
+	  [vars$Z.inputTransition]: refs$1.inputTransition,
+	  [vars$Z.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$Z.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$Z.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+
+	  [vars$Z.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$Z.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$Z.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$Z.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$Z.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$Z.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  labelType: {
 	    floating: {
-	      [vars$Y.inputHorizontalPadding]: '0.25em',
+	      [vars$Z.inputHorizontalPadding]: '0.25em',
 	      _hasValue: {
-	        [vars$Y.inputHorizontalPadding]: '0.45em',
+	        [vars$Z.inputHorizontalPadding]: '0.45em',
 	      },
 	    },
 	  },
 
 	  _readonly: {
-	    [vars$Y.inputDropdownButtonCursor]: 'default',
+	    [vars$Z.inputDropdownButtonCursor]: 'default',
 	  },
 
-	  [vars$Y.overlayFontSize]: refs$1.fontSize,
-	  [vars$Y.overlayFontFamily]: refs$1.fontFamily,
-	  [vars$Y.overlayCursor]: 'pointer',
-	  [vars$Y.overlayItemBoxShadow]: 'none',
-	  [vars$Y.overlayBackground]: refs$1.backgroundColor,
-	  [vars$Y.overlayTextColor]: refs$1.valueTextColor,
+	  [vars$Z.overlayFontSize]: refs$1.fontSize,
+	  [vars$Z.overlayFontFamily]: refs$1.fontFamily,
+	  [vars$Z.overlayCursor]: 'pointer',
+	  [vars$Z.overlayItemBoxShadow]: 'none',
+	  [vars$Z.overlayBackground]: refs$1.backgroundColor,
+	  [vars$Z.overlayTextColor]: refs$1.valueTextColor,
 
-	  [vars$Y.overlay.minHeight]: '400px',
-	  [vars$Y.overlay.margin]: '0',
+	  [vars$Z.overlay.minHeight]: '400px',
+	  [vars$Z.overlay.margin]: '0',
 	};
 
 	var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: multiSelectComboBox,
 	  multiSelectComboBox: multiSelectComboBox,
-	  vars: vars$Y
+	  vars: vars$Z
 	});
 
-	const componentName$1a = getComponentName('autocomplete-field-internal');
+	const componentName$1b = getComponentName('autocomplete-field-internal');
 
 	createBaseInputClass$1({
-	  componentName: componentName$1a,
+	  componentName: componentName$1b,
 	  baseSelector: '',
 	});
 
-	const componentName$19 = getComponentName('autocomplete-field');
+	const componentName$1a = getComponentName('autocomplete-field');
 
 	const customMixin$d = (superclass) =>
 	  class AutocompleteFieldMixinClass extends superclass {
@@ -87329,15 +87345,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$1a}
+      <${componentName$1b}
         tabindex="-1"
-      ></${componentName$1a}>
+      ></${componentName$1b}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$1a,
+	        componentName$1b,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -87377,7 +87393,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const { host: host$t } = {
+	const { host: host$u } = {
 	  host: { selector: () => ':host' },
 	};
 
@@ -87387,9 +87403,9 @@ function requireIndex_cjs () {
 	  }),
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$t, property: 'width' },
-	      hostDirection: { ...host$t, property: 'direction' },
-	      fontSize: { ...host$t },
+	      hostWidth: { ...host$u, property: 'width' },
+	      hostDirection: { ...host$u, property: 'direction' },
+	      fontSize: { ...host$u },
 	      checkmarkDisplay: {
 	        selector: ComboBoxClass.componentName,
 	        property: ComboBoxClass.cssVarList.overlayCheckmarkDisplay,
@@ -87456,34 +87472,34 @@ function requireIndex_cjs () {
     }
   `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$19,
+	    componentName: componentName$1a,
 	  }),
 	);
 
-	const vars$X = AutocompleteFieldClass.cssVarList;
-	const globalRefs$w = getThemeRefs$1(globals);
+	const vars$Y = AutocompleteFieldClass.cssVarList;
+	const globalRefs$x = getThemeRefs$1(globals);
 
 	const autocompleteField = {
-	  [vars$X.hostWidth]: refs$1.width,
-	  [vars$X.hostDirection]: refs$1.direction,
-	  [vars$X.fontSize]: refs$1.fontSize,
-	  [vars$X.checkmarkDisplay]: 'none',
-	  [vars$X.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
-	  [vars$X.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
-	  [vars$X.selectedItemBackground]: globalRefs$w.colors.primary.light,
-	  [vars$X.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
-	  [vars$X.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
-	  [vars$X.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
+	  [vars$Y.hostWidth]: refs$1.width,
+	  [vars$Y.hostDirection]: refs$1.direction,
+	  [vars$Y.fontSize]: refs$1.fontSize,
+	  [vars$Y.checkmarkDisplay]: 'none',
+	  [vars$Y.itemPaddingInlineStart]: globalRefs$x.spacing.lg,
+	  [vars$Y.itemPaddingInlineEnd]: globalRefs$x.spacing.lg,
+	  [vars$Y.selectedItemBackground]: globalRefs$x.colors.primary.light,
+	  [vars$Y.selectedItemHoverBackground]: globalRefs$x.colors.primary.light,
+	  [vars$Y.selectedItemFocusBackground]: globalRefs$x.colors.primary.light,
+	  [vars$Y.itemHoverBackground]: globalRefs$x.colors.primary.highlight,
 
 	  _fullWidth: {
-	    [vars$X.hostWidth]: '100%',
+	    [vars$Y.hostWidth]: '100%',
 	  },
 	};
 
 	var autocompleteField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: autocompleteField,
-	  vars: vars$X
+	  vars: vars$Y
 	});
 
 	const initGoogleMapsLoader = (apiKey) => {
@@ -87710,7 +87726,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const componentName$18 = getComponentName('address-field-internal');
+	const componentName$19 = getComponentName('address-field-internal');
 
 	const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 	const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -87721,7 +87737,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseInputClass$7 = createBaseInputClass$1({
-	  componentName: componentName$18,
+	  componentName: componentName$19,
 	  baseSelector: '',
 	});
 	const initConnectorAttrs = ['public-api-key'];
@@ -87828,7 +87844,7 @@ function requireIndex_cjs () {
 	  connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 	)(RawAddressFieldInternal);
 
-	const componentName$17 = getComponentName('address-field');
+	const componentName$18 = getComponentName('address-field');
 
 	const customMixin$c = (superclass) =>
 	  class AddressFieldMixinClass extends superclass {
@@ -87857,15 +87873,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$18}
+      <${componentName$19}
         tabindex="-1"
-      ></${componentName$18}>
+      ></${componentName$19}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$18,
+	        componentName$19,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -87906,7 +87922,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const { host: host$s } = {
+	const { host: host$t } = {
 	  host: { selector: () => ':host' },
 	};
 
@@ -87916,8 +87932,8 @@ function requireIndex_cjs () {
 	  }),
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$s, property: 'width' },
-	      hostDirection: { ...host$s, property: 'direction' },
+	      hostWidth: { ...host$t, property: 'width' },
+	      hostDirection: { ...host$t, property: 'direction' },
 	    },
 	  }),
 	  draggableMixin$1,
@@ -87943,7 +87959,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$18} {
+  ${componentName$19} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -87951,30 +87967,30 @@ function requireIndex_cjs () {
     max-width: 100%;
   }
 
-  ${componentName$18} ::slotted {
+  ${componentName$19} ::slotted {
     padding: 0;
   }
 `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$17,
+	    componentName: componentName$18,
 	  }),
 	);
 
-	const vars$W = AddressFieldClass.cssVarList;
+	const vars$X = AddressFieldClass.cssVarList;
 
 	const addressField = {
-	  [vars$W.hostWidth]: refs$1.width,
-	  [vars$W.hostDirection]: refs$1.direction,
+	  [vars$X.hostWidth]: refs$1.width,
+	  [vars$X.hostDirection]: refs$1.direction,
 
 	  _fullWidth: {
-	    [vars$W.hostWidth]: '100%',
+	    [vars$X.hostWidth]: '100%',
 	  },
 	};
 
 	var addressField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: addressField,
-	  vars: vars$W
+	  vars: vars$X
 	});
 
 	var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -87996,24 +88012,24 @@ function requireIndex_cjs () {
 	  return timeParts.join(':');
 	};
 
-	const componentName$16 = getComponentName('timer');
+	const componentName$17 = getComponentName('timer');
 
 	const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
-	const BaseClass$7 = createBaseClass$1({
-	  componentName: componentName$16,
+	const BaseClass$8 = createBaseClass$1({
+	  componentName: componentName$17,
 	  baseSelector: ':host > .wrapper',
 	});
 
 	const DEFAULT_INTERVAL = 1000;
 
-	class RawTimer extends BaseClass$7 {
+	class RawTimer extends BaseClass$8 {
 	  #timeRemains = 0;
 
 	  #intervalId;
 
 	  static get observedAttributes() {
-	    return observedAttributes$5.concat(BaseClass$7.observedAttributes || []);
+	    return observedAttributes$5.concat(BaseClass$8.observedAttributes || []);
 	  }
 
 	  constructor() {
@@ -88154,7 +88170,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$r, icon: icon$2, timer: timer$2 } = {
+	const { host: host$s, icon: icon$2, timer: timer$2 } = {
 	  host: { selector: () => ':host' },
 	  icon: { selector: () => '.icon' },
 	  timer: { selector: () => '.timer' },
@@ -88175,8 +88191,8 @@ function requireIndex_cjs () {
 	      textColor: { ...timer$2, property: 'color' },
 	      gap: {},
 	      textAlign: { property: 'justify-content' },
-	      hostWidth: { ...host$r, property: 'width' },
-	      hostDirection: { ...host$r, property: 'direction' },
+	      hostWidth: { ...host$s, property: 'width' },
+	      hostDirection: { ...host$s, property: 'direction' },
 	      iconColor: { ...icon$2, property: IconClass.cssVarList.fill },
 	    },
 	  }),
@@ -88184,45 +88200,45 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawTimer);
 
-	const globalRefs$v = getThemeRefs$1(globals);
-	const vars$V = TimerClass.cssVarList;
+	const globalRefs$w = getThemeRefs$1(globals);
+	const vars$W = TimerClass.cssVarList;
 
 	const timer = {
-	  [vars$V.hostDirection]: globalRefs$v.direction,
-	  [vars$V.gap]: '0.25em',
-	  [vars$V.fontFamily]: globalRefs$v.fonts.font1.family,
-	  [vars$V.minHeight]: '1.5em',
-	  [vars$V.lineHeight]: '1em',
-	  [vars$V.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
-	  [vars$V.textColor]: globalRefs$v.colors.surface.contrast,
-	  [vars$V.iconColor]: globalRefs$v.colors.surface.contrast,
-	  [vars$V.iconSize]: '1em',
+	  [vars$W.hostDirection]: globalRefs$w.direction,
+	  [vars$W.gap]: '0.25em',
+	  [vars$W.fontFamily]: globalRefs$w.fonts.font1.family,
+	  [vars$W.minHeight]: '1.5em',
+	  [vars$W.lineHeight]: '1em',
+	  [vars$W.fontWeight]: globalRefs$w.fonts.font1.fontWeight,
+	  [vars$W.textColor]: globalRefs$w.colors.surface.contrast,
+	  [vars$W.iconColor]: globalRefs$w.colors.surface.contrast,
+	  [vars$W.iconSize]: '1em',
 
 	  size: {
-	    xs: { [vars$V.fontSize]: '12px' },
-	    sm: { [vars$V.fontSize]: '14px' },
-	    md: { [vars$V.fontSize]: '16px' },
-	    lg: { [vars$V.fontSize]: '18px' },
+	    xs: { [vars$W.fontSize]: '12px' },
+	    sm: { [vars$W.fontSize]: '14px' },
+	    md: { [vars$W.fontSize]: '16px' },
+	    lg: { [vars$W.fontSize]: '18px' },
 	  },
 
 	  textAlign: {
-	    right: { [vars$V.textAlign]: 'right' },
-	    left: { [vars$V.textAlign]: 'left' },
-	    center: { [vars$V.textAlign]: 'center' },
+	    right: { [vars$W.textAlign]: 'right' },
+	    left: { [vars$W.textAlign]: 'left' },
+	    center: { [vars$W.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$V.hostWidth]: '100%',
+	    [vars$W.hostWidth]: '100%',
 	  },
 	};
 
 	var timer$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: timer,
-	  vars: vars$V
+	  vars: vars$W
 	});
 
-	const componentName$15 = getComponentName('timer-button');
+	const componentName$16 = getComponentName('timer-button');
 
 	const buttonAttrs = [
 	  'button-variant',
@@ -88252,12 +88268,12 @@ function requireIndex_cjs () {
 	  'timer-paused': 'paused',
 	};
 
-	const BaseClass$6 = createBaseClass$1({
-	  componentName: componentName$15,
+	const BaseClass$7 = createBaseClass$1({
+	  componentName: componentName$16,
 	  baseSelector: ':host > div',
 	});
 
-	class RawTimerButton extends BaseClass$6 {
+	class RawTimerButton extends BaseClass$7 {
 	  constructor() {
 	    super();
 
@@ -88405,7 +88421,7 @@ function requireIndex_cjs () {
 	}
 
 	const {
-	  host: host$q,
+	  host: host$r,
 	  nestedTimer,
 	  nestedButton,
 	  timerInsideNotReversed,
@@ -88430,8 +88446,8 @@ function requireIndex_cjs () {
 	    mappings: {
 	      gap: {},
 	      flexDirection: {},
-	      hostWidth: { ...host$q, property: 'width' },
-	      hostDirection: { ...host$q, property: 'direction' },
+	      hostWidth: { ...host$r, property: 'width' },
+	      hostDirection: { ...host$r, property: 'direction' },
 	      timerTextColor: {
 	        ...nestedTimer,
 	        property: TimerClass.cssVarList.textColor,
@@ -88462,41 +88478,41 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawTimerButton);
 
-	const globalRefs$u = getThemeRefs$1(globals);
-	const vars$U = TimerButtonClass.cssVarList;
+	const globalRefs$v = getThemeRefs$1(globals);
+	const vars$V = TimerButtonClass.cssVarList;
 
 	const timerButton = {
-	  [vars$U.gap]: globalRefs$u.spacing.sm,
-	  [vars$U.flexDirection]: 'column',
+	  [vars$V.gap]: globalRefs$v.spacing.sm,
+	  [vars$V.flexDirection]: 'column',
 
 	  _horizontal: {
-	    [vars$U.flexDirection]: 'row',
+	    [vars$V.flexDirection]: 'row',
 	    timerPosition: {
 	      end: {
-	        [vars$U.flexDirection]: 'row-reverse',
+	        [vars$V.flexDirection]: 'row-reverse',
 	      },
 	    },
 	  },
 
 	  timerPosition: {
 	    end: {
-	      [vars$U.flexDirection]: 'column-reverse',
+	      [vars$V.flexDirection]: 'column-reverse',
 	    },
 	  },
 
 	  _fullWidth: {
-	    [vars$U.hostWidth]: '100%',
+	    [vars$V.hostWidth]: '100%',
 	  },
 
 	  _timerInside: {
-	    [vars$U.timerTextColor]: 'currentColor',
-	    [vars$U.timerIconColor]: 'currentColor',
-	    [vars$U.timerHostWidth]: 'auto',
-	    [vars$U.buttonLabelSpacing]: '0',
-	    [vars$U.timerInsideGapEnd]: `var(${vars$U.gap})`,
+	    [vars$V.timerTextColor]: 'currentColor',
+	    [vars$V.timerIconColor]: 'currentColor',
+	    [vars$V.timerHostWidth]: 'auto',
+	    [vars$V.buttonLabelSpacing]: '0',
+	    [vars$V.timerInsideGapEnd]: `var(${vars$V.gap})`,
 	    timerPosition: {
 	      end: {
-	        [vars$U.timerInsideGapStart]: `var(${vars$U.gap})`,
+	        [vars$V.timerInsideGapStart]: `var(${vars$V.gap})`,
 	      },
 	    },
 	  },
@@ -88505,12 +88521,12 @@ function requireIndex_cjs () {
 	var timerButton$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: timerButton,
-	  vars: vars$U
+	  vars: vars$V
 	});
 
-	const componentName$14 = getComponentName('password-strength');
+	const componentName$15 = getComponentName('password-strength');
 	class RawPasswordStrength extends createBaseClass$1({
-	  componentName: componentName$14,
+	  componentName: componentName$15,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -88624,7 +88640,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$p, bar, filledBar, barsContainer, text: text$1 } = {
+	const { host: host$q, bar, filledBar, barsContainer, text: text$1 } = {
 	  host: { selector: () => ':host' },
 	  bar: { selector: ' .bar' },
 	  barsContainer: { selector: ' .bars-container' },
@@ -88637,11 +88653,11 @@ function requireIndex_cjs () {
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: [
-	        { ...host$p, property: 'width' },
-	        { ...host$p, property: 'min-width' },
+	        { ...host$q, property: 'width' },
+	        { ...host$q, property: 'min-width' },
 	      ],
-	      hostDirection: { ...host$p, property: 'direction' },
-	      hostMinWidth: { ...host$p, property: 'min-width' },
+	      hostDirection: { ...host$q, property: 'direction' },
+	      hostMinWidth: { ...host$q, property: 'min-width' },
 	      barHeight: { ...bar, property: 'height' },
 	      barBorderRadius: { ...bar, property: 'border-radius' },
 	      emptyBarColor: { ...bar, property: 'background-color' },
@@ -88659,64 +88675,64 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawPasswordStrength);
 
-	const globalRefs$t = getThemeRefs$1(globals);
+	const globalRefs$u = getThemeRefs$1(globals);
 	const compVars$6 = PasswordStrengthClass.cssVarList;
 
 	const passwordStrength = {
-	  [compVars$6.hostDirection]: globalRefs$t.direction,
+	  [compVars$6.hostDirection]: globalRefs$u.direction,
 	  [compVars$6.barHeight]: '4px',
 	  [compVars$6.barTransition]: 'background-color 0.3s',
-	  [compVars$6.barBorderRadius]: globalRefs$t.radius.sm,
+	  [compVars$6.barBorderRadius]: globalRefs$u.radius.sm,
 	  [compVars$6.hostMinWidth]: refs$1.minWidth,
-	  [compVars$6.barSpacing]: globalRefs$t.spacing.sm,
-	  [compVars$6.emptyBarColor]: globalRefs$t.colors.surface.light,
+	  [compVars$6.barSpacing]: globalRefs$u.spacing.sm,
+	  [compVars$6.emptyBarColor]: globalRefs$u.colors.surface.light,
 	  [compVars$6.fontFamily]: refs$1.fontFamily,
 	  [compVars$6.fontSize]: refs$1.labelFontSize,
 	  [compVars$6.fontWeight]: refs$1.labelFontWeight,
-	  [compVars$6.spacing]: globalRefs$t.spacing.sm,
+	  [compVars$6.spacing]: globalRefs$u.spacing.sm,
 	  _fullWidth: {
 	    [compVars$6.hostWidth]: '100%',
 	  },
 	  score : {
 	    0: {
-	      [compVars$6.filledBarColor]: globalRefs$t.colors.error.light,
-	      [compVars$6.textColor]: globalRefs$t.colors.error.light,
+	      [compVars$6.filledBarColor]: globalRefs$u.colors.error.light,
+	      [compVars$6.textColor]: globalRefs$u.colors.error.light,
 	    },
 	    1: {
-	      [compVars$6.filledBarColor]: globalRefs$t.colors.error.main,
-	      [compVars$6.textColor]: globalRefs$t.colors.error.main,
+	      [compVars$6.filledBarColor]: globalRefs$u.colors.error.main,
+	      [compVars$6.textColor]: globalRefs$u.colors.error.main,
 	    },
 	    2: {
-	      [compVars$6.filledBarColor]: globalRefs$t.colors.error.dark,
-	      [compVars$6.textColor]: globalRefs$t.colors.error.dark,
+	      [compVars$6.filledBarColor]: globalRefs$u.colors.error.dark,
+	      [compVars$6.textColor]: globalRefs$u.colors.error.dark,
 	    },
 	    3: {
-	      [compVars$6.filledBarColor]: globalRefs$t.colors.success.dark,
-	      [compVars$6.textColor]: globalRefs$t.colors.success.dark,
+	      [compVars$6.filledBarColor]: globalRefs$u.colors.success.dark,
+	      [compVars$6.textColor]: globalRefs$u.colors.success.dark,
 	    },
 	    4: {
-	      [compVars$6.filledBarColor]: globalRefs$t.colors.success.main,
-	      [compVars$6.textColor]: globalRefs$t.colors.success.main,
+	      [compVars$6.filledBarColor]: globalRefs$u.colors.success.main,
+	      [compVars$6.textColor]: globalRefs$u.colors.success.main,
 	    },
 	  }
 	};
 
-	const vars$T = {
+	const vars$U = {
 	  ...compVars$6,
 	};
 
 	var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: passwordStrength,
-	  vars: vars$T
+	  vars: vars$U
 	});
 
 	var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-	const componentName$13 = getComponentName('collapsible-container');
+	const componentName$14 = getComponentName('collapsible-container');
 
 	class RawCollapsibleContainer extends createBaseClass$1({
-	  componentName: componentName$13,
+	  componentName: componentName$14,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -88943,7 +88959,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawCollapsibleContainer);
 
-	const globalRefs$s = getThemeRefs$1(globals);
+	const globalRefs$t = getThemeRefs$1(globals);
 
 	const compVars$5 = CollapsibleContainerClass.cssVarList;
 
@@ -88951,7 +88967,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$13
+	  componentName$14
 	);
 
 	const { shadowColor: shadowColor$5 } = helperRefs$4;
@@ -88962,7 +88978,7 @@ function requireIndex_cjs () {
 	  [compVars$5.hostWidth]: '100%',
 	  [compVars$5.boxShadow]: 'none',
 
-	  [compVars$5.backgroundColor]: globalRefs$s.colors.surface.main,
+	  [compVars$5.backgroundColor]: globalRefs$t.colors.surface.main,
 
 	  [compVars$5.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
 	  [compVars$5.backgroundPositionX]: 'center',
@@ -88971,13 +88987,13 @@ function requireIndex_cjs () {
 	  [compVars$5.backgroundRepeat]: 'no-repeat',
 
 	  [compVars$5.borderRadius]: '0px',
-	  [compVars$5.hostDirection]: globalRefs$s.direction,
+	  [compVars$5.hostDirection]: globalRefs$t.direction,
 
 	  [compVars$5.flexDirection]: 'column',
 	  [compVars$5.alignItems]: 'flex-start',
 	  [compVars$5.justifyContent]: 'flex-start',
 
-	  [compVars$5.headerGap]: globalRefs$s.spacing.md,
+	  [compVars$5.headerGap]: globalRefs$t.spacing.md,
 
 	  [compVars$5.iconAnimationDuration]: '0.1s',
 	  [compVars$5.contentAnimationDuration]: '0.1s',
@@ -89005,30 +89021,30 @@ function requireIndex_cjs () {
 
 	  shadow: {
 	    sm: {
-	      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.sm} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.sm} ${shadowColor$5}`,
+	      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.sm} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.sm} ${shadowColor$5}`,
 	    },
 	    md: {
-	      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.md} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.md} ${shadowColor$5}`,
+	      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.md} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.md} ${shadowColor$5}`,
 	    },
 	    lg: {
-	      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.lg} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.lg} ${shadowColor$5}`,
+	      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.lg} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.lg} ${shadowColor$5}`,
 	    },
 	    xl: {
-	      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide.xl} ${shadowColor$5}, ${globalRefs$s.shadow.narrow.xl} ${shadowColor$5}`,
+	      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide.xl} ${shadowColor$5}, ${globalRefs$t.shadow.narrow.xl} ${shadowColor$5}`,
 	    },
 	    '2xl': {
 	      [helperVars$4.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-	      [compVars$5.boxShadow]: `${globalRefs$s.shadow.wide['2xl']} ${shadowColor$5}`,
+	      [compVars$5.boxShadow]: `${globalRefs$t.shadow.wide['2xl']} ${shadowColor$5}`,
 	    },
 	  },
 
 	  borderRadius: {
-	    sm: { [compVars$5.borderRadius]: globalRefs$s.radius.sm },
-	    md: { [compVars$5.borderRadius]: globalRefs$s.radius.md },
-	    lg: { [compVars$5.borderRadius]: globalRefs$s.radius.lg },
-	    xl: { [compVars$5.borderRadius]: globalRefs$s.radius.xl },
-	    '2xl': { [compVars$5.borderRadius]: globalRefs$s.radius['2xl'] },
-	    '3xl': { [compVars$5.borderRadius]: globalRefs$s.radius['3xl'] },
+	    sm: { [compVars$5.borderRadius]: globalRefs$t.radius.sm },
+	    md: { [compVars$5.borderRadius]: globalRefs$t.radius.md },
+	    lg: { [compVars$5.borderRadius]: globalRefs$t.radius.lg },
+	    xl: { [compVars$5.borderRadius]: globalRefs$t.radius.xl },
+	    '2xl': { [compVars$5.borderRadius]: globalRefs$t.radius['2xl'] },
+	    '3xl': { [compVars$5.borderRadius]: globalRefs$t.radius['3xl'] },
 	  },
 
 	  iconPosition: {
@@ -89041,8 +89057,8 @@ function requireIndex_cjs () {
 	  },
 
 	  _border: {
-	    [compVars$5.borderColor]: globalRefs$s.colors.surface.light,
-	    [compVars$5.borderWidth]: globalRefs$s.border.xs,
+	    [compVars$5.borderColor]: globalRefs$t.colors.surface.light,
+	    [compVars$5.borderWidth]: globalRefs$t.border.xs,
 	    [compVars$5.borderStyle]: 'solid',
 	  },
 
@@ -89051,7 +89067,7 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	const vars$S = {
+	const vars$T = {
 	  ...compVars$5,
 	  ...helperVars$4,
 	};
@@ -89059,12 +89075,12 @@ function requireIndex_cjs () {
 	var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: collapsibleContainer,
-	  vars: vars$S
+	  vars: vars$T
 	});
 
-	const componentName$12 = getComponentName('recovery-codes');
+	const componentName$13 = getComponentName('recovery-codes');
 
-	const itemRenderer$4 = ({ value }, _, ref) => {
+	const itemRenderer$5 = ({ value }, _, ref) => {
 	  return `
     <descope-text variant="${ref.variant}" mode="${ref.mode}">
       <span>${value}</span>
@@ -89073,7 +89089,7 @@ function requireIndex_cjs () {
 	};
 
 	class RawRecoveryCodes extends createBaseClass$1({
-	  componentName: componentName$12,
+	  componentName: componentName$13,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -89204,7 +89220,7 @@ function requireIndex_cjs () {
 	    },
 	  }),
 	  createDynamicDataMixin$1({
-	    itemRenderer: itemRenderer$4,
+	    itemRenderer: itemRenderer$5,
 	    rerenderAttrsList: ['variant', 'mode'],
 	    targetSelector: '.list',
 	  }),
@@ -89212,38 +89228,38 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawRecoveryCodes);
 
-	const globalRefs$r = getThemeRefs$1(globals);
-	const vars$R = RecoveryCodesClass.cssVarList;
+	const globalRefs$s = getThemeRefs$1(globals);
+	const vars$S = RecoveryCodesClass.cssVarList;
 	const textVars$6 = TextClass.cssVarList;
 
 	const recoveryCodes = {
-	  [vars$R.hostMinWidth]: '190px',
-	  [vars$R.hostDirection]: globalRefs$r.direction,
-	  [vars$R.iconColor]: useVar$1(textVars$6.textColor),
-	  [vars$R.iconSize]: useVar$1(textVars$6.fontSize),
-	  [vars$R.iconGap]: '8px',
-	  [vars$R.bulletGap]: '0.35em',
+	  [vars$S.hostMinWidth]: '190px',
+	  [vars$S.hostDirection]: globalRefs$s.direction,
+	  [vars$S.iconColor]: useVar$1(textVars$6.textColor),
+	  [vars$S.iconSize]: useVar$1(textVars$6.fontSize),
+	  [vars$S.iconGap]: '8px',
+	  [vars$S.bulletGap]: '0.35em',
 
 	  textAlign: {
-	    right: { [vars$R.textAlign]: 'flex-end' },
-	    left: { [vars$R.textAlign]: 'flex-start' },
-	    center: { [vars$R.textAlign]: 'center' },
+	    right: { [vars$S.textAlign]: 'flex-end' },
+	    left: { [vars$S.textAlign]: 'flex-start' },
+	    center: { [vars$S.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$R.hostWidth]: '100%',
+	    [vars$S.hostWidth]: '100%',
 	  },
 	};
 
 	var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: recoveryCodes,
-	  vars: vars$R
+	  vars: vars$S
 	});
 
-	const componentName$11 = getComponentName('outbound-apps');
+	const componentName$12 = getComponentName('outbound-apps');
 
-	const itemRenderer$3 = (
+	const itemRenderer$4 = (
 	  { name, description, logo, appId, isConnected },
 	  _,
 	  ref,
@@ -89286,12 +89302,12 @@ function requireIndex_cjs () {
 `;
 	};
 
-	const BaseClass$5 = createBaseClass$1({
-	  componentName: componentName$11,
+	const BaseClass$6 = createBaseClass$1({
+	  componentName: componentName$12,
 	  baseSelector: 'descope-list',
 	});
 
-	class RawOutboundAppsClass extends BaseClass$5 {
+	class RawOutboundAppsClass extends BaseClass$6 {
 	  constructor() {
 	    super();
 
@@ -89334,7 +89350,7 @@ function requireIndex_cjs () {
 	  init() {
 	    super.init?.();
 
-	    this.appsList.itemRenderer = itemRenderer$3;
+	    this.appsList.itemRenderer = itemRenderer$4;
 
 	    this.appsList.addEventListener('click', this.onAppsListClick.bind(this));
 	  }
@@ -89371,17 +89387,17 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const { host: host$o } = {
+	const { host: host$p } = {
 	  host: { selector: () => ':host' },
 	};
 
 	const OutboundAppsClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
-	      hostWidth: { ...host$o, property: 'width' },
+	      hostWidth: { ...host$p, property: 'width' },
 	      minHeight: { selector: () => ':host' },
 	      hostDirection: [
-	        { ...host$o, property: 'direction' },
+	        { ...host$p, property: 'direction' },
 	        {
 	          selector: 'descope-list',
 	          property: 'direction',
@@ -89453,7 +89469,7 @@ function requireIndex_cjs () {
 	  }),
 	  draggableMixin$1,
 	  createDynamicDataMixin$1({
-	    itemRenderer: itemRenderer$3,
+	    itemRenderer: itemRenderer$4,
 	    rerenderAttrsList: [
 	      'size',
 	      'connect-button-label',
@@ -89463,36 +89479,36 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawOutboundAppsClass);
 
-	const vars$Q = OutboundAppsClass.cssVarList;
+	const vars$R = OutboundAppsClass.cssVarList;
 
 	const outboundApps = {
-	  [vars$Q.iconColor]: globals.colors.primary.main,
-	  [vars$Q.errorIconColor]: globals.colors.error.main,
+	  [vars$R.iconColor]: globals.colors.primary.main,
+	  [vars$R.errorIconColor]: globals.colors.error.main,
 
-	  [vars$Q.appLogoGap]: globals.spacing.md,
-	  [vars$Q.contentGap]: globals.spacing.xs,
+	  [vars$R.appLogoGap]: globals.spacing.md,
+	  [vars$R.contentGap]: globals.spacing.xs,
 
 	  // list-item overrides
-	  [vars$Q.itemCursor]: 'default',
-	  [vars$Q.itemOutline]: 'none',
-	  [vars$Q.itemBorderColor]: 'transparent',
+	  [vars$R.itemCursor]: 'default',
+	  [vars$R.itemOutline]: 'none',
+	  [vars$R.itemBorderColor]: 'transparent',
 
-	  [vars$Q.listPadding]: '0',
-	  [vars$Q.listBorderWidth]: '0',
-	  [vars$Q.listBoxShadow]: 'none',
+	  [vars$R.listPadding]: '0',
+	  [vars$R.listBorderWidth]: '0',
+	  [vars$R.listBoxShadow]: 'none',
 
 	  size: {
 	    xs: {
-	      [vars$Q.fontSize]: '0.6em',
+	      [vars$R.fontSize]: '0.6em',
 	    },
 	    sm: {
-	      [vars$Q.fontSize]: '0.8em',
+	      [vars$R.fontSize]: '0.8em',
 	    },
 	    md: {
-	      [vars$Q.fontSize]: '1em',
+	      [vars$R.fontSize]: '1em',
 	    },
 	    lg: {
-	      [vars$Q.fontSize]: '1.5em',
+	      [vars$R.fontSize]: '1.5em',
 	    },
 	  },
 	};
@@ -89500,13 +89516,13 @@ function requireIndex_cjs () {
 	var outboundApps$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: outboundApps,
-	  vars: vars$Q
+	  vars: vars$R
 	});
 
-	const componentName$10 = getComponentName('outbound-app-button');
+	const componentName$11 = getComponentName('outbound-app-button');
 
 	class RawOutboundAppButton extends createBaseClass$1({
-	  componentName: componentName$10,
+	  componentName: componentName$11,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  static get observedAttributes() {
@@ -89605,12 +89621,12 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$P = compVars$4;
+	const vars$Q = compVars$4;
 
 	var outboundAppButton$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: outboundAppButton,
-	  vars: vars$P
+	  vars: vars$Q
 	});
 
 	var desktopDeviceIconLight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
@@ -89688,9 +89704,9 @@ function requireIndex_cjs () {
 	  };
 	};
 
-	const componentName$$ = getComponentName('trusted-devices');
+	const componentName$10 = getComponentName('trusted-devices');
 
-	const itemRenderer$2 = (
+	const itemRenderer$3 = (
 	  { id, name, lastLoginDate, deviceType, isCurrent },
 	  _,
 	  ref,
@@ -89732,66 +89748,516 @@ function requireIndex_cjs () {
 	  const template = document.createElement('template');
 
 	  template.innerHTML = `
-    <descope-list-item ${itemClassName}>
+    <descope-list-item ${itemClassName}>
+      <div class="content">
+        <div class="main">
+          <span class="device">
+            <descope-icon
+              class="device-icon"
+              src="${iconSrc}"
+              src-dark="${iconSrcDark}">
+            </descope-icon>
+            <descope-text
+              class="device-name"
+              variant="body1"
+              mode="primary">
+            </descope-text>
+          </span>
+          <span class="panel">
+            ${badge}
+            ${removeDeviceLink}
+          </span>
+        </div>
+        <div class="meta">
+          <descope-text
+            variant="body2"
+            mode="primary"
+          >
+            ${loginLabel}
+          </descope-text>
+          <descope-text
+            class="login-date"
+            variant="body2"
+            mode="primary"
+          >
+            ${loginDate}
+          </descope-text>
+        </div>
+      </div>
+    </descope-list-item>
+  `;
+
+	  // we return a template instead of returning a string so we can avoid XSS on device name
+	  template.content.querySelector('.device-name').textContent = name;
+	  return template;
+	};
+
+	const BaseClass$5 = createBaseClass$1({
+	  componentName: componentName$10,
+	  baseSelector: ListClass.componentName,
+	});
+
+	class RawTrustedDevicesClass extends BaseClass$5 {
+	  constructor() {
+	    super();
+
+	    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-list>
+        <slot name="empty-state" slot="empty-state"></slot>
+      </descope-list>
+    `;
+
+	    this.appsList = this.shadowRoot.querySelector('descope-list');
+
+	    injectStyle(
+	      `
+      :host {
+        display: inline-block;
+      }
+
+      .descope-list-item {
+        min-width: 0;
+      }
+
+      .current-device {
+        order: -1;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .main {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .panel {
+        display: flex;
+        flex-shrink: 0;
+        max-width: 75%;
+        overflow: hidden;
+      }
+
+      .device {
+        display: flex;
+        min-width: 0;
+      }
+
+      .device-icon {
+        flex-shrink: 0;
+      }
+
+      .meta {
+        display: flex;
+      }
+
+      .login-date {
+        min-width: fit-content;
+      }
+
+      descope-badge {
+        min-width: 0;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;        
+        min-width: 0;
+      }
+      descope-text::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      descope-link {
+        overflow: hidden;
+      }
+      descope-link.remove-device::part(wrapper) {
+        display: flex;
+        width: 100%;
+      }
+      descope-link.remove-device {
+        width: 100%;
+      }
+      `,
+	      this,
+	    );
+	  }
+
+	  init() {
+	    super.init?.();
+
+	    this.appsList.itemRenderer = itemRenderer$3;
+
+	    this.appsList.addEventListener('click', this.onRemoveClick.bind(this));
+	  }
+
+	  onRemoveClick(e) {
+	    if (this.readOnly) return;
+
+	    const target = e.target.closest('[data-device-id]');
+	    const deviceId = target?.getAttribute('data-device-id');
+
+	    if (deviceId) {
+	      this.dispatchEvent(
+	        new CustomEvent('remove-device-clicked', {
+	          bubbles: true,
+	          detail: { id: deviceId, action: 'remove-device' },
+	        }),
+	      );
+	    }
+	  }
+
+	  get readOnly() {
+	    return this.getAttribute('readonly') === 'true';
+	  }
+
+	  get hideActions() {
+	    return this.getAttribute('hide-actions') === 'true';
+	  }
+
+	  get format() {
+	    return this.getAttribute('format')?.toUpperCase() || 'MM-DD-YYYY';
+	  }
+
+	  get removeDeviceLabel() {
+	    return this.getAttribute('remove-device-label') || 'Sign out';
+	  }
+
+	  get currentDeviceLabel() {
+	    return this.getAttribute('current-device-label') || 'Current device';
+	  }
+
+	  get lastLoginLabel() {
+	    return this.getAttribute('last-login-label') || 'Last login:';
+	  }
+
+	  get direction() {
+	    return this.getAttribute('st-host-direction');
+	  }
+	}
+
+	const { host: host$o } = {
+	  host: { selector: () => ':host' },
+	};
+
+	const TrustedDevicesClass = compose(
+	  createStyleMixin$1({
+	    mappings: {
+	      hostWidth: { ...host$o, property: 'width' },
+	      hostMinWidth: { ...host$o, property: 'min-width' },
+	      hostDirection: [
+	        { ...host$o, property: 'direction' },
+	        {
+	          selector: () => 'descope-list-item',
+	          property: 'direction',
+	        },
+	        {
+	          selector: () => 'descope-text',
+	          property: 'direction',
+	        },
+	      ],
+
+	      listItemsGap: {
+	        property: ListClass.cssVarList.gap,
+	      },
+	      listBackgroundColor: {
+	        selector: () => ListClass.componentName,
+	        property: ListClass.cssVarList.backgroundColor,
+	      },
+	      listBorderRadius: {
+	        selector: () => ListClass.componentName,
+	        property: ListClass.cssVarList.borderRadius,
+	      },
+	      listBorderWidth: {
+	        selector: () => ListClass.componentName,
+	        property: ListClass.cssVarList.borderWidth,
+	      },
+	      listBoxShadow: {
+	        selector: () => ListClass.componentName,
+	        property: ListClass.cssVarList.boxShadow,
+	      },
+	      listPadding: [
+	        {
+	          selector: () => ListClass.componentName,
+	          property: ListClass.cssVarList.verticalPadding,
+	        },
+	        {
+	          selector: () => ListClass.componentName,
+	          property: ListClass.cssVarList.horizontalPadding,
+	        },
+	      ],
+
+	      itemVerticalPadding: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.verticalPadding,
+	      },
+	      itemHorizontalPadding: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.horizontalPadding,
+	      },
+	      itemCursor: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.cursor,
+	      },
+	      itemOutline: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.outline,
+	      },
+	      itemBorderColor: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.borderColor,
+	      },
+	      itemBorderRadius: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.borderRadius,
+	      },
+	      itemBackgroundColor: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.backgroundColor,
+	      },
+	      itemContentGap: {
+	        selector: () => '.content',
+	        property: 'gap',
+	      },
+
+	      badgeBorderColor: {
+	        selector: BadgeClass.componentName,
+	        property: BadgeClass.cssVarList.borderColor,
+	      },
+	      badgeTextColor: {
+	        selector: BadgeClass.componentName,
+	        property: BadgeClass.cssVarList.textColor,
+	      },
+	      badgeBackgroundColor: {
+	        selector: BadgeClass.componentName,
+	        property: BadgeClass.cssVarList.backgroundColor,
+	      },
+	      badgeBorderRadius: {
+	        selector: BadgeClass.componentName,
+	        property: BadgeClass.cssVarList.borderRadius,
+	      },
+
+	      devicePanelGap: {
+	        selector: () => '.main',
+	        property: 'gap',
+	      },
+	      deviceIconGap: {
+	        selector: () => '.device',
+	        property: 'gap',
+	      },
+	      deviceIconSize: [
+	        {
+	          selector: () => '.device-icon',
+	          property: 'width',
+	        },
+	        {
+	          selector: () => '.device-icon',
+	          property: 'height',
+	        },
+	      ],
+
+	      lastLoginLabelGap: {
+	        selector: ' .meta',
+	        property: 'gap',
+	      },
+	    },
+	  }),
+	  draggableMixin$1,
+	  createDynamicDataMixin$1({
+	    itemRenderer: itemRenderer$3,
+	    sortFn: sortFn$1,
+	    rerenderAttrsList: [
+	      'remove-device-label',
+	      'current-device-label',
+	      'last-login-label',
+	      'format',
+	      'hide-actions',
+	    ],
+	  }),
+	  componentNameValidationMixin$1,
+	)(RawTrustedDevicesClass);
+
+	const vars$P = TrustedDevicesClass.cssVarList;
+
+	const TrustedDevices = {
+	  [vars$P.hostWidth]: 'auto',
+	  [vars$P.hostWidth]: '300px',
+	  [vars$P.hostMinWidth]: '300px',
+
+	  [vars$P.listBackgroundColor]: 'transparent',
+	  [vars$P.listBorderRadius]: '0',
+	  [vars$P.listBorderWidth]: '0',
+	  [vars$P.listPadding]: '0',
+	  [vars$P.listBoxShadow]: 'none',
+	  [vars$P.listItemsGap]: globals.spacing.lg,
+
+	  [vars$P.itemBorderColor]: globals.colors.surface.light,
+	  [vars$P.itemVerticalPadding]: globals.spacing.lg,
+	  [vars$P.itemHorizontalPadding]: globals.spacing.lg,
+	  [vars$P.itemBorderRadius]: globals.radius.xs,
+	  [vars$P.itemOutline]: 'transparent',
+	  [vars$P.itemBackgroundColor]: 'transparent',
+	  [vars$P.itemCursor]: 'default',
+	  [vars$P.itemContentGap]: globals.spacing.sm,
+
+	  [vars$P.badgeBorderColor]: globals.colors.surface.light,
+	  [vars$P.badgeTextColor]: globals.colors.surface.dark,
+	  [vars$P.badgeBorderRadius]: globals.radius.xs,
+	  [vars$P.badgeBackgroundColor]: globals.colors.surface.main,
+
+	  [vars$P.devicePanelGap]: globals.spacing.md,
+	  [vars$P.deviceIconGap]: globals.spacing.md,
+	  [vars$P.deviceIconSize]: '24px',
+	  [vars$P.lastLoginLabelGap]: globals.spacing.xs,
+
+	  _fullWidth: {
+	    [vars$P.hostWidth]: '100%',
+	  },
+	};
+
+	var trustedDevices = /*#__PURE__*/Object.freeze({
+	  __proto__: null,
+	  default: TrustedDevices,
+	  vars: vars$P
+	});
+
+	const componentName$$ = getComponentName('multi-sso');
+
+	const resolveAuthType = (authType) => {
+	  if (!authType || authType === 'none')
+	    return { label: 'Not Configured', configured: false };
+	  return { label: authType.toUpperCase(), configured: true };
+	};
+
+	const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
+	  const deleteAction =
+	    !isDefault && ref?.allowDelete
+	      ? `<span
+          class="delete-btn delete-icon"
+          data-action="delete"
+          role="button"
+          tabindex="0"
+          title="${ref.deleteTooltipLabel}"
+        ></span>`
+	      : '';
+
+	  const externalLinkAction =
+	    link && ref?.allowConfigure
+	      ? `<a
+          class="external-link external-link-icon"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="${ref.configureTooltipLabel}"
+        ></a>`
+	      : '';
+
+	  const { label: authTypeLabel, configured } = resolveAuthType(authType);
+	  const authTypeRow = configured
+	    ? `<div class="auth-type-row">
+        <descope-badge class="auth-type-badge" size="xs"></descope-badge>
+      </div>`
+	    : `<div class="auth-type-row">
+        <descope-text
+          not-configured
+          variant="body2"
+          mode="secondary"
+        >${ref?.notConfiguredLabel}</descope-text>
+      </div>`;
+
+	  const template = document.createElement('template');
+
+	  template.innerHTML = `
+    <descope-list-item>
       <div class="content">
-        <div class="main">
-          <span class="device">
-            <descope-icon
-              class="device-icon"
-              src="${iconSrc}"
-              src-dark="${iconSrcDark}">
-            </descope-icon>
-            <descope-text
-              class="device-name"
-              variant="body1"
-              mode="primary">
-            </descope-text>
-          </span>
-          <span class="panel">
-            ${badge}
-            ${removeDeviceLink}
-          </span>
-        </div>
-        <div class="meta">
-          <descope-text
-            variant="body2"
-            mode="primary"
-          >
-            ${loginLabel}
-          </descope-text>
+        <div class="top-row">
           <descope-text
-            class="login-date"
-            variant="body2"
+            class="config-name"
+            variant="body1"
             mode="primary"
-          >
-            ${loginDate}
-          </descope-text>
+          ></descope-text>
+          <span class="action">
+            ${deleteAction}
+            ${externalLinkAction}
+          </span>
         </div>
+        ${authTypeRow}
       </div>
     </descope-list-item>
   `;
 
-	  // we return a template instead of returning a string so we can avoid XSS on device name
-	  template.content.querySelector('.device-name').textContent = name;
+	  template.content.querySelector('.config-name').textContent = name;
+
+	  const deleteBtn = template.content.querySelector('.delete-btn');
+	  if (deleteBtn) {
+	    deleteBtn.dataset.id = id;
+	    deleteBtn.dataset.name = name;
+	    deleteBtn.setAttribute('aria-label', ref.deleteTooltipLabel);
+	    const deleteIcon = cloneSlottedNodes(ref, 'delete-icon');
+	    if (deleteIcon) deleteBtn.append(deleteIcon);
+	  }
+
+	  const linkBtn = template.content.querySelector('.external-link');
+	  if (linkBtn) {
+	    linkBtn.setAttribute('aria-label', ref.configureTooltipLabel);
+	    if (link) linkBtn.setAttribute('href', link);
+	    const linkIcon = cloneSlottedNodes(ref, 'external-link-icon');
+	    if (linkIcon) linkBtn.append(linkIcon);
+	  }
+
+	  const authTypeBadge = template.content.querySelector('.auth-type-badge');
+	  if (authTypeBadge) authTypeBadge.textContent = authTypeLabel;
 	  return template;
 	};
 
 	const BaseClass$4 = createBaseClass$1({
 	  componentName: componentName$$,
-	  baseSelector: ListClass.componentName,
+	  baseSelector: 'span.wrapper',
 	});
 
-	class RawTrustedDevicesClass extends BaseClass$4 {
+	class RawMultiSsoClass extends BaseClass$4 {
+	  static get observedAttributes() {
+	    return [
+	      'label',
+	      'create-button-label',
+	      'not-configured-label',
+	      'delete-tooltip-label',
+	      'configure-tooltip-label',
+	      'empty',
+	    ].concat(super.observedAttributes);
+	  }
+
 	  constructor() {
 	    super();
 
 	    this.attachShadow({ mode: 'open' }).innerHTML = `
-      <descope-list>
-        <slot name="empty-state" slot="empty-state"></slot>
-      </descope-list>
+    <span class="wrapper">
+      <div class="header">
+        <slot name="title-icon"></slot>
+        <descope-text class="title" variant="body1" mode="primary"></descope-text>
+        <descope-button
+          class="create-button"
+          size="sm"
+          variant="link"
+          mode="primary"
+          data-action="create"
+        >
+          <slot name="create-button-icon" slot="prefix"></slot>
+          <span class="create-button-label"></span>
+        </descope-button>
+      </div>
+      <descope-list></descope-list>
+      <slot name="delete-icon" class="hidden"></slot>
+      <slot name="external-link-icon" class="hidden"></slot>
+      </span>
     `;
 
-	    this.appsList = this.shadowRoot.querySelector('descope-list');
+	    this.listEl = this.shadowRoot.querySelector('descope-list');
 
 	    injectStyle(
 	      `
@@ -89799,130 +90265,194 @@ function requireIndex_cjs () {
         display: inline-block;
       }
 
-      .descope-list-item {
-        min-width: 0;
+      :host(:not([allow-create="true"])) .create-button {
+        display: none;
       }
 
-      .current-device {
-        order: -1;
+      .create-button {
+        min-width: 0;
+        flex-shrink:1;
       }
 
-      .content {
-        display: flex;
-        flex-direction: column;
+      .header {
         width: 100%;
-      }
-
-      .main {
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
 
-      .panel {
-        display: flex;
+      slot[name="title-icon"] {
+        display: inline-flex;
+        align-items: center;
         flex-shrink: 0;
-        max-width: 75%;
-        overflow: hidden;
       }
 
-      .device {
-        display: flex;
+      .title {
+        flex: 1;
         min-width: 0;
-      }
-
-      .device-icon {
+        width:0;
         flex-shrink: 0;
+
       }
 
-      .meta {
-        display: flex;
+      .title::part(text-wrapper) {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
       }
 
-      .login-date {
-        min-width: fit-content;
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        width: 100%;
       }
 
-      descope-badge {
+      .top-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         min-width: 0;
       }
 
-      descope-text {
+      .config-name {
         display: flex;
-        align-items: center;        
+        align-items: center;
         min-width: 0;
       }
-      descope-text::part(text-wrapper) {
+
+      .config-name::part(text-wrapper) {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
       }
 
-      descope-link {
-        overflow: hidden;
+      .auth-type-row {
+        display: flex;
+        align-items: center;
       }
-      descope-link.remove-device::part(wrapper) {
+
+      .action {
         display: flex;
-        width: 100%;
+        align-items: center;
+        flex-shrink: 0;
       }
-      descope-link.remove-device {
+
+      .hidden {
+        display: none;
+      }
+
+      .delete-btn {
+        cursor: pointer;
+        display: flex;
+      }
+
+      .delete-icon > *,
+      .external-link-icon > * {
         width: 100%;
+        height: 100%;
+      }
+
+      .external-link {
+        cursor: pointer;
+        color: inherit;
+        display: flex;
+      }
+
+      descope-text {
+        display: flex;
+        align-items: center;
+        min-width: 0;
       }
       `,
 	      this,
 	    );
 	  }
 
+	  get deleteTooltipLabel() {
+	    return this.getAttribute('delete-tooltip-label') ?? '';
+	  }
+
+	  get configureTooltipLabel() {
+	    return this.getAttribute('configure-tooltip-label') ?? '';
+	  }
+
 	  init() {
 	    super.init?.();
 
-	    this.appsList.itemRenderer = itemRenderer$2;
+	    this.shadowRoot.querySelector('.title').textContent = this.label;
+	    this.shadowRoot.querySelector('.create-button-label').textContent =
+	      this.createButtonLabel;
 
-	    this.appsList.addEventListener('click', this.onRemoveClick.bind(this));
+	    this.listEl.itemRenderer = (item, index) => itemRenderer$2(item, index, this);
+
+	    this.shadowRoot
+	      .querySelector('[data-action="create"]')
+	      .addEventListener('click', this.onCreateClick.bind(this));
+	    this.listEl.addEventListener('click', this.onItemClick.bind(this));
+
+	    forwardAttrs(this.listEl, this, { includeAttrs: ['empty'] });
 	  }
 
-	  onRemoveClick(e) {
-	    if (this.readOnly) return;
+	  onCreateClick() {
+	    this.dispatchEvent(
+	      new CustomEvent('create-clicked', { bubbles: true, detail: {} }),
+	    );
+	  }
 
-	    const target = e.target.closest('[data-device-id]');
-	    const deviceId = target?.getAttribute('data-device-id');
+	  onItemClick(e) {
+	    const target = e.target.closest('[data-action="delete"]');
+	    if (!target) return;
 
-	    if (deviceId) {
+	    const id = target.getAttribute('data-id');
+	    const name = target.getAttribute('data-name');
+	    if (id) {
 	      this.dispatchEvent(
-	        new CustomEvent('remove-device-clicked', {
+	        new CustomEvent('delete-clicked', {
 	          bubbles: true,
-	          detail: { id: deviceId, action: 'remove-device' },
+	          detail: { id, name },
 	        }),
 	      );
 	    }
 	  }
 
-	  get readOnly() {
-	    return this.getAttribute('readonly') === 'true';
+	  get allowCreate() {
+	    return this.getAttribute('allow-create') === 'true';
 	  }
 
-	  get hideActions() {
-	    return this.getAttribute('hide-actions') === 'true';
+	  get allowDelete() {
+	    return this.getAttribute('allow-delete') === 'true';
 	  }
 
-	  get format() {
-	    return this.getAttribute('format')?.toUpperCase() || 'MM-DD-YYYY';
+	  get allowConfigure() {
+	    return this.getAttribute('allow-configure') === 'true';
 	  }
 
-	  get removeDeviceLabel() {
-	    return this.getAttribute('remove-device-label') || 'Sign out';
+	  get label() {
+	    return this.getAttribute('label');
 	  }
 
-	  get currentDeviceLabel() {
-	    return this.getAttribute('current-device-label') || 'Current device';
+	  get createButtonLabel() {
+	    return this.getAttribute('create-button-label');
 	  }
 
-	  get lastLoginLabel() {
-	    return this.getAttribute('last-login-label') || 'Last login:';
+	  get notConfiguredLabel() {
+	    return this.getAttribute('not-configured-label') || 'Not Configured';
 	  }
 
-	  get direction() {
-	    return this.getAttribute('st-host-direction');
+	  attributeChangedCallback(name, oldValue, newValue) {
+	    super.attributeChangedCallback?.(name, oldValue, newValue);
+	    if (oldValue === newValue) return;
+
+	    if (name === 'label') {
+	      const el = this.shadowRoot?.querySelector('.title');
+	      if (el) el.textContent = this.label;
+	    } else if (name === 'create-button-label') {
+	      const el = this.shadowRoot?.querySelector('.create-button-label');
+	      if (el) el.textContent = this.createButtonLabel;
+	    } else if (name === 'empty') {
+	      this.listEl.classList.toggle('hidden', newValue === 'true');
+	    }
 	  }
 	}
 
@@ -89930,7 +90460,7 @@ function requireIndex_cjs () {
 	  host: { selector: () => ':host' },
 	};
 
-	const TrustedDevicesClass = compose(
+	const MultiSsoClass = compose(
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: { ...host$n, property: 'width' },
@@ -89946,6 +90476,35 @@ function requireIndex_cjs () {
 	          property: 'direction',
 	        },
 	      ],
+	      headerGap: {
+	        selector: () => '.header',
+	        property: 'gap',
+	      },
+	      headerListGap: {
+	        selector: () => 'descope-list',
+	        property: 'margin-top',
+	      },
+	      itemContentGap: {
+	        selector: () => '.content',
+	        property: 'gap',
+	      },
+	      actionGap: {
+	        selector: () => '.action',
+	        property: 'gap',
+	      },
+	      unconfiguredAuthTypeTextColor: {
+	        selector: () => '[not-configured]',
+	        property: TextClass.cssVarList.textColor,
+	      },
+	      unconfiguredAuthTypeTextFontStyle: {
+	        selector: () => '[not-configured]',
+	        property: 'font-style',
+	      },
+
+	      buttonMaxWidth: {
+	        selector: ButtonClass.componentName,
+	        property: ButtonClass.cssVarList.hostMaxWidth,
+	      },
 
 	      listItemsGap: {
 	        property: ListClass.cssVarList.gap,
@@ -90005,109 +90564,117 @@ function requireIndex_cjs () {
 	        selector: ListItemClass.componentName,
 	        property: ListItemClass.cssVarList.backgroundColor,
 	      },
-	      itemContentGap: {
-	        selector: () => '.content',
-	        property: 'gap',
-	      },
-
 	      badgeBorderColor: {
-	        selector: BadgeClass.componentName,
+	        selector: () => BadgeClass.componentName,
 	        property: BadgeClass.cssVarList.borderColor,
 	      },
 	      badgeTextColor: {
-	        selector: BadgeClass.componentName,
+	        selector: () => BadgeClass.componentName,
 	        property: BadgeClass.cssVarList.textColor,
 	      },
 	      badgeBackgroundColor: {
-	        selector: BadgeClass.componentName,
+	        selector: () => BadgeClass.componentName,
 	        property: BadgeClass.cssVarList.backgroundColor,
 	      },
 	      badgeBorderRadius: {
-	        selector: BadgeClass.componentName,
+	        selector: () => BadgeClass.componentName,
 	        property: BadgeClass.cssVarList.borderRadius,
 	      },
 
-	      devicePanelGap: {
-	        selector: () => '.main',
-	        property: 'gap',
-	      },
-	      deviceIconGap: {
-	        selector: () => '.device',
-	        property: 'gap',
-	      },
-	      deviceIconSize: [
+	      titleIconSize: [
+	        { selector: () => '::slotted([slot="title-icon"])', property: 'width' },
 	        {
-	          selector: () => '.device-icon',
+	          selector: () => '::slotted([slot="title-icon"])',
+	          property: 'height',
+	        },
+	      ],
+	      createButtonIconSize: [
+	        {
+	          selector: () => '::slotted([slot="create-button-icon"])',
 	          property: 'width',
 	        },
 	        {
-	          selector: () => '.device-icon',
+	          selector: () => '::slotted([slot="create-button-icon"])',
 	          property: 'height',
 	        },
 	      ],
-
-	      lastLoginLabelGap: {
-	        selector: ' .meta',
-	        property: 'gap',
-	      },
+	      actionIconSize: [
+	        { selector: () => '.delete-icon', property: 'width' },
+	        { selector: () => '.delete-icon', property: 'height' },
+	        { selector: () => '.external-link-icon', property: 'width' },
+	        { selector: () => '.external-link-icon', property: 'height' },
+	      ],
+	      actionIconColor: [
+	        { selector: () => '.delete-icon', property: IconClass.cssVarList.fill },
+	        {
+	          selector: () => '.external-link-icon',
+	          property: IconClass.cssVarList.fill,
+	        },
+	      ],
 	    },
 	  }),
 	  draggableMixin$1,
 	  createDynamicDataMixin$1({
+	    targetSelector: 'descope-list',
 	    itemRenderer: itemRenderer$2,
-	    sortFn: sortFn$1,
 	    rerenderAttrsList: [
-	      'remove-device-label',
-	      'current-device-label',
-	      'last-login-label',
-	      'format',
-	      'hide-actions',
+	      'allow-delete',
+	      'allow-configure',
+	      'not-configured-label',
+	      'delete-tooltip-label',
+	      'configure-tooltip-label',
 	    ],
 	  }),
 	  componentNameValidationMixin$1,
-	)(RawTrustedDevicesClass);
+	)(RawMultiSsoClass);
 
-	const vars$O = TrustedDevicesClass.cssVarList;
+	const vars$O = MultiSsoClass.cssVarList;
+	const globalRefs$r = getThemeRefs$1(globals);
 
-	const TrustedDevices = {
-	  [vars$O.hostWidth]: 'auto',
+	const MultiSso = {
 	  [vars$O.hostWidth]: '300px',
-	  [vars$O.hostMinWidth]: '300px',
+
+	  [vars$O.headerGap]: globalRefs$r.spacing.md,
+	  [vars$O.headerListGap]: globalRefs$r.spacing.md,
+	  [vars$O.itemContentGap]: globalRefs$r.spacing.md,
+	  [vars$O.actionGap]: globalRefs$r.spacing.sm,
+	  [vars$O.unconfiguredAuthTypeTextColor]: globalRefs$r.colors.surface.dark,
+	  [vars$O.unconfiguredAuthTypeTextFontStyle]: 'italic',
+	  [vars$O.buttonMaxWidth]: '50%',
 
 	  [vars$O.listBackgroundColor]: 'transparent',
 	  [vars$O.listBorderRadius]: '0',
 	  [vars$O.listBorderWidth]: '0',
 	  [vars$O.listPadding]: '0',
 	  [vars$O.listBoxShadow]: 'none',
-	  [vars$O.listItemsGap]: globals.spacing.lg,
+	  [vars$O.listItemsGap]: globalRefs$r.spacing.lg,
 
-	  [vars$O.itemBorderColor]: globals.colors.surface.light,
-	  [vars$O.itemVerticalPadding]: globals.spacing.lg,
-	  [vars$O.itemHorizontalPadding]: globals.spacing.lg,
-	  [vars$O.itemBorderRadius]: globals.radius.xs,
+	  [vars$O.itemBorderColor]: globalRefs$r.colors.surface.light,
+	  [vars$O.itemVerticalPadding]: globalRefs$r.spacing.lg,
+	  [vars$O.itemHorizontalPadding]: globalRefs$r.spacing.lg,
+	  [vars$O.itemBorderRadius]: globalRefs$r.radius.xs,
 	  [vars$O.itemOutline]: 'transparent',
 	  [vars$O.itemBackgroundColor]: 'transparent',
 	  [vars$O.itemCursor]: 'default',
-	  [vars$O.itemContentGap]: globals.spacing.sm,
 
-	  [vars$O.badgeBorderColor]: globals.colors.surface.light,
-	  [vars$O.badgeTextColor]: globals.colors.surface.dark,
-	  [vars$O.badgeBorderRadius]: globals.radius.xs,
-	  [vars$O.badgeBackgroundColor]: globals.colors.surface.main,
+	  [vars$O.badgeBorderColor]: globalRefs$r.colors.surface.light,
+	  [vars$O.badgeTextColor]: globalRefs$r.colors.surface.dark,
+	  [vars$O.badgeBorderRadius]: globalRefs$r.radius.xs,
+	  [vars$O.badgeBackgroundColor]: globalRefs$r.colors.surface.main,
 
-	  [vars$O.devicePanelGap]: globals.spacing.md,
-	  [vars$O.deviceIconGap]: globals.spacing.md,
-	  [vars$O.deviceIconSize]: '24px',
-	  [vars$O.lastLoginLabelGap]: globals.spacing.xs,
+	  [vars$O.titleIconSize]: '24px',
+	  [vars$O.createButtonIconSize]: '20px',
+	  [vars$O.actionIconSize]: '20px',
+	  [vars$O.actionIconColor]: globalRefs$r.colors.surface.dark,
 
 	  _fullWidth: {
 	    [vars$O.hostWidth]: '100%',
 	  },
 	};
 
-	var trustedDevices = /*#__PURE__*/Object.freeze({
+	var multiSso = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
-	  default: TrustedDevices,
+	  default: MultiSso,
 	  vars: vars$O
 	});
 
@@ -91972,21 +92539,6 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const cloneSlottedNodes = (element, slotName) => {
-	  if (!element || !slotName) return null;
-	  const sources = element.querySelectorAll(`:scope > [slot="${slotName}"]`);
-	  if (!sources.length) return null;
-	  const fragment = document.createDocumentFragment();
-	  sources.forEach((source) => {
-	    const clone = source.content
-	      ? source.content.cloneNode(true)
-	      : source.cloneNode(true);
-	    if (clone.removeAttribute) clone.removeAttribute('slot');
-	    fragment.append(clone);
-	  });
-	  return fragment;
-	};
-
 	const populateRemoveButton = (template, id, ref) => {
 	  const button = template.content.querySelector('.remove-button-content');
 	  button.dataset.passkeyId = id;
@@ -92181,7 +92733,7 @@ function requireIndex_cjs () {
 
       descope-text {
         display: flex;
-        align-items: center;        
+        align-items: center;
         min-width: 0;
       }
       descope-text::part(text-wrapper) {
@@ -92203,7 +92755,7 @@ function requireIndex_cjs () {
       .hidden {
         display: none
       }
-      
+
       `,
 	      this,
 	    );
@@ -108255,7 +108807,7 @@ descope-enriched-text {
 	  [vars$2.horizontalPadding]: '0',
 	  [vars$2.verticalPadding]: '0',
 	  [vars$2.gap]: `0.5em`,
-	  [vars$2.fontSize]: useVar(vars$18.fontSize),
+	  [vars$2.fontSize]: useVar(vars$19.fontSize),
 
 	  mode: {
 	    error: {
@@ -108549,6 +109101,7 @@ descope-enriched-text {
 	  outboundApps: outboundApps$1,
 	  outboundAppButton: outboundAppButton$1,
 	  trustedDevices,
+	  multiSso,
 	  tooltip: tooltip$1,
 	  attachment: attachment$1,
 	  userPasskeys: userPasskeys$1,
@@ -108564,7 +109117,7 @@ descope-enriched-text {
 	);
 
 	const defaultTheme = { globals: globals$1, components: theme };
-	const themeVars = { globals: vars$1a, components: vars };
+	const themeVars = { globals: vars$1b, components: vars };
 
 	const colors = {
 	  surface: {
@@ -109374,6 +109927,7 @@ descope-enriched-text {
 	index_cjs$4.MonthDayFieldPickerClass = MonthDayFieldPickerClass;
 	index_cjs$4.MultiLineMappingsClass = MultiLineMappingsClass;
 	index_cjs$4.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
+	index_cjs$4.MultiSsoClass = MultiSsoClass;
 	index_cjs$4.NewPasswordClass = NewPasswordClass;
 	index_cjs$4.NotificationClass = NotificationClass;
 	index_cjs$4.NotpImageClass = NotpImageClass;
@@ -109512,6 +110066,7 @@ const TooltipClass = index_cjsExports.TooltipClass;
 const HoneypotClass = index_cjsExports.HoneypotClass;
 const AttachmentClass = index_cjsExports.AttachmentClass;
 const UserPasskeysClass = index_cjsExports.UserPasskeysClass;
+const MultiSsoClass = index_cjsExports.MultiSsoClass;
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
@@ -110017,6 +110572,12 @@ const MultiLineMappings = React__default.default.forwardRef(({ data, ...props },
     return (React__default.default.createElement("descope-multi-line-mappings", { data: serializedData, ...props, ref: ref }));
 });
 
+const MultiSso = React__default.default.forwardRef(({ data, titleIconLight, titleIconDark, createButtonIconLight, createButtonIconDark, deleteIconLight, deleteIconDark, externalLinkIconLight, externalLinkIconDark, ...props }, ref) => (React__default.default.createElement("descope-multi-sso", { data: data, ...props, ref: ref },
+    titleIconLight && titleIconDark && (React__default.default.createElement(Icon, { icon: titleIconLight, "src-dark": titleIconDark, slot: "title-icon", "st-fill": "currentcolor" })),
+    createButtonIconLight && createButtonIconDark && (React__default.default.createElement(Icon, { icon: createButtonIconLight, "src-dark": createButtonIconDark, slot: "create-button-icon", "st-fill": "currentcolor" })),
+    deleteIconLight && deleteIconDark && (React__default.default.createElement(Icon, { icon: deleteIconLight, "src-dark": deleteIconDark, slot: "delete-icon", "st-fill": "currentcolor" })),
+    externalLinkIconLight && externalLinkIconDark && (React__default.default.createElement(Icon, { icon: externalLinkIconLight, "src-dark": externalLinkIconDark, slot: "external-link-icon", "st-fill": "currentcolor" })))));
+
 const UserAuthMethod = React__default.default.forwardRef(({ methodIcon, methodIconDark, buttonIcon, buttonIconDark, fulfilledButtonIcon, fulfilledButtonIconDark, ...props }, ref) => (React__default.default.createElement("descope-user-auth-method", { ...props, ref: ref },
     methodIcon && methodIconDark && React__default.default.createElement(Icon, { icon: methodIcon, "src-dark": methodIconDark, slot: "method-icon", noColor: true }),
     buttonIcon && buttonIconDark && React__default.default.createElement(Icon, { icon: buttonIcon, "src-dark": buttonIconDark, slot: "button-icon", noColor: true, width: "1em", height: "1em" }),
@@ -110214,6 +110775,8 @@ exports.MultiLineMappings = MultiLineMappings;
 exports.MultiLineMappingsClass = MultiLineMappingsClass;
 exports.MultiSelect = MultiSelect;
 exports.MultiSelectComboBoxClass = MultiSelectComboBoxClass;
+exports.MultiSso = MultiSso;
+exports.MultiSsoClass = MultiSsoClass;
 exports.NOTPImage = NOTPImage;
 exports.NOTPLink = NOTPLink;
 exports.NewPassword = NewPassword;