@descope/web-components-ui 1.0.418 → 1.0.420

package/dist/cjs/index.cjs.js

@@ -2,39 +2,40 @@
 
 var merge = require('lodash.merge');
 var Color = require('color');
+require('element-internals-polyfill');
 var DOMPurify = require('dompurify');
 var MarkdownIt = require('markdown-it');
 require('lodash.debounce');
 require('libphonenumber-js/min');
 var hljs = require('highlight.js');
 
-const DESCOPE_PREFIX = 'descope';
-const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
-const BASE_THEME_SECTION = 'host';
+const DESCOPE_PREFIX$1 = 'descope';
+const CSS_SELECTOR_SPECIFIER_MULTIPLY$1 = 3;
+const BASE_THEME_SECTION$1 = 'host';
 const PORTAL_THEME_PREFIX = '@';
 
-const kebabCase = (str) =>
+const kebabCase$1 = (str) =>
   str
     .replace(/([a-z])([A-Z])/g, '$1-$2')
     .replace(/[\s_.]+/g, '-')
     .toLowerCase();
 
-const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+const kebabCaseJoin$1 = (...args) => kebabCase$1(args.filter((arg) => !!arg).join('-'));
 
-const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+const upperFirst$1 = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
-const camelCaseJoin = (...args) =>
+const camelCaseJoin$1 = (...args) =>
   args
     .filter(Boolean)
-    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .map((arg, index) => (index === 0 ? arg : upperFirst$1(arg)))
     .join('');
 
-const compose =
+const compose$1 =
   (...fns) =>
   (val) =>
     fns.reduceRight((res, fn) => fn(res), val);
 
