@descope/web-components-ui 3.1.12 → 3.2.0

package/dist/cjs/index.cjs.js

@@ -34,7 +34,6 @@ var zxcvbnEnPackage__namespace = /*#__PURE__*/_interopNamespaceDefault(zxcvbnEnP
 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
@@ -953,6 +952,13 @@ function splitAmpersands(str) {
   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;
@@ -960,6 +966,10 @@ const MAX_SELECTOR_MULTIPLY = 3;
 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);
 
@@ -968,15 +978,27 @@ const componentsThemeToStyleObj = (componentsTheme) =>
       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
@@ -1015,25 +1037,29 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 
     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);
@@ -1263,7 +1289,7 @@ const globals$1 = {
   fonts: fonts$1,
   direction: direction$1,
 };
-const vars$15 = getThemeVars(globals$1);
+const vars$16 = getThemeVars(globals$1);
 
 const direction = 'ltr';
 
@@ -3059,12 +3085,12 @@ const createImage = async (src, altText) => {
 
 /* 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() {
@@ -3192,7 +3218,7 @@ const ImageClass = compose(
   componentNameValidationMixin$1,
 )(RawImage);
 
-const componentName$1i = getComponentName('icon');
+const componentName$1j = getComponentName('icon');
 
 const IconClass = compose(
   createStyleMixin$1({
@@ -3213,7 +3239,7 @@ const IconClass = compose(
       }
       `,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1i,
+    componentName: componentName$1j,
   }),
 );
 
@@ -3228,7 +3254,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$1h = getComponentName('button');
+const componentName$1i = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -3344,7 +3370,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex', 'class', 'style'],
-    componentName: componentName$1h,
+    componentName: componentName$1i,
   })
 );
 
@@ -3392,10 +3418,10 @@ const mode = {
   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,
 
@@ -3447,7 +3473,7 @@ const button = {
 
   _loading: {
     [compVars$9.cursor]: 'wait',
-    [compVars$9.labelTextColor]: helperRefs$6.main,
+    [compVars$9.labelTextColor]: helperRefs$7.main,
   },
 
   _disabled: {
@@ -3460,51 +3486,51 @@ const button = {
 
   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,
 };
@@ -3512,13 +3538,13 @@ const vars$14 = {
 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() {
@@ -3585,106 +3611,106 @@ const TextClass = compose(
 )(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 = [
@@ -3711,9 +3737,9 @@ const decodeHTML = (html) => {
 /* 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;
@@ -3918,9 +3944,9 @@ const EnrichedTextClass = compose(
   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();
 
@@ -3998,31 +4024,31 @@ const LinkClass = compose(
 )(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,
     },
   },
 };
@@ -4030,37 +4056,37 @@ const link$1 = {
 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',
     },
   },
 };
@@ -4068,10 +4094,10 @@ const enrichedText = {
 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 {
@@ -4755,12 +4781,12 @@ const ComboBoxClass = compose(
     // 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(
@@ -4883,103 +4909,103 @@ const [theme$2, refs$1] = createHelperVars$1(
       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',
   },
 };
 
@@ -4987,13 +5013,13 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   __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() {
@@ -5011,6 +5037,7 @@ class RawBadge extends createBaseClass$1({
         display: inline-flex;
       }
       :host > div {
+        position: relative;
         width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -5026,6 +5053,7 @@ const BadgeClass = compose(
   createStyleMixin$1({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostHeight: [{ selector: () => ':host', property: 'height' }],
       hostDirection: { property: 'direction' },
 
       fontFamily: {},
@@ -5050,6 +5078,8 @@ const BadgeClass = compose(
 
       textColor: { property: 'color' },
       textAlign: {},
+      boxShadow: {},
+      textIndent: {},
     },
   }),
   draggableMixin$1,
@@ -5058,79 +5088,125 @@ const BadgeClass = compose(
 
 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$$.textAlign]: 'center',
+  [vars$10.hostWidth]: 'fit-content',
+  [vars$10.hostDirection]: globalRefs$B.direction,
 
-  [vars$$.fontFamily]: globalRefs$B.fonts.font1.family,
-  [vars$$.fontWeight]: '400',
+  [vars$10.textAlign]: 'center',
 
-  [vars$$.verticalPadding]: '0.25em',
-  [vars$$.horizontalPadding]: '0.5em',
+  [vars$10.fontFamily]: globalRefs$B.fonts.font1.family,
+  [vars$10.fontWeight]: '400',
 
-  [vars$$.borderWidth]: globalRefs$B.border.xs,
-  [vars$$.borderRadius]: globalRefs$B.radius.xs,
-  [vars$$.borderColor]: 'transparent',
-  [vars$$.borderStyle]: 'solid',
+  [vars$10.verticalPadding]: '0.25em',
+  [vars$10.horizontalPadding]: '0.5em',
+
+  [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() {
@@ -5281,37 +5357,37 @@ const avatar = {
   },
 };
 
-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 {
@@ -5368,12 +5444,12 @@ const ListItemClass = compose(
   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() {
@@ -5544,7 +5620,7 @@ const ListClass = compose(
   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"'}>
@@ -5668,7 +5744,7 @@ const AppsListClass = compose(
     slots: ['empty-state'],
     wrappedEleName: 'descope-list',
     excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-    componentName: componentName$17,
+    componentName: componentName$18,
     style: () => `
       :host {
         width: 100%;
@@ -5703,60 +5779,60 @@ const AppsListClass = compose(
   }),
 );
 
-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,
     },
   },
 };
@@ -5764,7 +5840,7 @@ const appsList = {
 var appsList$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: appsList,
-  vars: vars$X
+  vars: vars$Y
 });
 
 const globalRefs$y = getThemeRefs$1(globals);
@@ -5773,7 +5849,7 @@ const compVars$7 = ListClass.cssVarList;
 
 const [helperTheme$5, helperRefs$5, helperVars$5] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$18,
+  componentName$19,
 );
 
 const { shadowColor: shadowColor$5 } = helperRefs$5;
@@ -5834,7 +5910,7 @@ const list = {
   },
 };
 
-const vars$W = {
+const vars$X = {
   ...compVars$7,
   ...helperVars$5,
 };
@@ -5842,60 +5918,60 @@ const vars$W = {
 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 {
@@ -5916,15 +5992,15 @@ const customMixin$d = (superclass) =>
       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, {
@@ -6043,34 +6119,34 @@ const AutocompleteFieldClass = compose(
     }
   `,
     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) => {
@@ -6297,7 +6373,7 @@ class RadarConnector extends createBaseConnectorClass() {
   }
 }
 
-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';
@@ -6308,7 +6384,7 @@ const CONNECTOR_CLASSES = {
 };
 
 const BaseInputClass$5 = createBaseInputClass$1({
-  componentName: componentName$14,
+  componentName: componentName$15,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
@@ -6415,7 +6491,7 @@ compose(
   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 {
@@ -6444,15 +6520,15 @@ const customMixin$c = (superclass) =>
       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, {
@@ -6530,7 +6606,7 @@ const AddressFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$14} {
+  ${componentName$15} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -6538,30 +6614,30 @@ const AddressFieldClass = compose(
     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=";
@@ -6583,12 +6659,12 @@ const formatTime = (ms = 0) => {
   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',
 });
 
@@ -6772,44 +6848,44 @@ const TimerClass = compose(
 )(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',
@@ -6840,7 +6916,7 @@ const mapTimerAttrs = {
 };
 
 const BaseClass$6 = createBaseClass$1({
-  componentName: componentName$11,
+  componentName: componentName$12,
   baseSelector: ':host > div',
 });
 
@@ -6949,30 +7025,30 @@ const TimerButtonClass = compose(
 )(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() {
@@ -7163,22 +7239,22 @@ const passwordStrength = {
   }
 };
 
-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() {
@@ -7413,7 +7489,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$$
+  componentName$10
 );
 
 const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -7513,7 +7589,7 @@ const collapsibleContainer = {
   }
 };
 
-const vars$P = {
+const vars$Q = {
   ...compVars$5,
   ...helperVars$4,
 };
@@ -7521,10 +7597,10 @@ const vars$P = {
 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 `
@@ -7535,7 +7611,7 @@ const itemRenderer$3 = ({ value }, _, ref) => {
 };
 
 class RawRecoveryCodes extends createBaseClass$1({
-  componentName: componentName$_,
+  componentName: componentName$$,
   baseSelector: ':host > div',
 }) {
   static get observedAttributes() {
@@ -7675,35 +7751,35 @@ const RecoveryCodesClass = compose(
 )(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 },
@@ -7749,7 +7825,7 @@ const itemRenderer$2 = (
 };
 
 const BaseClass$5 = createBaseClass$1({
-  componentName: componentName$Z,
+  componentName: componentName$_,
   baseSelector: 'descope-list',
 });
 
@@ -7925,36 +8001,36 @@ const OutboundAppsClass = compose(
   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',
     },
   },
 };
@@ -7962,13 +8038,13 @@ const outboundApps = {
 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() {
@@ -8067,12 +8143,12 @@ const outboundAppButton = {
   },
 };
 
-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==";
@@ -8150,7 +8226,7 @@ const getDeviceIcon = (deviceType) => {
   };
 };
 
-const componentName$X = getComponentName('trusted-devices');
+const componentName$Y = getComponentName('trusted-devices');
 
 const itemRenderer$1 = (
   { id, name, lastLoginDate, deviceType, isCurrent },
@@ -8239,7 +8315,7 @@ const itemRenderer$1 = (
 };
 
 const BaseClass$4 = createBaseClass$1({
-  componentName: componentName$X,
+  componentName: componentName$Y,
   baseSelector: ListClass.componentName,
 });
 
@@ -8529,51 +8605,51 @@ const TrustedDevicesClass = compose(
   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',
@@ -8584,7 +8660,7 @@ const tooltipAttrs = [
 ];
 
 const BaseClass$3 = createBaseClass$1({
-  componentName: componentName$W,
+  componentName: componentName$X,
   baseSelector: 'vaadin-tooltip',
 });
 
@@ -8649,7 +8725,7 @@ class RawTooltip extends BaseClass$3 {
     this.tooltip.style.overflow = 'hidden';
     this.tooltip.style.position = 'absolute';
   }
-  
+
   #revealWrappedParts() {
     this.tooltip.style.width = '100%';
     this.tooltip.style.height = '100%';
@@ -8674,9 +8750,7 @@ class RawTooltip extends BaseClass$3 {
   #setTooltipTarget() {
     if (!this.children?.length) return;
 
-    let ele = Array.from(this.children).find(
-      (child) => child !== this.tooltip,
-    );
+    let ele = Array.from(this.children).find((child) => child !== this.tooltip);
 
     if (!ele) return;
 
@@ -8696,6 +8770,10 @@ class RawTooltip extends BaseClass$3 {
     return enrichedText;
   }
 
+  get srLabel() {
+    return this.tooltip?.querySelector('[slot="sr-label"]');
+  }
+
   #initTooltipTextComponent() {
     if (!this.overlayContentNode) return;
 
@@ -8706,6 +8784,12 @@ class RawTooltip extends BaseClass$3 {
 
       this.overlayContentNode.appendChild(this.textComponent);
 
+      // An empty sr-label with role="tooltip" fails accessibility checks.
+      // Hide it when there's no tooltip text; vaadin handles populating it when text is present.
+      if (this.srLabel && !this.tooltipText) {
+        this.srLabel.setAttribute('aria-hidden', 'true');
+      }
+
       forwardAttrs(this, this.textComponent, {
         includeAttrs: ['readonly'],
       });
@@ -8741,7 +8825,15 @@ class RawTooltip extends BaseClass$3 {
 
   #updateText(value) {
     if (!this.textComponent) return;
-    this.textComponent.textContent = value?.trim();
+    const trimmedValue = (value ?? '').trim();
+    this.textComponent.textContent = trimmedValue;
+    if (this.srLabel) {
+      if (trimmedValue) {
+        this.srLabel.removeAttribute('aria-hidden');
+      } else {
+        this.srLabel.setAttribute('aria-hidden', 'true');
+      }
+    }
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -8753,7 +8845,7 @@ class RawTooltip extends BaseClass$3 {
       }
 
       if (attrName === 'opened') {
-        this.#handleTooltipVisibility(attrName, newValue);
+        this.#handleTooltipVisibility();
       }
     }
   }
@@ -8817,13 +8909,13 @@ const TooltipClass = compose(
 )(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;
@@ -8831,36 +8923,36 @@ const defaultShadow = `${globalRefs$q.shadow.wide.sm} ${shadowColor$3}, ${global
 
 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}`,
     },
   },
 };
@@ -8868,7 +8960,7 @@ const tooltip = {
 var tooltip$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   default: tooltip,
-  vars: vars$K
+  vars: vars$L
 });
 
 // Data service for country/subdivision/city data.
@@ -8921,7 +9013,7 @@ const fetchLabels = async (baseUrl) => {
 const fetchCitiesForCountry = async (countryIso2, baseUrl) =>
   fetchJson(`${baseUrl}/countries/${countryIso2}/cities.json`);
 
-const componentName$V = getComponentName(
+const componentName$W = getComponentName(
   'country-subdivision-city-field-internal',
 );
 
@@ -8981,7 +9073,7 @@ const comboBoxHTML = (id) =>
 // --- Base class ---
 
 const BaseInputClass$4 = createBaseInputClass$1({
-  componentName: componentName$V,
+  componentName: componentName$W,
   baseSelector: '',
 });
 
@@ -9157,7 +9249,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       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();
@@ -9254,7 +9346,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   // 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();
     }
   }
@@ -9527,7 +9619,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       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');
     }
@@ -9552,7 +9644,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       }
     } catch (e) {
       console.error(
-        `[${componentName$V}] Failed to load subdivisions for ${countryIso2}`,
+        `[${componentName$W}] Failed to load subdivisions for ${countryIso2}`,
         e,
       );
       this.#subdivisionVisible = false;
@@ -9580,7 +9672,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
       }
     } 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 {
@@ -9672,7 +9764,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
   }
 
   #setVisible(el, visible) {
-    el?.classList.toggle(`${componentName$V}-hidden`, !visible);
+    el?.classList.toggle(`${componentName$W}-hidden`, !visible);
   }
 
   #updateRequiredOnCombos() {
@@ -9742,7 +9834,7 @@ class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$4 {
 
   #getFirstVisibleCombo() {
     return this.#allCombos.find(
-      (combo) => !combo.classList.contains(`${componentName$V}-hidden`),
+      (combo) => !combo.classList.contains(`${componentName$W}-hidden`),
     );
   }
 
@@ -9759,7 +9851,7 @@ compose()(
   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 {
@@ -9769,15 +9861,15 @@ const customMixin$b = (superclass) =>
       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, {
@@ -9814,11 +9906,11 @@ const customMixin$b = (superclass) =>
 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(
@@ -9868,7 +9960,7 @@ const CountrySubdivisionCityFieldClass = compose(
     width: 100%;
   }
 
-  ${componentName$V} {
+  ${componentName$W} {
     display: inline-block;
     box-sizing: border-box;
     user-select: none;
@@ -9876,47 +9968,241 @@ const CountrySubdivisionCityFieldClass = compose(
     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`;
@@ -15629,10 +15915,6 @@ const phoneField = {
   [vars$s.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars$s.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars$s.errorMessageFontSize]: refs.errorMessageFontSize,
-
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
 };
 
 var phoneField$1 = /*#__PURE__*/Object.freeze({
@@ -24474,7 +24756,7 @@ const alert = {
   [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: {
@@ -24766,6 +25048,7 @@ const components = {
   outboundAppButton: outboundAppButton$1,
   trustedDevices,
   tooltip: tooltip$1,
+  attachment: attachment$1,
 };
 
 const theme = Object.keys(components).reduce(
@@ -24778,7 +25061,7 @@ const vars = Object.keys(components).reduce(
 );
 
 const defaultTheme = { globals: globals$1, components: theme };
-const themeVars = { globals: vars$15, components: vars };
+const themeVars = { globals: vars$16, components: vars };
 
 const colors = {
   surface: {
@@ -25282,6 +25565,7 @@ var calcScore = /*#__PURE__*/Object.freeze({
 exports.AddressFieldClass = AddressFieldClass;
 exports.AlertClass = AlertClass;
 exports.AppsListClass = AppsListClass;
+exports.AttachmentClass = AttachmentClass;
 exports.AutocompleteFieldClass = AutocompleteFieldClass;
 exports.AvatarClass = AvatarClass;
 exports.BadgeClass = BadgeClass;