@descope/flow-components 3.1.13 → 3.2.0

package/dist/index.cjs.js

@@ -4396,7 +4396,7 @@ function requireColor () {
 	return color;
 }
 
-/*! @license DOMPurify 3.3.2 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.2/LICENSE */
+/*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */
 
 var purify_cjs;
 var hasRequiredPurify_cjs;
@@ -4604,7 +4604,7 @@ function requirePurify_cjs () {
 
 	const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
 	const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
-	const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
+	const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnalign', 'columnlines', 'columnspacing', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lquote', 'lspace', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
 	const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
 
 	// eslint-disable-next-line unicorn/better-regex
@@ -4701,7 +4701,7 @@ function requirePurify_cjs () {
 	function createDOMPurify() {
 	  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
 	  const DOMPurify = root => createDOMPurify(root);
-	  DOMPurify.version = '3.3.2';
+	  DOMPurify.version = '3.4.0';
 	  DOMPurify.removed = [];
 	  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
 	    // Not running in a browser, provide a factory function
@@ -4977,7 +4977,7 @@ function requirePurify_cjs () {
 	    NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
 	    MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;
 	    HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;
-	    CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
+	    CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || create(null);
 	    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
 	      CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
 	    }
@@ -5017,13 +5017,10 @@ function requirePurify_cjs () {
 	        addToSet(ALLOWED_ATTR, xml);
 	      }
 	    }
-	    /* Prevent function-based ADD_ATTR / ADD_TAGS from leaking across calls */
-	    if (!objectHasOwnProperty(cfg, 'ADD_TAGS')) {
-	      EXTRA_ELEMENT_HANDLING.tagCheck = null;
-	    }
-	    if (!objectHasOwnProperty(cfg, 'ADD_ATTR')) {
-	      EXTRA_ELEMENT_HANDLING.attributeCheck = null;
-	    }
+	    /* Always reset function-based ADD_TAGS / ADD_ATTR checks to prevent
+	     * leaking across calls when switching from function to array config */
+	    EXTRA_ELEMENT_HANDLING.tagCheck = null;
+	    EXTRA_ELEMENT_HANDLING.attributeCheck = null;
 	    /* Merge configuration parameters */
 	    if (cfg.ADD_TAGS) {
 	      if (typeof cfg.ADD_TAGS === 'function') {
@@ -5346,6 +5343,11 @@ function requirePurify_cjs () {
 	      _forceRemove(currentNode);
 	      return true;
 	    }
+	    /* Remove risky CSS construction leading to mXSS */
+	    if (SAFE_FOR_XML && currentNode.namespaceURI === HTML_NAMESPACE && tagName === 'style' && _isNode(currentNode.firstElementChild)) {
+	      _forceRemove(currentNode);
+	      return true;
+	    }
 	    /* Remove any occurrence of processing instructions */
 	    if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {
 	      _forceRemove(currentNode);
@@ -5357,7 +5359,7 @@ function requirePurify_cjs () {
 	      return true;
 	    }
 	    /* Remove element if anything forbids its presence */
-	    if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) {
+	    if (FORBID_TAGS[tagName] || !(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && !ALLOWED_TAGS[tagName]) {
 	      /* Check if we have a custom element to handle */
 	      if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
 	        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
@@ -5596,7 +5598,7 @@ function requirePurify_cjs () {
 	   *
 	   * @param fragment to iterate over recursively
 	   */
-	  const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
+	  const _sanitizeShadowDOM2 = function _sanitizeShadowDOM(fragment) {
 	    let shadowNode = null;
 	    const shadowIterator = _createNodeIterator(fragment);
 	    /* Execute a hook if present */
@@ -5610,7 +5612,7 @@ function requirePurify_cjs () {
 	      _sanitizeAttributes(shadowNode);
 	      /* Deep shadow DOM detected */
 	      if (shadowNode.content instanceof DocumentFragment) {
-	        _sanitizeShadowDOM(shadowNode.content);
+	        _sanitizeShadowDOM2(shadowNode.content);
 	      }
 	    }
 	    /* Execute a hook if present */
@@ -5705,7 +5707,7 @@ function requirePurify_cjs () {
 	      _sanitizeAttributes(currentNode);
 	      /* Shadow DOM detected, sanitize it */
 	      if (currentNode.content instanceof DocumentFragment) {
-	        _sanitizeShadowDOM(currentNode.content);
+	        _sanitizeShadowDOM2(currentNode.content);
 	      }
 	    }
 	    /* If we sanitized `dirty` in-place, return it. */
@@ -5714,6 +5716,14 @@ function requirePurify_cjs () {
 	    }
 	    /* Return sanitized string or DOM */
 	    if (RETURN_DOM) {
+	      if (SAFE_FOR_TEMPLATES) {
+	        body.normalize();
+	        let html = body.innerHTML;
+	        arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
+	          html = stringReplace(html, expr, ' ');
+	        });
+	        body.innerHTML = html;
+	      }
 	      if (RETURN_DOM_FRAGMENT) {
 	        returnNode = createDocumentFragment.call(body.ownerDocument);
 	        while (body.firstChild) {
@@ -79599,7 +79609,6 @@ function requireIndex_cjs () {
 	const DESCOPE_PREFIX$1 = 'descope';
 	const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 5;
 	const BASE_THEME_SECTION$1 = 'host';
-	const PORTAL_THEME_PREFIX = '@';
 
 	const kebabCase$1 = (str) =>
 	  str
@@ -80518,6 +80527,13 @@ function requireIndex_cjs () {
 	  return [match[1] || '', match[2] || ''];
 	}
 
+	const CONTAINER_QUERY_PREFIX = '@container';
+	const isContainerQuery = (key) => key.startsWith(CONTAINER_QUERY_PREFIX);
+
+	const BREAKPOINTS_KEY = '$breakpoints';
+	const BREAKPOINTS_REF_PREFIX = '$breakpoints.';
+	const isBreakpointRef = (key) => key.startsWith(BREAKPOINTS_REF_PREFIX);
+
 	// st attributes are also using selector multiplication
 	// so we need to limit the multiplication
 	const MAX_SELECTOR_MULTIPLY = 3;
@@ -80525,6 +80541,10 @@ function requireIndex_cjs () {
 	const componentsThemeToStyleObj = (componentsTheme) =>
 	  transformTheme(componentsTheme, [], (path, val) => {
 	    const [component, ...restPath] = path;
+
+	    // skip $breakpoints definitions — they are metadata, not CSS output
+	    if (restPath[0] === BREAKPOINTS_KEY) return {};
+
 	    const property = restPath.pop();
 	    const componentName = getComponentName$1(component);
 
@@ -80533,15 +80553,27 @@ function requireIndex_cjs () {
 	      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
 	    }
 
-	    // we need a support for portal components theme (e.g. overlay)
-	    // this allows us to generate those themes under different sections
-	    // if the theme has root level attribute that starts with #
-	    // we are generating a new theme
-	    let themeName = BASE_THEME_SECTION$1;
+	    const themeName = BASE_THEME_SECTION$1;
 
-	    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-	      themeName = restPath.shift();
+	    // extract @container queries from restPath at any position,
+	    // resolving breakpoints.X references via the component's $breakpoints map
+	    const componentBreakpoints = componentsTheme[component]?.[BREAKPOINTS_KEY] || {};
+	    const resolveKey = (key) =>
+	      isBreakpointRef(key)
+	        ? `${CONTAINER_QUERY_PREFIX} ${componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]}`
+	        : key;
+	    const breakpointRefs = restPath.filter(isBreakpointRef);
+	    const missingRef = breakpointRefs.find(
+	      (key) => !componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]
+	    );
+	    if (missingRef) {
+	      // eslint-disable-next-line no-console
+	      console.warn(componentName, `theme references undefined breakpoint "${missingRef}"`);
+	      return {};
 	    }
+	    const containerQueries = breakpointRefs.map(resolveKey);
+	    // remove breakpoint refs from restPath so the remaining parts are processed as attribute selectors
+	    restPath.splice(0, restPath.length, ...restPath.filter((s) => !isBreakpointRef(s)));
 
 	    // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
 	    // starts with underscore -> attribute selector
@@ -80580,25 +80612,29 @@ function requireIndex_cjs () {
 
 	    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
+	    // wrap the selector rule in container queries from innermost to outermost
+	    // e.g. ['@container (max-width: 80px)'] + { ':host': { prop: val } }
+	    //   => { '@container (max-width: 80px)': { ':host': { prop: val } } }
+	    const leaf = containerQueries.reduceRight((acc, query) => ({ [query]: acc }), {
+	      [selector]: { [property]: getCssVarValue(val) },
+	    });
+
 	    return {
 	      [componentName]: {
-	        [themeName]: {
-	          [selector]: {
-	            [property]: getCssVarValue(val),
-	          },
-	        },
+	        [themeName]: leaf,
 	      },
 	    };
 	  });
 
 	const componentsThemeToStyle = (componentsTheme) =>
-	  Object.entries(componentsTheme).reduce(
-	    (acc, [selector, vars]) =>
-	      `${acc}${selector} { \n${Object.entries(vars)
-	        .map(([key, val]) => `${key}: ${val}`)
-	        .join(';\n')} \n}\n\n`,
-	    ''
-	  );
+	  Object.entries(componentsTheme).reduce((acc, [key, value]) => {
+	    if (isContainerQuery(key)) {
+	      return `${acc}${key} {\n${componentsThemeToStyle(value)}}\n\n`;
+	    }
+	    return `${acc}${key} { \n${Object.entries(value)
+	      .map(([prop, val]) => `${prop}: ${val}`)
+	      .join(';\n')} \n}\n\n`;
+	  }, '');
 
 	const createComponentsTheme = (componentsTheme) => {
 	  const styleObj = componentsThemeToStyleObj(componentsTheme);
@@ -80828,7 +80864,7 @@ function requireIndex_cjs () {
 	  fonts: fonts$1,
 	  direction: direction$1,
 	};
-	const vars$15 = getThemeVars(globals$1);
+	const vars$16 = getThemeVars(globals$1);
 
 	const direction = 'ltr';
 
@@ -82624,12 +82660,12 @@ function requireIndex_cjs () {
 
 	/* eslint-disable no-use-before-define */
 
-	const componentName$1j = getComponentName('image');
+	const componentName$1k = getComponentName('image');
 
 	const srcAttrs = ['src', 'src-dark'];
 
 	class RawImage extends createBaseClass$1({
-	  componentName: componentName$1j,
+	  componentName: componentName$1k,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -82757,7 +82793,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawImage);
 
-	const componentName$1i = getComponentName('icon');
+	const componentName$1j = getComponentName('icon');
 
 	const IconClass = compose(
 	  createStyleMixin$1({
@@ -82778,7 +82814,7 @@ function requireIndex_cjs () {
       }
       `,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1i,
+	    componentName: componentName$1j,
 	  }),
 	);
 
@@ -82793,7 +82829,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	const componentName$1h = getComponentName('button');
+	const componentName$1i = getComponentName('button');
 
 	const resetStyles = `
 	:host {
@@ -82909,7 +82945,7 @@ function requireIndex_cjs () {
 			}
 		`,
 	    excludeAttrsSync: ['tabindex', 'class', 'style'],
-	    componentName: componentName$1h,
+	    componentName: componentName$1i,
 	  })
 	);
 
@@ -82957,10 +82993,10 @@ function requireIndex_cjs () {
 	  surface: globalRefs$H.colors.surface,
 	};
 
-	const [helperTheme$6, helperRefs$6, helperVars$6] = createHelperVars$1({ mode }, componentName$1h);
+	const [helperTheme$7, helperRefs$7, helperVars$6] = createHelperVars$1({ mode }, componentName$1i);
 
 	const button = {
-	  ...helperTheme$6,
+	  ...helperTheme$7,
 
 	  [compVars$9.fontFamily]: globalRefs$H.fonts.font1.family,
 
@@ -83012,7 +83048,7 @@ function requireIndex_cjs () {
 
 	  _loading: {
 	    [compVars$9.cursor]: 'wait',
-	    [compVars$9.labelTextColor]: helperRefs$6.main,
+	    [compVars$9.labelTextColor]: helperRefs$7.main,
 	  },
 
 	  _disabled: {
@@ -83025,51 +83061,51 @@ function requireIndex_cjs () {
 
 	  variant: {
 	    contained: {
-	      [compVars$9.labelTextColor]: helperRefs$6.contrast,
-	      [compVars$9.backgroundColor]: helperRefs$6.main,
+	      [compVars$9.labelTextColor]: helperRefs$7.contrast,
+	      [compVars$9.backgroundColor]: helperRefs$7.main,
 	      _hover: {
-	        [compVars$9.backgroundColor]: helperRefs$6.dark,
+	        [compVars$9.backgroundColor]: helperRefs$7.dark,
 	        _loading: {
-	          [compVars$9.backgroundColor]: helperRefs$6.main,
+	          [compVars$9.backgroundColor]: helperRefs$7.main,
 	        },
 	      },
 	      _active: {
-	        [compVars$9.backgroundColor]: helperRefs$6.main,
+	        [compVars$9.backgroundColor]: helperRefs$7.main,
 	      },
 	    },
 
 	    outline: {
-	      [compVars$9.labelTextColor]: helperRefs$6.main,
-	      [compVars$9.borderColor]: helperRefs$6.main,
+	      [compVars$9.labelTextColor]: helperRefs$7.main,
+	      [compVars$9.borderColor]: helperRefs$7.main,
 	      _hover: {
-	        [compVars$9.labelTextColor]: helperRefs$6.dark,
-	        [compVars$9.borderColor]: helperRefs$6.dark,
+	        [compVars$9.labelTextColor]: helperRefs$7.dark,
+	        [compVars$9.borderColor]: helperRefs$7.dark,
 	      },
 	      _active: {
-	        [compVars$9.labelTextColor]: helperRefs$6.main,
-	        [compVars$9.borderColor]: helperRefs$6.main,
+	        [compVars$9.labelTextColor]: helperRefs$7.main,
+	        [compVars$9.borderColor]: helperRefs$7.main,
 	      },
 	    },
 
 	    link: {
-	      [compVars$9.labelTextColor]: helperRefs$6.main,
+	      [compVars$9.labelTextColor]: helperRefs$7.main,
 	      [compVars$9.horizontalPadding]: '0.125em',
 	      _hover: {
-	        [compVars$9.labelTextColor]: helperRefs$6.dark,
+	        [compVars$9.labelTextColor]: helperRefs$7.dark,
 	        [compVars$9.labelTextDecoration]: 'underline',
 	      },
 	      _active: {
-	        [compVars$9.labelTextColor]: helperRefs$6.main,
+	        [compVars$9.labelTextColor]: helperRefs$7.main,
 	      },
 	    },
 	  },
 
 	  _focused: {
-	    [compVars$9.outlineColor]: helperRefs$6.light,
+	    [compVars$9.outlineColor]: helperRefs$7.light,
 	  },
 	};
 
-	const vars$14 = {
+	const vars$15 = {
 	  ...compVars$9,
 	  ...helperVars$6,
 	};
@@ -83077,13 +83113,13 @@ function requireIndex_cjs () {
 	var button$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: button,
-	  vars: vars$14
+	  vars: vars$15
 	});
 
-	const componentName$1g = getComponentName('text');
+	const componentName$1h = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$1g,
+	  componentName: componentName$1h,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -83150,106 +83186,106 @@ function requireIndex_cjs () {
 	)(RawText);
 
 	const globalRefs$G = getThemeRefs$1(globals);
-	const vars$13 = TextClass.cssVarList;
+	const vars$14 = TextClass.cssVarList;
 
 	const text$3 = {
-	  [vars$13.hostDirection]: globalRefs$G.direction,
-	  [vars$13.textLineHeight]: '1.35em',
-	  [vars$13.textAlign]: 'start',
-	  [vars$13.textColor]: globalRefs$G.colors.surface.dark,
+	  [vars$14.hostDirection]: globalRefs$G.direction,
+	  [vars$14.textLineHeight]: '1.35em',
+	  [vars$14.textAlign]: 'start',
+	  [vars$14.textColor]: globalRefs$G.colors.surface.dark,
 
 	  variant: {
 	    h1: {
-	      [vars$13.fontSize]: globalRefs$G.typography.h1.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.h1.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.h1.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.h1.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.h1.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.h1.font,
 	    },
 	    h2: {
-	      [vars$13.fontSize]: globalRefs$G.typography.h2.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.h2.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.h2.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.h2.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.h2.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.h2.font,
 	    },
 	    h3: {
-	      [vars$13.fontSize]: globalRefs$G.typography.h3.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.h3.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.h3.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.h3.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.h3.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.h3.font,
 	    },
 	    subtitle1: {
-	      [vars$13.fontSize]: globalRefs$G.typography.subtitle1.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.subtitle1.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.subtitle1.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.subtitle1.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.subtitle1.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.subtitle1.font,
 	    },
 	    subtitle2: {
-	      [vars$13.fontSize]: globalRefs$G.typography.subtitle2.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.subtitle2.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.subtitle2.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.subtitle2.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.subtitle2.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.subtitle2.font,
 	    },
 	    body1: {
-	      [vars$13.fontSize]: globalRefs$G.typography.body1.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.body1.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.body1.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.body1.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.body1.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.body1.font,
 	    },
 	    body2: {
-	      [vars$13.fontSize]: globalRefs$G.typography.body2.size,
-	      [vars$13.fontWeight]: globalRefs$G.typography.body2.weight,
-	      [vars$13.fontFamily]: globalRefs$G.typography.body2.font,
+	      [vars$14.fontSize]: globalRefs$G.typography.body2.size,
+	      [vars$14.fontWeight]: globalRefs$G.typography.body2.weight,
+	      [vars$14.fontFamily]: globalRefs$G.typography.body2.font,
 	    },
 	  },
 
 	  mode: {
 	    primary: {
-	      [vars$13.textColor]: globalRefs$G.colors.surface.contrast,
+	      [vars$14.textColor]: globalRefs$G.colors.surface.contrast,
 	    },
 	    secondary: {
-	      [vars$13.textColor]: globalRefs$G.colors.surface.dark,
+	      [vars$14.textColor]: globalRefs$G.colors.surface.dark,
 	    },
 	    error: {
-	      [vars$13.textColor]: globalRefs$G.colors.error.main,
+	      [vars$14.textColor]: globalRefs$G.colors.error.main,
 	    },
 	    'error-dark': {
-	      [vars$13.textColor]: globalRefs$G.colors.error.dark,
+	      [vars$14.textColor]: globalRefs$G.colors.error.dark,
 	    },
 	    success: {
-	      [vars$13.textColor]: globalRefs$G.colors.success.main,
+	      [vars$14.textColor]: globalRefs$G.colors.success.main,
 	    },
 	    'success-dark': {
-	      [vars$13.textColor]: globalRefs$G.colors.success.dark,
+	      [vars$14.textColor]: globalRefs$G.colors.success.dark,
 	    },
 	    warning: {
-	      [vars$13.textColor]: globalRefs$G.colors.warning.main,
+	      [vars$14.textColor]: globalRefs$G.colors.warning.main,
 	    },
 	    'warning-dark': {
-	      [vars$13.textColor]: globalRefs$G.colors.warning.dark,
+	      [vars$14.textColor]: globalRefs$G.colors.warning.dark,
 	    },
 	  },
 
 	  textAlign: {
-	    right: { [vars$13.textAlign]: 'right' },
-	    left: { [vars$13.textAlign]: 'left' },
-	    center: { [vars$13.textAlign]: 'center' },
+	    right: { [vars$14.textAlign]: 'right' },
+	    left: { [vars$14.textAlign]: 'left' },
+	    center: { [vars$14.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$13.hostWidth]: '100%',
+	    [vars$14.hostWidth]: '100%',
 	  },
 
 	  _italic: {
-	    [vars$13.fontStyle]: 'italic',
+	    [vars$14.fontStyle]: 'italic',
 	  },
 
 	  _uppercase: {
-	    [vars$13.textTransform]: 'uppercase',
+	    [vars$14.textTransform]: 'uppercase',
 	  },
 
 	  _lowercase: {
-	    [vars$13.textTransform]: 'lowercase',
+	    [vars$14.textTransform]: 'lowercase',
 	  },
 	};
 
 	var text$4 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: text$3,
-	  vars: vars$13
+	  vars: vars$14
 	});
 
 	const disableRules = [
@@ -83276,9 +83312,9 @@ function requireIndex_cjs () {
 	/* eslint-disable no-param-reassign */
 
 
-	const componentName$1f = getComponentName('enriched-text');
+	const componentName$1g = getComponentName('enriched-text');
 
-	class EnrichedText extends createBaseClass$1({ componentName: componentName$1f, baseSelector: ':host > div' }) {
+	class EnrichedText extends createBaseClass$1({ componentName: componentName$1g, baseSelector: ':host > div' }) {
 	  #origLinkRenderer;
 
 	  #origEmRenderer;
@@ -83483,9 +83519,9 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1
 	)(EnrichedText);
 
-	const componentName$1e = getComponentName('link');
+	const componentName$1f = getComponentName('link');
 
-	class RawLink extends createBaseClass$1({ componentName: componentName$1e, baseSelector: ':host a' }) {
+	class RawLink extends createBaseClass$1({ componentName: componentName$1f, baseSelector: ':host a' }) {
 	  constructor() {
 	    super();
 
@@ -83563,31 +83599,31 @@ function requireIndex_cjs () {
 	)(RawLink);
 
 	const globalRefs$F = getThemeRefs$1(globals);
-	const vars$12 = LinkClass.cssVarList;
+	const vars$13 = LinkClass.cssVarList;
 
 	const link$1 = {
-	  [vars$12.hostDirection]: globalRefs$F.direction,
-	  [vars$12.cursor]: 'pointer',
+	  [vars$13.hostDirection]: globalRefs$F.direction,
+	  [vars$13.cursor]: 'pointer',
 
-	  [vars$12.textColor]: globalRefs$F.colors.primary.main,
+	  [vars$13.textColor]: globalRefs$F.colors.primary.main,
 
 	  textAlign: {
-	    right: { [vars$12.textAlign]: 'right' },
-	    left: { [vars$12.textAlign]: 'left' },
-	    center: { [vars$12.textAlign]: 'center' },
+	    right: { [vars$13.textAlign]: 'right' },
+	    left: { [vars$13.textAlign]: 'left' },
+	    center: { [vars$13.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$12.hostWidth]: '100%',
+	    [vars$13.hostWidth]: '100%',
 	  },
 
 	  _hover: {
-	    [vars$12.textDecoration]: 'underline',
+	    [vars$13.textDecoration]: 'underline',
 	  },
 
 	  mode: {
 	    secondary: {
-	      [vars$12.textColor]: globalRefs$F.colors.secondary.main,
+	      [vars$13.textColor]: globalRefs$F.colors.secondary.main,
 	    },
 	  },
 	};
@@ -83595,37 +83631,37 @@ function requireIndex_cjs () {
 	var link$2 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: link$1,
-	  vars: vars$12
+	  vars: vars$13
 	});
 
 	const globalRefs$E = getThemeRefs$1(globals);
-	const vars$11 = EnrichedTextClass.cssVarList;
+	const vars$12 = EnrichedTextClass.cssVarList;
 
 	const enrichedText = {
-	  [vars$11.hostDirection]: globalRefs$E.direction,
-	  [vars$11.hostWidth]: useVar$1(vars$13.hostWidth),
+	  [vars$12.hostDirection]: globalRefs$E.direction,
+	  [vars$12.hostWidth]: useVar$1(vars$14.hostWidth),
 
-	  [vars$11.textLineHeight]: useVar$1(vars$13.textLineHeight),
-	  [vars$11.textColor]: useVar$1(vars$13.textColor),
-	  [vars$11.textAlign]: useVar$1(vars$13.textAlign),
+	  [vars$12.textLineHeight]: useVar$1(vars$14.textLineHeight),
+	  [vars$12.textColor]: useVar$1(vars$14.textColor),
+	  [vars$12.textAlign]: useVar$1(vars$14.textAlign),
 
-	  [vars$11.fontSize]: useVar$1(vars$13.fontSize),
-	  [vars$11.fontWeight]: useVar$1(vars$13.fontWeight),
-	  [vars$11.fontFamily]: useVar$1(vars$13.fontFamily),
+	  [vars$12.fontSize]: useVar$1(vars$14.fontSize),
+	  [vars$12.fontWeight]: useVar$1(vars$14.fontWeight),
+	  [vars$12.fontFamily]: useVar$1(vars$14.fontFamily),
 
-	  [vars$11.linkColor]: useVar$1(vars$12.textColor),
-	  [vars$11.linkTextDecoration]: 'none',
-	  [vars$11.linkHoverTextDecoration]: 'underline',
+	  [vars$12.linkColor]: useVar$1(vars$13.textColor),
+	  [vars$12.linkTextDecoration]: 'none',
+	  [vars$12.linkHoverTextDecoration]: 'underline',
 
-	  [vars$11.fontWeightBold]: '900',
-	  [vars$11.minWidth]: '0.25em',
-	  [vars$11.minHeight]: '1.35em',
+	  [vars$12.fontWeightBold]: '900',
+	  [vars$12.minWidth]: '0.25em',
+	  [vars$12.minHeight]: '1.35em',
 
-	  [vars$11.hostDisplay]: 'inline-block',
+	  [vars$12.hostDisplay]: 'inline-block',
 
 	  _empty: {
 	    _hideWhenEmpty: {
-	      [vars$11.hostDisplay]: 'none',
+	      [vars$12.hostDisplay]: 'none',
 	    },
 	  },
 	};
@@ -83633,10 +83669,10 @@ function requireIndex_cjs () {
 	var enrichedText$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: enrichedText,
-	  vars: vars$11
+	  vars: vars$12
 	});
 
-	const componentName$1d = getComponentName('combo-box');
+	const componentName$1e = getComponentName('combo-box');
 
 	const ComboBoxMixin = (superclass) =>
 	  class ComboBoxMixinClass extends superclass {
@@ -84320,12 +84356,12 @@ 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$1d,
+	    componentName: componentName$1e,
 	    includeForwardProps: ['items', 'renderer', 'selectedItem'],
 	  }),
 	);
 
-	const componentName$1c = getComponentName('input-wrapper');
+	const componentName$1d = getComponentName('input-wrapper');
 	const globalRefs$D = getThemeRefs$1(globals);
 
 	const [theme$2, refs$1] = createHelperVars$1(
@@ -84448,103 +84484,103 @@ function requireIndex_cjs () {
 	      backgroundColor: globalRefs$D.colors.surface.main,
 	    },
 	  },
-	  componentName$1c,
+	  componentName$1d,
 	);
 
 	const globalRefs$C = getThemeRefs$1(globals);
-	const vars$10 = ComboBoxClass.cssVarList;
+	const vars$11 = ComboBoxClass.cssVarList;
 
 	const comboBox = {
-	  [vars$10.hostWidth]: refs$1.width,
-	  [vars$10.hostDirection]: refs$1.direction,
-	  [vars$10.fontSize]: refs$1.fontSize,
-	  [vars$10.fontFamily]: refs$1.fontFamily,
-	  [vars$10.labelFontSize]: refs$1.labelFontSize,
-	  [vars$10.labelFontWeight]: refs$1.labelFontWeight,
-	  [vars$10.labelTextColor]: refs$1.labelTextColor,
-	  [vars$10.errorMessageTextColor]: refs$1.errorMessageTextColor,
-	  [vars$10.inputBorderColor]: refs$1.borderColor,
-	  [vars$10.inputBorderWidth]: refs$1.borderWidth,
-	  [vars$10.inputBorderStyle]: refs$1.borderStyle,
-	  [vars$10.inputBorderRadius]: refs$1.borderRadius,
-	  [vars$10.inputOutlineColor]: refs$1.outlineColor,
-	  [vars$10.inputOutlineOffset]: refs$1.outlineOffset,
-	  [vars$10.inputOutlineWidth]: refs$1.outlineWidth,
-	  [vars$10.inputOutlineStyle]: refs$1.outlineStyle,
-	  [vars$10.labelRequiredIndicator]: refs$1.requiredIndicator,
-	  [vars$10.inputValueTextColor]: refs$1.valueTextColor,
-	  [vars$10.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
-	  [vars$10.inputBackgroundColor]: refs$1.backgroundColor,
-	  [vars$10.inputHorizontalPadding]: refs$1.horizontalPadding,
-	  [vars$10.inputHeight]: refs$1.inputHeight,
-	  [vars$10.inputDropdownButtonColor]: globalRefs$C.colors.surface.dark,
-	  [vars$10.inputDropdownButtonCursor]: 'pointer',
-	  [vars$10.inputDropdownButtonSize]: refs$1.toggleButtonSize,
-	  [vars$10.inputDropdownButtonOffset]: globalRefs$C.spacing.xs,
-	  [vars$10.overlayItemPaddingInlineStart]: globalRefs$C.spacing.xs,
-	  [vars$10.overlayItemPaddingInlineEnd]: globalRefs$C.spacing.lg,
-	  [vars$10.labelPosition]: refs$1.labelPosition,
-	  [vars$10.labelTopPosition]: refs$1.labelTopPosition,
-	  [vars$10.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
-	  [vars$10.inputTransformY]: refs$1.inputTransformY,
-	  [vars$10.inputTransition]: refs$1.inputTransition,
-	  [vars$10.marginInlineStart]: refs$1.marginInlineStart,
-	  [vars$10.placeholderOpacity]: refs$1.placeholderOpacity,
-	  [vars$10.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
-	  [vars$10.valueInputHeight]: refs$1.valueInputHeight,
-	  [vars$10.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
+	  [vars$11.hostWidth]: refs$1.width,
+	  [vars$11.hostDirection]: refs$1.direction,
+	  [vars$11.fontSize]: refs$1.fontSize,
+	  [vars$11.fontFamily]: refs$1.fontFamily,
+	  [vars$11.labelFontSize]: refs$1.labelFontSize,
+	  [vars$11.labelFontWeight]: refs$1.labelFontWeight,
+	  [vars$11.labelTextColor]: refs$1.labelTextColor,
+	  [vars$11.errorMessageTextColor]: refs$1.errorMessageTextColor,
+	  [vars$11.inputBorderColor]: refs$1.borderColor,
+	  [vars$11.inputBorderWidth]: refs$1.borderWidth,
+	  [vars$11.inputBorderStyle]: refs$1.borderStyle,
+	  [vars$11.inputBorderRadius]: refs$1.borderRadius,
+	  [vars$11.inputOutlineColor]: refs$1.outlineColor,
+	  [vars$11.inputOutlineOffset]: refs$1.outlineOffset,
+	  [vars$11.inputOutlineWidth]: refs$1.outlineWidth,
+	  [vars$11.inputOutlineStyle]: refs$1.outlineStyle,
+	  [vars$11.labelRequiredIndicator]: refs$1.requiredIndicator,
+	  [vars$11.inputValueTextColor]: refs$1.valueTextColor,
+	  [vars$11.inputPlaceholderTextColor]: refs$1.placeholderTextColor,
+	  [vars$11.inputBackgroundColor]: refs$1.backgroundColor,
+	  [vars$11.inputHorizontalPadding]: refs$1.horizontalPadding,
+	  [vars$11.inputHeight]: refs$1.inputHeight,
+	  [vars$11.inputDropdownButtonColor]: globalRefs$C.colors.surface.dark,
+	  [vars$11.inputDropdownButtonCursor]: 'pointer',
+	  [vars$11.inputDropdownButtonSize]: refs$1.toggleButtonSize,
+	  [vars$11.inputDropdownButtonOffset]: globalRefs$C.spacing.xs,
+	  [vars$11.overlayItemPaddingInlineStart]: globalRefs$C.spacing.xs,
+	  [vars$11.overlayItemPaddingInlineEnd]: globalRefs$C.spacing.lg,
+	  [vars$11.labelPosition]: refs$1.labelPosition,
+	  [vars$11.labelTopPosition]: refs$1.labelTopPosition,
+	  [vars$11.labelHorizontalPosition]: refs$1.labelHorizontalPosition,
+	  [vars$11.inputTransformY]: refs$1.inputTransformY,
+	  [vars$11.inputTransition]: refs$1.inputTransition,
+	  [vars$11.marginInlineStart]: refs$1.marginInlineStart,
+	  [vars$11.placeholderOpacity]: refs$1.placeholderOpacity,
+	  [vars$11.inputVerticalAlignment]: refs$1.inputVerticalAlignment,
+	  [vars$11.valueInputHeight]: refs$1.valueInputHeight,
+	  [vars$11.valueInputMarginBottom]: refs$1.valueInputMarginBottom,
 
 	  // error message icon
-	  [vars$10.errorMessageIcon]: refs$1.errorMessageIcon,
-	  [vars$10.errorMessageIconSize]: refs$1.errorMessageIconSize,
-	  [vars$10.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
-	  [vars$10.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
-	  [vars$10.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
-	  [vars$10.errorMessageFontSize]: refs$1.errorMessageFontSize,
+	  [vars$11.errorMessageIcon]: refs$1.errorMessageIcon,
+	  [vars$11.errorMessageIconSize]: refs$1.errorMessageIconSize,
+	  [vars$11.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+	  [vars$11.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+	  [vars$11.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+	  [vars$11.errorMessageFontSize]: refs$1.errorMessageFontSize,
 
 	  _readonly: {
-	    [vars$10.inputDropdownButtonCursor]: 'default',
+	    [vars$11.inputDropdownButtonCursor]: 'default',
 	  },
 
 	  // Overlay theme exposed via the component:
-	  [vars$10.overlayFontSize]: refs$1.fontSize,
-	  [vars$10.overlayFontFamily]: refs$1.fontFamily,
-	  [vars$10.overlayCursor]: 'pointer',
-	  [vars$10.overlayItemBoxShadow]: 'none',
-	  [vars$10.overlayBackground]: refs$1.backgroundColor,
-	  [vars$10.overlayTextColor]: refs$1.valueTextColor,
-	  [vars$10.overlayCheckmarkDisplay]: 'initial',
-	  [vars$10.overlaySelectedItemBackground]: 'initial',
-	  [vars$10.overlaySelectedItemHoverBackground]:
+	  [vars$11.overlayFontSize]: refs$1.fontSize,
+	  [vars$11.overlayFontFamily]: refs$1.fontFamily,
+	  [vars$11.overlayCursor]: 'pointer',
+	  [vars$11.overlayItemBoxShadow]: 'none',
+	  [vars$11.overlayBackground]: refs$1.backgroundColor,
+	  [vars$11.overlayTextColor]: refs$1.valueTextColor,
+	  [vars$11.overlayCheckmarkDisplay]: 'initial',
+	  [vars$11.overlaySelectedItemBackground]: 'initial',
+	  [vars$11.overlaySelectedItemHoverBackground]:
 	    globalRefs$C.colors.primary.highlight,
-	  [vars$10.overlaySelectedItemFocusBackground]:
+	  [vars$11.overlaySelectedItemFocusBackground]:
 	    globalRefs$C.colors.primary.highlight,
-	  [vars$10.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
-	  [vars$10.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
+	  [vars$11.overlayItemHoverBackground]: globalRefs$C.colors.primary.highlight,
+	  [vars$11.overlayItemFocusBackground]: globalRefs$C.colors.primary.highlight,
 
 	  // Overlay direct theme:
-	  [vars$10.overlay.minHeight]: '400px',
-	  [vars$10.overlay.margin]: '0',
+	  [vars$11.overlay.minHeight]: '400px',
+	  [vars$11.overlay.margin]: '0',
 
-	  [vars$10.overlay.contentHeight]: '100%',
-	  [vars$10.overlay.contentOpacity]: '1',
-	  [vars$10.overlay.scrollerMinHeight]: '1px',
+	  [vars$11.overlay.contentHeight]: '100%',
+	  [vars$11.overlay.contentOpacity]: '1',
+	  [vars$11.overlay.scrollerMinHeight]: '1px',
 	  _loading: {
-	    [vars$10.overlay.loaderTop]: '50%',
-	    [vars$10.overlay.loaderLeft]: '50%',
-	    [vars$10.overlay.loaderRight]: 'auto',
+	    [vars$11.overlay.loaderTop]: '50%',
+	    [vars$11.overlay.loaderLeft]: '50%',
+	    [vars$11.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$10.overlay.loaderMargin]: '-15px 0 0 -15px',
-	    [vars$10.overlay.loaderWidth]: '30px',
-	    [vars$10.overlay.loaderHeight]: '30px',
-	    [vars$10.overlay.loaderBorder]: '2px solid transparent',
-	    [vars$10.overlay.loaderBorderColor]:
+	    [vars$11.overlay.loaderMargin]: '-15px 0 0 -15px',
+	    [vars$11.overlay.loaderWidth]: '30px',
+	    [vars$11.overlay.loaderHeight]: '30px',
+	    [vars$11.overlay.loaderBorder]: '2px solid transparent',
+	    [vars$11.overlay.loaderBorderColor]:
 	      `${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.highlight} ${globalRefs$C.colors.primary.main} ${globalRefs$C.colors.primary.main}`,
-	    [vars$10.overlay.loaderBorderRadius]: '50%',
-	    [vars$10.overlay.contentHeight]: '100px',
-	    [vars$10.overlay.scrollerMinHeight]: '100px',
-	    [vars$10.overlay.contentOpacity]: '0',
+	    [vars$11.overlay.loaderBorderRadius]: '50%',
+	    [vars$11.overlay.contentHeight]: '100px',
+	    [vars$11.overlay.scrollerMinHeight]: '100px',
+	    [vars$11.overlay.contentOpacity]: '0',
 	  },
 	};
 
@@ -84552,13 +84588,13 @@ function requireIndex_cjs () {
 	  __proto__: null,
 	  comboBox: comboBox,
 	  default: comboBox,
-	  vars: vars$10
+	  vars: vars$11
 	});
 
-	const componentName$1b = getComponentName('badge');
+	const componentName$1c = getComponentName('badge');
 
 	class RawBadge extends createBaseClass$1({
-	  componentName: componentName$1b,
+	  componentName: componentName$1c,
 	  baseSelector: ':host > div',
 	}) {
 	  constructor() {
@@ -84576,6 +84612,7 @@ function requireIndex_cjs () {
         display: inline-flex;
       }
       :host > div {
+        position: relative;
         width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -84591,6 +84628,7 @@ function requireIndex_cjs () {
 	  createStyleMixin$1({
 	    mappings: {
 	      hostWidth: [{ selector: () => ':host', property: 'width' }],
+	      hostHeight: [{ selector: () => ':host', property: 'height' }],
 	      hostDirection: { property: 'direction' },
 
 	      fontFamily: {},
@@ -84615,6 +84653,8 @@ function requireIndex_cjs () {
 
 	      textColor: { property: 'color' },
 	      textAlign: {},
+	      boxShadow: {},
+	      textIndent: {},
 	    },
 	  }),
 	  draggableMixin$1,
@@ -84623,79 +84663,125 @@ function requireIndex_cjs () {
 
 	const globalRefs$B = getThemeRefs$1(globals);
 
-	const vars$$ = BadgeClass.cssVarList;
+	const [helperTheme$6, helperRefs$6] = createHelperVars$1(
+	  {
+	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+	  },
+	  componentName$1c,
+	);
+
+	const { shadowColor: shadowColor$6 } = helperRefs$6;
+
+	const vars$10 = BadgeClass.cssVarList;
 
 	const badge$2 = {
-	  [vars$$.hostWidth]: 'fit-content',
-	  [vars$$.hostDirection]: globalRefs$B.direction,
+	  ...helperTheme$6,
+
+	  [vars$10.hostWidth]: 'fit-content',
+	  [vars$10.hostDirection]: globalRefs$B.direction,
 
-	  [vars$$.textAlign]: 'center',
+	  [vars$10.textAlign]: 'center',
 
-	  [vars$$.fontFamily]: globalRefs$B.fonts.font1.family,
-	  [vars$$.fontWeight]: '400',
+	  [vars$10.fontFamily]: globalRefs$B.fonts.font1.family,
+	  [vars$10.fontWeight]: '400',
 
-	  [vars$$.verticalPadding]: '0.25em',
-	  [vars$$.horizontalPadding]: '0.5em',
+	  [vars$10.verticalPadding]: '0.25em',
+	  [vars$10.horizontalPadding]: '0.5em',
 
-	  [vars$$.borderWidth]: globalRefs$B.border.xs,
-	  [vars$$.borderRadius]: globalRefs$B.radius.xs,
-	  [vars$$.borderColor]: 'transparent',
-	  [vars$$.borderStyle]: 'solid',
+	  [vars$10.borderWidth]: globalRefs$B.border.xs,
+	  [vars$10.borderRadius]: globalRefs$B.radius.xs,
+	  [vars$10.borderColor]: 'transparent',
+	  [vars$10.borderStyle]: 'solid',
 
 	  _fullWidth: {
-	    [vars$$.hostWidth]: '100%',
+	    [vars$10.hostWidth]: '100%',
 	  },
 
 	  size: {
-	    xs: { [vars$$.fontSize]: '12px' },
-	    sm: { [vars$$.fontSize]: '14px' },
-	    md: { [vars$$.fontSize]: '16px' },
-	    lg: { [vars$$.fontSize]: '18px' },
+	    xs: { [vars$10.fontSize]: '12px' },
+	    sm: { [vars$10.fontSize]: '14px' },
+	    md: { [vars$10.fontSize]: '16px' },
+	    lg: { [vars$10.fontSize]: '18px' },
+	  },
+
+	  variant: {
+	    contained: {
+	      [vars$10.backgroundColor]: globalRefs$B.colors.surface.main,
+	    },
+	  },
+
+	  $breakpoints: {
+	    indicator: '(max-width: 65px)',
+	  },
+
+	  _shrinkToIndicator: {
+	    '$breakpoints.indicator': {
+	      [vars$10.hostWidth]: '13px',
+	      [vars$10.hostHeight]: '13px',
+	      [vars$10.borderRadius]: '50%',
+	      [vars$10.fontSize]: '0',
+	      [vars$10.textIndent]: '-9999px',
+	    },
 	  },
 
 	  mode: {
 	    default: {
-	      [vars$$.textColor]: globalRefs$B.colors.surface.dark,
+	      [vars$10.textColor]: globalRefs$B.colors.surface.dark,
 	      _bordered: {
-	        [vars$$.borderColor]: globalRefs$B.colors.surface.light,
+	        [vars$10.borderColor]: globalRefs$B.colors.surface.light,
 	      },
 	    },
 	    primary: {
-	      [vars$$.textColor]: globalRefs$B.colors.primary.main,
+	      [vars$10.textColor]: globalRefs$B.colors.primary.main,
 	      _bordered: {
-	        [vars$$.borderColor]: globalRefs$B.colors.primary.light,
+	        [vars$10.borderColor]: globalRefs$B.colors.primary.light,
 	      },
 	    },
 	    secondary: {
-	      [vars$$.textColor]: globalRefs$B.colors.secondary.main,
+	      [vars$10.textColor]: globalRefs$B.colors.secondary.main,
 	      _bordered: {
-	        [vars$$.borderColor]: globalRefs$B.colors.secondary.light,
+	        [vars$10.borderColor]: globalRefs$B.colors.secondary.light,
 	      },
 	    },
 	    error: {
-	      [vars$$.textColor]: globalRefs$B.colors.error.main,
+	      [vars$10.textColor]: globalRefs$B.colors.error.main,
 	      _bordered: {
-	        [vars$$.borderColor]: globalRefs$B.colors.error.light,
+	        [vars$10.borderColor]: globalRefs$B.colors.error.light,
 	      },
 	    },
 	    success: {
-	      [vars$$.textColor]: globalRefs$B.colors.success.main,
+	      [vars$10.textColor]: globalRefs$B.colors.success.main,
 	      _bordered: {
-	        [vars$$.borderColor]: globalRefs$B.colors.success.light,
+	        [vars$10.borderColor]: globalRefs$B.colors.success.light,
 	      },
 	    },
 	  },
+
+	  shadow: {
+	    sm: {
+	      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.sm} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.sm} ${shadowColor$6}`,
+	    },
+	    md: {
+	      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.md} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.md} ${shadowColor$6}`,
+	    },
+	    lg: {
+	      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.lg} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.lg} ${shadowColor$6}`,
+	    },
+	    xl: {
+	      [vars$10.boxShadow]: `${globalRefs$B.shadow.wide.xl} ${shadowColor$6}, ${globalRefs$B.shadow.narrow.xl} ${shadowColor$6}`,
+	    },
+	  },
 	};
 
 	var badge$3 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: badge$2,
-	  vars: vars$$
+	  vars: vars$10
 	});
 
-	const componentName$1a = getComponentName('avatar');
+	const componentName$1b = getComponentName('avatar');
 	class RawAvatar extends createBaseClass$1({
-	  componentName: componentName$1a,
+	  componentName: componentName$1b,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  constructor() {
@@ -84846,37 +84932,37 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$_ = {
+	const vars$$ = {
 	  ...compVars$8,
 	};
 
 	var avatar$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: avatar,
-	  vars: vars$_
+	  vars: vars$$
 	});
 
-	const vars$Z = IconClass.cssVarList;
+	const vars$_ = IconClass.cssVarList;
 
 	const icon$3 = {};
 
 	var icon$4 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: icon$3,
-	  vars: vars$Z
+	  vars: vars$_
 	});
 
-	const vars$Y = ImageClass.cssVarList;
+	const vars$Z = ImageClass.cssVarList;
 
 	const image = {};
 
 	var image$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: image,
-	  vars: vars$Y
+	  vars: vars$Z
 	});
 
-	const componentName$19 = getComponentName('list-item');
+	const componentName$1a = getComponentName('list-item');
 
 	const customMixin$f = (superclass) =>
 	  class ListItemMixinClass extends superclass {
@@ -84933,12 +85019,12 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	  customMixin$f,
 	  activeableMixin,
-	)(createBaseClass$1({ componentName: componentName$19, baseSelector: 'slot' }));
+	)(createBaseClass$1({ componentName: componentName$1a, baseSelector: 'slot' }));
 
-	const componentName$18 = getComponentName('list');
+	const componentName$19 = getComponentName('list');
 
 	class RawList extends createBaseClass$1({
-	  componentName: componentName$18,
+	  componentName: componentName$19,
 	  baseSelector: '.wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -85109,7 +85195,7 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawList);
 
-	const componentName$17 = getComponentName('apps-list');
+	const componentName$18 = getComponentName('apps-list');
 
 	const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
@@ -85233,7 +85319,7 @@ function requireIndex_cjs () {
 	    slots: ['empty-state'],
 	    wrappedEleName: 'descope-list',
 	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-	    componentName: componentName$17,
+	    componentName: componentName$18,
 	    style: () => `
       :host {
         width: 100%;
@@ -85268,60 +85354,60 @@ function requireIndex_cjs () {
 	  }),
 	);
 
-	const vars$X = AppsListClass.cssVarList;
+	const vars$Y = AppsListClass.cssVarList;
 	const globalRefs$z = getThemeRefs$1(globals);
 
 	const defaultHeight = '400px';
 
 	const appsList = {
-	  [vars$X.itemsTextAlign]: 'start',
-	  [vars$X.hostDirection]: globalRefs$z.direction,
-	  [vars$X.maxHeight]: defaultHeight,
-	  [vars$X.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
+	  [vars$Y.itemsTextAlign]: 'start',
+	  [vars$Y.hostDirection]: globalRefs$z.direction,
+	  [vars$Y.maxHeight]: defaultHeight,
+	  [vars$Y.itemHoverBackgroundColor]: globalRefs$z.colors.surface.highlight,
 
 	  _empty: {
-	    [vars$X.minHeight]: defaultHeight,
+	    [vars$Y.minHeight]: defaultHeight,
 	  },
 
 	  size: {
 	    xs: {
-	      [vars$X.itemsFontSize]: '14px',
-	      [vars$X.itemsFontWeight]: 'normal',
+	      [vars$Y.itemsFontSize]: '14px',
+	      [vars$Y.itemsFontWeight]: 'normal',
 	    },
 	    sm: {
-	      [vars$X.itemsFontSize]: '14px',
-	      [vars$X.itemsFontWeight]: 'normal',
+	      [vars$Y.itemsFontSize]: '14px',
+	      [vars$Y.itemsFontWeight]: 'normal',
 	    },
 	    md: {
-	      [vars$X.itemsFontSize]: '16px',
-	      [vars$X.itemsFontWeight]: 'normal',
+	      [vars$Y.itemsFontSize]: '16px',
+	      [vars$Y.itemsFontWeight]: 'normal',
 	    },
 	    lg: {
-	      [vars$X.itemsFontSize]: '20px',
-	      [vars$X.itemsFontWeight]: 'normal',
+	      [vars$Y.itemsFontSize]: '20px',
+	      [vars$Y.itemsFontWeight]: 'normal',
 	    },
 	  },
 
 	  itemPadding: {
 	    xs: {
-	      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xs,
-	      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xs,
+	      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.xs,
+	      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.xs,
 	    },
 	    sm: {
-	      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.sm,
-	      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.sm,
+	      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.sm,
+	      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.sm,
 	    },
 	    md: {
-	      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.md,
-	      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.md,
+	      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.md,
+	      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.md,
 	    },
 	    lg: {
-	      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.lg,
-	      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.lg,
+	      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.lg,
+	      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.lg,
 	    },
 	    xl: {
-	      [vars$X.itemVerticalPadding]: globalRefs$z.spacing.xl,
-	      [vars$X.itemHorizontalPadding]: globalRefs$z.spacing.xl,
+	      [vars$Y.itemVerticalPadding]: globalRefs$z.spacing.xl,
+	      [vars$Y.itemHorizontalPadding]: globalRefs$z.spacing.xl,
 	    },
 	  },
 	};
@@ -85329,7 +85415,7 @@ function requireIndex_cjs () {
 	var appsList$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: appsList,
-	  vars: vars$X
+	  vars: vars$Y
 	});
 
 	const globalRefs$y = getThemeRefs$1(globals);
@@ -85338,7 +85424,7 @@ function requireIndex_cjs () {
 
 	const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$18,
+	  componentName$19,
 	);
 
 	const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -85399,7 +85485,7 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$W = {
+	const vars$X = {
 	  ...compVars$7,
 	  ...helperVars$5,
 	};
@@ -85407,60 +85493,60 @@ function requireIndex_cjs () {
 	var list$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: list,
-	  vars: vars$W
+	  vars: vars$X
 	});
 
 	const globalRefs$x = getThemeRefs$1(globals);
 
-	const vars$V = ListItemClass.cssVarList;
+	const vars$W = ListItemClass.cssVarList;
 
 	const listItem = {
-	  [vars$V.backgroundColor]: globalRefs$x.colors.surface.main,
-	  [vars$V.verticalPadding]: globalRefs$x.spacing.lg,
-	  [vars$V.horizontalPadding]: globalRefs$x.spacing.lg,
-	  [vars$V.gap]: globalRefs$x.spacing.md,
-	  [vars$V.borderStyle]: 'solid',
-	  [vars$V.borderWidth]: globalRefs$x.border.xs,
-	  [vars$V.borderColor]: globalRefs$x.colors.surface.main,
-	  [vars$V.borderRadius]: globalRefs$x.radius.sm,
-	  [vars$V.cursor]: 'pointer',
-	  [vars$V.alignItems]: 'center',
-	  [vars$V.flexDirection]: 'row',
-	  [vars$V.transition]: 'border-color 0.2s, background-color 0.2s',
+	  [vars$W.backgroundColor]: globalRefs$x.colors.surface.main,
+	  [vars$W.verticalPadding]: globalRefs$x.spacing.lg,
+	  [vars$W.horizontalPadding]: globalRefs$x.spacing.lg,
+	  [vars$W.gap]: globalRefs$x.spacing.md,
+	  [vars$W.borderStyle]: 'solid',
+	  [vars$W.borderWidth]: globalRefs$x.border.xs,
+	  [vars$W.borderColor]: globalRefs$x.colors.surface.main,
+	  [vars$W.borderRadius]: globalRefs$x.radius.sm,
+	  [vars$W.cursor]: 'pointer',
+	  [vars$W.alignItems]: 'center',
+	  [vars$W.flexDirection]: 'row',
+	  [vars$W.transition]: 'border-color 0.2s, background-color 0.2s',
 
 	  variant: {
 	    tile: {
-	      [vars$V.alignItems]: 'flex-start',
-	      [vars$V.flexDirection]: 'column',
-	      [vars$V.borderColor]: globalRefs$x.colors.surface.light,
+	      [vars$W.alignItems]: 'flex-start',
+	      [vars$W.flexDirection]: 'column',
+	      [vars$W.borderColor]: globalRefs$x.colors.surface.light,
 	    },
 	  },
 
 	  _hover: {
-	    [vars$V.backgroundColor]: globalRefs$x.colors.surface.highlight,
+	    [vars$W.backgroundColor]: globalRefs$x.colors.surface.highlight,
 	  },
 
 	  _active: {
-	    [vars$V.backgroundColor]: globalRefs$x.colors.surface.main,
-	    [vars$V.borderColor]: globalRefs$x.colors.primary.light,
-	    [vars$V.outline]: `1px solid ${globalRefs$x.colors.primary.light}`,
+	    [vars$W.backgroundColor]: globalRefs$x.colors.surface.main,
+	    [vars$W.borderColor]: globalRefs$x.colors.primary.light,
+	    [vars$W.outline]: `1px solid ${globalRefs$x.colors.primary.light}`,
 	  },
 	};
 
 	var listItem$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: listItem,
-	  vars: vars$V
+	  vars: vars$W
 	});
 
-	const componentName$16 = getComponentName('autocomplete-field-internal');
+	const componentName$17 = getComponentName('autocomplete-field-internal');
 
 	createBaseInputClass$1({
-	  componentName: componentName$16,
+	  componentName: componentName$17,
 	  baseSelector: '',
 	});
 
-	const componentName$15 = getComponentName('autocomplete-field');
+	const componentName$16 = getComponentName('autocomplete-field');
 
 	const customMixin$d = (superclass) =>
 	  class AutocompleteFieldMixinClass extends superclass {
@@ -85481,15 +85567,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$16}
+      <${componentName$17}
         tabindex="-1"
-      ></${componentName$16}>
+      ></${componentName$17}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$16,
+	        componentName$17,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -85608,34 +85694,34 @@ function requireIndex_cjs () {
     }
   `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$15,
+	    componentName: componentName$16,
 	  }),
 	);
 
-	const vars$U = AutocompleteFieldClass.cssVarList;
+	const vars$V = AutocompleteFieldClass.cssVarList;
 	const globalRefs$w = getThemeRefs$1(globals);
 
 	const autocompleteField = {
-	  [vars$U.hostWidth]: refs$1.width,
-	  [vars$U.hostDirection]: refs$1.direction,
-	  [vars$U.fontSize]: refs$1.fontSize,
-	  [vars$U.checkmarkDisplay]: 'none',
-	  [vars$U.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
-	  [vars$U.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
-	  [vars$U.selectedItemBackground]: globalRefs$w.colors.primary.light,
-	  [vars$U.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
-	  [vars$U.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
-	  [vars$U.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
+	  [vars$V.hostWidth]: refs$1.width,
+	  [vars$V.hostDirection]: refs$1.direction,
+	  [vars$V.fontSize]: refs$1.fontSize,
+	  [vars$V.checkmarkDisplay]: 'none',
+	  [vars$V.itemPaddingInlineStart]: globalRefs$w.spacing.lg,
+	  [vars$V.itemPaddingInlineEnd]: globalRefs$w.spacing.lg,
+	  [vars$V.selectedItemBackground]: globalRefs$w.colors.primary.light,
+	  [vars$V.selectedItemHoverBackground]: globalRefs$w.colors.primary.light,
+	  [vars$V.selectedItemFocusBackground]: globalRefs$w.colors.primary.light,
+	  [vars$V.itemHoverBackground]: globalRefs$w.colors.primary.highlight,
 
 	  _fullWidth: {
-	    [vars$U.hostWidth]: '100%',
+	    [vars$V.hostWidth]: '100%',
 	  },
 	};
 
 	var autocompleteField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: autocompleteField,
-	  vars: vars$U
+	  vars: vars$V
 	});
 
 	const initGoogleMapsLoader = (apiKey) => {
@@ -85862,7 +85948,7 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	const componentName$14 = getComponentName('address-field-internal');
+	const componentName$15 = getComponentName('address-field-internal');
 
 	const GOOGLE_MAPS_CONNECTOR_TEMPLATE = 'google-maps-places';
 	const RADAR_CONNECTOR_TEMPLATE = 'radar';
@@ -85873,7 +85959,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseInputClass$5 = createBaseInputClass$1({
-	  componentName: componentName$14,
+	  componentName: componentName$15,
 	  baseSelector: '',
 	});
 	const initConnectorAttrs = ['public-api-key'];
@@ -85980,7 +86066,7 @@ function requireIndex_cjs () {
 	  connectorMixin({ connectorClasses: CONNECTOR_CLASSES }),
 	)(RawAddressFieldInternal);
 
-	const componentName$13 = getComponentName('address-field');
+	const componentName$14 = getComponentName('address-field');
 
 	const customMixin$c = (superclass) =>
 	  class AddressFieldMixinClass extends superclass {
@@ -86009,15 +86095,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$14}
+      <${componentName$15}
         tabindex="-1"
-      ></${componentName$14}>
+      ></${componentName$15}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$14,
+	        componentName$15,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -86095,7 +86181,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$14} {
+  ${componentName$15} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -86103,30 +86189,30 @@ function requireIndex_cjs () {
     max-width: 100%;
   }
 
-  ${componentName$14} ::slotted {
+  ${componentName$15} ::slotted {
     padding: 0;
   }
 `,
 	    excludeAttrsSync: ['tabindex', 'error-message', 'label', 'style'],
-	    componentName: componentName$13,
+	    componentName: componentName$14,
 	  }),
 	);
 
-	const vars$T = AddressFieldClass.cssVarList;
+	const vars$U = AddressFieldClass.cssVarList;
 
 	const addressField = {
-	  [vars$T.hostWidth]: refs$1.width,
-	  [vars$T.hostDirection]: refs$1.direction,
+	  [vars$U.hostWidth]: refs$1.width,
+	  [vars$U.hostDirection]: refs$1.direction,
 
 	  _fullWidth: {
-	    [vars$T.hostWidth]: '100%',
+	    [vars$U.hostWidth]: '100%',
 	  },
 	};
 
 	var addressField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: addressField,
-	  vars: vars$T
+	  vars: vars$U
 	});
 
 	var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwNCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
@@ -86148,12 +86234,12 @@ function requireIndex_cjs () {
 	  return timeParts.join(':');
 	};
 
-	const componentName$12 = getComponentName('timer');
+	const componentName$13 = getComponentName('timer');
 
 	const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
 	const BaseClass$7 = createBaseClass$1({
-	  componentName: componentName$12,
+	  componentName: componentName$13,
 	  baseSelector: ':host > .wrapper',
 	});
 
@@ -86337,44 +86423,44 @@ function requireIndex_cjs () {
 	)(RawTimer);
 
 	const globalRefs$v = getThemeRefs$1(globals);
-	const vars$S = TimerClass.cssVarList;
+	const vars$T = TimerClass.cssVarList;
 
 	const timer = {
-	  [vars$S.hostDirection]: globalRefs$v.direction,
-	  [vars$S.gap]: '0.25em',
-	  [vars$S.fontFamily]: globalRefs$v.fonts.font1.family,
-	  [vars$S.minHeight]: '1.5em',
-	  [vars$S.lineHeight]: '1em',
-	  [vars$S.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
-	  [vars$S.textColor]: globalRefs$v.colors.surface.contrast,
-	  [vars$S.iconColor]: globalRefs$v.colors.surface.contrast,
-	  [vars$S.iconSize]: '1em',
+	  [vars$T.hostDirection]: globalRefs$v.direction,
+	  [vars$T.gap]: '0.25em',
+	  [vars$T.fontFamily]: globalRefs$v.fonts.font1.family,
+	  [vars$T.minHeight]: '1.5em',
+	  [vars$T.lineHeight]: '1em',
+	  [vars$T.fontWeight]: globalRefs$v.fonts.font1.fontWeight,
+	  [vars$T.textColor]: globalRefs$v.colors.surface.contrast,
+	  [vars$T.iconColor]: globalRefs$v.colors.surface.contrast,
+	  [vars$T.iconSize]: '1em',
 
 	  size: {
-	    xs: { [vars$S.fontSize]: '12px' },
-	    sm: { [vars$S.fontSize]: '14px' },
-	    md: { [vars$S.fontSize]: '16px' },
-	    lg: { [vars$S.fontSize]: '18px' },
+	    xs: { [vars$T.fontSize]: '12px' },
+	    sm: { [vars$T.fontSize]: '14px' },
+	    md: { [vars$T.fontSize]: '16px' },
+	    lg: { [vars$T.fontSize]: '18px' },
 	  },
 
 	  textAlign: {
-	    right: { [vars$S.textAlign]: 'right' },
-	    left: { [vars$S.textAlign]: 'left' },
-	    center: { [vars$S.textAlign]: 'center' },
+	    right: { [vars$T.textAlign]: 'right' },
+	    left: { [vars$T.textAlign]: 'left' },
+	    center: { [vars$T.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$S.hostWidth]: '100%',
+	    [vars$T.hostWidth]: '100%',
 	  },
 	};
 
 	var timer$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: timer,
-	  vars: vars$S
+	  vars: vars$T
 	});
 
-	const componentName$11 = getComponentName('timer-button');
+	const componentName$12 = getComponentName('timer-button');
 
 	const buttonAttrs = [
 	  'button-variant',
@@ -86405,7 +86491,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$6 = createBaseClass$1({
-	  componentName: componentName$11,
+	  componentName: componentName$12,
 	  baseSelector: ':host > div',
 	});
 
@@ -86514,30 +86600,30 @@ function requireIndex_cjs () {
 	)(RawTimerButton);
 
 	const globalRefs$u = getThemeRefs$1(globals);
-	const vars$R = TimerButtonClass.cssVarList;
+	const vars$S = TimerButtonClass.cssVarList;
 
 	const timerButton = {
-	  [vars$R.gap]: globalRefs$u.spacing.sm,
-	  [vars$R.flexDirection]: 'column',
+	  [vars$S.gap]: globalRefs$u.spacing.sm,
+	  [vars$S.flexDirection]: 'column',
 
 	  _horizontal: {
-	    [vars$R.flexDirection]: 'row',
+	    [vars$S.flexDirection]: 'row',
 	  },
 
 	  _fullWidth: {
-	    [vars$R.hostWidth]: '100%',
+	    [vars$S.hostWidth]: '100%',
 	  },
 	};
 
 	var timerButton$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: timerButton,
-	  vars: vars$R
+	  vars: vars$S
 	});
 
-	const componentName$10 = getComponentName('password-strength');
+	const componentName$11 = getComponentName('password-strength');
 	class RawPasswordStrength extends createBaseClass$1({
-	  componentName: componentName$10,
+	  componentName: componentName$11,
 	  baseSelector: ':host > .wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -86728,22 +86814,22 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	const vars$Q = {
+	const vars$R = {
 	  ...compVars$6,
 	};
 
 	var passwordStrength$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: passwordStrength,
-	  vars: vars$Q
+	  vars: vars$R
 	});
 
 	var chevronIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+Cjwvc3ZnPgo=";
 
-	const componentName$$ = getComponentName('collapsible-container');
+	const componentName$10 = getComponentName('collapsible-container');
 
 	class RawCollapsibleContainer extends createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$10,
 	  baseSelector: 'slot',
 	}) {
 	  static get observedAttributes() {
@@ -86978,7 +87064,7 @@ function requireIndex_cjs () {
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$$
+	  componentName$10
 	);
 
 	const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -87078,7 +87164,7 @@ function requireIndex_cjs () {
 	  }
 	};
 
-	const vars$P = {
+	const vars$Q = {
 	  ...compVars$5,
 	  ...helperVars$4,
 	};
@@ -87086,10 +87172,10 @@ function requireIndex_cjs () {
 	var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: collapsibleContainer,
-	  vars: vars$P
+	  vars: vars$Q
 	});
 
-	const componentName$_ = getComponentName('recovery-codes');
+	const componentName$$ = getComponentName('recovery-codes');
 
 	const itemRenderer$3 = ({ value }, _, ref) => {
 	  return `
@@ -87100,7 +87186,7 @@ function requireIndex_cjs () {
 	};
 
 	class RawRecoveryCodes extends createBaseClass$1({
-	  componentName: componentName$_,
+	  componentName: componentName$$,
 	  baseSelector: ':host > div',
 	}) {
 	  static get observedAttributes() {
@@ -87240,35 +87326,35 @@ function requireIndex_cjs () {
 	)(RawRecoveryCodes);
 
 	const globalRefs$r = getThemeRefs$1(globals);
-	const vars$O = RecoveryCodesClass.cssVarList;
+	const vars$P = RecoveryCodesClass.cssVarList;
 	const textVars$5 = TextClass.cssVarList;
 
 	const recoveryCodes = {
-	  [vars$O.hostMinWidth]: '190px',
-	  [vars$O.hostDirection]: globalRefs$r.direction,
-	  [vars$O.iconColor]: useVar$1(textVars$5.textColor),
-	  [vars$O.iconSize]: useVar$1(textVars$5.fontSize),
-	  [vars$O.iconGap]: '8px',
-	  [vars$O.bulletGap]: '0.35em',
+	  [vars$P.hostMinWidth]: '190px',
+	  [vars$P.hostDirection]: globalRefs$r.direction,
+	  [vars$P.iconColor]: useVar$1(textVars$5.textColor),
+	  [vars$P.iconSize]: useVar$1(textVars$5.fontSize),
+	  [vars$P.iconGap]: '8px',
+	  [vars$P.bulletGap]: '0.35em',
 
 	  textAlign: {
-	    right: { [vars$O.textAlign]: 'flex-end' },
-	    left: { [vars$O.textAlign]: 'flex-start' },
-	    center: { [vars$O.textAlign]: 'center' },
+	    right: { [vars$P.textAlign]: 'flex-end' },
+	    left: { [vars$P.textAlign]: 'flex-start' },
+	    center: { [vars$P.textAlign]: 'center' },
 	  },
 
 	  _fullWidth: {
-	    [vars$O.hostWidth]: '100%',
+	    [vars$P.hostWidth]: '100%',
 	  },
 	};
 
 	var recoveryCodes$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: recoveryCodes,
-	  vars: vars$O
+	  vars: vars$P
 	});
 
-	const componentName$Z = getComponentName('outbound-apps');
+	const componentName$_ = getComponentName('outbound-apps');
 
 	const itemRenderer$2 = (
 	  { name, description, logo, appId, isConnected },
@@ -87314,7 +87400,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$5 = createBaseClass$1({
-	  componentName: componentName$Z,
+	  componentName: componentName$_,
 	  baseSelector: 'descope-list',
 	});
 
@@ -87490,36 +87576,36 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawOutboundAppsClass);
 
-	const vars$N = OutboundAppsClass.cssVarList;
+	const vars$O = OutboundAppsClass.cssVarList;
 
 	const outboundApps = {
-	  [vars$N.iconColor]: globals.colors.primary.main,
-	  [vars$N.errorIconColor]: globals.colors.error.main,
+	  [vars$O.iconColor]: globals.colors.primary.main,
+	  [vars$O.errorIconColor]: globals.colors.error.main,
 
-	  [vars$N.appLogoGap]: globals.spacing.md,
-	  [vars$N.contentGap]: globals.spacing.xs,
+	  [vars$O.appLogoGap]: globals.spacing.md,
+	  [vars$O.contentGap]: globals.spacing.xs,
 
 	  // list-item overrides
-	  [vars$N.itemCursor]: 'default',
-	  [vars$N.itemOutline]: 'none',
-	  [vars$N.itemBorderColor]: 'transparent',
+	  [vars$O.itemCursor]: 'default',
+	  [vars$O.itemOutline]: 'none',
+	  [vars$O.itemBorderColor]: 'transparent',
 
-	  [vars$N.listPadding]: '0',
-	  [vars$N.listBorderWidth]: '0',
-	  [vars$N.listBoxShadow]: 'none',
+	  [vars$O.listPadding]: '0',
+	  [vars$O.listBorderWidth]: '0',
+	  [vars$O.listBoxShadow]: 'none',
 
 	  size: {
 	    xs: {
-	      [vars$N.fontSize]: '0.6em',
+	      [vars$O.fontSize]: '0.6em',
 	    },
 	    sm: {
-	      [vars$N.fontSize]: '0.8em',
+	      [vars$O.fontSize]: '0.8em',
 	    },
 	    md: {
-	      [vars$N.fontSize]: '1em',
+	      [vars$O.fontSize]: '1em',
 	    },
 	    lg: {
-	      [vars$N.fontSize]: '1.5em',
+	      [vars$O.fontSize]: '1.5em',
 	    },
 	  },
 	};
@@ -87527,13 +87613,13 @@ function requireIndex_cjs () {
 	var outboundApps$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: outboundApps,
-	  vars: vars$N
+	  vars: vars$O
 	});
 
-	const componentName$Y = getComponentName('outbound-app-button');
+	const componentName$Z = getComponentName('outbound-app-button');
 
 	class RawOutboundAppButton extends createBaseClass$1({
-	  componentName: componentName$Y,
+	  componentName: componentName$Z,
 	  baseSelector: ':host > descope-button',
 	}) {
 	  static get observedAttributes() {
@@ -87632,12 +87718,12 @@ function requireIndex_cjs () {
 	  },
 	};
 
-	const vars$M = compVars$4;
+	const vars$N = compVars$4;
 
 	var outboundAppButton$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: outboundAppButton,
-	  vars: vars$M
+	  vars: vars$N
 	});
 
 	var desktopDeviceIconLight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi45IDE4IDQgMThIMFYyMEgyNFYxOEgyMFpNNCA2SDIwVjE2SDRWNloiIGZpbGw9IiM2MzZDNzQiLz4KPC9zdmc+Cg==";
@@ -87715,7 +87801,7 @@ function requireIndex_cjs () {
 	  };
 	};
 
-	const componentName$X = getComponentName('trusted-devices');
+	const componentName$Y = getComponentName('trusted-devices');
 
 	const itemRenderer$1 = (
 	  { id, name, lastLoginDate, deviceType, isCurrent },
@@ -87804,7 +87890,7 @@ function requireIndex_cjs () {
 	};
 
 	const BaseClass$4 = createBaseClass$1({
-	  componentName: componentName$X,
+	  componentName: componentName$Y,
 	  baseSelector: ListClass.componentName,
 	});
 
@@ -88094,51 +88180,51 @@ function requireIndex_cjs () {
 	  componentNameValidationMixin$1,
 	)(RawTrustedDevicesClass);
 
-	const vars$L = TrustedDevicesClass.cssVarList;
+	const vars$M = TrustedDevicesClass.cssVarList;
 
 	const TrustedDevices = {
-	  [vars$L.hostWidth]: 'auto',
-	  [vars$L.hostWidth]: '300px',
-	  [vars$L.hostMinWidth]: '300px',
-
-	  [vars$L.listBackgroundColor]: 'transparent',
-	  [vars$L.listBorderRadius]: '0',
-	  [vars$L.listBorderWidth]: '0',
-	  [vars$L.listPadding]: '0',
-	  [vars$L.listBoxShadow]: 'none',
-	  [vars$L.listItemsGap]: globals.spacing.lg,
-
-	  [vars$L.itemBorderColor]: globals.colors.surface.light,
-	  [vars$L.itemVerticalPadding]: globals.spacing.lg,
-	  [vars$L.itemHorizontalPadding]: globals.spacing.lg,
-	  [vars$L.itemBorderRadius]: globals.radius.xs,
-	  [vars$L.itemOutline]: 'transparent',
-	  [vars$L.itemBackgroundColor]: 'transparent',
-	  [vars$L.itemCursor]: 'default',
-	  [vars$L.itemContentGap]: globals.spacing.sm,
-
-	  [vars$L.badgeBorderColor]: globals.colors.surface.light,
-	  [vars$L.badgeTextColor]: globals.colors.surface.dark,
-	  [vars$L.badgeBorderRadius]: globals.radius.xs,
-	  [vars$L.badgeBackgroundColor]: globals.colors.surface.main,
-
-	  [vars$L.devicePanelGap]: globals.spacing.md,
-	  [vars$L.deviceIconGap]: globals.spacing.md,
-	  [vars$L.deviceIconSize]: '24px',
-	  [vars$L.lastLoginLabelGap]: globals.spacing.xs,
+	  [vars$M.hostWidth]: 'auto',
+	  [vars$M.hostWidth]: '300px',
+	  [vars$M.hostMinWidth]: '300px',
+
+	  [vars$M.listBackgroundColor]: 'transparent',
+	  [vars$M.listBorderRadius]: '0',
+	  [vars$M.listBorderWidth]: '0',
+	  [vars$M.listPadding]: '0',
+	  [vars$M.listBoxShadow]: 'none',
+	  [vars$M.listItemsGap]: globals.spacing.lg,
+
+	  [vars$M.itemBorderColor]: globals.colors.surface.light,
+	  [vars$M.itemVerticalPadding]: globals.spacing.lg,
+	  [vars$M.itemHorizontalPadding]: globals.spacing.lg,
+	  [vars$M.itemBorderRadius]: globals.radius.xs,
+	  [vars$M.itemOutline]: 'transparent',
+	  [vars$M.itemBackgroundColor]: 'transparent',
+	  [vars$M.itemCursor]: 'default',
+	  [vars$M.itemContentGap]: globals.spacing.sm,
+
+	  [vars$M.badgeBorderColor]: globals.colors.surface.light,
+	  [vars$M.badgeTextColor]: globals.colors.surface.dark,
+	  [vars$M.badgeBorderRadius]: globals.radius.xs,
+	  [vars$M.badgeBackgroundColor]: globals.colors.surface.main,
+
+	  [vars$M.devicePanelGap]: globals.spacing.md,
+	  [vars$M.deviceIconGap]: globals.spacing.md,
+	  [vars$M.deviceIconSize]: '24px',
+	  [vars$M.lastLoginLabelGap]: globals.spacing.xs,
 
 	  _fullWidth: {
-	    [vars$L.hostWidth]: '100%',
+	    [vars$M.hostWidth]: '100%',
 	  },
 	};
 
 	var trustedDevices = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: TrustedDevices,
-	  vars: vars$L
+	  vars: vars$M
 	});
 
-	const componentName$W = getComponentName('tooltip');
+	const componentName$X = getComponentName('tooltip');
 
 	const tooltipAttrs = [
 	  'text',
@@ -88149,7 +88235,7 @@ function requireIndex_cjs () {
 	];
 
 	const BaseClass$3 = createBaseClass$1({
-	  componentName: componentName$W,
+	  componentName: componentName$X,
 	  baseSelector: 'vaadin-tooltip',
 	});
 
@@ -88398,13 +88484,13 @@ function requireIndex_cjs () {
 	)(RawTooltip);
 
 	const globalRefs$q = getThemeRefs$1(globals);
-	const vars$K = TooltipClass.cssVarList;
+	const vars$L = TooltipClass.cssVarList;
 
 	const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars$1(
 	  {
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$W
+	  componentName$X
 	);
 
 	const { shadowColor: shadowColor$3 } = helperRefs$3;
@@ -88412,36 +88498,36 @@ function requireIndex_cjs () {
 
 	const tooltip = {
 	  ...helperTheme$3,
-	  [vars$K.fontFamily]: globalRefs$q.fonts.font1.family,
-	  [vars$K.fontSize]: globals.typography.body2.size,
-	  [vars$K.fontWeight]: globals.typography.body2.weight,
-	  [vars$K.textColor]: globalRefs$q.colors.surface.contrast,
-	  [vars$K.hostDirection]: globalRefs$q.direction,
-	  [vars$K.backgroundColor]: globalRefs$q.colors.surface.main,
-	  [vars$K.borderColor]: globalRefs$q.colors.surface.light,
-	  [vars$K.borderStyle]: 'solid',
-	  [vars$K.borderWidth]: globalRefs$q.border.xs,
-	  [vars$K.borderRadius]: globalRefs$q.radius.xs,
-	  [vars$K.horizontalPadding]: globalRefs$q.spacing.md,
-	  [vars$K.verticalPadding]: globalRefs$q.spacing.sm,
-	  [vars$K.boxShadow]: defaultShadow,
+	  [vars$L.fontFamily]: globalRefs$q.fonts.font1.family,
+	  [vars$L.fontSize]: globals.typography.body2.size,
+	  [vars$L.fontWeight]: globals.typography.body2.weight,
+	  [vars$L.textColor]: globalRefs$q.colors.surface.contrast,
+	  [vars$L.hostDirection]: globalRefs$q.direction,
+	  [vars$L.backgroundColor]: globalRefs$q.colors.surface.main,
+	  [vars$L.borderColor]: globalRefs$q.colors.surface.light,
+	  [vars$L.borderStyle]: 'solid',
+	  [vars$L.borderWidth]: globalRefs$q.border.xs,
+	  [vars$L.borderRadius]: globalRefs$q.radius.xs,
+	  [vars$L.horizontalPadding]: globalRefs$q.spacing.md,
+	  [vars$L.verticalPadding]: globalRefs$q.spacing.sm,
+	  [vars$L.boxShadow]: defaultShadow,
 
 	  shadow: {
 	    sm: {
-	      [vars$K.boxShadow]: defaultShadow,
+	      [vars$L.boxShadow]: defaultShadow,
 	    },
 	    md: {
-	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
+	      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.md} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.md} ${shadowColor$3}`,
 	    },
 	    lg: {
-	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
+	      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.lg} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.lg} ${shadowColor$3}`,
 	    },
 	    xl: {
-	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$3}`,
+	      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide.xl} ${shadowColor$3}, ${globalRefs$q.shadow.narrow.xl} ${shadowColor$3}`,
 	    },
 	    '2xl': {
 	      [helperVars$3.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-	      [vars$K.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
+	      [vars$L.boxShadow]: `${globalRefs$q.shadow.wide['2xl']} ${shadowColor$3}`,
 	    },
 	  },
 	};
@@ -88449,7 +88535,7 @@ function requireIndex_cjs () {
 	var tooltip$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: tooltip,
-	  vars: vars$K
+	  vars: vars$L
 	});
 
 	// Data service for country/subdivision/city data.
@@ -88502,7 +88588,7 @@ function requireIndex_cjs () {
 	const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
 	  fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-	const componentName$V = getComponentName(
+	const componentName$W = getComponentName(
 	  'country-subdivision-city-field-internal',
 	);
 
@@ -88562,7 +88648,7 @@ function requireIndex_cjs () {
 	// --- Base class ---
 
 	const BaseInputClass$4 = createBaseInputClass$1({
-	  componentName: componentName$V,
+	  componentName: componentName$W,
 	  baseSelector: '',
 	});
 
@@ -88738,7 +88824,7 @@ function requireIndex_cjs () {
 	      if (e.isTrusted) {
 	        const firstInvalidCombo = this.#allCombos.find(
 	          (combo) =>
-	            !combo.classList.contains(`${componentName$V}-hidden`) &&
+	            !combo.classList.contains(`${componentName$W}-hidden`) &&
 	            !combo.checkValidity(),
 	        );
 	        (firstInvalidCombo || this.#getFirstVisibleCombo())?.focus();
@@ -88835,7 +88921,7 @@ function requireIndex_cjs () {
 	  // Iterate in reverse so reportValidity's focus() lands on the first invalid combo last.
 	  #handleInvalidCombos() {
 	    for (const combo of [...this.#allCombos].reverse()) {
-	      if (combo.classList.contains(`${componentName$V}-hidden`)) continue;
+	      if (combo.classList.contains(`${componentName$W}-hidden`)) continue;
 	      if (!combo.checkValidity()) combo.reportValidity();
 	    }
 	  }
@@ -89108,7 +89194,7 @@ function requireIndex_cjs () {
 	      if (!this.#pendingValue && this.#defaultCountry)
 	        this.#onCountrySelected(this.#defaultCountry);
 	    } catch (e) {
-	      console.error(`[${componentName$V}] Failed to load countries`, e);
+	      console.error(`[${componentName$W}] Failed to load countries`, e);
 	    } finally {
 	      this.#countryComboBox.removeAttribute('loading');
 	    }
@@ -89133,7 +89219,7 @@ function requireIndex_cjs () {
 	      }
 	    } catch (e) {
 	      console.error(
-	        `[${componentName$V}] Failed to load subdivisions for ${countryIso2}`,
+	        `[${componentName$W}] Failed to load subdivisions for ${countryIso2}`,
 	        e,
 	      );
 	      this.#subdivisionVisible = false;
@@ -89161,7 +89247,7 @@ function requireIndex_cjs () {
 	      }
 	    } catch (e) {
 	      console.error(
-	        `[${componentName$V}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
+	        `[${componentName$W}] Failed to load cities for ${countryIso2}${stateCode ? `/${stateCode}` : ''}`,
 	        e,
 	      );
 	    } finally {
@@ -89253,7 +89339,7 @@ function requireIndex_cjs () {
 	  }
 
 	  #setVisible(el, visible) {
-	    el?.classList.toggle(`${componentName$V}-hidden`, !visible);
+	    el?.classList.toggle(`${componentName$W}-hidden`, !visible);
 	  }
 
 	  #updateRequiredOnCombos() {
@@ -89323,7 +89409,7 @@ function requireIndex_cjs () {
 
 	  #getFirstVisibleCombo() {
 	    return this.#allCombos.find(
-	      (combo) => !combo.classList.contains(`${componentName$V}-hidden`),
+	      (combo) => !combo.classList.contains(`${componentName$W}-hidden`),
 	    );
 	  }
 
@@ -89340,7 +89426,7 @@ function requireIndex_cjs () {
 	  RawCountrySubdivisionCityFieldInternal,
 	);
 
-	const componentName$U = getComponentName('country-subdivision-city-field');
+	const componentName$V = getComponentName('country-subdivision-city-field');
 
 	const customMixin$b = (superclass) =>
 	  class CountrySubdivisionCityFieldMixinClass extends superclass {
@@ -89350,15 +89436,15 @@ function requireIndex_cjs () {
 	      const template = document.createElement('template');
 
 	      template.innerHTML = `
-      <${componentName$V}
+      <${componentName$W}
         tabindex="-1"
-      ></${componentName$V}>
+      ></${componentName$W}>
       `;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
 
 	      this.inputElement = this.shadowRoot.querySelector(
-	        componentName$V,
+	        componentName$W,
 	      );
 
 	      forwardAttrs(this, this.inputElement, {
@@ -89395,11 +89481,11 @@ function requireIndex_cjs () {
 	const host$l = { selector: () => ':host' };
 
 	const internalWrapper$2 = {
-	  selector: `${componentName$V} > .wrapper`,
+	  selector: `${componentName$W} > .wrapper`,
 	};
 
 	const internalComboBoxes = {
-	  selector: `${componentName$V} > .wrapper > descope-combo-box`,
+	  selector: `${componentName$W} > .wrapper > descope-combo-box`,
 	};
 
 	const CountrySubdivisionCityFieldClass = compose(
@@ -89449,7 +89535,7 @@ function requireIndex_cjs () {
     width: 100%;
   }
 
-  ${componentName$V} {
+  ${componentName$W} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -89457,47 +89543,241 @@ function requireIndex_cjs () {
     max-width: 100%;
   }
 
-  ${componentName$V} > .wrapper {
+  ${componentName$W} > .wrapper {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
   }
 
-  .${componentName$V}-hidden {
+  .${componentName$W}-hidden {
     display: none;
   }
 
 `,
 	    excludeAttrsSync: ['tabindex', 'style', 'error-message'],
-	    componentName: componentName$U,
+	    componentName: componentName$V,
 	  }),
 	);
 
-	const vars$J = CountrySubdivisionCityFieldClass.cssVarList;
+	const vars$K = CountrySubdivisionCityFieldClass.cssVarList;
 
 	const countrySubdivisionCityField = {
-	  [vars$J.hostWidth]: refs$1.width,
-	  [vars$J.hostDirection]: refs$1.direction,
-	  [vars$J.flexDirection]: 'column',
-	  [vars$J.flexGap]: '0.5em',
-	  [vars$J.itemAlignment]: 'stretch',
-	  [vars$J.itemFlexGrow]: '0',
-	  [vars$J.itemWidth]: 'auto',
+	  [vars$K.hostWidth]: refs$1.width,
+	  [vars$K.hostDirection]: refs$1.direction,
+	  [vars$K.flexDirection]: 'column',
+	  [vars$K.flexGap]: '0.5em',
+	  [vars$K.itemAlignment]: 'stretch',
+	  [vars$K.itemFlexGrow]: '0',
+	  [vars$K.itemWidth]: 'auto',
 
 	  _fullWidth: {
-	    [vars$J.hostWidth]: '100%',
+	    [vars$K.hostWidth]: '100%',
 	  },
 
 	  _horizontal: {
-	    [vars$J.flexDirection]: 'row',
-	    [vars$J.itemFlexGrow]: '1',
+	    [vars$K.flexDirection]: 'row',
+	    [vars$K.itemFlexGrow]: '1',
 	  },
 	};
 
 	var countrySubdivisionCityField$1 = /*#__PURE__*/Object.freeze({
 	  __proto__: null,
 	  default: countrySubdivisionCityField,
-	  vars: vars$J
+	  vars: vars$K
+	});
+
+	const componentName$U = getComponentName('attachment');
+
+	const ATTACHMENT_POSITIONS = [
+	  'top-end',
+	  'top-start',
+	  'top-center',
+	  'bottom-start',
+	  'bottom-end',
+	  'bottom-center',
+	];
+
+	const DEFAULT_POSITION = ATTACHMENT_POSITIONS[0];
+
+	class RawAttachment extends createBaseClass$1({
+	  componentName: componentName$U,
+	  baseSelector: ':host > .wrapper',
+	}) {
+	  constructor() {
+	    super();
+
+	    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="wrapper">
+        <slot></slot>
+        <div class="attachment-container">
+          <slot name="attachment"></slot>
+        </div>
+      </div>
+    `;
+
+	    this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+	    this.attachmentSlot = this.shadowRoot.querySelector(
+	      'slot[name="attachment"]',
+	    );
+	  }
+
+	  static get observedAttributes() {
+	    return [...(super.observedAttributes || []), 'position'];
+	  }
+
+	  attributeChangedCallback(name, oldVal, newVal) {
+	    super.attributeChangedCallback?.(name, oldVal, newVal);
+	    if (name === 'position' && oldVal !== newVal) {
+	      this.#handlePositionChange();
+	    }
+	  }
+
+	  init() {
+	    super.init?.();
+
+	    injectStyle(
+	      `
+      :host {
+        display: inline-block;
+      }
+      .wrapper {
+        position: relative;
+        display: inline-flex;
+      }
+      .attachment-container {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        container-type: inline-size;
+      }
+      :host(.hidden) {
+        display: none;
+      }
+      `,
+	      this,
+	    );
+
+	    this.#handlePositionChange();
+
+	    this.defaultSlot.addEventListener('slotchange', () => {
+	      this.#setVisibility();
+	      this.#syncDirection();
+	    });
+
+	    window.requestAnimationFrame(() => {
+	      this.#setVisibility();
+	      this.#syncDirection();
+	    });
+	  }
+
+	  #setVisibility() {
+	    const hasAnchor = this.defaultSlot?.assignedElements()?.length > 0;
+	    this.classList.toggle('hidden', !hasAnchor);
+	  }
+
+	  #syncDirection() {
+	    const child = this.defaultSlot?.assignedElements()?.[0];
+	    if (!child) return;
+
+	    const { direction } = window.getComputedStyle(child);
+
+	    // currently we support direction sync only for web-components-ui
+	    // elements, which support st-host-direction attribute.
+	    this.attachmentSlot?.assignedElements().forEach((el) => {
+	      el.setAttribute('st-host-direction', direction);
+	    });
+	  }
+
+	  get offsetX() {
+	    return this.getAttribute('offset-x') || '0px';
+	  }
+
+	  get offsetY() {
+	    return this.getAttribute('offset-y') || '0px';
+	  }
+
+	  #handlePositionChange() {
+	    const pos = this.getAttribute('position');
+	    if (!ATTACHMENT_POSITIONS.includes(pos)) {
+	      this.setAttribute('position', DEFAULT_POSITION);
+	    }
+	  }
+	}
+
+	const attachmentContainer = { selector: () => '.attachment-container' };
+
+	const AttachmentClass = compose(
+	  createStyleMixin$1({
+	    mappings: {
+	      transform: { ...attachmentContainer },
+	      justifyContent: { ...attachmentContainer },
+	      maxWidth: { ...attachmentContainer },
+	      top: { ...attachmentContainer },
+	      bottom: { ...attachmentContainer },
+	      left: { ...attachmentContainer },
+	      right: { ...attachmentContainer },
+	      offsetX: {},
+	      offsetY: {},
+	    },
+	  }),
+	  draggableMixin$1,
+	  componentNameValidationMixin$1,
+	)(RawAttachment);
+
+	const vars$J = AttachmentClass.cssVarList;
+
+	const defaultOffset = '8px';
+	const insetCalc = `calc(${defaultOffset} + var(${vars$J.offsetX}))`;
+
+	const attachment = {
+	  [vars$J.maxWidth]: `calc(100% - 2 * ${defaultOffset})`,
+
+	  position: {
+	    'top-start': {
+	      [vars$J.transform]: 'translateY(-50%)',
+	      [vars$J.justifyContent]: 'start',
+	      [vars$J.left]: insetCalc,
+	      [vars$J.top]: useVar$1(vars$J.offsetY),
+	    },
+	    'top-center': {
+	      [vars$J.transform]: 'translate(-50%, -50%)',
+	      [vars$J.justifyContent]: 'center',
+	      [vars$J.top]: useVar$1(vars$J.offsetY),
+	      [vars$J.left]: '50%',
+	    },
+	    'top-end': {
+	      [vars$J.transform]: 'translateY(-50%)',
+	      [vars$J.justifyContent]: 'end',
+	      [vars$J.right]: insetCalc,
+	      [vars$J.top]: useVar$1(vars$J.offsetY),
+	    },
+	    'bottom-start': {
+	      [vars$J.transform]: 'translateY(50%)',
+	      [vars$J.justifyContent]: 'start',
+	      [vars$J.left]: insetCalc,
+	      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+	    },
+	    'bottom-center': {
+	      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+	      [vars$J.transform]: 'translate(-50%, 50%)',
+	      [vars$J.justifyContent]: 'center',
+	      [vars$J.left]: '50%',
+	    },
+	    'bottom-end': {
+	      [vars$J.transform]: 'translateY(50%)',
+	      [vars$J.justifyContent]: 'end',
+	      [vars$J.right]: insetCalc,
+	      [vars$J.bottom]: useVar$1(vars$J.offsetY),
+	    },
+	  },
+	};
+
+	var attachment$1 = /*#__PURE__*/Object.freeze({
+	  __proto__: null,
+	  default: attachment
 	});
 
 	const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
@@ -95210,10 +95490,6 @@ descope-enriched-text {
 	  [vars$s.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
 	  [vars$s.errorMessageIconPosition]: refs.errorMessageIconPosition,
 	  [vars$s.errorMessageFontSize]: refs.errorMessageFontSize,
-
-	  // '@overlay': {
-	  // 	overlayItemBackgroundColor: 'red'
-	  // }
 	};
 
 	var phoneField$1 = /*#__PURE__*/Object.freeze({
@@ -104055,7 +104331,7 @@ descope-enriched-text {
 	  [vars$2.horizontalPadding]: '0',
 	  [vars$2.verticalPadding]: '0',
 	  [vars$2.gap]: `0.5em`,
-	  [vars$2.fontSize]: useVar(vars$13.fontSize),
+	  [vars$2.fontSize]: useVar(vars$14.fontSize),
 
 	  mode: {
 	    error: {
@@ -104347,6 +104623,7 @@ descope-enriched-text {
 	  outboundAppButton: outboundAppButton$1,
 	  trustedDevices,
 	  tooltip: tooltip$1,
+	  attachment: attachment$1,
 	};
 
 	const theme = Object.keys(components).reduce(
@@ -104359,7 +104636,7 @@ descope-enriched-text {
 	);
 
 	const defaultTheme = { globals: globals$1, components: theme };
-	const themeVars = { globals: vars$15, components: vars };
+	const themeVars = { globals: vars$16, components: vars };
 
 	const colors = {
 	  surface: {
@@ -104863,6 +105140,7 @@ descope-enriched-text {
 	index_cjs$4.AddressFieldClass = AddressFieldClass;
 	index_cjs$4.AlertClass = AlertClass;
 	index_cjs$4.AppsListClass = AppsListClass;
+	index_cjs$4.AttachmentClass = AttachmentClass;
 	index_cjs$4.AutocompleteFieldClass = AutocompleteFieldClass;
 	index_cjs$4.AvatarClass = AvatarClass;
 	index_cjs$4.BadgeClass = BadgeClass;
@@ -105028,6 +105306,7 @@ const OutboundAppButtonClass = index_cjsExports.OutboundAppButtonClass;
 const TrustedDevicesClass = index_cjsExports.TrustedDevicesClass;
 const TooltipClass = index_cjsExports.TooltipClass;
 const HoneypotClass = index_cjsExports.HoneypotClass;
+const AttachmentClass = index_cjsExports.AttachmentClass;
 
 const Checkbox = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-checkbox", { ...props, ref: ref }));
 
@@ -105389,7 +105668,7 @@ const GridTextColumn = React__default.default.forwardRef((props, ref) => React__
 
 const GridItemDetailsColumn = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-grid-item-details-column", { ...props, ref: ref }));
 
-const Badge = React__default.default.forwardRef((props, ref) => React__default.default.createElement("descope-badge", { ...props, ref: ref }));
+const Badge = React__default.default.forwardRef(({ shrinkToIndicator, ...props }, ref) => (React__default.default.createElement("descope-badge", { "shrink-to-indicator": shrinkToIndicator, ...props, ref: ref })));
 
 const Modal = React__default.default.forwardRef((props, ref) => (React__default.default.createElement("descope-modal", { ...props, ref: ref })));
 
@@ -105577,6 +105856,15 @@ const Honeypot = React__default.default.forwardRef((props, ref) => (React__defau
 
 const TenantSelector = React__default.default.forwardRef((props, ref) => (React__default.default.createElement(ComboBox, { "item-label-path": "data-name", "item-value-path": "data-id", ...props, ref: ref })));
 
+const Attachment = React__default.default.forwardRef(({ children, attachment, offsetX, offsetY, ...props }, ref) => (React__default.default.createElement("descope-attachment", { ...props, ref: ref, "st-offset-x": offsetX, "st-offset-y": offsetY },
+    children,
+    attachment && React__default.default.cloneElement(attachment, { slot: 'attachment' }))));
+
+const LastAuthBadge = React__default.default.forwardRef(({ children, offsetX, offsetY, badgeLabel, ...props }, ref) => {
+    const attachment = (React__default.default.createElement(Badge, { mode: "primary", variant: "contained", bordered: true, size: "xs", slot: "attachment", shrinkToIndicator: true }, badgeLabel));
+    return (React__default.default.createElement(Attachment, { ...props, ref: ref, offsetX: offsetX, offsetY: offsetY, attachment: attachment }, children));
+});
+
 const globalsThemeToStyle = index_cjsExports.globalsThemeToStyle;
 const createComponentsTheme = index_cjsExports.createComponentsTheme;
 const themeToStyle = index_cjsExports.themeToStyle;
@@ -105592,6 +105880,8 @@ exports.Alert = Alert;
 exports.AlertClass = AlertClass;
 exports.AppsList = AppsList;
 exports.AppsListClass = AppsListClass;
+exports.Attachment = Attachment;
+exports.AttachmentClass = AttachmentClass;
 exports.Avatar = Avatar;
 exports.AvatarClass = AvatarClass;
 exports.Badge = Badge;
@@ -105637,6 +105927,7 @@ exports.IconClass = IconClass;
 exports.Image = Image;
 exports.ImageClass = ImageClass;
 exports.Input = Input;
+exports.LastAuthBadge = LastAuthBadge;
 exports.Link = Link;
 exports.LinkClass = LinkClass;
 exports.List = List;