-const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+const isFunction$1 = (maybeFunc) => typeof maybeFunc === 'function';
 
 const isUrl = (maybeUrl) => {
   try {
@@ -82,7 +83,7 @@ const toTitle = (str) =>
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 
-const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+const observeAttributes$1 = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
   // sync all attrs on init
   const filteredAttrs = Array.from(ele.attributes)
     .filter(
@@ -110,7 +111,7 @@ const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = []
 };
 
 // calling the callback with this object: { addedNodes, removedNodes }
-const observeChildren = (ele, callback) => {
+const observeChildren$1 = (ele, callback) => {
   callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
 
   const observer = new MutationObserver((mutationsList) => {
@@ -124,7 +125,7 @@ const observeChildren = (ele, callback) => {
   observer.observe(ele, { childList: true, characterData: true, subtree: true });
 };
 
-const createSyncAttrsCb =
+const createSyncAttrsCb$1 =
   (srcEle, targetEle, mapAttrs = {}) =>
   (attrNames) => {
     attrNames.forEach((attrName) => {
@@ -141,16 +142,16 @@ const createSyncAttrsCb =
   };
 
 const syncAttrs = (ele1, ele2, options) => {
-  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
-  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+  observeAttributes$1(ele1, createSyncAttrsCb$1(ele1, ele2), options);
+  observeAttributes$1(ele2, createSyncAttrsCb$1(ele2, ele1), options);
 };
 
-const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+const getComponentName$1 = (name) => kebabCaseJoin$1(DESCOPE_PREFIX$1, name);
 
-const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+const getCssVarName$1 = (...args) => `--${kebabCaseJoin$1(...args)}`;
 
-const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+const forwardAttrs$1 = (source, dest, options = {}) => {
+  observeAttributes$1(source, createSyncAttrsCb$1(source, dest, options.mapAttrs), options);
 };
 
 const forwardProps$1 = (src, target, props = []) => {
@@ -175,6 +176,99 @@ const forwardProps$1 = (src, target, props = []) => {
   Object.defineProperties(target, config);
 };
 
+const DESCOPE_PREFIX = 'descope';
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+const BASE_THEME_SECTION = 'host';
+
+const kebabCase = (str) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_.]+/g, '-')
+    .toLowerCase();
+
+const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const camelCaseJoin = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .join('');
+
+const compose =
+  (...fns) =>
+  (val) =>
+    fns.reduceRight((res, fn) => fn(res), val);
+
+const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
+const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+  // sync all attrs on init
+  const filteredAttrs = Array.from(ele.attributes)
+    .filter(
+      (attr) =>
+        !excludeAttrs.includes(attr.name) &&
+        (!includeAttrs.length || includeAttrs.includes(attr.name))
+    )
+    .map((attr) => attr.name);
+
+  callback(filteredAttrs);
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        !excludeAttrs.includes(mutation.attributeName) &&
+        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+      ) {
+        callback([mutation.attributeName]);
+      }
+    });
+  });
+
+  observer.observe(ele, { attributes: true });
+};
+
+// calling the callback with this object: { addedNodes, removedNodes }
+const observeChildren = (ele, callback) => {
+  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'childList' || mutation.type === 'characterData') {
+        callback(mutation);
+      }
+    });
+  });
+
+  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+};
+
+const createSyncAttrsCb =
+  (srcEle, targetEle, mapAttrs = {}) =>
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
+        }
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
+
+const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+const forwardAttrs = (source, dest, options = {}) => {
+  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+};
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -221,7 +315,132 @@ class ComponentsThemeManager {
 
 const componentsThemeManager = new ComponentsThemeManager();
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+const colorGaps$1 = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken$1 = (c, percentage) => c.darken(percentage).hex();
+
+const contrast$1 = (c) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps$1.contrast)
+    .saturate(1)
+    .hex();
+};
+
+const lighten$1 = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack$1 = (color) => color.luminosity() < 0.01;
+const isNearWhite$1 = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor$1 = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite$1(color)
+      ? darken$1(color, colorGaps$1.edgeColor.darkLight)
+      : lighten$1(color, colorGaps$1.darkLight);
+  }
+
+  return isNearBlack$1(color)
+    ? lighten$1(color, colorGaps$1.edgeColor.darkLight)
+    : darken$1(color, colorGaps$1.darkLight);
+};
+
+const generateLightColor$1 = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack$1(color)
+      ? lighten$1(color, colorGaps$1.edgeColor.darkLight)
+      : darken$1(color, colorGaps$1.darkLight);
+  }
+
+  return isNearWhite$1(color)
+    ? darken$1(color, colorGaps$1.edgeColor.darkLight)
+    : lighten$1(color, colorGaps$1.darkLight);
+};
+
+const generateHighlightColor$1 = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack$1(color)
+      ? lighten$1(color, colorGaps$1.edgeColor.highlight)
+      : darken$1(color, colorGaps$1.highlight);
+  }
+
+  return isNearWhite$1(color)
+    ? darken$1(color, colorGaps$1.edgeColor.highlight)
+    : lighten$1(color, colorGaps$1.highlight);
+};
+
+const genColor$1 = (color, theme) => {
+  const mainColor = new Color(color.main || color);
+
+  const res = {
+    main: mainColor.hex(),
+    dark: color.dark || generateDarkColor$1(mainColor, theme),
+    light: color.light || generateLightColor$1(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor$1(mainColor, theme),
+    contrast: color.contrast || contrast$1(mainColor),
+  };
+
+  return res;
+};
+
+const genColors$1 = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor$1(currentColor),
+    });
+  }, {});
+};
+
+const getVarName$1 = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+// lodash.set alternative
+const set$1 = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
+const transformTheme$1 = (theme, path, getTransformation) => {
+  return Object.entries(theme).reduce((acc, [key, val]) => {
+    if (val?.constructor !== Object) {
+      return merge(acc, getTransformation(path.concat(key), val));
+    }
+    return merge(acc, transformTheme$1(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const getThemeRefs$1 = (theme, prefix) =>
+  transformTheme$1(theme, [], (path) =>
+    set$1({}, path, `var(${getVarName$1(prefix ? [prefix, ...path] : path)})`)
+  );
+
+const getThemeVars$1 = (theme, prefix) =>
+  transformTheme$1(theme, [], (path) => set$1({}, path, getVarName$1(prefix ? [prefix, ...path] : path)));
+
+const getVarName = (path) => getCssVarName$1(DESCOPE_PREFIX$1, ...path);
 
 // lodash.set alternative
 const set = (obj, path, value) => {
@@ -287,7 +506,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
     const property = restPath.pop();
-    const componentName = getComponentName(component);
+    const componentName = getComponentName$1(component);
 
     if (property === 'undefined') {
       // eslint-disable-next-line no-console
@@ -298,7 +517,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // 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;
+    let themeName = BASE_THEME_SECTION$1;
 
     if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
       themeName = restPath.shift();
@@ -307,7 +526,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
-      if (section.startsWith('_')) return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+      if (section.startsWith('_')) return `${acc}[${kebabCase$1(section.replace(/^_/, ''))}="true"]`;
 
       const nextSection = restPath[idx + 1];
 
@@ -320,7 +539,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
         return acc;
       }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+      return `${acc}[${kebabCase$1(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
@@ -379,7 +598,7 @@ const createHelperVars = (theme, prefix) => {
   const res = transformTheme(theme, [], (path, value) => {
     const modifiedPath = [...path];
     const property = modifiedPath.splice(-1);
-    const varName = getCssVarName(prefix, property);
+    const varName = getCssVarName$1(prefix, property);
 
     const vars = { [property]: varName };
     const useVars = { [property]: useVar(varName) };
@@ -483,9 +702,9 @@ const genColors = (colors) => {
   }, {});
 };
 
-const direction = 'ltr';
+const direction$1 = 'ltr';
 
-const colors$1 = genColors({
+const colors$2 = genColors({
   surface: {
     main: '#ffffff',
     dark: '#636c74',
@@ -523,7 +742,7 @@ const colors$1 = genColors({
   },
 });
 
-const fonts = {
+const fonts$1 = {
   font1: {
     family: [
       'Roboto',
@@ -565,47 +784,47 @@ const fonts = {
   },
 };
 
-const fontsRef = getThemeRefs({ fonts }).fonts;
+const fontsRef$1 = getThemeRefs({ fonts: fonts$1 }).fonts;
 
-const typography = {
+const typography$1 = {
   h1: {
-    font: fontsRef.font1.family,
+    font: fontsRef$1.font1.family,
     weight: '900',
     size: '48px',
   },
   h2: {
-    font: fontsRef.font1.family,
+    font: fontsRef$1.font1.family,
     weight: '800',
     size: '38px',
   },
   h3: {
-    font: fontsRef.font1.family,
+    font: fontsRef$1.font1.family,
     weight: '600',
     size: '28px',
   },
   subtitle1: {
-    font: fontsRef.font2.family,
+    font: fontsRef$1.font2.family,
     weight: '500',
     size: '22px',
   },
   subtitle2: {
-    font: fontsRef.font2.family,
+    font: fontsRef$1.font2.family,
     weight: '400',
     size: '20px',
   },
   body1: {
-    font: fontsRef.font1.family,
+    font: fontsRef$1.font1.family,
     weight: '400',
     size: '16px',
   },
   body2: {
-    font: fontsRef.font1.family,
+    font: fontsRef$1.font1.family,
     weight: '400',
     size: '14px',
   },
 };
 
-const spacing = {
+const spacing$1 = {
   xs: '2px',
   sm: '4px',
   md: '8px',
@@ -613,7 +832,7 @@ const spacing = {
   xl: '32px',
 };
 
-const border = {
+const border$1 = {
   xs: '1px',
   sm: '2px',
   md: '3px',
@@ -621,7 +840,7 @@ const border = {
   xl: '5px',
 };
 
-const radius = {
+const radius$1 = {
   xs: '5px',
   sm: '10px',
   md: '15px',
@@ -631,7 +850,7 @@ const radius = {
   '3xl': '35px',
 };
 
-const shadow$1 = {
+const shadow$2 = {
   wide: {
     sm: '0 2px 3px -0.5px',
     md: '0 4px 6px -1px',
@@ -648,22 +867,22 @@ const shadow$1 = {
   },
 };
 
-const globals = {
-  colors: colors$1,
-  typography,
-  spacing,
-  border,
-  radius,
-  shadow: shadow$1,
-  fonts,
-  direction,
+const globals$1 = {
+  colors: colors$2,
+  typography: typography$1,
+  spacing: spacing$1,
+  border: border$1,
+  radius: radius$1,
+  shadow: shadow$2,
+  fonts: fonts$1,
+  direction: direction$1,
 };
-const vars$U = getThemeVars(globals);
+const vars$U = getThemeVars(globals$1);
 
-const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+const createCssVar$1 = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
 
-const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
-  isFunction(relativeSelectorOrSelectorFn)
+const createCssSelector$1 = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
+  isFunction$1(relativeSelectorOrSelectorFn)
     ? relativeSelectorOrSelectorFn(baseSelector)
     : `${baseSelector}${
         /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
@@ -671,7 +890,7 @@ const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '')
           : relativeSelectorOrSelectorFn
       }`;
 
-class StyleBuilder {
+let StyleBuilder$1 = class StyleBuilder {
   constructor() {
     this.styleMap = new Map();
   }
@@ -693,10 +912,10 @@ class StyleBuilder {
       return `${acc}${selector} { \n${properties} \n}\n\n`;
     }, '');
   }
-}
+};
 
-const normalizeConfig = (attr, config) => {
-  const defaultMapping = { selector: '', property: kebabCase(attr) };
+const normalizeConfig$1 = (attr, config) => {
+  const defaultMapping = { selector: '', property: kebabCase$1(attr) };
 
   if (!config || !Object.keys(config).length) return [defaultMapping];
 
@@ -705,30 +924,30 @@ const normalizeConfig = (attr, config) => {
   return [{ ...defaultMapping, ...config }];
 };
 
-const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
+const getFallbackVarName$1 = (origVarName, suffix = 'fallback') => kebabCaseJoin$1(origVarName, suffix);
 
-const createStyle = (componentName, baseSelector, mappings) => {
-  const style = new StyleBuilder();
+const createStyle$1 = (componentName, baseSelector, mappings) => {
+  const style = new StyleBuilder$1();
   const createFallbackVar = (fallback, origVarName) => {
     if (!fallback) return '';
     if (typeof fallback === 'string') return fallback;
 
-    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
-    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
+    const fallbackVarName = getFallbackVarName$1(origVarName, fallback?.suffix);
+    return createCssVar$1(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
   };
 
   Object.keys(mappings).forEach((attr) => {
-    const attrConfig = normalizeConfig(attr, mappings[attr]);
+    const attrConfig = normalizeConfig$1(attr, mappings[attr]);
 
-    const cssVarName = getCssVarName(componentName, attr);
+    const cssVarName = getCssVarName$1(componentName, attr);
 
     attrConfig.forEach(
       ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
         const fallbackValue = createFallbackVar(fallback, cssVarName);
         style.add(
-          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
-          isFunction(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssSelector$1(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction$1(property) ? property() : property,
+          createCssVar$1(cssVarName, fallbackValue) + (important ? '!important' : '')
         );
       }
     );
@@ -737,36 +956,36 @@ const createStyle = (componentName, baseSelector, mappings) => {
   return style.toString();
 };
 
-const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
+const getFallbackVarsNames$1 = (attr, origVarName, { fallback }) => {
   if (!fallback) return {};
 
-  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
-  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
+  const fallbackVarName = getFallbackVarName$1(origVarName, fallback.suffix);
+  const fallbackAttrName = camelCaseJoin$1(attr, fallback.suffix || 'fallback');
   return {
     [fallbackAttrName]: fallbackVarName,
-    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
+    ...getFallbackVarsNames$1(fallbackAttrName, fallbackVarName, fallback),
   };
 };
 
-const createCssVarsList = (componentName, mappings) =>
+const createCssVarsList$1 = (componentName, mappings) =>
   Object.keys(mappings).reduce((acc, attr) => {
-    const varName = getCssVarName(componentName, attr);
+    const varName = getCssVarName$1(componentName, attr);
 
     return Object.assign(
       acc,
       { [attr]: varName },
-      getFallbackVarsNames(attr, varName, mappings[attr])
+      getFallbackVarsNames$1(attr, varName, mappings[attr])
     );
   }, {});
 
 // on some cases we need a selector to be more specific than another
 // for this we have this fn that generate a class selector multiple times
-const createClassSelectorSpecifier = (className, numOfRepeats) =>
+const createClassSelectorSpecifier$1 = (className, numOfRepeats) =>
   Array(numOfRepeats).fill(`.${className}`).join('');
 
-const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
+const STYLE_OVERRIDE_ATTR_PREFIX$1 = 'st';
 
-const createStyleMixin =
+const createStyleMixin$1 =
   ({ mappings = {}, componentNameOverride = '' }) =>
   (superclass) => {
     const componentName = componentNameOverride || superclass.componentName;
@@ -775,7 +994,7 @@ const createStyleMixin =
       static get cssVarList() {
         return {
           ...superclass.cssVarList,
-          ...createCssVarsList(componentName, {
+          ...createCssVarsList$1(componentName, {
             ...mappings,
           }),
         };
@@ -805,7 +1024,7 @@ const createStyleMixin =
       constructor({
         getRootElement,
         componentNameSuffix = '',
-        themeSection = BASE_THEME_SECTION,
+        themeSection = BASE_THEME_SECTION$1,
         baseSelector,
       } = {}) {
         super();
@@ -815,7 +1034,7 @@ const createStyleMixin =
         this.#getRootElement = getRootElement;
 
         this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
-          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+          kebabCaseJoin$1(STYLE_OVERRIDE_ATTR_PREFIX$1, componentNameSuffix, key)
         );
       }
 
@@ -843,9 +1062,9 @@ const createStyleMixin =
           this.#overrideStyleEle = document.createElement('style');
           this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
 
-          const classSpecifier = createClassSelectorSpecifier(
+          const classSpecifier = createClassSelectorSpecifier$1(
             componentName,
-            CSS_SELECTOR_SPECIFIER_MULTIPLY
+            CSS_SELECTOR_SPECIFIER_MULTIPLY$1
           );
 
           this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
@@ -857,9 +1076,9 @@ const createStyleMixin =
         const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
         if (!style) return;
 
-        const varName = getCssVarName(
+        const varName = getCssVarName$1(
           componentName,
-          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX$1}-`), '')
         );
 
         if (value) style?.setProperty(varName, value);
@@ -889,8 +1108,8 @@ const createStyleMixin =
         if (Object.keys(mappings).length) {
           const themeStyle = document.createElement('style');
           themeStyle.id = `style-mixin-mappings__${componentName}`;
-          themeStyle.innerHTML = createStyle(
-            kebabCaseJoin(componentName, this.#componentNameSuffix),
+          themeStyle.innerHTML = createStyle$1(
+            kebabCaseJoin$1(componentName, this.#componentNameSuffix),
             this.#baseSelector,
             mappings
           );
@@ -914,7 +1133,7 @@ const createStyleMixin =
           this.#createOverridesStyle();
 
           // this is instead attributeChangedCallback because we cannot use static methods in this case
-          observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
+          observeAttributes$1(this, this.#updateOverridesStyle.bind(this), {});
         }
       }
 
@@ -926,7 +1145,7 @@ const createStyleMixin =
     };
   };
 
-const draggableMixin = (superclass) =>
+const draggableMixin$1 = (superclass) =>
   class DraggableMixinClass extends superclass {
     #styleEle = null;
 
@@ -989,7 +1208,7 @@ const draggableMixin = (superclass) =>
     }
   };
 
-const componentNameValidationMixin = (superclass) =>
+const componentNameValidationMixin$1 = (superclass) =>
   class ComponentNameValidationMixinClass extends superclass {
     #checkComponentName() {
       const currentComponentName = this.localName;
@@ -1013,7 +1232,7 @@ const componentNameValidationMixin = (superclass) =>
     }
   };
 
-const componentsContextMixin = (superclass) =>
+const componentsContextMixin$1 = (superclass) =>
   class ComponentsContextMixinClass extends superclass {
     updateComponentsContext(componentsContext) {
       this.dispatchEvent(
@@ -1026,7 +1245,7 @@ const componentsContextMixin = (superclass) =>
     }
   };
 
-const hoverableMixin = (superclass) =>
+const hoverableMixin$1 = (superclass) =>
   class HoverableMixinClass extends superclass {
     init() {
       super.init?.();
@@ -1040,7 +1259,7 @@ const hoverableMixin = (superclass) =>
     }
   };
 
-const booleanAttributesList = [
+const booleanAttributesList$1 = [
   'readonly',
   'focused',
   'invalid',
@@ -1064,23 +1283,23 @@ const booleanAttributesList = [
   'allow-custom-value',
 ];
 
-const isBooleanAttribute = (attr) => {
-  return booleanAttributesList.includes(attr);
+const isBooleanAttribute$1 = (attr) => {
+  return booleanAttributesList$1.includes(attr);
 };
 // we want all the valueless attributes to have "true" value
 // and all the falsy attribute to be removed
-const normalizeBooleanAttributesMixin = (superclass) =>
+const normalizeBooleanAttributesMixin$1 = (superclass) =>
   class NormalizeBooleanAttributesMixinClass extends superclass {
     init() {
       super.init?.();
 
-      observeAttributes(
+      observeAttributes$1(
         this,
         (attrs) =>
           attrs.forEach((attr) => {
             const attrVal = this.getAttribute(attr);
 
-            if (isBooleanAttribute(attr)) {
+            if (isBooleanAttribute$1(attr)) {
               if (attrVal === '') {
                 this.setAttribute(attr, 'true');
               } else if (attrVal === 'false') {
@@ -1098,7 +1317,7 @@ const normalizeBooleanAttributesMixin = (superclass) =>
     }
   };
 
-const createBaseClass = ({ componentName, baseSelector = '' }) => {
+const createBaseClass$1 = ({ componentName, baseSelector = '' }) => {
   class DescopeBaseClass extends HTMLElement {
     static get componentName() {
       return componentName;
@@ -1151,11 +1370,11 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
     }
   }
 
-  return compose(
-    componentNameValidationMixin,
-    hoverableMixin,
-    normalizeBooleanAttributesMixin,
-    componentsContextMixin
+  return compose$1(
+    componentNameValidationMixin$1,
+    hoverableMixin$1,
+    normalizeBooleanAttributesMixin$1,
+    componentsContextMixin$1
   )(DescopeBaseClass);
 };
 
@@ -1180,14 +1399,14 @@ const createProxy = ({
   includeForwardProps = [],
   delegatesFocus = true,
 }) => {
-  class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
+  class ProxyClass extends createBaseClass$1({ componentName, baseSelector: wrappedEleName }) {
     #dispatchBlur = createDispatchEvent.bind(this, 'blur');
 
     #dispatchFocus = createDispatchEvent.bind(this, 'focus');
 
     constructor() {
       super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
-			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
+			<style id="create-proxy">${(isFunction$1(style) ? style() : style) || ''}</style>
 			<${wrappedEleName}>
 			${slots
         .map(
@@ -1224,813 +1443,6 @@ const createProxy = ({
   return ProxyClass;
 };
 
-(function () {
-
-    const refMap = new WeakMap();
-    const validityMap = new WeakMap();
-    const hiddenInputMap = new WeakMap();
-    const internalsMap = new WeakMap();
-    const validationMessageMap = new WeakMap();
-    const formsMap = new WeakMap();
-    const shadowHostsMap = new WeakMap();
-    const formElementsMap = new WeakMap();
-    const refValueMap = new WeakMap();
-    const upgradeMap = new WeakMap();
-    const shadowRootMap = new WeakMap();
-    const validationAnchorMap = new WeakMap();
-    const documentFragmentMap = new WeakMap();
-    const connectedCallbackMap = new WeakMap();
-    const validityUpgradeMap = new WeakMap();
-
-    const aom = {
-        ariaAtomic: 'aria-atomic',
-        ariaAutoComplete: 'aria-autocomplete',
-        ariaBusy: 'aria-busy',
-        ariaChecked: 'aria-checked',
-        ariaColCount: 'aria-colcount',
-        ariaColIndex: 'aria-colindex',
-        ariaColIndexText: 'aria-colindextext',
-        ariaColSpan: 'aria-colspan',
-        ariaCurrent: 'aria-current',
-        ariaDisabled: 'aria-disabled',
-        ariaExpanded: 'aria-expanded',
-        ariaHasPopup: 'aria-haspopup',
-        ariaHidden: 'aria-hidden',
-        ariaInvalid: 'aria-invalid',
-        ariaKeyShortcuts: 'aria-keyshortcuts',
-        ariaLabel: 'aria-label',
-        ariaLevel: 'aria-level',
-        ariaLive: 'aria-live',
-        ariaModal: 'aria-modal',
-        ariaMultiLine: 'aria-multiline',
-        ariaMultiSelectable: 'aria-multiselectable',
-        ariaOrientation: 'aria-orientation',
-        ariaPlaceholder: 'aria-placeholder',
-        ariaPosInSet: 'aria-posinset',
-        ariaPressed: 'aria-pressed',
-        ariaReadOnly: 'aria-readonly',
-        ariaRelevant: 'aria-relevant',
-        ariaRequired: 'aria-required',
-        ariaRoleDescription: 'aria-roledescription',
-        ariaRowCount: 'aria-rowcount',
-        ariaRowIndex: 'aria-rowindex',
-        ariaRowIndexText: 'aria-rowindextext',
-        ariaRowSpan: 'aria-rowspan',
-        ariaSelected: 'aria-selected',
-        ariaSetSize: 'aria-setsize',
-        ariaSort: 'aria-sort',
-        ariaValueMax: 'aria-valuemax',
-        ariaValueMin: 'aria-valuemin',
-        ariaValueNow: 'aria-valuenow',
-        ariaValueText: 'aria-valuetext',
-        role: 'role'
-    };
-    const initAom = (ref, internals) => {
-        for (let key in aom) {
-            internals[key] = null;
-            let closureValue = null;
-            const attributeName = aom[key];
-            Object.defineProperty(internals, key, {
-                get() {
-                    return closureValue;
-                },
-                set(value) {
-                    closureValue = value;
-                    if (ref.isConnected) {
-                        ref.setAttribute(attributeName, value);
-                    }
-                    else {
-                        upgradeMap.set(ref, internals);
-                    }
-                }
-            });
-        }
-    };
-
-    function initNode(node) {
-        const internals = internalsMap.get(node);
-        const { form } = internals;
-        initForm(node, form, internals);
-        initLabels(node, internals.labels);
-    }
-    const walkFieldset = (node, firstRender = false) => {
-        const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(node) {
-                return internalsMap.has(node) ?
-                    NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-            }
-        });
-        let current = walker.nextNode();
-        const isCallNecessary = (!firstRender || node.disabled);
-        while (current) {
-            if (current.formDisabledCallback && isCallNecessary) {
-                setDisabled(current, node.disabled);
-            }
-            current = walker.nextNode();
-        }
-    };
-    const disabledOrNameObserverConfig = { attributes: true, attributeFilter: ['disabled', 'name'] };
-    const disabledOrNameObserver = mutationObserverExists() ? new MutationObserver((mutationsList) => {
-        for (const mutation of mutationsList) {
-            const target = mutation.target;
-            if (mutation.attributeName === 'disabled') {
-                if (target.constructor['formAssociated']) {
-                    setDisabled(target, target.hasAttribute('disabled'));
-                }
-                else if (target.localName === 'fieldset') {
-                    walkFieldset(target);
-                }
-            }
-            if (mutation.attributeName === 'name') {
-                if (target.constructor['formAssociated']) {
-                    const internals = internalsMap.get(target);
-                    const value = refValueMap.get(target);
-                    internals.setFormValue(value);
-                }
-            }
-        }
-    }) : {};
-    function observerCallback(mutationList) {
-        mutationList.forEach(mutationRecord => {
-            const { addedNodes, removedNodes } = mutationRecord;
-            const added = Array.from(addedNodes);
-            const removed = Array.from(removedNodes);
-            added.forEach(node => {
-                if (internalsMap.has(node) && node.constructor['formAssociated']) {
-                    initNode(node);
-                }
-                if (upgradeMap.has(node)) {
-                    const internals = upgradeMap.get(node);
-                    const aomKeys = Object.keys(aom);
-                    aomKeys
-                        .filter(key => internals[key] !== null)
-                        .forEach(key => {
-                        node.setAttribute(aom[key], internals[key]);
-                    });
-                    upgradeMap.delete(node);
-                }
-                if (validityUpgradeMap.has(node)) {
-                    const internals = validityUpgradeMap.get(node);
-                    node.setAttribute('internals-valid', internals.validity.valid.toString());
-                    node.setAttribute('internals-invalid', (!internals.validity.valid).toString());
-                    node.setAttribute('aria-invalid', (!internals.validity.valid).toString());
-                    validityUpgradeMap.delete(node);
-                }
-                if (node.localName === 'form') {
-                    const formElements = formElementsMap.get(node);
-                    const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, {
-                        acceptNode(node) {
-                            return (internalsMap.has(node) && node.constructor['formAssociated'] && !(formElements && formElements.has(node))) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-                        }
-                    });
-                    let current = walker.nextNode();
-                    while (current) {
-                        initNode(current);
-                        current = walker.nextNode();
-                    }
-                }
-                if (node.localName === 'fieldset') {
-                    disabledOrNameObserver.observe?.(node, disabledOrNameObserverConfig);
-                    walkFieldset(node, true);
-                }
-            });
-            removed.forEach(node => {
-                const internals = internalsMap.get(node);
-                if (internals && hiddenInputMap.get(internals)) {
-                    removeHiddenInputs(internals);
-                }
-                if (shadowHostsMap.has(node)) {
-                    const observer = shadowHostsMap.get(node);
-                    observer.disconnect();
-                }
-            });
-        });
-    }
-    function fragmentObserverCallback(mutationList) {
-        mutationList.forEach(mutation => {
-            const { removedNodes } = mutation;
-            removedNodes.forEach(node => {
-                const observer = documentFragmentMap.get(mutation.target);
-                if (internalsMap.has(node)) {
-                    upgradeInternals(node);
-                }
-                observer.disconnect();
-            });
-        });
-    }
-    const deferUpgrade = (fragment) => {
-        const observer = new MutationObserver(fragmentObserverCallback);
-        observer.observe?.(fragment, { childList: true });
-        documentFragmentMap.set(fragment, observer);
-    };
-    mutationObserverExists() ? new MutationObserver(observerCallback) : {};
-    const observerConfig = {
-        childList: true,
-        subtree: true
-    };
-
-    const setDisabled = (ref, disabled) => {
-        ref.toggleAttribute('internals-disabled', disabled);
-        if (disabled) {
-            ref.setAttribute('aria-disabled', 'true');
-        }
-        else {
-            ref.removeAttribute('aria-disabled');
-        }
-        if (ref.formDisabledCallback) {
-            ref.formDisabledCallback.apply(ref, [disabled]);
-        }
-    };
-    const removeHiddenInputs = (internals) => {
-        const hiddenInputs = hiddenInputMap.get(internals);
-        hiddenInputs.forEach(hiddenInput => {
-            hiddenInput.remove();
-        });
-        hiddenInputMap.set(internals, []);
-    };
-    const createHiddenInput = (ref, internals) => {
-        const input = document.createElement('input');
-        input.type = 'hidden';
-        input.name = ref.getAttribute('name');
-        ref.after(input);
-        hiddenInputMap.get(internals).push(input);
-        return input;
-    };
-    const initRef = (ref, internals) => {
-        hiddenInputMap.set(internals, []);
-        disabledOrNameObserver.observe?.(ref, disabledOrNameObserverConfig);
-    };
-    const initLabels = (ref, labels) => {
-        if (labels.length) {
-            Array.from(labels).forEach(label => label.addEventListener('click', ref.click.bind(ref)));
-            let firstLabelId = labels[0].id;
-            if (!labels[0].id) {
-                firstLabelId = `${labels[0].htmlFor}_Label`;
-                labels[0].id = firstLabelId;
-            }
-            ref.setAttribute('aria-labelledby', firstLabelId);
-        }
-    };
-    const setFormValidity = (form) => {
-        const nativeControlValidity = Array.from(form.elements)
-            .filter((element) => !element.tagName.includes('-') && element.validity)
-            .map((element) => element.validity.valid);
-        const polyfilledElements = formElementsMap.get(form) || [];
-        const polyfilledValidity = Array.from(polyfilledElements)
-            .filter(control => control.isConnected)
-            .map((control) => internalsMap.get(control).validity.valid);
-        const hasInvalid = [...nativeControlValidity, ...polyfilledValidity].includes(false);
-        form.toggleAttribute('internals-invalid', hasInvalid);
-        form.toggleAttribute('internals-valid', !hasInvalid);
-    };
-    const formInputCallback = (event) => {
-        setFormValidity(findParentForm(event.target));
-    };
-    const formChangeCallback = (event) => {
-        setFormValidity(findParentForm(event.target));
-    };
-    const wireSubmitLogic = (form) => {
-        const submitButtonSelector = ['button[type=submit]', 'input[type=submit]', 'button:not([type])']
-            .map(sel => `${sel}:not([disabled])`)
-            .map(sel => `${sel}:not([form])${form.id ? `,${sel}[form='${form.id}']` : ''}`)
-            .join(',');
-        form.addEventListener('click', event => {
-            const target = event.target;
-            if (target.closest(submitButtonSelector)) {
-                const elements = formElementsMap.get(form);
-                if (form.noValidate) {
-                    return;
-                }
-                if (elements.size) {
-                    const nodes = Array.from(elements);
-                    const validityList = nodes
-                        .reverse()
-                        .map(node => {
-                        const internals = internalsMap.get(node);
-                        return internals.reportValidity();
-                    });
-                    if (validityList.includes(false)) {
-                        event.preventDefault();
-                    }
-                }
-            }
-        });
-    };
-    const formResetCallback = (event) => {
-        const elements = formElementsMap.get(event.target);
-        if (elements && elements.size) {
-            elements.forEach(element => {
-                if (element.constructor.formAssociated && element.formResetCallback) {
-                    element.formResetCallback.apply(element);
-                }
-            });
-        }
-    };
-    const initForm = (ref, form, internals) => {
-        if (form) {
-            const formElements = formElementsMap.get(form);
-            if (formElements) {
-                formElements.add(ref);
-            }
-            else {
-                const initSet = new Set();
-                initSet.add(ref);
-                formElementsMap.set(form, initSet);
-                wireSubmitLogic(form);
-                form.addEventListener('reset', formResetCallback);
-                form.addEventListener('input', formInputCallback);
-                form.addEventListener('change', formChangeCallback);
-            }
-            formsMap.set(form, { ref, internals });
-            if (ref.constructor['formAssociated'] && ref.formAssociatedCallback) {
-                setTimeout(() => {
-                    ref.formAssociatedCallback.apply(ref, [form]);
-                }, 0);
-            }
-            setFormValidity(form);
-        }
-    };
-    const findParentForm = (elem) => {
-        let parent = elem.parentNode;
-        if (parent && parent.tagName !== 'FORM') {
-            parent = findParentForm(parent);
-        }
-        return parent;
-    };
-    const throwIfNotFormAssociated = (ref, message, ErrorType = DOMException) => {
-        if (!ref.constructor['formAssociated']) {
-            throw new ErrorType(message);
-        }
-    };
-    const overrideFormMethod = (form, returnValue, method) => {
-        const elements = formElementsMap.get(form);
-        if (elements && elements.size) {
-            elements.forEach(element => {
-                const internals = internalsMap.get(element);
-                const valid = internals[method]();
-                if (!valid) {
-                    returnValue = false;
-                }
-            });
-        }
-        return returnValue;
-    };
-    const upgradeInternals = (ref) => {
-        if (ref.constructor['formAssociated']) {
-            const internals = internalsMap.get(ref);
-            const { labels, form } = internals;
-            initLabels(ref, labels);
-            initForm(ref, form, internals);
-        }
-    };
-    function mutationObserverExists() {
-        return typeof MutationObserver !== 'undefined';
-    }
-
-    class ValidityState {
-        constructor() {
-            this.badInput = false;
-            this.customError = false;
-            this.patternMismatch = false;
-            this.rangeOverflow = false;
-            this.rangeUnderflow = false;
-            this.stepMismatch = false;
-            this.tooLong = false;
-            this.tooShort = false;
-            this.typeMismatch = false;
-            this.valid = true;
-            this.valueMissing = false;
-            Object.seal(this);
-        }
-    }
-    const setValid = (validityObject) => {
-        validityObject.badInput = false;
-        validityObject.customError = false;
-        validityObject.patternMismatch = false;
-        validityObject.rangeOverflow = false;
-        validityObject.rangeUnderflow = false;
-        validityObject.stepMismatch = false;
-        validityObject.tooLong = false;
-        validityObject.tooShort = false;
-        validityObject.typeMismatch = false;
-        validityObject.valid = true;
-        validityObject.valueMissing = false;
-        return validityObject;
-    };
-    const reconcileValidity = (validityObject, newState, form) => {
-        validityObject.valid = isValid(newState);
-        Object.keys(newState).forEach(key => validityObject[key] = newState[key]);
-        if (form) {
-            setFormValidity(form);
-        }
-        return validityObject;
-    };
-    const isValid = (validityState) => {
-        let valid = true;
-        for (let key in validityState) {
-            if (key !== 'valid' && validityState[key] !== false) {
-                valid = false;
-            }
-        }
-        return valid;
-    };
-
-    const customStateMap = new WeakMap();
-    function addState(ref, stateName) {
-        ref.toggleAttribute(stateName, true);
-        if (ref.part) {
-            ref.part.add(stateName);
-        }
-    }
-    class CustomStateSet extends Set {
-        static get isPolyfilled() {
-            return true;
-        }
-        constructor(ref) {
-            super();
-            if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
-                throw new TypeError('Illegal constructor');
-            }
-            customStateMap.set(this, ref);
-        }
-        add(state) {
-            if (!/^--/.test(state) || typeof state !== 'string') {
-                throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${state} must start with '--'.`);
-            }
-            const result = super.add(state);
-            const ref = customStateMap.get(this);
-            const stateName = `state${state}`;
-            if (ref.isConnected) {
-                addState(ref, stateName);
-            }
-            else {
-                setTimeout(() => {
-                    addState(ref, stateName);
-                });
-            }
-            return result;
-        }
-        clear() {
-            for (let [entry] of this.entries()) {
-                this.delete(entry);
-            }
-            super.clear();
-        }
-        delete(state) {
-            const result = super.delete(state);
-            const ref = customStateMap.get(this);
-            if (ref.isConnected) {
-                ref.toggleAttribute(`state${state}`, false);
-                if (ref.part) {
-                    ref.part.remove(`state${state}`);
-                }
-            }
-            else {
-                setTimeout(() => {
-                    ref.toggleAttribute(`state${state}`, false);
-                    if (ref.part) {
-                        ref.part.remove(`state${state}`);
-                    }
-                });
-            }
-            return result;
-        }
-    }
-
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m") throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-
-    var _HTMLFormControlsCollection_elements;
-    class HTMLFormControlsCollection {
-        constructor(elements) {
-            _HTMLFormControlsCollection_elements.set(this, void 0);
-            __classPrivateFieldSet(this, _HTMLFormControlsCollection_elements, elements, "f");
-            for (let i = 0; i < elements.length; i++) {
-                let element = elements[i];
-                this[i] = element;
-                if (element.hasAttribute('name')) {
-                    this[element.getAttribute('name')] = element;
-                }
-            }
-            Object.freeze(this);
-        }
-        get length() {
-            return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, "f").length;
-        }
-        [(_HTMLFormControlsCollection_elements = new WeakMap(), Symbol.iterator)]() {
-            return __classPrivateFieldGet(this, _HTMLFormControlsCollection_elements, "f")[Symbol.iterator]();
-        }
-        item(i) {
-            return this[i] == null ? null : this[i];
-        }
-        namedItem(name) {
-            return this[name] == null ? null : this[name];
-        }
-    }
-
-    function patchFormPrototype() {
-        const checkValidity = HTMLFormElement.prototype.checkValidity;
-        HTMLFormElement.prototype.checkValidity = checkValidityOverride;
-        const reportValidity = HTMLFormElement.prototype.reportValidity;
-        HTMLFormElement.prototype.reportValidity = reportValidityOverride;
-        function checkValidityOverride(...args) {
-            let returnValue = checkValidity.apply(this, args);
-            return overrideFormMethod(this, returnValue, 'checkValidity');
-        }
-        function reportValidityOverride(...args) {
-            let returnValue = reportValidity.apply(this, args);
-            return overrideFormMethod(this, returnValue, 'reportValidity');
-        }
-        const { get } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'elements');
-        Object.defineProperty(HTMLFormElement.prototype, 'elements', {
-            get(...args) {
-                const elements = get.call(this, ...args);
-                const polyfilledElements = Array.from(formElementsMap.get(this) || []);
-                if (polyfilledElements.length === 0) {
-                    return elements;
-                }
-                const orderedElements = Array.from(elements).concat(polyfilledElements).sort((a, b) => {
-                    if (a.compareDocumentPosition) {
-                        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
-                    }
-                    return 0;
-                });
-                return new HTMLFormControlsCollection(orderedElements);
-            },
-        });
-    }
-
-    class ElementInternals {
-        static get isPolyfilled() {
-            return true;
-        }
-        constructor(ref) {
-            if (!ref || !ref.tagName || ref.tagName.indexOf('-') === -1) {
-                throw new TypeError('Illegal constructor');
-            }
-            const rootNode = ref.getRootNode();
-            const validity = new ValidityState();
-            this.states = new CustomStateSet(ref);
-            refMap.set(this, ref);
-            validityMap.set(this, validity);
-            internalsMap.set(ref, this);
-            initAom(ref, this);
-            initRef(ref, this);
-            Object.seal(this);
-            if (rootNode instanceof DocumentFragment) {
-                deferUpgrade(rootNode);
-            }
-        }
-        checkValidity() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
-            if (!this.willValidate) {
-                return true;
-            }
-            const validity = validityMap.get(this);
-            if (!validity.valid) {
-                const validityEvent = new Event('invalid', {
-                    bubbles: false,
-                    cancelable: true,
-                    composed: false
-                });
-                ref.dispatchEvent(validityEvent);
-            }
-            return validity.valid;
-        }
-        get form() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-            let form;
-            if (ref.constructor['formAssociated'] === true) {
-                form = findParentForm(ref);
-            }
-            return form;
-        }
-        get labels() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-            const id = ref.getAttribute('id');
-            const hostRoot = ref.getRootNode();
-            if (hostRoot && id) {
-                return hostRoot.querySelectorAll(`[for="${id}"]`);
-            }
-            return [];
-        }
-        reportValidity() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
-            if (!this.willValidate) {
-                return true;
-            }
-            const valid = this.checkValidity();
-            const anchor = validationAnchorMap.get(this);
-            if (anchor && !ref.constructor['formAssociated']) {
-                throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
-            }
-            if (!valid && anchor) {
-                ref.focus();
-                anchor.focus();
-            }
-            return valid;
-        }
-        setFormValue(value) {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);
-            removeHiddenInputs(this);
-            if (value != null && !(value instanceof FormData)) {
-                if (ref.getAttribute('name')) {
-                    const hiddenInput = createHiddenInput(ref, this);
-                    hiddenInput.value = value;
-                }
-            }
-            else if (value != null && value instanceof FormData) {
-                Array.from(value).reverse().forEach(([formDataKey, formDataValue]) => {
-                    if (typeof formDataValue === 'string') {
-                        const hiddenInput = createHiddenInput(ref, this);
-                        hiddenInput.name = formDataKey;
-                        hiddenInput.value = formDataValue;
-                    }
-                });
-            }
-            refValueMap.set(ref, value);
-        }
-        setValidity(validityChanges, validationMessage, anchor) {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);
-            if (!validityChanges) {
-                throw new TypeError('Failed to execute \'setValidity\' on \'ElementInternals\': 1 argument required, but only 0 present.');
-            }
-            validationAnchorMap.set(this, anchor);
-            const validity = validityMap.get(this);
-            const validityChangesObj = {};
-            for (const key in validityChanges) {
-                validityChangesObj[key] = validityChanges[key];
-            }
-            if (Object.keys(validityChangesObj).length === 0) {
-                setValid(validity);
-            }
-            const check = { ...validity, ...validityChangesObj };
-            delete check.valid;
-            const { valid } = reconcileValidity(validity, check, this.form);
-            if (!valid && !validationMessage) {
-                throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.`);
-            }
-            validationMessageMap.set(this, valid ? '' : validationMessage);
-            if (ref.isConnected) {
-                ref.toggleAttribute('internals-invalid', !valid);
-                ref.toggleAttribute('internals-valid', valid);
-                ref.setAttribute('aria-invalid', `${!valid}`);
-            }
-            else {
-                validityUpgradeMap.set(ref, this);
-            }
-        }
-        get shadowRoot() {
-            const ref = refMap.get(this);
-            const shadowRoot = shadowRootMap.get(ref);
-            if (shadowRoot) {
-                return shadowRoot;
-            }
-            return null;
-        }
-        get validationMessage() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-            return validationMessageMap.get(this);
-        }
-        get validity() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-            const validity = validityMap.get(this);
-            return validity;
-        }
-        get willValidate() {
-            const ref = refMap.get(this);
-            throwIfNotFormAssociated(ref, `Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`);
-            if ((ref.disabled || ref.hasAttribute('disabled')) ||
-                ref.hasAttribute('readonly')) {
-                return false;
-            }
-            return true;
-        }
-    }
-    function isElementInternalsSupported() {
-        if (typeof window === 'undefined' || !window.ElementInternals || !HTMLElement.prototype.attachInternals) {
-            return false;
-        }
-        class ElementInternalsFeatureDetection extends HTMLElement {
-            constructor() {
-                super();
-                this.internals = this.attachInternals();
-            }
-        }
-        const randomName = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, '')}`;
-        customElements.define(randomName, ElementInternalsFeatureDetection);
-        const featureDetectionElement = new ElementInternalsFeatureDetection();
-        return [
-            'shadowRoot',
-            'form',
-            'willValidate',
-            'validity',
-            'validationMessage',
-            'labels',
-            'setFormValue',
-            'setValidity',
-            'checkValidity',
-            'reportValidity'
-        ].every(prop => prop in featureDetectionElement.internals);
-    }
-    if (!isElementInternalsSupported()) {
-        if (typeof window !== 'undefined') {
-            window.ElementInternals = ElementInternals;
-        }
-        if (typeof CustomElementRegistry !== 'undefined') {
-            const define = CustomElementRegistry.prototype.define;
-            CustomElementRegistry.prototype.define = function (name, constructor, options) {
-                if (constructor.formAssociated) {
-                    const connectedCallback = constructor.prototype.connectedCallback;
-                    constructor.prototype.connectedCallback = function () {
-                        if (!connectedCallbackMap.has(this)) {
-                            connectedCallbackMap.set(this, true);
-                            if (this.hasAttribute('disabled')) {
-                                setDisabled(this, true);
-                            }
-                        }
-                        if (connectedCallback != null) {
-                            connectedCallback.apply(this);
-                        }
-                        upgradeInternals(this);
-                    };
-                }
-                define.call(this, name, constructor, options);
-            };
-        }
-        if (typeof HTMLElement !== 'undefined') {
-            HTMLElement.prototype.attachInternals = function () {
-                if (!this.tagName) {
-                    return {};
-                }
-                else if (this.tagName.indexOf('-') === -1) {
-                    throw new Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);
-                }
-                if (internalsMap.has(this)) {
-                    throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);
-                }
-                return new ElementInternals(this);
-            };
-        }
-        if (typeof Element !== 'undefined') {
-            function attachShadowObserver(...args) {
-                const shadowRoot = attachShadow.apply(this, args);
-                shadowRootMap.set(this, shadowRoot);
-                if (mutationObserverExists()) {
-                    const observer = new MutationObserver(observerCallback);
-                    if (window.ShadyDOM) {
-                        observer.observe(this, observerConfig);
-                    }
-                    else {
-                        observer.observe(shadowRoot, observerConfig);
-                    }
-                    shadowHostsMap.set(this, observer);
-                }
-                return shadowRoot;
-            }
-            const attachShadow = Element.prototype.attachShadow;
-            Element.prototype.attachShadow = attachShadowObserver;
-        }
-        if (mutationObserverExists() && typeof document !== 'undefined') {
-            const documentObserver = new MutationObserver(observerCallback);
-            documentObserver.observe(document.documentElement, observerConfig);
-        }
-        if (typeof HTMLFormElement !== 'undefined') {
-            patchFormPrototype();
-        }
-        if (typeof window !== 'undefined' && !window.CustomStateSet) {
-            window.CustomStateSet = CustomStateSet;
-        }
-    }
-    else if (typeof window !== 'undefined' && !window.CustomStateSet) {
-        window.CustomStateSet = CustomStateSet;
-        const attachInternals = HTMLElement.prototype.attachInternals;
-        HTMLElement.prototype.attachInternals = function (...args) {
-            const internals = attachInternals.call(this, args);
-            internals.states = new CustomStateSet(this);
-            return internals;
-        };
-    }
-
-})();
-
 const observedAttributes$4 = ['required', 'pattern'];
 
 const errorAttributes = {
@@ -2427,7 +1839,7 @@ const proxyInputMixin =
 
           this.setSelectionRange = this.inputElement?.setSelectionRange?.bind(this.inputElement);
 
-          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+          forwardAttrs$1(this, this.inputElement, { includeAttrs: ['inputmode'] });
         });
 
         if (proxyParentValidation) {
@@ -2468,12 +1880,12 @@ const proxyInputMixin =
     };
 
 const composedProxyInputMixin = (proxyInputMixinConfig) =>
-  compose(
+  compose$1(
     proxyInputMixin(proxyInputMixinConfig),
     // in order to use input-wrapper across all our input components, we need to inject its theme
     // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
     // in the proxy input component
-    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+    createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') })
   );
 
 // this is needed because we might generate the same css vars names
@@ -2517,7 +1929,7 @@ const portalMixin =
   (superclass) => {
     const eleDisplayName = name || sanitizeSelector(selector);
 
-    const BaseClass = createStyleMixin({
+    const BaseClass = createStyleMixin$1({
       mappings,
     })(superclass);
 
@@ -2525,8 +1937,8 @@ const portalMixin =
       static get cssVarList() {
         return {
           ...BaseClass.cssVarList,
-          [eleDisplayName]: createCssVarsList(
-            kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
+          [eleDisplayName]: createCssVarsList$1(
+            kebabCaseJoin$1(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName),
             mappings
           ),
         };
@@ -2573,7 +1985,7 @@ const portalMixin =
       async init() {
         super.init?.();
         const portalEle = await this.#portalEle;
-        forwardAttrs(this, portalEle, {
+        forwardAttrs$1(this, portalEle, {
           [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
         });
 
@@ -2988,9 +2400,9 @@ const createIcon = async (src) => {
 
 /* eslint-disable no-use-before-define */
 
-const componentName$11 = getComponentName('icon');
+const componentName$11 = getComponentName$1('icon');
 
-class RawIcon extends createBaseClass({ componentName: componentName$11, baseSelector: 'slot' }) {
+class RawIcon extends createBaseClass$1({ componentName: componentName$11, baseSelector: 'slot' }) {
   static get observedAttributes() {
     return ['src'];
   }
@@ -3054,14 +2466,14 @@ class RawIcon extends createBaseClass({ componentName: componentName$11, baseSel
   }
 }
 
-const IconClass = compose(
-  createStyleMixin({
+const IconClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       fill: {},
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawIcon);
 
 const clickableMixin = (superclass) =>
@@ -3075,7 +2487,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$10 = getComponentName('button');
+const componentName$10 = getComponentName$1('button');
 
 const resetStyles = `
 	:host {
@@ -3121,8 +2533,8 @@ const { host: host$o, label: label$a, slottedIcon } = {
 
 let loadingIndicatorStyles;
 
-const ButtonClass = compose(
-  createStyleMixin({
+const ButtonClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { property: 'width' },
       hostHeight: { property: 'height' },
@@ -3165,8 +2577,8 @@ const ButtonClass = compose(
     },
   }),
   clickableMixin,
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(
   createProxy({
     slots: ['', 'prefix', 'label', 'suffix'],
@@ -3228,7 +2640,7 @@ loadingIndicatorStyles = `
 	}
 `;
 
-const globalRefs$z = getThemeRefs(globals);
+const globalRefs$z = getThemeRefs(globals$1);
 const compVars$6 = ButtonClass.cssVarList;
 
 const mode = {
@@ -3268,7 +2680,7 @@ const button = {
   [compVars$6.verticalPadding]: '1em',
   [compVars$6.horizontalPadding]: '0.875em',
 
-  [compVars$6.outlineWidth]: globals.border.sm,
+  [compVars$6.outlineWidth]: globals$1.border.sm,
   [compVars$6.outlineOffset]: '0px', // keep `px` unit for external calc
   [compVars$6.outlineStyle]: 'solid',
   [compVars$6.outlineColor]: 'transparent',
@@ -3659,7 +3071,7 @@ const inputFloatingLabelStyle = () => {
   `;
 };
 
-const componentName$$ = getComponentName('text-field');
+const componentName$$ = getComponentName$1('text-field');
 
 const observedAttrs$2 = ['type', 'label-type', 'copy-to-clipboard'];
 
@@ -3740,13 +3152,13 @@ const customMixin$c = (superclass) =>
     }
   };
 
-const TextFieldClass = compose(
-  createStyleMixin({
+const TextFieldClass = compose$1(
+  createStyleMixin$1({
     mappings: textFieldMappings,
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$c
 )(
   createProxy({
@@ -3785,8 +3197,8 @@ const TextFieldClass = compose(
   })
 );
 
-const componentName$_ = getComponentName('input-wrapper');
-const globalRefs$y = getThemeRefs(globals);
+const componentName$_ = getComponentName$1('input-wrapper');
+const globalRefs$y = getThemeRefs(globals$1);
 
 const [theme$1, refs, vars$S] = createHelperVars(
   {
@@ -3916,7 +3328,7 @@ var inputWrapper = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const globalRefs$x = getThemeRefs(globals);
+const globalRefs$x = getThemeRefs(globals$1);
 const vars$R = TextFieldClass.cssVarList;
 
 const textField$1 = {
@@ -4018,7 +3430,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$Z = getComponentName('password');
+const componentName$Z = getComponentName$1('password');
 
 const customMixin$b = (superclass) =>
   class PasswordFieldMixinClass extends superclass {
@@ -4150,8 +3562,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const PasswordClass = compose(
-  createStyleMixin({
+const PasswordClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$m, property: 'width' },
       hostMinWidth: { ...host$m, property: 'min-width' },
@@ -4222,7 +3634,7 @@ const PasswordClass = compose(
       valueInputHeight: { ...inputElement$3, property: 'height' },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   externalInputMixin({
     inputType: 'password',
     inputName: 'password',
@@ -4230,7 +3642,7 @@ const PasswordClass = compose(
     noBlurDispatch: true,
   }),
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   passwordDraggableMixin,
   customMixin$b
 )(
@@ -4303,7 +3715,7 @@ const PasswordClass = compose(
   })
 );
 
-const globalRefs$w = getThemeRefs(globals);
+const globalRefs$w = getThemeRefs(globals$1);
 const vars$Q = PasswordClass.cssVarList;
 
 const password = {
@@ -4357,15 +3769,15 @@ var password$1 = /*#__PURE__*/Object.freeze({
   vars: vars$Q
 });
 
-const componentName$Y = getComponentName('number-field');
+const componentName$Y = getComponentName$1('number-field');
 
-const NumberFieldClass = compose(
-  createStyleMixin({
+const NumberFieldClass = compose$1(
+  createStyleMixin$1({
     mappings: textFieldMappings,
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin
+  componentNameValidationMixin$1
 )(
   createProxy({
     slots: ['', 'prefix', 'suffix'],
@@ -4446,7 +3858,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$P
 });
 
-const componentName$X = getComponentName('email-field');
+const componentName$X = getComponentName$1('email-field');
 
 const defaultPattern = "^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$";
 const defaultAutocomplete = 'username';
@@ -4467,11 +3879,11 @@ const customMixin$a = (superclass) =>
     }
   };
 
-const EmailFieldClass = compose(
-  createStyleMixin({
+const EmailFieldClass = compose$1(
+  createStyleMixin$1({
     mappings: textFieldMappings,
   }),
-  draggableMixin,
+  draggableMixin$1,
   externalInputMixin({
     inputType: 'email',
     inputName: 'email',
@@ -4479,7 +3891,7 @@ const EmailFieldClass = compose(
     includeAttrs: ['disabled', 'readonly', 'pattern'],
   }),
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$a
 )(
   createProxy({
@@ -4570,7 +3982,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$O
 });
 
-const componentName$W = getComponentName('text-area');
+const componentName$W = getComponentName$1('text-area');
 
 const {
   host: host$l,
@@ -4592,8 +4004,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const TextAreaClass = compose(
-  createStyleMixin({
+const TextAreaClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$l, property: 'width' },
       hostMinWidth: { ...host$l, property: 'min-width' },
@@ -4627,9 +4039,9 @@ const TextAreaClass = compose(
       inputTextAlign: { ...textArea$2, property: 'text-align' },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin
+  componentNameValidationMixin$1
 )(
   createProxy({
     slots: [],
@@ -4705,14 +4117,14 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
 });
 
 const createBaseInputClass = (...args) =>
-  compose(
+  compose$1(
     inputValidationMixin,
     changeMixin,
-    normalizeBooleanAttributesMixin,
+    normalizeBooleanAttributesMixin$1,
     inputEventsDispatchingMixin
-  )(createBaseClass(...args));
+  )(createBaseClass$1(...args));
 
-const componentName$V = getComponentName('boolean-field-internal');
+const componentName$V = getComponentName$1('boolean-field-internal');
 
 createBaseInputClass({ componentName: componentName$V, baseSelector: 'div' });
 
@@ -4733,7 +4145,7 @@ const booleanFieldMixin = (superclass) =>
       this.inputElement = this.shadowRoot.querySelector(componentName$V);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
           'required',
           'full-width',
@@ -4799,7 +4211,7 @@ descope-boolean-field-internal {
 }
 `;
 
-const componentName$U = getComponentName('checkbox');
+const componentName$U = getComponentName$1('checkbox');
 
 const {
   host: host$k,
@@ -4821,8 +4233,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const CheckboxClass = compose(
-  createStyleMixin({
+const CheckboxClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$k, property: 'width' },
       hostDirection: { ...host$k, property: 'direction' },
@@ -4865,9 +4277,9 @@ const CheckboxClass = compose(
       ],
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   booleanFieldMixin
 )(
   createProxy({
@@ -4960,7 +4372,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$M
 });
 
-const componentName$T = getComponentName('switch-toggle');
+const componentName$T = getComponentName$1('switch-toggle');
 
 const {
   host: host$j,
@@ -4982,8 +4394,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const SwitchToggleClass = compose(
-  createStyleMixin({
+const SwitchToggleClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$j, property: 'width' },
       hostDirection: { ...host$j, property: 'direction' },
@@ -5033,9 +4445,9 @@ const SwitchToggleClass = compose(
       inputOutlineStyle: { ...track, property: 'outline-style' },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   booleanFieldMixin
 )(
   createProxy({
@@ -5105,7 +4517,7 @@ const SwitchToggleClass = compose(
 const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 
-const globalRefs$v = getThemeRefs(globals);
+const globalRefs$v = getThemeRefs(globals$1);
 const vars$L = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
@@ -5178,9 +4590,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   vars: vars$L
 });
 
-const componentName$S = getComponentName('container');
+const componentName$S = getComponentName$1('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$S, baseSelector: 'slot' }) {
+class RawContainer extends createBaseClass$1({ componentName: componentName$S, baseSelector: 'slot' }) {
   constructor() {
     super();
 
@@ -5202,8 +4614,8 @@ class RawContainer extends createBaseClass({ componentName: componentName$S, bas
   }
 }
 
-const ContainerClass = compose(
-  createStyleMixin({
+const ContainerClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostHeight: { selector: () => ':host', property: 'height' },
       hostWidth: { selector: () => ':host', property: 'width' },
@@ -5235,11 +4647,11 @@ const ContainerClass = compose(
       boxShadow: {},
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawContainer);
 
-const globalRefs$u = getThemeRefs(globals);
+const globalRefs$u = getThemeRefs(globals$1);
 
 const compVars$5 = ContainerClass.cssVarList;
 
@@ -5371,7 +4783,7 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   let style;
   const getContent = () => style;
 
-  class RawCssVarImageClass extends createBaseClass({
+  class RawCssVarImageClass extends createBaseClass$1({
     componentName,
     baseSelector: ':host > div',
   }) {
@@ -5399,8 +4811,8 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
     }
   }
 
-  const CssVarImageClass = compose(
-    createStyleMixin({
+  const CssVarImageClass = compose$1(
+    createStyleMixin$1({
       mappings: {
         height: { selector: () => ':host > div' },
         width: { selector: () => ':host > div' },
@@ -5408,75 +4820,749 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
         [fallbackVarName]: { property: 'content' },
       },
     }),
-    draggableMixin,
-    componentNameValidationMixin
+    draggableMixin$1,
+    componentNameValidationMixin$1
   )(RawCssVarImageClass);
 
-  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
+  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
+
+  return CssVarImageClass;
+};
+
+const componentName$R = getComponentName$1('logo');
+
+const LogoClass = createCssVarImageClass({
+  componentName: componentName$R,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});
+
+const vars$J = LogoClass.cssVarList;
+
+const logo$2 = {
+  [vars$J.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+};
+
+var logo$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo$2,
+  vars: vars$J
+});
+
+const componentName$Q = getComponentName$1('totp-image');
+
+const TotpImageClass = createCssVarImageClass({
+  componentName: componentName$Q,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});
+
+const vars$I = TotpImageClass.cssVarList;
+
+const logo$1 = {
+  [vars$I.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+};
+
+var totpImage = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo$1,
+  vars: vars$I
+});
+
+const componentName$P = getComponentName$1('notp-image');
+
+const NotpImageClass = createCssVarImageClass({
+  componentName: componentName$P,
+  varName: 'url',
+  fallbackVarName: 'fallbackUrl',
+});
+
+const vars$H = NotpImageClass.cssVarList;
+
+const logo = {
+  [vars$H.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+};
+
+var notpImage = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo,
+  vars: vars$H
+});
+
+const direction = 'ltr';
+
+const colors$1 = genColors$1({
+  surface: {
+    main: '#ffffff',
+    dark: '#636c74',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    main: '#802ed6',
+    dark: '#6410bc',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+});
+
+const fonts = {
+  font1: {
+    family: [
+      'Roboto',
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Roboto',
+    url: 'https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900',
+  },
+  font2: {
+    family: [
+      'ui-sans-serif',
+      'system-ui',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'Noto Sans',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji',
+    ],
+    label: 'Sans Serif',
+  },
+};
+
+const fontsRef = getThemeRefs$1({ fonts }).fonts;
+
+const typography = {
+  h1: {
+    font: fontsRef.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef.font1.family,
+    weight: '800',
+    size: '38px',
+  },
+  h3: {
+    font: fontsRef.font1.family,
+    weight: '600',
+    size: '28px',
+  },
+  subtitle1: {
+    font: fontsRef.font2.family,
+    weight: '500',
+    size: '22px',
+  },
+  subtitle2: {
+    font: fontsRef.font2.family,
+    weight: '400',
+    size: '20px',
+  },
+  body1: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '16px',
+  },
+  body2: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '14px',
+  },
+};
+
+const spacing = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
+};
+
+const border = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
+};
+
+const radius = {
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
+};
+
+const shadow$1 = {
+  wide: {
+    sm: '0 2px 3px -0.5px',
+    md: '0 4px 6px -1px',
+    lg: '0 10px 15px -3px',
+    xl: '0 20px 25px -5px',
+    '2xl': '0 25px 50px -12px',
+  },
+  narrow: {
+    sm: '0 1px 2px -1px',
+    md: '0 2px 4px -2px',
+    lg: '0 4px 6px -4px',
+    xl: '0 8px 10px -6px',
+    '2xl': '0 16px 16px -8px',
+  },
+};
+
+const globals = {
+  colors: colors$1,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow: shadow$1,
+  fonts,
+  direction,
+};
+getThemeVars$1(globals);
+
+const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
+  isFunction(relativeSelectorOrSelectorFn)
+    ? relativeSelectorOrSelectorFn(baseSelector)
+    : `${baseSelector}${
+        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+          ? ` ${relativeSelectorOrSelectorFn}`
+          : relativeSelectorOrSelectorFn
+      }`;
+
+class StyleBuilder {
+  constructor() {
+    this.styleMap = new Map();
+  }
+
+  add(selector, property, value) {
+    if (!this.styleMap.has(selector)) {
+      this.styleMap.set(selector, []);
+    }
+
+    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
+  }
+
+  toString() {
+    return Array.from(this.styleMap.entries()).reduce((acc, [selector, propValArr]) => {
+      const properties = propValArr
+        .map(({ property, value }) => `${property}: ${value}`)
+        .join(';\n');
+
+      return `${acc}${selector} { \n${properties} \n}\n\n`;
+    }, '');
+  }
+}
+
+const normalizeConfig = (attr, config) => {
+  const defaultMapping = { selector: '', property: kebabCase(attr) };
+
+  if (!config || !Object.keys(config).length) return [defaultMapping];
+
+  if (Array.isArray(config)) return config.map((entry) => ({ ...defaultMapping, ...entry }));
+
+  return [{ ...defaultMapping, ...config }];
+};
+
+const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
+
+const createStyle = (componentName, baseSelector, mappings) => {
+  const style = new StyleBuilder();
+  const createFallbackVar = (fallback, origVarName) => {
+    if (!fallback) return '';
+    if (typeof fallback === 'string') return fallback;
+
+    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
+    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
+  };
+
+  Object.keys(mappings).forEach((attr) => {
+    const attrConfig = normalizeConfig(attr, mappings[attr]);
+
+    const cssVarName = getCssVarName(componentName, attr);
+
+    attrConfig.forEach(
+      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        const fallbackValue = createFallbackVar(fallback, cssVarName);
+        style.add(
+          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction(property) ? property() : property,
+          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+        );
+      }
+    );
+  });
+
+  return style.toString();
+};
+
+const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
+  if (!fallback) return {};
+
+  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
+  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
+  return {
+    [fallbackAttrName]: fallbackVarName,
+    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
+  };
+};
+
+const createCssVarsList = (componentName, mappings) =>
+  Object.keys(mappings).reduce((acc, attr) => {
+    const varName = getCssVarName(componentName, attr);
+
+    return Object.assign(
+      acc,
+      { [attr]: varName },
+      getFallbackVarsNames(attr, varName, mappings[attr])
+    );
+  }, {});
+
+// on some cases we need a selector to be more specific than another
+// for this we have this fn that generate a class selector multiple times
+const createClassSelectorSpecifier = (className, numOfRepeats) =>
+  Array(numOfRepeats).fill(`.${className}`).join('');
+
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
+
+const createStyleMixin =
+  ({ mappings = {}, componentNameOverride = '' }) =>
+  (superclass) => {
+    const componentName = componentNameOverride || superclass.componentName;
+
+    return class CustomStyleMixinClass extends superclass {
+      static get cssVarList() {
+        return {
+          ...superclass.cssVarList,
+          ...createCssVarsList(componentName, {
+            ...mappings,
+          }),
+        };
+      }
+
+      #overrideStyleEle;
+
+      #themeStyleEle;
+
+      #disconnectThemeManager;
+
+      #componentNameSuffix;
+
+      #themeSection;
+
+      #rootElement;
+
+      #baseSelector;
+
+      #styleAttributes;
+
+      #getRootElement;
+
+      // we are using this mixin also for portalMixin
+      // so we should be able to inject styles to other DOM elements
+      // this is why we need to support these overrides
+      constructor({
+        getRootElement,
+        componentNameSuffix = '',
+        themeSection = BASE_THEME_SECTION,
+        baseSelector,
+      } = {}) {
+        super();
+        this.#componentNameSuffix = componentNameSuffix;
+        this.#themeSection = themeSection;
+        this.#baseSelector = baseSelector ?? this.baseSelector;
+        this.#getRootElement = getRootElement;
+
+        this.#styleAttributes = Object.keys(CustomStyleMixinClass.cssVarList).map((key) =>
+          kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+        );
+      }
+
+      // eslint-disable-next-line class-methods-use-this
+      get #componentTheme() {
+        return componentsThemeManager.currentTheme?.[componentName] || '';
+      }
+
+      #onComponentThemeChange() {
+        this.#themeStyleEle.innerHTML = this.#componentTheme[this.#themeSection];
+      }
+
+      #createComponentTheme() {
+        this.#themeStyleEle = document.createElement('style');
+        this.#themeStyleEle.id = `style-mixin-theme__${componentName}`;
+        this.#rootElement.prepend(this.#themeStyleEle);
+        this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(
+          this.#onComponentThemeChange.bind(this)
+        );
+        this.#onComponentThemeChange();
+      }
+
+      #createOverridesStyle() {
+        if (this.#styleAttributes.length) {
+          this.#overrideStyleEle = document.createElement('style');
+          this.#overrideStyleEle.id = `style-mixin-overrides__${componentName}`;
+
+          const classSpecifier = createClassSelectorSpecifier(
+            componentName,
+            CSS_SELECTOR_SPECIFIER_MULTIPLY
+          );
+
+          this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+          this.#rootElement.append(this.#overrideStyleEle);
+        }
+      }
+
+      #setAttrOverride(attrName, value) {
+        const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+        if (!style) return;
+
+        const varName = getCssVarName(
+          componentName,
+          attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+        );
+
+        if (value) style?.setProperty(varName, value);
+        else {
+          style?.removeProperty(varName);
+          this.removeAttribute(attrName);
+        }
+      }
+
+      #updateOverridesStyle(attrs = []) {
+        let shouldUpdate = false;
+
+        attrs.forEach((attr) => {
+          if (this.#styleAttributes.includes(attr)) {
+            this.#setAttrOverride(attr, this.getAttribute(attr));
+            shouldUpdate = true;
+          }
+        });
+
+        if (shouldUpdate) {
+          // we are rewriting the style back to the style tag
+          this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+        }
+      }
+
+      #createMappingStyle() {
+        if (Object.keys(mappings).length) {
+          const themeStyle = document.createElement('style');
+          themeStyle.id = `style-mixin-mappings__${componentName}`;
+          themeStyle.innerHTML = createStyle(
+            kebabCaseJoin(componentName, this.#componentNameSuffix),
+            this.#baseSelector,
+            mappings
+          );
+          this.#rootElement.prepend(themeStyle);
+        }
+      }
+
+      #addClassName(className) {
+        (this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+      }
+
+      async init() {
+        super.init?.();
+        if (this.shadowRoot.isConnected) {
+          this.#rootElement = (await this.#getRootElement?.(this)) || this.shadowRoot;
+
+          this.#addClassName(componentName);
+
+          this.#createMappingStyle();
+          this.#createComponentTheme();
+          this.#createOverridesStyle();
+
+          // this is instead attributeChangedCallback because we cannot use static methods in this case
+          observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
+        }
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback?.();
+
+        this.#disconnectThemeManager?.();
+      }
+    };
+  };
+
+const draggableMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+    #styleEle = null;
+
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || [];
+      return [...superAttrs, 'draggable'];
+    }
+
+    constructor() {
+      super();
+
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.innerText = `* { cursor: inherit!important }`;
+    }
+
+    #handleDraggableStyle(isDraggable) {
+      if (isDraggable) {
+        this.shadowRoot.appendChild(this.#styleEle);
+      } else {
+        this.#styleEle.remove();
+      }
+    }
+
+    get isDraggable() {
+      return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false';
+    }
+
+    init() {
+      // because we are delegating the focus from the outer component,
+      // the D&D is not working well in the page editor
+      // in order to solve it we are making the inner component focusable on mouse down
+      // and removing it on complete
+      this.addEventListener('mousedown', (e) => {
+        if (this.isDraggable) {
+          const prevTabIndex = this.baseElement.getAttribute('tabindex');
+          this.baseElement.setAttribute('tabindex', '-1');
+
+          const onComplete = () => {
+            prevTabIndex
+              ? this.baseElement.setAttribute('tabindex', prevTabIndex)
+              : this.baseElement.removeAttribute('tabindex');
+
+            e.target.removeEventListener('mouseup', onComplete);
+            e.target.removeEventListener('dragend', onComplete);
+          };
+
+          e.target.addEventListener('mouseup', onComplete, { once: true });
+          e.target.addEventListener('dragend', onComplete, { once: true });
+        }
+      });
+
+      super.init?.();
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+      if (attrName === 'draggable') {
+        this.#handleDraggableStyle(newValue === 'true');
+      }
+    }
+  };
+
+const componentNameValidationMixin = (superclass) =>
+  class ComponentNameValidationMixinClass extends superclass {
+    #checkComponentName() {
+      const currentComponentName = this.localName;
+
+      if (!superclass.componentName) {
+        throw Error(
+          `component name is not defined on super class, make sure you have a static get for "componentName"`
+        );
+      }
+
+      if (currentComponentName !== superclass.componentName) {
+        throw Error(
+          `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+        );
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.#checkComponentName();
+    }
+  };
+
+const componentsContextMixin = (superclass) =>
+  class ComponentsContextMixinClass extends superclass {
+    updateComponentsContext(componentsContext) {
+      this.dispatchEvent(
+        new CustomEvent('components-context', {
+          bubbles: true,
+          composed: true,
+          detail: componentsContext,
+        })
+      );
+    }
+  };
+
+const hoverableMixin = (superclass) =>
+  class HoverableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mouseover', (e) => {
+        this.setAttribute('hover', 'true');
+        e.target.addEventListener('mouseleave', () => this.removeAttribute('hover'), {
+          once: true,
+        });
+      });
+    }
+  };
 
-  return CssVarImageClass;
-};
+const booleanAttributesList = [
+  'readonly',
+  'focused',
+  'invalid',
+  'has-label',
+  'required',
+  'disabled',
+  'checked',
+  'has-helper',
+  'has-value',
+  'step-buttons-visible',
+  'hover',
+  'has-error-message',
+  'focus-ring',
+  'opened',
+  'active',
+  'password-visible',
+  'opening',
+  'closing',
+  'has-no-options',
+];
 
-const componentName$R = getComponentName('logo');
+const isBooleanAttribute = (attr) => {
+  return booleanAttributesList.includes(attr);
+};
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
+const normalizeBooleanAttributesMixin = (superclass) =>
+  class NormalizeBooleanAttributesMixinClass extends superclass {
+    init() {
+      super.init?.();
 
-const LogoClass = createCssVarImageClass({
-  componentName: componentName$R,
-  varName: 'url',
-  fallbackVarName: 'fallbackUrl',
-});
+      observeAttributes(
+        this,
+        (attrs) =>
+          attrs.forEach((attr) => {
+            const attrVal = this.getAttribute(attr);
 
-const vars$J = LogoClass.cssVarList;
+            if (isBooleanAttribute(attr)) {
+              if (attrVal === '') {
+                this.setAttribute(attr, 'true');
+              } else if (attrVal === 'false') {
+                this.removeAttribute(attr);
+              }
+            } else if (!attrVal) {
+              // eslint-disable-next-line no-console
+              console.debug(
+                `attribute "${attr}" has no value, should it be added to the boolean attributes list?`
+              );
+            }
+          }),
+        {}
+      );
+    }
+  };
 
-const logo$2 = {
-  [vars$J.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
-};
+const createBaseClass = ({ componentName, baseSelector = '' }) => {
+  class DescopeBaseClass extends HTMLElement {
+    static get componentName() {
+      return componentName;
+    }
 
-var logo$3 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo$2,
-  vars: vars$J
-});
+    #baseElement;
 
-const componentName$Q = getComponentName('totp-image');
+    #isInit = true;
 
-const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$Q,
-  varName: 'url',
-  fallbackVarName: 'fallbackUrl',
-});
+    // base selector is the selector for the component wrapper,
+    // it's the highest element that is relevant for the layout
+    // eslint-disable-next-line class-methods-use-this
+    get baseSelector() {
+      return baseSelector;
+    }
 
-const vars$I = TotpImageClass.cssVarList;
+    // this is the base element, which returned by querying the base selector
+    get baseElement() {
+      this.#baseElement ??= this.baseSelector
+        ? this.rootElement.querySelector(this.baseSelector)
+        : this;
 
-const logo$1 = {
-  [vars$I.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
-};
+      if (!this.#baseElement) {
+        // eslint-disable-next-line no-console
+        console.warn('missing base element for component', this.localName);
+      }
+      return this.#baseElement;
+    }
 
-var totpImage = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo$1,
-  vars: vars$I
-});
+    // this is the component root level element,
+    // it can be either a shadow root or the component's node from the light DOM
+    get rootElement() {
+      return this.shadowRoot || this;
+    }
 
-const componentName$P = getComponentName('notp-image');
+    get name() {
+      return this.getAttribute('name');
+    }
 
-const NotpImageClass = createCssVarImageClass({
-  componentName: componentName$P,
-  varName: 'url',
-  fallbackVarName: 'fallbackUrl',
-});
+    connectedCallback() {
+      super.connectedCallback?.();
 
-const vars$H = NotpImageClass.cssVarList;
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
+    }
+  }
 
-const logo = {
-  [vars$H.fallbackUrl]: 'url(https://imgs.descope.com/components/notp-placeholder.svg)',
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
+  )(DescopeBaseClass);
 };
 
-var notpImage = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo,
-  vars: vars$H
-});
-
 const componentName$O = getComponentName('text');
 
 class RawText extends createBaseClass({ componentName: componentName$O, baseSelector: ':host > slot' }) {
@@ -5536,7 +5622,7 @@ const TextClass = compose(
   componentNameValidationMixin
 )(RawText);
 
-const globalRefs$t = getThemeRefs(globals);
+const globalRefs$t = getThemeRefs$1(globals);
 const vars$G = TextClass.cssVarList;
 
 const text$2 = {
@@ -5651,9 +5737,9 @@ const decodeHTML = (html) => {
 /* eslint-disable no-param-reassign */
 
 
-const componentName$N = getComponentName('enriched-text');
+const componentName$N = getComponentName$1('enriched-text');
 
-class EnrichedText extends createBaseClass({ componentName: componentName$N, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass$1({ componentName: componentName$N, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -5701,7 +5787,7 @@ class EnrichedText extends createBaseClass({ componentName: componentName$N, bas
 
     this.#initProcessor();
 
-    observeChildren(this, this.#parseChildren.bind(this));
+    observeChildren$1(this, this.#parseChildren.bind(this));
   }
 
   static get observedAttributes() {
@@ -5817,8 +5903,8 @@ class EnrichedText extends createBaseClass({ componentName: componentName$N, bas
   }
 }
 
-const EnrichedTextClass = compose(
-  createStyleMixin({
+const EnrichedTextClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
@@ -5840,15 +5926,15 @@ const EnrichedTextClass = compose(
       minWidth: {},
     },
   }),
-  createStyleMixin({ componentNameOverride: getComponentName('link') }),
-  createStyleMixin({ componentNameOverride: getComponentName('text') }),
-  draggableMixin,
-  componentNameValidationMixin
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('link') }),
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('text') }),
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(EnrichedText);
 
-const componentName$M = getComponentName('link');
+const componentName$M = getComponentName$1('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$M, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass$1({ componentName: componentName$M, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -5871,14 +5957,14 @@ class RawLink extends createBaseClass({ componentName: componentName$M, baseSele
 		</div>
 		`;
 
-    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+    forwardAttrs$1(this, this.shadowRoot.querySelector('a'), {
       includeAttrs: ['href', 'target', 'tooltip'],
       mapAttrs: {
         tooltip: 'title',
       },
     });
 
-    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+    forwardAttrs$1(this, this.shadowRoot.querySelector('descope-text'), {
       includeAttrs: ['mode', 'variant'],
     });
   }
@@ -5894,8 +5980,8 @@ const selectors$2 = {
 
 const { anchor, text: text$1, host: host$i, wrapper: wrapper$1, link: link$3 } = selectors$2;
 
-const LinkClass = compose(
-  createStyleMixin({
+const LinkClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$i, property: 'width' },
       hostDirection: { ...text$1, property: 'direction' },
@@ -5908,11 +5994,11 @@ const LinkClass = compose(
       cursor: anchor,
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawLink);
 
-const globalRefs$s = getThemeRefs(globals);
+const globalRefs$s = getThemeRefs(globals$1);
 const vars$F = LinkClass.cssVarList;
 
 const link$1 = {
@@ -5948,7 +6034,7 @@ var link$2 = /*#__PURE__*/Object.freeze({
   vars: vars$F
 });
 
-const globalRefs$r = getThemeRefs(globals);
+const globalRefs$r = getThemeRefs(globals$1);
 const vars$E = EnrichedTextClass.cssVarList;
 
 const enrichedText = {
@@ -5986,8 +6072,8 @@ var enrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$E
 });
 
-const componentName$L = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > div' }) {
+const componentName$L = getComponentName$1('divider');
+class RawDivider extends createBaseClass$1({ componentName: componentName$L, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -6026,7 +6112,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$L, baseS
 
     this.textComponent = this.shadowRoot.querySelector('descope-text');
 
-    forwardAttrs(this, this.textComponent, {
+    forwardAttrs$1(this, this.textComponent, {
       includeAttrs: ['mode', 'variant', 'italic'],
     });
   }
@@ -6040,8 +6126,8 @@ const { host: host$h, before, after: after$1, text } = {
   text: { selector: 'descope-text' },
 };
 
-const DividerClass = compose(
-  createStyleMixin({
+const DividerClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$h, property: 'width' },
       hostPadding: { ...host$h, property: 'padding' },
@@ -6082,11 +6168,11 @@ const DividerClass = compose(
       ],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawDivider);
 
-const globalRefs$q = getThemeRefs(globals);
+const globalRefs$q = getThemeRefs(globals$1);
 const compVars$4 = DividerClass.cssVarList;
 
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
@@ -6138,13 +6224,13 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable no-param-reassign */
 
-const componentName$K = getComponentName('passcode-internal');
+const componentName$K = getComponentName$1('passcode-internal');
 
 createBaseInputClass({ componentName: componentName$K, baseSelector: 'div' });
 
-const componentName$J = getComponentName('loader-radial');
+const componentName$J = getComponentName$1('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$J, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass$1({ componentName: componentName$J, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -6167,8 +6253,8 @@ class RawLoaderRadial extends createBaseClass({ componentName: componentName$J,
   }
 }
 
-const LoaderRadialClass = compose(
-  createStyleMixin({
+const LoaderRadialClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostDisplay: { property: 'display' },
       spinnerSize: [{ property: 'width' }, { property: 'height' }],
@@ -6184,11 +6270,11 @@ const LoaderRadialClass = compose(
       animationIterationCount: {},
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawLoaderRadial);
 
-const componentName$I = getComponentName('passcode');
+const componentName$I = getComponentName$1('passcode');
 
 const observedAttributes$3 = ['digits'];
 
@@ -6219,7 +6305,7 @@ const customMixin$9 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$K);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
+      forwardAttrs$1(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
@@ -6252,8 +6338,8 @@ const {
 const textVars$3 = TextFieldClass.cssVarList;
 const loaderVars = LoaderRadialClass.cssVarList;
 
-const PasscodeClass = compose(
-  createStyleMixin({
+const PasscodeClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       fontSize: [{ ...digitField, property: textVars$3.fontSize }, host$g],
       hostWidth: { property: 'width' },
@@ -6290,9 +6376,9 @@ const PasscodeClass = compose(
       spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$9
 )(
   createProxy({
@@ -6426,9 +6512,9 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   vars: vars$C
 });
 
-const componentName$H = getComponentName('loader-linear');
+const componentName$H = getComponentName$1('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$H, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass$1({ componentName: componentName$H, baseSelector: ':host > div' }) {
   static get componentName() {
     return componentName$H;
   }
@@ -6468,8 +6554,8 @@ const selectors$1 = {
 
 const { after, host: host$f } = selectors$1;
 
-const LoaderLinearClass = compose(
-  createStyleMixin({
+const LoaderLinearClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostDisplay: {},
       hostWidth: { ...host$f, property: 'width' },
@@ -6487,11 +6573,11 @@ const LoaderLinearClass = compose(
       animationIterationCount: [{}, after],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawLoaderLinear);
 
-const globalRefs$p = getThemeRefs(globals);
+const globalRefs$p = getThemeRefs(globals$1);
 const vars$B = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
@@ -6536,7 +6622,7 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   vars: vars$B
 });
 
-const globalRefs$o = getThemeRefs(globals);
+const globalRefs$o = getThemeRefs(globals$1);
 const compVars$3 = LoaderRadialClass.cssVarList;
 
 const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
@@ -6591,7 +6677,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   vars: vars$A
 });
 
-const componentName$G = getComponentName('combo-box');
+const componentName$G = getComponentName$1('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -6808,8 +6894,8 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideRenderer();
 
       // Set up observers - order matters here since renderItems can clear innerHTML
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
-      observeChildren(this, this.#onChildrenChange.bind(this));
+      observeAttributes$1(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeChildren$1(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
 
@@ -6913,8 +6999,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const ComboBoxClass = compose(
-  createStyleMixin({
+const ComboBoxClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$e, property: 'width' },
       hostDirection: { ...host$e, property: 'direction' },
@@ -7002,7 +7088,7 @@ const ComboBoxClass = compose(
       },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   portalMixin({
     name: 'overlay',
     selector: '',
@@ -7048,7 +7134,7 @@ const ComboBoxClass = compose(
     },
   }),
   composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   ComboBoxMixin
 )(
   createProxy({
@@ -7112,7 +7198,7 @@ const ComboBoxClass = compose(
   })
 );
 
-const globalRefs$n = getThemeRefs(globals);
+const globalRefs$n = getThemeRefs(globals$1);
 const vars$z = ComboBoxClass.cssVarList;
 
 const comboBox = {
@@ -7190,8 +7276,8 @@ const comboBox = {
     [vars$z.overlay.loaderWidth]: '30px',
     [vars$z.overlay.loaderHeight]: '30px',
     [vars$z.overlay.loaderBorder]: '2px solid transparent',
-    [vars$z.overlay
-      .loaderBorderColor]: `${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.main} ${globalRefs$n.colors.primary.main}`,
+    [vars$z.overlay.loaderBorderColor]:
+      `${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.highlight} ${globalRefs$n.colors.primary.main} ${globalRefs$n.colors.primary.main}`,
     [vars$z.overlay.loaderBorderRadius]: '50%',
     [vars$z.overlay.contentHeight]: '100px',
     [vars$z.overlay.contentOpacity]: '0',
@@ -7207,9 +7293,9 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
 
 const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$F = getComponentName('image');
+const componentName$F = getComponentName$1('image');
 
-const BaseClass$2 = createBaseClass({ componentName: componentName$F, baseSelector: ':host > img' });
+const BaseClass$2 = createBaseClass$1({ componentName: componentName$F, baseSelector: ':host > img' });
 class RawImage extends BaseClass$2 {
   static get observedAttributes() {
     return observedAttributes$2.concat(BaseClass$2.observedAttributes || []);
@@ -7235,18 +7321,18 @@ class RawImage extends BaseClass$2 {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
+    forwardAttrs$1(this, this.baseElement, { includeAttrs: observedAttributes$2 });
   }
 }
 
-const ImageClass = compose(
-  createStyleMixin({
+const ImageClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       height: { selector: () => ':host' },
       width: { selector: () => ':host' },
     },
   }),
-  draggableMixin
+  draggableMixin$1
 )(RawImage);
 
 const vars$y = ImageClass.cssVarList;
@@ -8475,14 +8561,14 @@ var CountryCodes = [
   ].sort((a, b) => (a.name < b.name ? -1 : 1)),
 ];
 
-const componentName$E = getComponentName('phone-field-internal');
+const componentName$E = getComponentName$1('phone-field-internal');
 
 createBaseInputClass({ componentName: componentName$E, baseSelector: 'div' });
 
 const textVars$2 = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$D = getComponentName('phone-field');
+const componentName$D = getComponentName$1('phone-field');
 
 const customMixin$8 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -8506,7 +8592,7 @@ const customMixin$8 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$E);
 
-      forwardAttrs(this.shadowRoot.host, this.inputElement, {
+      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
           'size',
           'bordered',
@@ -8570,8 +8656,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const PhoneFieldClass = compose(
-  createStyleMixin({
+const PhoneFieldClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       fontSize: [
         host$d,
@@ -8670,7 +8756,7 @@ const PhoneFieldClass = compose(
       ],
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$8
 )(
@@ -8821,13 +8907,13 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$x
 });
 
-const componentName$C = getComponentName('phone-field-internal-input-box');
+const componentName$C = getComponentName$1('phone-field-internal-input-box');
 
 createBaseInputClass({ componentName: componentName$C, baseSelector: 'div' });
 
 const textVars$1 = TextFieldClass.cssVarList;
 
-const componentName$B = getComponentName('phone-input-box-field');
+const componentName$B = getComponentName$1('phone-input-box-field');
 
 const customMixin$7 = (superclass) =>
   class PhoneInputBoxFieldMixinClass extends superclass {
@@ -8851,7 +8937,7 @@ const customMixin$7 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$C);
 
-      forwardAttrs(this.shadowRoot.host, this.inputElement, {
+      forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
           'size',
           'bordered',
@@ -8898,8 +8984,8 @@ const {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const PhoneFieldInputBoxClass = compose(
-  createStyleMixin({
+const PhoneFieldInputBoxClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       fontSize: [
         host$c,
@@ -8967,7 +9053,7 @@ const PhoneFieldInputBoxClass = compose(
       },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$7
 )(
@@ -9096,20 +9182,20 @@ var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$w
 });
 
-const componentName$A = getComponentName('new-password-internal');
+const componentName$A = getComponentName$1('new-password-internal');
 
 const interpolateString = (template, values) =>
   template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);
 
 // eslint-disable-next-line max-classes-per-file
 
-const componentName$z = getComponentName('policy-validation');
+const componentName$z = getComponentName$1('policy-validation');
 
 const overrideAttrs = ['data-password-policy-value-minlength'];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
 
-class RawPolicyValidation extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+class RawPolicyValidation extends createBaseClass$1({ componentName: componentName$z, baseSelector: ':host > div' }) {
   #availablePolicies;
 
   #activePolicies = [];
@@ -9290,9 +9376,9 @@ const { host: host$b, item, symbolDefault, symbolSuccess, symbolError } = {
   symbolError: { selector: () => '.item[data-valid="false"]::before' },
 };
 
-const PolicyValidationClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const PolicyValidationClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       hostDirection: { selector: () => ':host', property: 'direction' },
       fontSize: {},
@@ -9313,11 +9399,11 @@ const PolicyValidationClass = compose(
       itemSymbolError: { ...symbolError, property: 'content' },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawPolicyValidation);
 
-const componentName$y = getComponentName('new-password');
+const componentName$y = getComponentName$1('new-password');
 
 const policyPreviewVars = PolicyValidationClass.cssVarList;
 
@@ -9348,7 +9434,7 @@ const customMixin$6 = (superclass) =>
         this.initExternalInput();
       }
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
           'password-label',
           'password-placeholder',
@@ -9421,8 +9507,8 @@ const {
   policyPreview: { selector: 'descope-policy-validation' },
 };
 
-const NewPasswordClass = compose(
-  createStyleMixin({
+const NewPasswordClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       fontSize: [
         host$a,
@@ -9463,7 +9549,7 @@ const NewPasswordClass = compose(
       },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$6
 )(
@@ -9528,7 +9614,7 @@ const NewPasswordClass = compose(
   })
 );
 
-const globalRefs$m = getThemeRefs(globals);
+const globalRefs$m = getThemeRefs(globals$1);
 const vars$v = NewPasswordClass.cssVarList;
 
 const newPassword = {
@@ -9579,7 +9665,7 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName$x = getComponentName('upload-file');
+const componentName$x = getComponentName$1('upload-file');
 
 const observedAttributes$1 = [
   'title',
@@ -9775,9 +9861,9 @@ const { host: host$9, wrapper, icon: icon$3, title: title$1, description, requir
   requiredIndicator: { selector: () => '.title::after' },
 };
 
-const UploadFileClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const UploadFileClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       fontSize: {},
       fontFamily: {},
@@ -9805,8 +9891,8 @@ const UploadFileClass = compose(
       requiredIndicator: { ...requiredIndicator$2, property: 'content' },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawUploadFile);
 
 const vars$u = UploadFileClass.cssVarList;
@@ -9876,9 +9962,9 @@ var uploadFile$1 = /*#__PURE__*/Object.freeze({
   vars: vars$u
 });
 
-const componentName$w = getComponentName('button-selection-group-item');
+const componentName$w = getComponentName$1('button-selection-group-item');
 
-class RawSelectItem extends createBaseClass({
+class RawSelectItem extends createBaseClass$1({
   componentName: componentName$w,
   baseSelector: ':host > descope-button',
 }) {
@@ -9922,8 +10008,8 @@ class RawSelectItem extends createBaseClass({
     </descope-button>
 	`;
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
-    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
+    forwardAttrs$1(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs$1(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
   }
 
   handleFocus() {
@@ -9945,8 +10031,8 @@ class RawSelectItem extends createBaseClass({
   }
 }
 
-const ButtonSelectionGroupItemClass = compose(
-  createStyleMixin({
+const ButtonSelectionGroupItemClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostDirection: {
         selector: () => ButtonClass.componentName,
@@ -9982,11 +10068,11 @@ const ButtonSelectionGroupItemClass = compose(
       },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawSelectItem);
 
-const globalRefs$l = getThemeRefs(globals);
+const globalRefs$l = getThemeRefs(globals$1);
 
 const vars$t = ButtonSelectionGroupItemClass.cssVarList;
 
@@ -10108,7 +10194,7 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
 
       super.init?.();
 
-      observeAttributes(this, this.onObservedAttributeChange.bind(this), {
+      observeAttributes$1(this, this.onObservedAttributeChange.bind(this), {
         includeAttrs: ['size', 'readonly'],
       });
     }
@@ -10117,7 +10203,7 @@ const createBaseButtonSelectionGroupInternalClass = (componentName) => {
   return BaseButtonSelectionGroupInternalClass;
 };
 
-const componentName$v = getComponentName('button-selection-group-internal');
+const componentName$v = getComponentName$1('button-selection-group-internal');
 
 class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
   componentName$v
@@ -10265,10 +10351,10 @@ const buttonSelectionGroupBaseMixin = (superclass) =>
 
       this.renderItems();
 
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeAttributes$1(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
 
       // we want new items to get the size
-      observeChildren(this, ({ addedNodes }) => {
+      observeChildren$1(this, ({ addedNodes }) => {
         addedNodes.forEach((node) => {
           node.setAttribute('size', this.size);
         });
@@ -10357,7 +10443,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$u = getComponentName('button-selection-group');
+const componentName$u = getComponentName$1('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10380,21 +10466,21 @@ const buttonSelectionGroupMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$v);
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-value', 'allow-deselect'],
       });
     }
   };
 
-const ButtonSelectionGroupClass = compose(
-  createStyleMixin({
+const ButtonSelectionGroupClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       ...buttonSelectionGroupMappings,
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   buttonSelectionGroupBaseMixin,
   buttonSelectionGroupMixin
 )(
@@ -10407,7 +10493,7 @@ const ButtonSelectionGroupClass = compose(
   })
 );
 
-const globalRefs$k = getThemeRefs(globals);
+const globalRefs$k = getThemeRefs(globals$1);
 
 const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.hostDirection]: refs.direction,
@@ -10439,7 +10525,7 @@ var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$s
 });
 
-const componentName$t = getComponentName('button-multi-selection-group-internal');
+const componentName$t = getComponentName$1('button-multi-selection-group-internal');
 
 class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
   componentName$t
@@ -10545,7 +10631,7 @@ class ButtonMultiSelectionGroupInternalClass extends createBaseButtonSelectionGr
   }
 }
 
-const componentName$s = getComponentName('button-multi-selection-group');
+const componentName$s = getComponentName$1('button-multi-selection-group');
 
 const buttonMultiSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -10568,21 +10654,21 @@ const buttonMultiSelectionGroupMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$t);
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
       });
     }
   };
 
-const ButtonMultiSelectionGroupClass = compose(
-  createStyleMixin({
+const ButtonMultiSelectionGroupClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       ...buttonSelectionGroupMappings,
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   buttonSelectionGroupBaseMixin,
   buttonMultiSelectionGroupMixin
 )(
@@ -10607,7 +10693,7 @@ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$r
 });
 
-const componentName$r = getComponentName('modal');
+const componentName$r = getComponentName$1('modal');
 
 const customMixin$5 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -10616,7 +10702,7 @@ const customMixin$5 = (superclass) =>
     }
 
     handleOpened() {
-      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      forwardAttrs$1(this, this.baseElement, { includeAttrs: ['opened'] });
       if (this.opened) {
         this.style.display = '';
       } else {
@@ -10668,8 +10754,8 @@ const customMixin$5 = (superclass) =>
     }
   };
 
-const ModalClass = compose(
-  createStyleMixin({
+const ModalClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
       overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
@@ -10697,8 +10783,8 @@ const ModalClass = compose(
       attributes: ['opened'],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin,
+  draggableMixin$1,
+  componentNameValidationMixin$1,
   customMixin$5
 )(
   createProxy({
@@ -10710,7 +10796,7 @@ const ModalClass = compose(
   })
 );
 
-const globalRefs$j = getThemeRefs(globals);
+const globalRefs$j = getThemeRefs(globals$1);
 
 const compVars$2 = ModalClass.cssVarList;
 
@@ -10803,7 +10889,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$q = getComponentName('grid');
+const componentName$q = getComponentName$1('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -11057,9 +11143,9 @@ const {
   detailsPanelContent: { selector: () => 'vaadin-grid .row-details' },
 };
 
-const GridClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const GridClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       hostHeight: { selector: () => ':host', property: 'height' },
@@ -11104,8 +11190,8 @@ const GridClass = compose(
       detailsPanelPadding: { ...detailsPanelContent, property: 'padding' },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin,
+  draggableMixin$1,
+  componentNameValidationMixin$1,
   GridMixin
 )(
   createProxy({
@@ -11161,7 +11247,7 @@ const GridClass = compose(
   })
 );
 
-const globalRefs$i = getThemeRefs(globals);
+const globalRefs$i = getThemeRefs(globals$1);
 const vars$p = GridClass.cssVarList;
 
 const grid = {
@@ -11213,7 +11299,7 @@ var grid$1 = /*#__PURE__*/Object.freeze({
   vars: vars$p
 });
 
-const componentName$p = getComponentName('notification-card');
+const componentName$p = getComponentName$1('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -11262,8 +11348,8 @@ const selectors = {
   overlay: () => 'vaadin-notification-card::part(overlay)',
 };
 
-const NotificationCardClass = compose(
-  createStyleMixin({
+const NotificationCardClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostMinWidth: { selector: selectors.content, property: 'min-width' },
       fontFamily: {},
@@ -11325,7 +11411,7 @@ const NotificationCardClass = compose(
   })
 );
 
-const globalRefs$h = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals$1);
 const vars$o = NotificationCardClass.cssVarList;
 
 const shadowColor$2 = '#00000020';
@@ -11379,7 +11465,7 @@ var notificationCard = /*#__PURE__*/Object.freeze({
   vars: vars$o
 });
 
-const componentName$o = getComponentName('multi-select-combo-box');
+const componentName$o = getComponentName$1('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -11673,13 +11759,13 @@ const multiSelectComboBoxMixin = (superclass) =>
 
       this.renderItems();
 
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeAttributes$1(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
 
-      observeChildren(this, this.#onChildrenChange.bind(this));
+      observeChildren$1(this, this.#onChildrenChange.bind(this));
 
       // Note: we need to forward the `placeholder` because the vaadin component observes it and
       // tries to override it, causing us to lose the user set placeholder.
-      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
+      forwardAttrs$1(this, this.baseElement, { includeAttrs: ['placeholder'] });
 
       this.setDefaultValues();
 
@@ -11810,8 +11896,8 @@ const {
   },
 };
 
-const MultiSelectComboBoxClass = compose(
-  createStyleMixin({
+const MultiSelectComboBoxClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$6, property: 'width' },
       hostDirection: { ...host$6, property: 'direction' },
@@ -11914,7 +12000,7 @@ const MultiSelectComboBoxClass = compose(
       },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   portalMixin({
     name: 'overlay',
     selector: 'vaadin-multi-select-combo-box-internal',
@@ -11943,7 +12029,7 @@ const MultiSelectComboBoxClass = compose(
   }),
   composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
   changeMixin,
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   multiSelectComboBoxMixin
 )(
   createProxy({
@@ -12031,7 +12117,7 @@ const MultiSelectComboBoxClass = compose(
   })
 );
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals$1);
 const vars$n = MultiSelectComboBoxClass.cssVarList;
 
 const multiSelectComboBox = {
@@ -12117,9 +12203,9 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$n
 });
 
-const componentName$n = getComponentName('badge');
+const componentName$n = getComponentName$1('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$n, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass$1({ componentName: componentName$n, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -12142,8 +12228,8 @@ class RawBadge extends createBaseClass({ componentName: componentName$n, baseSel
   }
 }
 
-const BadgeClass = compose(
-  createStyleMixin({
+const BadgeClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }],
       hostDirection: { property: 'direction' },
@@ -12166,11 +12252,11 @@ const BadgeClass = compose(
       textAlign: {},
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawBadge);
 
-const globalRefs$f = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals$1);
 const vars$m = BadgeClass.cssVarList;
 
 const badge$2 = {
@@ -12346,7 +12432,7 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs$1(globals);
 const compVars$1 = AvatarClass.cssVarList;
 
 const avatar = {
@@ -12391,11 +12477,11 @@ var avatar$1 = /*#__PURE__*/Object.freeze({
   vars: vars$l
 });
 
-const componentName$l = getComponentName('mappings-field-internal');
+const componentName$l = getComponentName$1('mappings-field-internal');
 
 createBaseInputClass({ componentName: componentName$l, baseSelector: 'div' });
 
-const componentName$k = getComponentName('mappings-field');
+const componentName$k = getComponentName$1('mappings-field');
 
 const customMixin$4 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -12433,7 +12519,7 @@ const customMixin$4 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$l);
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
           'size',
           'full-width',
@@ -12486,8 +12572,8 @@ const {
   labelsContainer: { selector: 'descope-mappings-field-internal [part="labels"]' },
 };
 
-const MappingsFieldClass = compose(
-  createStyleMixin({
+const MappingsFieldClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$4, property: 'width' },
       hostDirection: { ...host$4, property: 'direction' },
@@ -12512,13 +12598,13 @@ const MappingsFieldClass = compose(
       removeButtonWidth: {},
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({
     proxyProps: ['value', 'selectionStart'],
     inputEvent: 'input',
     proxyParentValidation: true,
   }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$4
 )(
   createProxy({
@@ -12570,7 +12656,7 @@ const MappingsFieldClass = compose(
   })
 );
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals$1);
 
 const vars$k = MappingsFieldClass.cssVarList;
 
@@ -12604,8 +12690,8 @@ var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgi
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$j = getComponentName('user-attribute');
-class RawUserAttribute extends createBaseClass({
+const componentName$j = getComponentName$1('user-attribute');
+class RawUserAttribute extends createBaseClass$1({
   componentName: componentName$j,
   baseSelector: ':host > .root',
 }) {
@@ -12819,8 +12905,8 @@ const { host: host$3, textFields, buttons: buttons$1, badge: badge$1, labelText,
   textWrapper: { selector: ' .text-wrapper' },
 };
 
-const UserAttributeClass = compose(
-  createStyleMixin({
+const UserAttributeClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$3, property: 'width' },
       hostMinWidth: { ...host$3, property: 'min-width' },
@@ -12836,11 +12922,11 @@ const UserAttributeClass = compose(
       itemsGap: [{ property: 'gap' }, { ...textWrapper$1, property: 'gap' }],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawUserAttribute);
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals$1);
 const vars$j = UserAttributeClass.cssVarList;
 
 const userAttribute = {
@@ -12863,8 +12949,8 @@ var userAttribute$1 = /*#__PURE__*/Object.freeze({
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$i = getComponentName('user-auth-method');
-class RawUserAuthMethod extends createBaseClass({
+const componentName$i = getComponentName$1('user-auth-method');
+class RawUserAuthMethod extends createBaseClass$1({
   componentName: componentName$i,
   baseSelector: ':host > .root',
 }) {
@@ -13034,8 +13120,8 @@ const { host: host$2, textField, buttons, badge, textWrapper, methodIconSlot } =
   methodIconSlot: { selector: 'slot[name="method-icon"]' },
 };
 
-const UserAuthMethodClass = compose(
-  createStyleMixin({
+const UserAuthMethodClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$2, property: 'width' },
       hostMinWidth: { ...host$2, property: 'min-width' },
@@ -13054,11 +13140,11 @@ const UserAuthMethodClass = compose(
       iconColor: [{ selector: () => '::slotted(*)', property: IconClass.cssVarList.fill }],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawUserAuthMethod);
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals$1);
 const vars$i = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
@@ -13079,11 +13165,11 @@ var userAuthMethod$1 = /*#__PURE__*/Object.freeze({
   vars: vars$i
 });
 
-const componentName$h = getComponentName('saml-group-mappings-internal');
+const componentName$h = getComponentName$1('saml-group-mappings-internal');
 
 createBaseInputClass({ componentName: componentName$h, baseSelector: '' });
 
-const componentName$g = getComponentName('saml-group-mappings');
+const componentName$g = getComponentName$1('saml-group-mappings');
 
 const customMixin$3 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -13102,7 +13188,7 @@ const customMixin$3 = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$h);
 
-      forwardAttrs(this, this.inputElement, {
+      forwardAttrs$1(this, this.inputElement, {
         includeAttrs: [
           'size',
           'full-width',
@@ -13127,8 +13213,8 @@ const { host: host$1, groupInput, errorMessage } = {
   errorMessage: { selector: '::part(error-message)' },
 };
 
-const SamlGroupMappingsClass = compose(
-  createStyleMixin({
+const SamlGroupMappingsClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { ...host$1, property: 'width' },
       hostDirection: { ...host$1, property: 'direction' },
@@ -13140,14 +13226,14 @@ const SamlGroupMappingsClass = compose(
       errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({
     proxyProps: ['value', 'selectionStart'],
     inputEvent: 'input',
     triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
     proxyParentValidation: true,
   }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$3
 )(
   createProxy({
@@ -13209,7 +13295,7 @@ var samlGroupMappings$1 = /*#__PURE__*/Object.freeze({
   vars: vars$h
 });
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals$1);
 const vars$g = PolicyValidationClass.cssVarList;
 
 const policyValidation = {
@@ -13257,9 +13343,9 @@ const tpl = (input, inline) => {
   return inline ? input : `<pre>${input}</pre>`;
 };
 
-const componentName$f = getComponentName('code-snippet');
+const componentName$f = getComponentName$1('code-snippet');
 
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > code' }) {
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass$1({ componentName: componentName$f, baseSelector: ':host > code' }) {
   static get observedAttributes() {
     return ['lang', 'inline'];
   }
@@ -13294,7 +13380,7 @@ let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: c
     this.lang = this.getAttribute('lang');
     this.isInline = this.getAttribute('inline') === 'true';
 
-    observeChildren(this, this.#renderSnippet.bind(this));
+    observeChildren$1(this, this.#renderSnippet.bind(this));
   }
 
   get contentNode() {
@@ -13430,8 +13516,8 @@ const {
   tag: { selector: () => '.hljs-tag' },
 };
 
-const CodeSnippetClass = compose(
-  createStyleMixin({
+const CodeSnippetClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       rootBgColor: { ...root, property: 'background-color' },
       rootTextColor: { ...root, property: 'color' },
@@ -13485,11 +13571,11 @@ const CodeSnippetClass = compose(
       tagTextColor: { ...tag, property: 'color' },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(CodeSnippet$1);
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals$1);
 
 const vars$e = CodeSnippetClass.cssVarList;
 
@@ -13635,7 +13721,7 @@ var codeSnippet = /*#__PURE__*/Object.freeze({
   vars: vars$e
 });
 
-const componentName$e = getComponentName('radio-button');
+const componentName$e = getComponentName$1('radio-button');
 
 const customMixin$2 = (superclass) =>
   class CustomMixin extends superclass {
@@ -13659,7 +13745,7 @@ const customMixin$2 = (superclass) =>
 
       super.init?.();
 
-      observeChildren(this, this.renderLabel.bind(this));
+      observeChildren$1(this, this.renderLabel.bind(this));
     }
 
     renderLabel() {
@@ -13671,8 +13757,8 @@ const customMixin$2 = (superclass) =>
     }
   };
 
-const RadioButtonClass = compose(
-  createStyleMixin({
+const RadioButtonClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       cursor: [{}, { selector: 'label' }],
       fontSize: [{ selector: 'label' }, {}],
@@ -13692,7 +13778,7 @@ const RadioButtonClass = compose(
     },
   }),
   composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   customMixin$2
 )(
   createProxy({
@@ -13704,7 +13790,7 @@ const RadioButtonClass = compose(
   })
 );
 
-const componentName$d = getComponentName('radio-group');
+const componentName$d = getComponentName$1('radio-group');
 
 const RadioGroupMixin = (superclass) =>
   class RadioGroupMixinClass extends superclass {
@@ -13797,7 +13883,7 @@ const RadioGroupMixin = (superclass) =>
 
       this.renderItems();
 
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeAttributes$1(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
 
       Object.defineProperty(this.baseElement, 'validity', {
         get: () => {
@@ -13805,7 +13891,7 @@ const RadioGroupMixin = (superclass) =>
         },
       });
 
-      forwardAttrs(this, this.baseElement, {
+      forwardAttrs$1(this, this.baseElement, {
         includeAttrs: ['layout'],
         mapAttrs: { layout: 'theme' },
       });
@@ -13817,13 +13903,13 @@ const RadioGroupMixin = (superclass) =>
       });
 
       // we want new items to get the size
-      observeChildren(this, ({ addedNodes }) => {
+      observeChildren$1(this, ({ addedNodes }) => {
         addedNodes.forEach((node) => {
           node.setAttribute('size', this.size);
         });
       });
 
-      observeAttributes(
+      observeAttributes$1(
         this,
         () => {
           this.items.forEach((item) => {
@@ -13837,8 +13923,8 @@ const RadioGroupMixin = (superclass) =>
     }
   };
 
-const RadioGroupClass = compose(
-  createStyleMixin({
+const RadioGroupClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       ...textFieldMappings,
       buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
@@ -13850,9 +13936,9 @@ const RadioGroupClass = compose(
       },
     },
   }),
-  draggableMixin,
+  draggableMixin$1,
   composedProxyInputMixin({ proxyProps: ['setSelectionRange'] }),
-  componentNameValidationMixin,
+  componentNameValidationMixin$1,
   RadioGroupMixin
 )(
   createProxy({
@@ -13880,7 +13966,7 @@ const RadioGroupClass = compose(
 );
 
 const vars$d = RadioGroupClass.cssVarList;
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals$1);
 
 const radioGroup = {
   [vars$d.buttonsRowGap]: '9px',
@@ -13922,7 +14008,7 @@ var radioGroup$1 = /*#__PURE__*/Object.freeze({
 });
 
 const vars$c = RadioButtonClass.cssVarList;
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals$1);
 
 const radioButton = {
   [vars$c.fontFamily]: refs.fontFamily,
@@ -14280,7 +14366,7 @@ const nextMonth = (timestamp) => {
   return date;
 };
 
-const componentName$c = getComponentName('calendar');
+const componentName$c = getComponentName$1('calendar');
 
 const observedAttrs$1 = [
   'initial-value',
@@ -14482,7 +14568,7 @@ class RawCalendar extends BaseInputClass$1 {
     );
 
     [this.monthInput, this.yearInput].forEach((selector) =>
-      forwardAttrs(this, selector, {
+      forwardAttrs$1(this, selector, {
         includeAttrs: ['disabled', 'size', 'st-host-direction'],
       })
     );
@@ -14495,7 +14581,7 @@ class RawCalendar extends BaseInputClass$1 {
     this.submitButton.addEventListener('click', this.onSubmit.bind(this));
 
     [this.navPrevEle, this.navNextEle].forEach((btn) =>
-      forwardAttrs(this, btn, {
+      forwardAttrs$1(this, btn, {
         includeAttrs: ['size'],
       })
     );
@@ -14788,9 +14874,9 @@ const {
   monthInput: { selector: () => '.month-input' },
 };
 
-const CalendarClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const CalendarClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       fontSize: {},
       fontFamily: {},
@@ -14907,11 +14993,11 @@ const CalendarClass = compose(
       ],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawCalendar);
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals$1);
 
 const vars$b = CalendarClass.cssVarList;
 
@@ -15132,7 +15218,7 @@ class DateCounter {
   }
 }
 
-const componentName$b = getComponentName('date-field');
+const componentName$b = getComponentName$1('date-field');
 
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
@@ -15321,7 +15407,7 @@ class RawDateFieldClass extends BaseInputClass {
     this.inputElement.addEventListener('keydown', this.handleKeydownCaretPositionChange.bind(this));
     this.inputElement.addEventListener('keydown', this.handleValueChange.bind(this));
 
-    forwardAttrs(this, this.inputElement, {
+    forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
         'label',
         'label-type',
@@ -15483,7 +15569,7 @@ class RawDateFieldClass extends BaseInputClass {
       this.calendar.setAttribute('preview', formatTimestamp(getCurrentTime(), NATIVE_FORMAT));
     }
 
-    forwardAttrs(this, this.calendar, {
+    forwardAttrs$1(this, this.calendar, {
       includeAttrs: [
         'st-host-direction',
         'readonly',
@@ -15758,9 +15844,9 @@ const { host, input, inputEleRTL, toggleButton, overlay, backdrop } = {
   backdrop: { selector: 'vaadin-popover-overlay::part(backdrop)' },
 };
 
-const DateFieldClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const DateFieldClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       iconMargin: { ...toggleButton, property: 'margin-inline-end' },
       hostWidth: { ...host, property: 'width' },
@@ -15804,11 +15890,11 @@ const DateFieldClass = compose(
       outlineStyle: { ...overlay },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawDateFieldClass);
 
-const globalRefs$5 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals$1);
 const shadowColor$1 = '#00000020';
 const { shadow } = globalRefs$5;
 
@@ -15854,7 +15940,7 @@ const activeableMixin = (superclass) =>
     }
   };
 
-const componentName$a = getComponentName('list-item');
+const componentName$a = getComponentName$1('list-item');
 
 const customMixin$1 = (superclass) =>
   class ListItemMixinClass extends superclass {
@@ -15881,8 +15967,8 @@ const customMixin$1 = (superclass) =>
     }
   };
 
-const ListItemClass = compose(
-  createStyleMixin({
+const ListItemClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       padding: {},
       backgroundColor: {},
@@ -15899,15 +15985,15 @@ const ListItemClass = compose(
       transition: {},
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin,
+  draggableMixin$1,
+  componentNameValidationMixin$1,
   customMixin$1,
   activeableMixin
-)(createBaseClass({ componentName: componentName$a, baseSelector: 'slot' }));
+)(createBaseClass$1({ componentName: componentName$a, baseSelector: 'slot' }));
 
-const componentName$9 = getComponentName('list');
+const componentName$9 = getComponentName$1('list');
 
-class RawList extends createBaseClass({ componentName: componentName$9, baseSelector: '.wrapper' }) {
+class RawList extends createBaseClass$1({ componentName: componentName$9, baseSelector: '.wrapper' }) {
   static get observedAttributes() {
     return ['variant', 'readonly'];
   }
@@ -15989,7 +16075,7 @@ class RawList extends createBaseClass({ componentName: componentName$9, baseSele
     super.init?.();
 
     // we want new items to get the size
-    observeChildren(this, () => {
+    observeChildren$1(this, () => {
       this.#handleEmptyState();
       this.#handleItemsVariant();
       this.#handleReadOnly();
@@ -16020,8 +16106,8 @@ class RawList extends createBaseClass({ componentName: componentName$9, baseSele
   }
 }
 
-const ListClass = compose(
-  createStyleMixin({
+const ListClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       maxHeight: { selector: () => ':host' },
@@ -16050,11 +16136,11 @@ const ListClass = compose(
       },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawList);
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals$1);
 
 const compVars = ListClass.cssVarList;
 
@@ -16111,7 +16197,7 @@ var list$2 = /*#__PURE__*/Object.freeze({
   vars: vars$9
 });
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals$1);
 
 const vars$8 = ListItemClass.cssVarList;
 
@@ -16228,7 +16314,7 @@ const createDynamicDataMixin =
       init() {
         super.init?.();
 
-        observeAttributes(
+        observeAttributes$1(
           this,
           (attrs) => {
             if (attrs.includes('data')) this.#handleDataAttr();
@@ -16252,7 +16338,7 @@ const createDynamicDataMixin =
       }
     };
 
-const componentName$8 = getComponentName('apps-list');
+const componentName$8 = getComponentName$1('apps-list');
 
 const limitAbbreviation = (str, limit = 2) =>
   str
@@ -16285,8 +16371,8 @@ const customMixin = (superclass) =>
     }
   };
 
-const AppsListClass = compose(
-  createStyleMixin({
+const AppsListClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       maxHeight: { selector: () => ':host' },
       minHeight: { selector: () => ':host' },
@@ -16306,8 +16392,8 @@ const AppsListClass = compose(
     },
   }),
   createDynamicDataMixin({ itemRenderer: itemRenderer$1, rerenderAttrsList: ['size'] }),
-  draggableMixin,
-  componentNameValidationMixin,
+  draggableMixin$1,
+  componentNameValidationMixin$1,
   customMixin
 )(
   createProxy({
@@ -16340,7 +16426,7 @@ const AppsListClass = compose(
 );
 
 const vars$7 = AppsListClass.cssVarList;
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals$1);
 
 const defaultHeight = '400px';
 
@@ -16376,7 +16462,7 @@ var appsList$1 = /*#__PURE__*/Object.freeze({
   vars: vars$7
 });
 
-const componentName$7 = getComponentName('scopes-list');
+const componentName$7 = getComponentName$1('scopes-list');
 const variants = ['checkbox', 'switch'];
 
 const itemRenderer = ({ id, desc, required = false }, _, ref) => {
@@ -16395,7 +16481,7 @@ const itemRenderer = ({ id, desc, required = false }, _, ref) => {
 `;
 };
 
-class RawScopesList extends createBaseClass({ componentName: componentName$7, baseSelector: 'div' }) {
+class RawScopesList extends createBaseClass$1({ componentName: componentName$7, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -16457,8 +16543,8 @@ class RawScopesList extends createBaseClass({ componentName: componentName$7, ba
   }
 }
 
-const ScopesListClass = compose(
-  createStyleMixin({
+const ScopesListClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       hostDirection: [
@@ -16496,8 +16582,8 @@ const ScopesListClass = compose(
     },
   }),
   createDynamicDataMixin({ itemRenderer, rerenderAttrsList: ['size', 'variant'] }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawScopesList);
 
 const vars$6 = ScopesListClass.cssVarList;
@@ -16519,8 +16605,8 @@ var scopesList$1 = /*#__PURE__*/Object.freeze({
 
 var arrowsImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOSAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMTQ0OTIgMTUuNjQ1TDcuNDk5OTIgMTRMMi44MzMyNSAxOC42NjY3TDcuNDk5OTIgMjMuMzMzM0w5LjE0NDkyIDIxLjY4ODNMNy4zMDE1OSAxOS44MzMzSDI0Ljk5OTlWMTcuNUg3LjMwMTU5TDkuMTQ0OTIgMTUuNjQ1WiIgZmlsbD0iIzYzNkM3NCIvPgo8cGF0aCBkPSJNMTkuODU1IDEyLjM1NTNMMjEuNSAxNC4wMDAzTDI2LjE2NjcgOS4zMzM2NkwyMS41IDQuNjY2OTlMMTkuODU1IDYuMzExOTlMMjEuNjk4MyA4LjE2Njk5SDRWMTAuNTAwM0gyMS42OTgzTDE5Ljg1NSAxMi4zNTUzWiIgZmlsbD0iIzYzNkM3NCIvPgo8L3N2Zz4K";
 
-const componentName$6 = getComponentName('third-party-app-logo');
-class RawThirdPartyAppLogoClass extends createBaseClass({
+const componentName$6 = getComponentName$1('third-party-app-logo');
+class RawThirdPartyAppLogoClass extends createBaseClass$1({
   componentName: componentName$6,
   baseSelector: '.wrapper',
 }) {
@@ -16587,8 +16673,8 @@ class RawThirdPartyAppLogoClass extends createBaseClass({
 const companyLogoWrapper = '>.company-logo-wrapper';
 const thirdPartyAppLogoWrapper = '>.third-party-app-logo-wrapper';
 
-const ThirdPartyAppLogoClass = compose(
-  createStyleMixin({
+const ThirdPartyAppLogoClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       logoMaxHeight: [
         { selector: companyLogoWrapper, property: 'height' },
@@ -16611,11 +16697,11 @@ const ThirdPartyAppLogoClass = compose(
       arrowsColor: { selector: IconClass.componentName, property: IconClass.cssVarList.fill },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawThirdPartyAppLogoClass);
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals$1);
 const vars$5 = ThirdPartyAppLogoClass.cssVarList;
 
 const thirdPartyAppLogo = {
@@ -16651,7 +16737,7 @@ var thirdPartyAppLogo$1 = /*#__PURE__*/Object.freeze({
   vars: vars$5
 });
 
-const componentName$5 = getComponentName('security-questions-setup');
+const componentName$5 = getComponentName$1('security-questions-setup');
 
 const attrsToSync$1 = [
   'full-width',
@@ -16670,7 +16756,7 @@ const attrsToSync$1 = [
 ];
 
 const attrsToReRender$1 = ['count', 'questions'];
-class RawSecurityQuestionsSetup extends createBaseClass({ componentName: componentName$5, baseSelector: 'div' }) {
+class RawSecurityQuestionsSetup extends createBaseClass$1({ componentName: componentName$5, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -16848,7 +16934,7 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
   init() {
     super.init?.();
     // render new components
-    observeAttributes(
+    observeAttributes$1(
       this,
       () => {
         this.#renderQuestions();
@@ -16857,14 +16943,14 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName: compone
     );
 
     // update existing components
-    observeAttributes(this, this.#syncAttrs.bind(this), {
+    observeAttributes$1(this, this.#syncAttrs.bind(this), {
       includeAttrs: attrsToSync$1,
     });
   }
 }
 
-const SecurityQuestionsSetupClass = compose(
-  createStyleMixin({
+const SecurityQuestionsSetupClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
       hostDirection: [
@@ -16881,8 +16967,8 @@ const SecurityQuestionsSetupClass = compose(
       gap: { selector: () => 'div', property: 'gap' },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawSecurityQuestionsSetup);
 
 const vars$4 = SecurityQuestionsSetupClass.cssVarList;
@@ -16900,7 +16986,7 @@ var securityQuestionsSetup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$4
 });
 
-const componentName$4 = getComponentName('security-questions-verify');
+const componentName$4 = getComponentName$1('security-questions-verify');
 
 const textFieldsAttrs = [
   'full-width',
@@ -16924,7 +17010,7 @@ const attrMappings = {
 const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
 
 const attrsToReRender = ['questions'];
-class RawSecurityQuestionsVerify extends createBaseClass({ componentName: componentName$4, baseSelector: 'div' }) {
+class RawSecurityQuestionsVerify extends createBaseClass$1({ componentName: componentName$4, baseSelector: 'div' }) {
   constructor() {
     super();
 
@@ -17051,7 +17137,7 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
   init() {
     super.init?.();
     // render new components
-    observeAttributes(
+    observeAttributes$1(
       this,
       () => {
         this.#renderQuestions();
@@ -17060,15 +17146,15 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName: compon
     );
 
     // update existing components
-    observeAttributes(this, this.#syncAttrs.bind(this), {
+    observeAttributes$1(this, this.#syncAttrs.bind(this), {
       includeAttrs: attrsToSync,
     });
   }
 }
 
-const SecurityQuestionsVerifyClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const SecurityQuestionsVerifyClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
       hostDirection: [
@@ -17122,8 +17208,8 @@ const SecurityQuestionsVerifyClass = compose(
       },
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawSecurityQuestionsVerify);
 
 const vars$3 = SecurityQuestionsVerifyClass.cssVarList;
@@ -17150,7 +17236,7 @@ const isNumericValue = (val) => NUMERIC_RE.test(val.replaceAll('+', '').replaceA
 
 const sanitizeCountryCodePrefix = (val) => val.replace(/\+\d+-/, '');
 
-const componentName$3 = getComponentName('hybrid-field');
+const componentName$3 = getComponentName$1('hybrid-field');
 
 const attrs = {
   shared: [
@@ -17209,7 +17295,7 @@ const EMAIL_FIELD = 'descope-email-field';
 const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-const BaseClass$1 = createBaseClass({
+const BaseClass$1 = createBaseClass$1({
   componentName: componentName$3,
   baseSelector: 'div',
 });
@@ -17359,19 +17445,19 @@ class RawHybridField extends BaseClass$1 {
   }
 
   updateAttrs() {
-    forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });
+    forwardAttrs$1(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });
 
-    forwardAttrs(this, this.phoneCountryCodeInput, {
+    forwardAttrs$1(this, this.phoneCountryCodeInput, {
       includeAttrs: attrs.phone.countryCode,
       mapAttrs: attrMap.phone,
     });
 
-    forwardAttrs(this, this.phoneInputBoxInput, {
+    forwardAttrs$1(this, this.phoneInputBoxInput, {
       includeAttrs: attrs.phone.inputBox,
       mapAttrs: attrMap.phone,
     });
 
-    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+    this.inputs.forEach((input) => forwardAttrs$1(this, input, { includeAttrs: attrs.shared }));
 
     setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));
   }
@@ -17440,9 +17526,9 @@ class RawHybridField extends BaseClass$1 {
   }
 }
 
-const HybridFieldClass = compose(
-  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
-  createStyleMixin({
+const HybridFieldClass = compose$1(
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('input-wrapper') }),
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       hostDirection: [
@@ -17502,8 +17588,8 @@ const HybridFieldClass = compose(
       ],
     },
   }),
-  draggableMixin,
-  componentNameValidationMixin
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawHybridField);
 
 const vars$2 = HybridFieldClass.cssVarList;
@@ -17529,11 +17615,9 @@ var hybridField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-customElements.define(componentName$N, EnrichedTextClass);
-
-const componentName$2 = getComponentName('alert');
+const componentName$2 = getComponentName$1('alert');
 
-class RawAlert extends createBaseClass({ componentName: componentName$2, baseSelector: ':host > div' }) {
+class RawAlert extends createBaseClass$1({ componentName: componentName$2, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -17575,7 +17659,7 @@ class RawAlert extends createBaseClass({ componentName: componentName$2, baseSel
 
     this.slotEle.addEventListener('slotchange', this.handleSlotChange.bind(this));
 
-    forwardAttrs(this, this.textComp, ['variant', 'full-width', 'link-target-blank']);
+    forwardAttrs$1(this, this.textComp, ['variant', 'full-width', 'link-target-blank']);
   }
 
   handleSlotChange() {
@@ -17589,8 +17673,8 @@ const { icon } = {
   icon: { selector: () => '.icon' },
 };
 
-const AlertClass = compose(
-  createStyleMixin({
+const AlertClass = compose$1(
+  createStyleMixin$1({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
       hostDirection: { selector: () => ':host', property: 'direction' },
@@ -17625,13 +17709,13 @@ const AlertClass = compose(
       ],
     },
   }),
-  createStyleMixin({ componentNameOverride: getComponentName('enriched-text') }),
-  createStyleMixin({ componentNameOverride: getComponentName('text') }),
-  draggableMixin,
-  componentNameValidationMixin
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('enriched-text') }),
+  createStyleMixin$1({ componentNameOverride: getComponentName$1('text') }),
+  draggableMixin$1,
+  componentNameValidationMixin$1
 )(RawAlert);
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs = getThemeRefs(globals$1);
 const vars$1 = AlertClass.cssVarList;
 
 const alert = {
@@ -17785,7 +17869,7 @@ const vars = Object.keys(components).reduce(
   {}
 );
 
-const defaultTheme = { globals, components: theme };
+const defaultTheme = { globals: globals$1, components: theme };
 const themeVars = { globals: vars$U, components: vars };
 
 const colors = {
@@ -17835,11 +17919,11 @@ const darkTheme = merge({}, defaultTheme, {
   },
 });
 
-const componentName$1 = getComponentName('recaptcha');
+const componentName$1 = getComponentName$1('recaptcha');
 
 const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
 
-const BaseClass = createBaseClass({
+const BaseClass = createBaseClass$1({
   componentName: componentName$1,
   baseSelector: ':host > div',
 });
@@ -17922,7 +18006,7 @@ class RawRecaptcha extends BaseClass {
   init() {
     super.init?.();
 
-    observeChildren(this, this.updatePreview.bind(this));
+    observeChildren$1(this, this.updatePreview.bind(this));
   }
 
   updatePreview() {
@@ -18059,9 +18143,9 @@ class RawRecaptcha extends BaseClass {
   }
 }
 
-const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);
+const RecaptchaClass = compose$1(draggableMixin$1)(RawRecaptcha);
 
-const componentName = getComponentName('notification');
+const componentName = getComponentName$1('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -18116,7 +18200,7 @@ const NotificationMixin = (superclass) =>
 
       this.createCard();
 
-      forwardAttrs(this, this.#card);
+      forwardAttrs$1(this, this.#card);
       syncAttrs(this.#card, this, { includeAttrs: ['opened'] });
 
       this.baseElement.renderer = (cardRoot) => {
@@ -18147,10 +18231,10 @@ const NotificationMixin = (superclass) =>
     }
   };
 
-const NotificationClass = compose(
-  draggableMixin,
-  componentNameValidationMixin,
-  hoverableMixin,
+const NotificationClass = compose$1(
+  draggableMixin$1,
+  componentNameValidationMixin$1,
+  hoverableMixin$1,
   NotificationMixin
 )(
   createProxy({