@descope/web-components-ui 1.0.244 → 1.0.246

package/dist/index.esm.js

@@ -10,6 +10,7 @@ import '@vaadin/combo-box';
 import '@vaadin/grid';
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
+import '@vaadin/multi-select-combo-box';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
@@ -1060,10 +1061,11 @@ const DISPLAY_NAME_SEPARATOR = '_';
 
 const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
-const withWaitForShadowRoot = (getRootElementFn) => (that) =>
-  new Promise((res) => {
+const withWaitForShadowRoot = (getRootElementFn) => async (that) => {
+  const ele = await getRootElementFn(that);
+
+  return new Promise((res) => {
     const MAX_RETRIES = 20;
-    const ele = getRootElementFn(that);
     let counter = 0;
 
     const check = () => {
@@ -1076,11 +1078,12 @@ const withWaitForShadowRoot = (getRootElementFn) => (that) =>
 
       counter++;
 
-      if (!ele.shadowRoot) setTimeout(check);
+      if (!ele?.shadowRoot) setTimeout(check);
       else res(ele.shadowRoot);
     };
     check();
   });
+};
 
 const portalMixin =
   ({ name, selector, mappings = {}, forward: { attributes = [], include = true } = {} }) =>
@@ -1106,35 +1109,44 @@ const portalMixin =
 
       constructor() {
         // we cannot use "this" before calling "super"
-        const getRootElement = (that) => {
+        const getRootElement = async (that) => {
           const baseEle = that.shadowRoot.querySelector(that.baseSelector);
-          const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
+          if (!selector) {
+            return baseEle;
+          }
 
-          return portal;
+          // in case we have a selector, we should first wait for the base element shadow root
+          //  and then look for the internal element
+          const baseEleShadowRoot = await withWaitForShadowRoot(() => baseEle)(that);
+          return baseEleShadowRoot.querySelector(selector);
         };
 
+        const getPortalElement = withWaitForShadowRoot(getRootElement);
+
         super({
-          getRootElement: withWaitForShadowRoot(getRootElement),
+          getRootElement: getPortalElement,
           componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
           themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
           baseSelector: ':host',
         });
 
-        this.#portalEle = getRootElement(this);
+        this.#portalEle = getPortalElement(this).then((ele) => ele.host);
       }
 
-      #handleHoverAttribute() {
-        this.#portalEle.onmouseenter = (e) => {
+      async #handleHoverAttribute() {
+        const portalEle = await this.#portalEle;
+        portalEle.onmouseenter = (e) => {
           e.target.setAttribute('hover', 'true');
         };
-        this.#portalEle.onmouseleave = (e) => {
+        portalEle.onmouseleave = (e) => {
           e.target.removeAttribute('hover');
         };
       }
 
-      init() {
+      async init() {
         super.init?.();
-        forwardAttrs(this, this.#portalEle, {
+        const portalEle = await this.#portalEle;
+        forwardAttrs(this, portalEle, {
           [include ? 'includeAttrs' : 'excludeAttrs']: attributes,
         });
 
@@ -7202,2425 +7214,2427 @@ const GridClass = compose(
 
 customElements.define(componentName$5, GridClass);
 
-const componentName$4 = getComponentName('badge');
+const componentName$4 = getComponentName('multi-select-combo-box');
 
-class RawBadge extends createBaseClass({ componentName: componentName$4, baseSelector: ':host > div' }) {
-  constructor() {
-    super();
+const multiSelectComboBoxMixin = (superclass) =>
+  class MultiSelectComboBoxMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ displayName, value, label }) => {
+      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+    };
 
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-      :host {
-        display: inline-flex;
-      }
-      :host > div {
-        width: 100%;
+    #data;
+
+    get defaultValues() {
+      const defaultValuesAttr = this.getAttribute('default-values');
+      if (defaultValuesAttr) {
+        try {
+          const defaultValues = JSON.parse(defaultValuesAttr);
+          if (this.isValidDataType(defaultValues)) {
+            return defaultValues;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "default-values" -', e.message);
+        }
       }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
-  }
-}
+      return [];
+    }
 
-const BadgeClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: [{ selector: () => ':host', property: 'width' }],
-      hostDirection: { property: 'direction' },
+    get renderItem() {
+      return this.#renderItem;
+    }
 
-      fontFamily: {},
-      fontSize: {},
-      fontWeight: {},
-      textTransform: {},
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
 
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-      borderRadius: {},
+    get data() {
+      if (this.#data) return this.#data;
 
-      backgroundColor: {},
+      const dataAttr = this.getAttribute('data');
 
-      textColor: { property: 'color' },
-      textAlign: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawBadge);
+      if (dataAttr) {
+        try {
+          const data = JSON.parse(dataAttr);
+          if (this.isValidDataType(data)) {
+            return data;
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error('could not parse data string from attribute "data" -', e.message);
+        }
+      }
 
-customElements.define(componentName$4, BadgeClass);
+      return [];
+    }
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
 
-const transformTheme = (theme, path, getTransformation) => {
-  return Object.entries(theme).reduce((acc, [key, val]) => {
-    if (val?.constructor !== Object) {
-      return merge(acc, getTransformation(path.concat(key), val));
+    get allowCustomValue() {
+      return this.getAttribute('allow-custom-value') === 'true';
     }
-    return merge(acc, transformTheme(val, [...path, key], getTransformation));
-  }, {});
-};
 
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+    get minItemsSelection() {
+      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+    }
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
-  }
-};
+    get maxItemsSelection() {
+      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+    }
 
-const themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
+    // eslint-disable-next-line class-methods-use-this
+    isValidDataType(data) {
+      const isValid = Array.isArray(data);
+      if (!isValid) {
+        // eslint-disable-next-line no-console
+        console.error('data and default-values must be an array, received:', data);
+      }
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+      return isValid;
+    }
 
-const getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
 
-  if (!themeName) return style;
+    handleSelectedItems() {
+      const currentSelected =
+        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+      this.baseElement.selectedItems = [];
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected.length > 0) {
+        this.value = currentSelected;
+      }
 
-    if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+      // otherwise, if default value is specified, set default value as selected item
+      if (this.value.length === 0) {
+        this.setDefaultValues();
+      }
     }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
-    let themeName = BASE_THEME_SECTION;
-
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
     }
 
-    // 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"]`;
-
-      const nextSection = restPath[idx + 1];
+    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+    // field that it searches the value, and the finaly display value of the input.
+    // We provide a custom transform function to override that behavior.
+    setComboBoxDescriptor() {
+      const valueDescriptor = Object.getOwnPropertyDescriptor(
+        this.inputElement.constructor.prototype,
+        'value'
+      );
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-        // eslint-disable-next-line no-console
-        console.error(
-          'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
-        );
-        return acc;
-      }
+      const comboBox = this;
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
-    }, '');
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
 
-    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+            if (transformedValue === this.value) {
+              return;
+            }
 
-    return {
-      [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
+            valueDescriptor.set.call(this, transformedValue);
           },
         },
-      },
-    };
-  });
-
-const componentsThemeToStyle = (componentsTheme) =>
-  Object.entries(componentsTheme).reduce(
-    (acc, [selector, vars]) =>
-      `${acc}${selector} { \n${Object.entries(vars)
-        .map(([key, val]) => `${key}: ${val}`)
-        .join(';\n')} \n}\n\n`,
-    ''
-  );
+      });
+    }
 
-const createComponentsTheme = (componentsTheme) => {
-  const styleObj = componentsThemeToStyleObj(componentsTheme);
+    // vaadin api is to set props on their combo box node,
+    // in order to avoid it, we are passing the children of this component
+    // to the items & renderer props, so it will be used as the combo box items
+    #onChildrenChange() {
+      const items = Array.from(this.children);
 
-  return Object.keys(styleObj).reduce((acc, componentName) => {
-    const componentThemes = styleObj[componentName];
+      // we want the data-name attribute to be accessible as an object attribute
+      if (items.length) {
+        this.removeAttribute('has-no-options');
 
-    return Object.assign(acc, {
-      [componentName]: Object.keys(componentThemes).reduce(
-        (res, theme) =>
-          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-        {}
-      ),
-    });
-  }, {});
-};
+        items.forEach((node) => {
+          Object.defineProperty(node, 'data-name', {
+            value: node.getAttribute('data-name'),
+            configurable: true,
+            writable: true,
+          });
+          Object.defineProperty(node, 'data-id', {
+            value: node.getAttribute('data-id'),
+            configurable: true,
+            writable: true,
+          });
+        });
 
-const themeToStyle = ({ globals, components }, themeName) => ({
-  globals: globalsThemeToStyle(globals, themeName),
-  components: createComponentsTheme(components),
-});
+        this.baseElement.items = items;
 
-const useVar = (varName) => `var(${varName})`;
+        setTimeout(() => {
+          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+          this.handleSelectedItems();
+        }, 0);
+      } else {
+        this.baseElement.items = [];
+        this.setAttribute('has-no-options', '');
+      }
 
-const createHelperVars = (theme, prefix) => {
-  const res = transformTheme(theme, [], (path, value) => {
-    const modifiedPath = [...path];
-    const property = modifiedPath.splice(-1);
-    const varName = getCssVarName(prefix, property);
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
 
-    const vars = { [property]: varName };
-    const useVars = { [property]: useVar(varName) };
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot
+        .querySelector('vaadin-multi-select-combo-box-internal')
+        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+      };
+      overlay._detachOverlay = () => {};
+      overlay._enterModalState = () => {};
+    }
 
-    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
-  });
+    #handleCustomValues() {
+      if (this.allowCustomValue) {
+        this.baseElement.addEventListener('custom-value-set', (e) => {
+          const newItemHtml = this.#renderItem({
+            label: e.detail,
+            displayName: e.detail,
+            value: e.detail,
+          });
+          this.innerHTML += newItemHtml;
+          // The value needs to be set with a timeout because it needs to execute after
+          // the custom value is added to items by the children change observer
+          setTimeout(() => {
+            this.value = [...this.value, e.detail];
+          }, 0);
+        });
+      }
+    }
 
-  return [res.theme, res.useVars, res.vars];
-};
+    setGetValidity() {
+      // eslint-disable-next-line func-names
+      this.getValidity = function () {
+        if (this.isRequired && !this.value.length) {
+          return {
+            valueMissing: true,
+          };
+        }
+        // If the field is not required, no minimum selection can be set
+        if (
+          this.isRequired &&
+          this.minItemsSelection &&
+          this.value.length < this.minItemsSelection
+        ) {
+          return {
+            rangeUnderflow: true,
+          };
+        }
+        if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
+          return {
+            rangeOverflow: true,
+          };
+        }
+        return {};
+      };
+    }
 
-const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
-const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
-const genContrast = (c, percentage = 0.9) => {
-  const isDark = c.isDark();
-  return c
-    .mix(Color(isDark ? 'white' : 'black'), percentage)
-    .saturate(1)
-    .hex();
-};
+    init() {
+      super.init?.();
 
-const genColor = (color) => {
-  const mainColor = new Color(color.main || color);
+      this.setGetValidity();
 
-  return {
-    main: mainColor.hex(),
-    dark: color.dark || genDark(mainColor),
-    light: color.light || genLight(mainColor),
-    contrast: color.contrast || genContrast(mainColor),
-  };
-};
+      this.setComboBoxDescriptor();
 
-const genColors = (colors) => {
-  return Object.keys(colors).reduce((acc, colorName) => {
-    const currentColor = colors[colorName];
+      this.#overrideOverlaySettings();
 
-    return Object.assign(acc, {
-      [colorName]: genColor(currentColor),
-    });
-  }, {});
-};
+      this.#handleCustomValues();
 
-const direction = 'ltr';
+      this.renderItems();
 
-const colors = genColors({
-  surface: {
-    main: 'lightgray',
-    light: '#fff',
-    dark: '#000',
-  },
-  primary: '#006af5',
-  secondary: '#7D14EB',
-  success: 'green',
-  error: '#e21d12',
-});
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
 
-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',
-  },
-};
+      observeChildren(this, this.#onChildrenChange.bind(this));
 
-const fontsRef = getThemeRefs({ fonts }).fonts;
+      // 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'] });
 
-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',
-  },
-};
+      this.setDefaultValues();
+    }
 
-const spacing = {
-  xs: '2px',
-  sm: '4px',
-  md: '8px',
-  lg: '16px',
-  xl: '32px',
-};
+    setDefaultValues() {
+      this.value = this.defaultValues;
+    }
 
-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 = {
-  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,
-  typography,
-  spacing,
-  border,
-  radius,
-  shadow,
-  fonts,
-  direction,
-};
-const vars$w = getThemeVars(globals);
-
-const globalRefs$i = getThemeRefs(globals);
-const compVars$4 = ButtonClass.cssVarList;
-
-const mode = {
-  primary: globalRefs$i.colors.primary,
-  secondary: globalRefs$i.colors.secondary,
-  success: globalRefs$i.colors.success,
-  error: globalRefs$i.colors.error,
-  surface: globalRefs$i.colors.surface,
-};
-
-const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
-
-const button = {
-  ...helperTheme$3,
-
-  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
-
-  [compVars$4.cursor]: 'pointer',
-  [compVars$4.hostHeight]: '3em',
-  [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$i.direction,
-
-  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$i.border.xs,
-  [compVars$4.borderStyle]: 'solid',
-  [compVars$4.borderColor]: 'transparent',
-
-  [compVars$4.labelSpacing]: '0.25em',
-
-  [compVars$4.verticalPadding]: '1em',
-
-  [compVars$4.outlineWidth]: globals.border.sm,
-  [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$4.outlineStyle]: 'solid',
-  [compVars$4.outlineColor]: 'transparent',
+    set value(vals) {
+      if (vals && vals.length > 0) {
+        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
 
-  size: {
-    xs: { [compVars$4.fontSize]: '12px' },
-    sm: { [compVars$4.fontSize]: '14px' },
-    md: { [compVars$4.fontSize]: '16px' },
-    lg: { [compVars$4.fontSize]: '18px' },
-  },
+        if (children?.length > 0) {
+          this.baseElement.selectedItems = children;
+        }
+      } else {
+        this.baseElement.selectedItems = [];
+      }
+    }
 
-  _square: {
-    [compVars$4.hostHeight]: '3em',
-    [compVars$4.hostWidth]: '3em',
-    [compVars$4.verticalPadding]: '0',
-  },
+    get value() {
+      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    }
+  };
 
-  _fullWidth: {
-    [compVars$4.hostWidth]: '100%',
+const {
+  host,
+  inputField,
+  inputElement,
+  placeholder,
+  toggle,
+  label,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+  chip,
+  chipLabel,
+  overflowChipFirstBorder,
+  overflowChipSecondBorder,
+} = {
+  host: { selector: () => ':host' },
+  inputField: { selector: '::part(input-field)' },
+  inputElement: { selector: 'input' },
+  placeholder: { selector: '> input:placeholder-shown' },
+  toggle: { selector: '::part(toggle-button)' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+  chip: { selector: 'vaadin-multi-select-combo-box-chip' },
+  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
+  overflowChipFirstBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
   },
-
-  _loading: {
-    [compVars$4.cursor]: 'wait',
-    [compVars$4.labelTextColor]: helperRefs$3.main,
+  overflowChipSecondBorder: {
+    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
   },
+};
 
-  _disabled: {
-    [helperVars$3.main]: globalRefs$i.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$i.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
-  },
+const MultiSelectComboBoxClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      // we apply font-size also on the host so we can set its width with em
+      fontSize: [{}, host],
+      chipFontSize: { ...chipLabel, property: 'font-size' },
+      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      inputHeight: { ...inputField, property: 'min-height' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      inputValueTextColor: { ...inputField, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
+      inputDropdownButtonColor: { ...toggle, property: 'color' },
+      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
+      inputDropdownButtonOffset: [
+        { ...toggle, property: 'margin-right' },
+        { ...toggle, property: 'margin-left' },
+      ],
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputOutlineStyle: { ...inputField, property: 'outline-style' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputHorizontalPadding: [
+        { ...inputElement, property: 'padding-left' },
+        { ...inputElement, property: 'padding-right' },
+        { ...inputField, property: 'padding-inline-start' },
+      ],
+      inputVerticalPadding: [
+        { ...inputField, property: 'padding-top' },
+        { ...inputField, property: 'padding-bottom' },
+      ],
+      chipTextColor: { ...chipLabel, property: 'color' },
+      chipBackgroundColor: [
+        { ...chip, property: 'background-color' },
+        { ...overflowChipFirstBorder, property: 'border-color' },
+        { ...overflowChipSecondBorder, property: 'border-color' },
+      ],
 
-  variant: {
-    contained: {
-      [compVars$4.labelTextColor]: helperRefs$3.contrast,
-      [compVars$4.backgroundColor]: helperRefs$3.main,
-      _hover: {
-        [compVars$4.backgroundColor]: helperRefs$3.dark,
-        _loading: {
-          [compVars$4.backgroundColor]: helperRefs$3.main,
-        },
+      // we need to use the variables from the portal mixin
+      // so we need to use an arrow function on the selector
+      // for that to work, because ComboBox is not available
+      // at this time.
+      overlayBackground: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
       },
-      _active: {
-        [compVars$4.backgroundColor]: helperRefs$3.main,
+      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
+      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
+      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
+      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
+      overlayItemBoxShadow: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
       },
-    },
-
-    outline: {
-      [compVars$4.labelTextColor]: helperRefs$3.main,
-      [compVars$4.borderColor]: 'currentColor',
-      _hover: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
+      overlayItemPaddingInlineStart: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
       },
-      _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.main,
+      overlayItemPaddingInlineEnd: {
+        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
       },
     },
-
-    link: {
-      [compVars$4.labelTextColor]: helperRefs$3.main,
-      _hover: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
-        [compVars$4.labelTextDecoration]: 'underline',
+  }),
+  draggableMixin,
+  portalMixin({
+    name: 'overlay',
+    selector: 'vaadin-multi-select-combo-box-internal',
+    mappings: {
+      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
+      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
+      cursor: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
+      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
+      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
+      itemPaddingInlineStart: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-start',
       },
-      _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
+      itemPaddingInlineEnd: {
+        selector: 'vaadin-multi-select-combo-box-item',
+        property: 'padding-inline-end',
       },
     },
-  },
-
-  _focused: {
-    [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
-  },
-};
-
-const vars$v = {
-  ...compVars$4,
-  ...helperVars$3,
-};
-
-var button$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: button,
-  vars: vars$v
-});
-
-const componentName$3 = getComponentName('input-wrapper');
-const globalRefs$h = getThemeRefs(globals);
-
-const [theme$1, refs, vars$u] = createHelperVars(
-  {
-    labelTextColor: globalRefs$h.colors.surface.contrast,
-    valueTextColor: globalRefs$h.colors.surface.contrast,
-    placeholderTextColor: globalRefs$h.colors.surface.main,
-    requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$h.colors.error.main,
-
-    borderWidth: globalRefs$h.border.xs,
-    borderRadius: globalRefs$h.radius.xs,
-    borderColor: 'transparent',
-
-    outlineWidth: globalRefs$h.border.sm,
-    outlineStyle: 'solid',
-    outlineColor: 'transparent',
-    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
-
-    minWidth: '10em',
-    toggleButtonSize: '1.5em',
-    inputHeight: '3em',
-    horizontalPadding: '0.5em',
-    verticalPadding: '0.5em',
-
-    backgroundColor: globalRefs$h.colors.surface.light,
-
-    fontFamily: globalRefs$h.fonts.font1.family,
+    forward: {
+      include: false,
+      attributes: ['size'],
+    },
+  }),
+  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
+  componentNameValidationMixin,
+  multiSelectComboBoxMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-multi-select-combo-box',
+    style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
+		${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
+		${resetInputPlaceholder('vaadin-multi-select-combo-box')}
+		${resetInputCursor('vaadin-multi-select-combo-box')}
 
-    direction: globalRefs$h.direction,
+		vaadin-multi-select-combo-box {
+			padding: 0;
+			width: 100%;
+		}
+		vaadin-multi-select-combo-box::before {
+			height: initial;
+		}
+		vaadin-multi-select-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+      align-self: center;
+			box-sizing: border-box;
+		}
 
-    overlayOpacity: '0.3',
+		::part(input-field) {
+      padding: 0;
+			box-shadow: none;
+		}
+    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}
+    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
+      display: block;
+    }
 
-    size: {
-      xs: { fontSize: '12px', chipFontSize: '10px' },
-      sm: { fontSize: '14px', chipFontSize: '12px' },
-      md: { fontSize: '16px', chipFontSize: '14px' },
-      lg: { fontSize: '18px', chipFontSize: '16px' },
-    },
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -4px;
+      right: -4px;
+      border-left-width: 0;
+      border-inline-start-style: solid;
+      border-inline-start-width: 2px;
+    }
+    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
+      left: -8px;
+      right: -8px;
+    }
 
-    _fullWidth: {
-      width: '100%',
-    },
+    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
+      display: none;
+    }
+		`,
+    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
+    // with the same name. Including it will cause Vaadin to calculate NaN size,
+    // and reset items to an empty array, and opening the list box with no items
+    // to display.
+    // Note: we exclude `placeholder` because the vaadin component observes it and
+    // tries to override it, causing us to lose the user set placeholder.
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
+    componentName: componentName$4,
+    includeForwardProps: ['items', 'renderer', 'selectedItems'],
+  })
+);
 
-    _focused: {
-      outlineColor: globalRefs$h.colors.surface.main,
-      _invalid: {
-        outlineColor: globalRefs$h.colors.error.main,
-      },
-    },
+customElements.define(componentName$4, MultiSelectComboBoxClass);
 
-    _bordered: {
-      outlineWidth: globalRefs$h.border.xs,
-      borderColor: globalRefs$h.colors.surface.main,
-      borderStyle: 'solid',
-      _invalid: {
-        borderColor: globalRefs$h.colors.error.main,
-      },
-    },
+const componentName$3 = getComponentName('badge');
 
-    _disabled: {
-      labelTextColor: globalRefs$h.colors.surface.main,
-      borderColor: globalRefs$h.colors.surface.main,
-      valueTextColor: globalRefs$h.colors.surface.dark,
-      placeholderTextColor: globalRefs$h.colors.surface.dark,
-      backgroundColor: globalRefs$h.colors.surface.main,
-    },
-  },
-  componentName$3
-);
+class RawBadge extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
 
-var inputWrapper = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: theme$1,
-  refs: refs,
-  vars: vars$u
-});
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
 
-const vars$t = TextFieldClass.cssVarList;
+const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
 
-const textField = {
-  [vars$t.hostWidth]: refs.width,
-  [vars$t.hostMinWidth]: refs.minWidth,
-  [vars$t.hostDirection]: refs.direction,
-  [vars$t.fontSize]: refs.fontSize,
-  [vars$t.fontFamily]: refs.fontFamily,
-  [vars$t.labelTextColor]: refs.labelTextColor,
-  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$t.inputValueTextColor]: refs.valueTextColor,
-  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$t.inputBorderWidth]: refs.borderWidth,
-  [vars$t.inputBorderStyle]: refs.borderStyle,
-  [vars$t.inputBorderColor]: refs.borderColor,
-  [vars$t.inputBorderRadius]: refs.borderRadius,
-  [vars$t.inputOutlineWidth]: refs.outlineWidth,
-  [vars$t.inputOutlineStyle]: refs.outlineStyle,
-  [vars$t.inputOutlineColor]: refs.outlineColor,
-  [vars$t.inputOutlineOffset]: refs.outlineOffset,
-  [vars$t.inputBackgroundColor]: refs.backgroundColor,
-  [vars$t.inputHeight]: refs.inputHeight,
-  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
-};
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+      textTransform: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
 
-var textField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: textField,
-  textField: textField,
-  vars: vars$t
-});
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
 
-const globalRefs$g = getThemeRefs(globals);
-const vars$s = PasswordClass.cssVarList;
+      backgroundColor: {},
 
-const password = {
-  [vars$s.hostWidth]: refs.width,
-  [vars$s.hostDirection]: refs.direction,
-  [vars$s.fontSize]: refs.fontSize,
-  [vars$s.fontFamily]: refs.fontFamily,
-  [vars$s.labelTextColor]: refs.labelTextColor,
-  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$s.inputHeight]: refs.inputHeight,
-  [vars$s.inputBackgroundColor]: refs.backgroundColor,
-  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$s.inputValueTextColor]: refs.valueTextColor,
-  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$s.inputBorderWidth]: refs.borderWidth,
-  [vars$s.inputBorderStyle]: refs.borderStyle,
-  [vars$s.inputBorderColor]: refs.borderColor,
-  [vars$s.inputBorderRadius]: refs.borderRadius,
-  [vars$s.inputOutlineWidth]: refs.outlineWidth,
-  [vars$s.inputOutlineStyle]: refs.outlineStyle,
-  [vars$s.inputOutlineColor]: refs.outlineColor,
-  [vars$s.inputOutlineOffset]: refs.outlineOffset,
-  [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
-  [vars$s.revealButtonSize]: refs.toggleButtonSize,
-};
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);
 
-var password$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: password,
-  vars: vars$s
-});
+customElements.define(componentName$3, BadgeClass);
 
-const vars$r = NumberFieldClass.cssVarList;
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
-const numberField = {
-  [vars$r.hostWidth]: refs.width,
-  [vars$r.hostMinWidth]: refs.minWidth,
-  [vars$r.hostDirection]: refs.direction,
-  [vars$r.fontSize]: refs.fontSize,
-  [vars$r.fontFamily]: refs.fontFamily,
-  [vars$r.labelTextColor]: refs.labelTextColor,
-  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$r.inputValueTextColor]: refs.valueTextColor,
-  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$r.inputBorderWidth]: refs.borderWidth,
-  [vars$r.inputBorderStyle]: refs.borderStyle,
-  [vars$r.inputBorderColor]: refs.borderColor,
-  [vars$r.inputBorderRadius]: refs.borderRadius,
-  [vars$r.inputOutlineWidth]: refs.outlineWidth,
-  [vars$r.inputOutlineStyle]: refs.outlineStyle,
-  [vars$r.inputOutlineColor]: refs.outlineColor,
-  [vars$r.inputOutlineOffset]: refs.outlineOffset,
-  [vars$r.inputBackgroundColor]: refs.backgroundColor,
-  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$r.inputHeight]: refs.inputHeight,
+const transformTheme = (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(val, [...path, key], getTransformation));
+  }, {});
 };
 
-var numberField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: numberField,
-  vars: vars$r
-});
-
-const vars$q = EmailFieldClass.cssVarList;
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
 
-const emailField = {
-  [vars$q.hostWidth]: refs.width,
-  [vars$q.hostMinWidth]: refs.minWidth,
-  [vars$q.hostDirection]: refs.direction,
-  [vars$q.fontSize]: refs.fontSize,
-  [vars$q.fontFamily]: refs.fontFamily,
-  [vars$q.labelTextColor]: refs.labelTextColor,
-  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$q.inputValueTextColor]: refs.valueTextColor,
-  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
-  [vars$q.inputBorderWidth]: refs.borderWidth,
-  [vars$q.inputBorderStyle]: refs.borderStyle,
-  [vars$q.inputBorderColor]: refs.borderColor,
-  [vars$q.inputBorderRadius]: refs.borderRadius,
-  [vars$q.inputOutlineWidth]: refs.outlineWidth,
-  [vars$q.inputOutlineStyle]: refs.outlineStyle,
-  [vars$q.inputOutlineColor]: refs.outlineColor,
-  [vars$q.inputOutlineOffset]: refs.outlineOffset,
-  [vars$q.inputBackgroundColor]: refs.backgroundColor,
-  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$q.inputHeight]: refs.inputHeight,
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
 };
 
-var emailField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: emailField,
-  vars: vars$q
-});
-
-const globalRefs$f = getThemeRefs(globals);
-const vars$p = TextAreaClass.cssVarList;
+const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
 
-const textArea = {
-  [vars$p.hostWidth]: refs.width,
-  [vars$p.hostMinWidth]: refs.minWidth,
-  [vars$p.hostDirection]: refs.direction,
-  [vars$p.fontSize]: refs.fontSize,
-  [vars$p.fontFamily]: refs.fontFamily,
-  [vars$p.labelTextColor]: refs.labelTextColor,
-  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$p.inputBackgroundColor]: refs.backgroundColor,
-  [vars$p.inputValueTextColor]: refs.valueTextColor,
-  [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$p.inputBorderRadius]: refs.borderRadius,
-  [vars$p.inputBorderWidth]: refs.borderWidth,
-  [vars$p.inputBorderStyle]: refs.borderStyle,
-  [vars$p.inputBorderColor]: refs.borderColor,
-  [vars$p.inputOutlineWidth]: refs.outlineWidth,
-  [vars$p.inputOutlineStyle]: refs.outlineStyle,
-  [vars$p.inputOutlineColor]: refs.outlineColor,
-  [vars$p.inputOutlineOffset]: refs.outlineOffset,
-  [vars$p.inputResizeType]: 'vertical',
-  [vars$p.inputMinHeight]: '5em',
+const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
 
-  _disabled: {
-    [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
-  },
+const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
 
-  _readonly: {
-    [vars$p.inputResizeType]: 'none',
-  },
-};
+const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
 
-var textArea$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: textArea,
-  vars: vars$p
-});
+  if (!themeName) return style;
 
-const vars$o = CheckboxClass.cssVarList;
-const checkboxSize = '1.35em';
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
 
-const checkbox = {
-  [vars$o.hostWidth]: refs.width,
-  [vars$o.hostDirection]: refs.direction,
-  [vars$o.fontSize]: refs.fontSize,
-  [vars$o.fontFamily]: refs.fontFamily,
-  [vars$o.labelTextColor]: refs.labelTextColor,
-  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$o.labelFontWeight]: '400',
-  [vars$o.labelLineHeight]: checkboxSize,
-  [vars$o.labelSpacing]: '1em',
-  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$o.inputOutlineWidth]: refs.outlineWidth,
-  [vars$o.inputOutlineOffset]: refs.outlineOffset,
-  [vars$o.inputOutlineColor]: refs.outlineColor,
-  [vars$o.inputOutlineStyle]: refs.outlineStyle,
-  [vars$o.inputBorderRadius]: refs.borderRadius,
-  [vars$o.inputBorderColor]: refs.borderColor,
-  [vars$o.inputBorderWidth]: refs.borderWidth,
-  [vars$o.inputBorderStyle]: refs.borderStyle,
-  [vars$o.inputBackgroundColor]: refs.backgroundColor,
-  [vars$o.inputSize]: checkboxSize,
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
 
-  _checked: {
-    [vars$o.inputValueTextColor]: refs.valueTextColor,
-  },
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
 
-  _disabled: {
-    [vars$o.labelTextColor]: refs.labelTextColor,
-  },
-};
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
 
-var checkbox$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: checkbox,
-  vars: vars$o
-});
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
 
-const knobMargin = '2px';
-const checkboxHeight = '1.25em';
+    // 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"]`;
 
-const globalRefs$e = getThemeRefs(globals);
-const vars$n = SwitchToggleClass.cssVarList;
+      const nextSection = restPath[idx + 1];
 
-const switchToggle = {
-  [vars$n.hostWidth]: refs.width,
-  [vars$n.hostDirection]: refs.direction,
-  [vars$n.fontSize]: refs.fontSize,
-  [vars$n.fontFamily]: refs.fontFamily,
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
 
-  [vars$n.inputOutlineWidth]: refs.outlineWidth,
-  [vars$n.inputOutlineOffset]: refs.outlineOffset,
-  [vars$n.inputOutlineColor]: refs.outlineColor,
-  [vars$n.inputOutlineStyle]: refs.outlineStyle,
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
 
-  [vars$n.trackBorderStyle]: refs.borderStyle,
-  [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-  [vars$n.trackBorderColor]: refs.borderColor,
-  [vars$n.trackBackgroundColor]: 'none',
-  [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
-  [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
-  [vars$n.trackHeight]: checkboxHeight,
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
-  [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
-  [vars$n.knobRadius]: '50%',
-  [vars$n.knobTopOffset]: '1px',
-  [vars$n.knobLeftOffset]: knobMargin,
-  [vars$n.knobColor]: refs.valueTextColor,
-  [vars$n.knobTransitionDuration]: '0.3s',
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
 
-  [vars$n.labelTextColor]: refs.labelTextColor,
-  [vars$n.labelFontWeight]: '400',
-  [vars$n.labelLineHeight]: '1.35em',
-  [vars$n.labelSpacing]: '1em',
-  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
+const componentsThemeToStyle = (componentsTheme) =>
+  Object.entries(componentsTheme).reduce(
+    (acc, [selector, vars]) =>
+      `${acc}${selector} { \n${Object.entries(vars)
+        .map(([key, val]) => `${key}: ${val}`)
+        .join(';\n')} \n}\n\n`,
+    ''
+  );
 
-  _checked: {
-    [vars$n.trackBorderColor]: refs.borderColor,
-    [vars$n.trackBackgroundColor]: refs.backgroundColor,
-    [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
-    [vars$n.knobColor]: refs.valueTextColor,
-    [vars$n.knobTextColor]: refs.valueTextColor,
-  },
+const createComponentsTheme = (componentsTheme) => {
+  const styleObj = componentsThemeToStyleObj(componentsTheme);
 
-  _disabled: {
-    [vars$n.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
-    [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    [vars$n.labelTextColor]: refs.labelTextColor,
-    _checked: {
-      [vars$n.knobColor]: globalRefs$e.colors.surface.light,
-      [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
-    },
-  },
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
 
-  _invalid: {
-    [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
-    [vars$n.knobColor]: globalRefs$e.colors.error.main,
-  },
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+        {}
+      ),
+    });
+  }, {});
 };
 
-var switchToggle$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: switchToggle,
-  vars: vars$n
+const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
 });
 
-const globalRefs$d = getThemeRefs(globals);
+const useVar = (varName) => `var(${varName})`;
 
-const compVars$3 = ContainerClass.cssVarList;
+const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(prefix, property);
 
-const verticalAlignment = {
-  start: { verticalAlignment: 'start' },
-  center: { verticalAlignment: 'safe center' },
-  end: { verticalAlignment: 'end' },
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar(varName) };
+
+    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
+  });
+
+  return [res.theme, res.useVars, res.vars];
 };
 
-const horizontalAlignment = {
-  start: { horizontalAlignment: 'start' },
-  center: { horizontalAlignment: 'safe center' },
-  end: { horizontalAlignment: 'end' },
+const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
+const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
+const genContrast = (c, percentage = 0.9) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), percentage)
+    .saturate(1)
+    .hex();
 };
 
-const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
-  {
-    verticalAlignment,
-    horizontalAlignment,
-    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
-  },
-  componentName$y
-);
+const genColor = (color) => {
+  const mainColor = new Color(color.main || color);
 
-const { shadowColor: shadowColor$1 } = helperRefs$2;
+  return {
+    main: mainColor.hex(),
+    dark: color.dark || genDark(mainColor),
+    light: color.light || genLight(mainColor),
+    contrast: color.contrast || genContrast(mainColor),
+  };
+};
 
-const container = {
-  ...helperTheme$2,
+const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
 
-  [compVars$3.hostWidth]: '100%',
-  [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
-  [compVars$3.color]: globalRefs$d.colors.surface.contrast,
-  [compVars$3.borderRadius]: '0px',
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};
 
-  verticalPadding: {
-    sm: { [compVars$3.verticalPadding]: '5px' },
-    md: { [compVars$3.verticalPadding]: '10px' },
-    lg: { [compVars$3.verticalPadding]: '20px' },
+const direction = 'ltr';
+
+const colors = genColors({
+  surface: {
+    main: 'lightgray',
+    light: '#fff',
+    dark: '#000',
+  },
+  primary: '#006af5',
+  secondary: '#7D14EB',
+  success: 'green',
+  error: '#e21d12',
+});
+
+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({ fonts }).fonts;
+
+const typography = {
+  h1: {
+    font: fontsRef.font1.family,
+    weight: '900',
+    size: '48px',
+  },
+  h2: {
+    font: fontsRef.font1.family,
+    weight: '800',
+    size: '38px',
   },
-
-  horizontalPadding: {
-    sm: { [compVars$3.horizontalPadding]: '5px' },
-    md: { [compVars$3.horizontalPadding]: '10px' },
-    lg: { [compVars$3.horizontalPadding]: '20px' },
+  h3: {
+    font: fontsRef.font1.family,
+    weight: '600',
+    size: '28px',
   },
-
-  direction: {
-    row: {
-      [compVars$3.flexDirection]: 'row',
-      [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$3.flexWrap]: 'wrap',
-      horizontalAlignment: {
-        spaceBetween: {
-          [helperVars$2.horizontalAlignment]: 'space-between',
-        },
-      },
-    },
-    column: {
-      [compVars$3.flexDirection]: 'column',
-      [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
-      verticalAlignment: {
-        spaceBetween: {
-          [helperVars$2.verticalAlignment]: 'space-between',
-        },
-      },
-    },
+  subtitle1: {
+    font: fontsRef.font2.family,
+    weight: '500',
+    size: '22px',
   },
-
-  spaceBetween: {
-    sm: { [compVars$3.gap]: '10px' },
-    md: { [compVars$3.gap]: '20px' },
-    lg: { [compVars$3.gap]: '30px' },
+  subtitle2: {
+    font: fontsRef.font2.family,
+    weight: '400',
+    size: '20px',
   },
-
-  shadow: {
-    sm: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
-    },
-    md: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
-    },
-    lg: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
-    },
-    xl: {
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
-    },
-    '2xl': {
-      [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
-    },
+  body1: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '16px',
   },
-
-  borderRadius: {
-    sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
-    md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
-    lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
-    xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
-    '2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
-    '3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
+  body2: {
+    font: fontsRef.font1.family,
+    weight: '400',
+    size: '14px',
   },
 };
 
-const vars$m = {
-  ...compVars$3,
-  ...helperVars$2,
+const spacing = {
+  xs: '2px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  xl: '32px',
 };
 
-var container$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: container,
-  vars: vars$m
-});
+const border = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px',
+  lg: '4px',
+  xl: '5px',
+};
 
-const vars$l = LogoClass.cssVarList;
+const radius = {
+  xs: '5px',
+  sm: '10px',
+  md: '15px',
+  lg: '20px',
+  xl: '25px',
+  '2xl': '30px',
+  '3xl': '35px',
+};
 
-const logo$1 = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
+const shadow = {
+  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',
+  },
 };
 
-var logo$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo$1,
-  vars: vars$l
-});
+const globals = {
+  colors,
+  typography,
+  spacing,
+  border,
+  radius,
+  shadow,
+  fonts,
+  direction,
+};
+const vars$w = getThemeVars(globals);
 
-const vars$k = TotpImageClass.cssVarList;
+const globalRefs$i = getThemeRefs(globals);
+const compVars$4 = ButtonClass.cssVarList;
 
-const logo = {
-  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+const mode = {
+  primary: globalRefs$i.colors.primary,
+  secondary: globalRefs$i.colors.secondary,
+  success: globalRefs$i.colors.success,
+  error: globalRefs$i.colors.error,
+  surface: globalRefs$i.colors.surface,
 };
 
-var totpImage = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo,
-  vars: vars$k
-});
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$E);
 
-const globalRefs$c = getThemeRefs(globals);
-const vars$j = TextClass.cssVarList;
+const button = {
+  ...helperTheme$3,
 
-const text = {
-  [vars$j.hostDirection]: globalRefs$c.direction,
-  [vars$j.textLineHeight]: '1.35em',
-  [vars$j.textAlign]: 'left',
-  [vars$j.textColor]: globalRefs$c.colors.surface.dark,
-  variant: {
-    h1: {
-      [vars$j.fontSize]: globalRefs$c.typography.h1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
-    },
-    h2: {
-      [vars$j.fontSize]: globalRefs$c.typography.h2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
-    },
-    h3: {
-      [vars$j.fontSize]: globalRefs$c.typography.h3.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
-    },
-    subtitle1: {
-      [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
-    },
-    body1: {
-      [vars$j.fontSize]: globalRefs$c.typography.body1.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
-    },
-    body2: {
-      [vars$j.fontSize]: globalRefs$c.typography.body2.size,
-      [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
-      [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
-    },
-  },
+  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
 
-  mode: {
-    primary: {
-      [vars$j.textColor]: globalRefs$c.colors.primary.main,
-    },
-    secondary: {
-      [vars$j.textColor]: globalRefs$c.colors.secondary.main,
-    },
-    error: {
-      [vars$j.textColor]: globalRefs$c.colors.error.main,
-    },
-    success: {
-      [vars$j.textColor]: globalRefs$c.colors.success.main,
-    },
-  },
+  [compVars$4.cursor]: 'pointer',
+  [compVars$4.hostHeight]: '3em',
+  [compVars$4.hostWidth]: 'auto',
+  [compVars$4.hostDirection]: globalRefs$i.direction,
 
-  textAlign: {
-    right: { [vars$j.textAlign]: 'right' },
-    left: { [vars$j.textAlign]: 'left' },
-    center: { [vars$j.textAlign]: 'center' },
+  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$i.border.xs,
+  [compVars$4.borderStyle]: 'solid',
+  [compVars$4.borderColor]: 'transparent',
+
+  [compVars$4.labelSpacing]: '0.25em',
+
+  [compVars$4.verticalPadding]: '1em',
+
+  [compVars$4.outlineWidth]: globals.border.sm,
+  [compVars$4.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$4.outlineStyle]: 'solid',
+  [compVars$4.outlineColor]: 'transparent',
+
+  size: {
+    xs: { [compVars$4.fontSize]: '12px' },
+    sm: { [compVars$4.fontSize]: '14px' },
+    md: { [compVars$4.fontSize]: '16px' },
+    lg: { [compVars$4.fontSize]: '18px' },
   },
 
-  _fullWidth: {
-    [vars$j.hostWidth]: '100%',
+  _square: {
+    [compVars$4.hostHeight]: '3em',
+    [compVars$4.hostWidth]: '3em',
+    [compVars$4.verticalPadding]: '0',
   },
 
-  _italic: {
-    [vars$j.fontStyle]: 'italic',
+  _fullWidth: {
+    [compVars$4.hostWidth]: '100%',
   },
 
-  _uppercase: {
-    [vars$j.textTransform]: 'uppercase',
+  _loading: {
+    [compVars$4.cursor]: 'wait',
+    [compVars$4.labelTextColor]: helperRefs$3.main,
   },
 
-  _lowercase: {
-    [vars$j.textTransform]: 'lowercase',
+  _disabled: {
+    [helperVars$3.main]: globalRefs$i.colors.surface.main,
+    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$i.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$i.colors.surface.contrast,
   },
-};
-
-var text$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: text,
-  vars: vars$j
-});
 
-const globalRefs$b = getThemeRefs(globals);
-const vars$i = LinkClass.cssVarList;
-
-const link = {
-  [vars$i.hostDirection]: globalRefs$b.direction,
-  [vars$i.cursor]: 'pointer',
+  variant: {
+    contained: {
+      [compVars$4.labelTextColor]: helperRefs$3.contrast,
+      [compVars$4.backgroundColor]: helperRefs$3.main,
+      _hover: {
+        [compVars$4.backgroundColor]: helperRefs$3.dark,
+        _loading: {
+          [compVars$4.backgroundColor]: helperRefs$3.main,
+        },
+      },
+      _active: {
+        [compVars$4.backgroundColor]: helperRefs$3.main,
+      },
+    },
 
-  [vars$i.textColor]: globalRefs$b.colors.primary.main,
+    outline: {
+      [compVars$4.labelTextColor]: helperRefs$3.main,
+      [compVars$4.borderColor]: 'currentColor',
+      _hover: {
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
+      },
+      _active: {
+        [compVars$4.labelTextColor]: helperRefs$3.main,
+      },
+    },
 
-  textAlign: {
-    right: { [vars$i.textAlign]: 'right' },
-    left: { [vars$i.textAlign]: 'left' },
-    center: { [vars$i.textAlign]: 'center' },
+    link: {
+      [compVars$4.labelTextColor]: helperRefs$3.main,
+      _hover: {
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextDecoration]: 'underline',
+      },
+      _active: {
+        [compVars$4.labelTextColor]: helperRefs$3.dark,
+      },
+    },
   },
 
-  _fullWidth: {
-    [vars$i.hostWidth]: '100%',
+  _focused: {
+    [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
   },
+};
 
-  mode: {
-    primary: {
-      [vars$i.textColor]: globalRefs$b.colors.primary.main,
-    },
-    secondary: {
-      [vars$i.textColor]: globalRefs$b.colors.secondary.main,
-    },
-    error: {
-      [vars$i.textColor]: globalRefs$b.colors.error.main,
-    },
-    success: {
-      [vars$i.textColor]: globalRefs$b.colors.success.main,
-    },
-  },
+const vars$v = {
+  ...compVars$4,
+  ...helperVars$3,
 };
 
-var link$1 = /*#__PURE__*/Object.freeze({
+var button$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: link,
-  vars: vars$i
+  default: button,
+  vars: vars$v
 });
 
-const globalRefs$a = getThemeRefs(globals);
-const compVars$2 = DividerClass.cssVarList;
+const componentName$2 = getComponentName('input-wrapper');
+const globalRefs$h = getThemeRefs(globals);
 
-const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
+const [theme$1, refs, vars$u] = createHelperVars(
   {
-    thickness: '2px',
-    spacing: '10px',
-  },
-  componentName$w
-);
+    labelTextColor: globalRefs$h.colors.surface.contrast,
+    valueTextColor: globalRefs$h.colors.surface.contrast,
+    placeholderTextColor: globalRefs$h.colors.surface.main,
+    requiredIndicator: "'*'",
+    errorMessageTextColor: globalRefs$h.colors.error.main,
 
-const divider = {
-  ...helperTheme$1,
+    borderWidth: globalRefs$h.border.xs,
+    borderRadius: globalRefs$h.radius.xs,
+    borderColor: 'transparent',
 
-  [compVars$2.hostDirection]: globalRefs$a.direction,
-  [compVars$2.alignItems]: 'center',
-  [compVars$2.flexDirection]: 'row',
-  [compVars$2.alignSelf]: 'stretch',
-  [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
-  [compVars$2.stripeColorOpacity]: '0.5',
-  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars$2.labelTextWidth]: 'fit-content',
-  [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
-  [compVars$2.textAlign]: 'center',
+    outlineWidth: globalRefs$h.border.sm,
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
 
-  _vertical: {
-    [compVars$2.minHeight]: '200px',
-    [compVars$2.flexDirection]: 'column',
-    [compVars$2.hostWidth]: 'fit-content',
-    [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars$2.labelTextWidth]: 'fit-content',
-    [compVars$2.labelTextMaxWidth]: '100%',
-    [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
-  },
-};
+    minWidth: '10em',
+    toggleButtonSize: '1.5em',
+    inputHeight: '3em',
+    horizontalPadding: '0.5em',
+    verticalPadding: '0.5em',
 
-const vars$h = {
-  ...compVars$2,
-  ...helperVars$1,
-};
+    backgroundColor: globalRefs$h.colors.surface.light,
 
-var divider$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: divider,
-  vars: vars$h
-});
+    fontFamily: globalRefs$h.fonts.font1.family,
 
-const vars$g = PasscodeClass.cssVarList;
+    direction: globalRefs$h.direction,
 
-const passcode = {
-  [vars$g.hostDirection]: refs.direction,
-  [vars$g.fontFamily]: refs.fontFamily,
-  [vars$g.fontSize]: refs.fontSize,
-  [vars$g.labelTextColor]: refs.labelTextColor,
-  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$g.digitValueTextColor]: refs.valueTextColor,
-  [vars$g.digitPadding]: '0',
-  [vars$g.digitTextAlign]: 'center',
-  [vars$g.digitSpacing]: '4px',
-  [vars$g.hostWidth]: refs.width,
-  [vars$g.digitOutlineColor]: 'transparent',
-  [vars$g.digitOutlineWidth]: refs.outlineWidth,
-  [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
-  [vars$g.digitSize]: refs.inputHeight,
+    overlayOpacity: '0.3',
 
-  size: {
-    xs: { [vars$g.spinnerSize]: '15px' },
-    sm: { [vars$g.spinnerSize]: '20px' },
-    md: { [vars$g.spinnerSize]: '20px' },
-    lg: { [vars$g.spinnerSize]: '20px' },
-  },
+    size: {
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
+    },
 
-  _hideCursor: {
-    [vars$g.digitCaretTextColor]: 'transparent',
-  },
+    _fullWidth: {
+      width: '100%',
+    },
 
-  _loading: {
-    [vars$g.overlayOpacity]: refs.overlayOpacity,
+    _focused: {
+      outlineColor: globalRefs$h.colors.surface.main,
+      _invalid: {
+        outlineColor: globalRefs$h.colors.error.main,
+      },
+    },
+
+    _bordered: {
+      outlineWidth: globalRefs$h.border.xs,
+      borderColor: globalRefs$h.colors.surface.main,
+      borderStyle: 'solid',
+      _invalid: {
+        borderColor: globalRefs$h.colors.error.main,
+      },
+    },
+
+    _disabled: {
+      labelTextColor: globalRefs$h.colors.surface.main,
+      borderColor: globalRefs$h.colors.surface.main,
+      valueTextColor: globalRefs$h.colors.surface.dark,
+      placeholderTextColor: globalRefs$h.colors.surface.dark,
+      backgroundColor: globalRefs$h.colors.surface.main,
+    },
   },
+  componentName$2
+);
+
+var inputWrapper = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: theme$1,
+  refs: refs,
+  vars: vars$u
+});
+
+const vars$t = TextFieldClass.cssVarList;
+
+const textField = {
+  [vars$t.hostWidth]: refs.width,
+  [vars$t.hostMinWidth]: refs.minWidth,
+  [vars$t.hostDirection]: refs.direction,
+  [vars$t.fontSize]: refs.fontSize,
+  [vars$t.fontFamily]: refs.fontFamily,
+  [vars$t.labelTextColor]: refs.labelTextColor,
+  [vars$t.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$t.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$t.inputValueTextColor]: refs.valueTextColor,
+  [vars$t.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$t.inputBorderWidth]: refs.borderWidth,
+  [vars$t.inputBorderStyle]: refs.borderStyle,
+  [vars$t.inputBorderColor]: refs.borderColor,
+  [vars$t.inputBorderRadius]: refs.borderRadius,
+  [vars$t.inputOutlineWidth]: refs.outlineWidth,
+  [vars$t.inputOutlineStyle]: refs.outlineStyle,
+  [vars$t.inputOutlineColor]: refs.outlineColor,
+  [vars$t.inputOutlineOffset]: refs.outlineOffset,
+  [vars$t.inputBackgroundColor]: refs.backgroundColor,
+  [vars$t.inputHeight]: refs.inputHeight,
+  [vars$t.inputHorizontalPadding]: refs.horizontalPadding,
 };
 
-var passcode$1 = /*#__PURE__*/Object.freeze({
+var textField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: passcode,
-  vars: vars$g
+  default: textField,
+  textField: textField,
+  vars: vars$t
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$f = LoaderLinearClass.cssVarList;
+const globalRefs$g = getThemeRefs(globals);
+const vars$s = PasswordClass.cssVarList;
 
-const loaderLinear = {
-  [vars$f.hostDisplay]: 'inline-block',
-  [vars$f.hostWidth]: '100%',
+const password = {
+  [vars$s.hostWidth]: refs.width,
+  [vars$s.hostDirection]: refs.direction,
+  [vars$s.fontSize]: refs.fontSize,
+  [vars$s.fontFamily]: refs.fontFamily,
+  [vars$s.labelTextColor]: refs.labelTextColor,
+  [vars$s.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$s.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$s.inputHeight]: refs.inputHeight,
+  [vars$s.inputBackgroundColor]: refs.backgroundColor,
+  [vars$s.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$s.inputValueTextColor]: refs.valueTextColor,
+  [vars$s.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$s.inputBorderWidth]: refs.borderWidth,
+  [vars$s.inputBorderStyle]: refs.borderStyle,
+  [vars$s.inputBorderColor]: refs.borderColor,
+  [vars$s.inputBorderRadius]: refs.borderRadius,
+  [vars$s.inputOutlineWidth]: refs.outlineWidth,
+  [vars$s.inputOutlineStyle]: refs.outlineStyle,
+  [vars$s.inputOutlineColor]: refs.outlineColor,
+  [vars$s.inputOutlineOffset]: refs.outlineOffset,
+  [vars$s.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$s.revealButtonSize]: refs.toggleButtonSize,
+};
 
-  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
-  [vars$f.barWidth]: '20%',
+var password$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: password,
+  vars: vars$s
+});
 
-  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
-  [vars$f.barBorderRadius]: '4px',
+const vars$r = NumberFieldClass.cssVarList;
 
-  [vars$f.animationDuration]: '2s',
-  [vars$f.animationTimingFunction]: 'linear',
-  [vars$f.animationIterationCount]: 'infinite',
-  [vars$f.verticalPadding]: '0.25em',
+const numberField = {
+  [vars$r.hostWidth]: refs.width,
+  [vars$r.hostMinWidth]: refs.minWidth,
+  [vars$r.hostDirection]: refs.direction,
+  [vars$r.fontSize]: refs.fontSize,
+  [vars$r.fontFamily]: refs.fontFamily,
+  [vars$r.labelTextColor]: refs.labelTextColor,
+  [vars$r.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$r.inputValueTextColor]: refs.valueTextColor,
+  [vars$r.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$r.inputBorderWidth]: refs.borderWidth,
+  [vars$r.inputBorderStyle]: refs.borderStyle,
+  [vars$r.inputBorderColor]: refs.borderColor,
+  [vars$r.inputBorderRadius]: refs.borderRadius,
+  [vars$r.inputOutlineWidth]: refs.outlineWidth,
+  [vars$r.inputOutlineStyle]: refs.outlineStyle,
+  [vars$r.inputOutlineColor]: refs.outlineColor,
+  [vars$r.inputOutlineOffset]: refs.outlineOffset,
+  [vars$r.inputBackgroundColor]: refs.backgroundColor,
+  [vars$r.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$r.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$r.inputHeight]: refs.inputHeight,
+};
 
-  size: {
-    xs: { [vars$f.barHeight]: '2px' },
-    sm: { [vars$f.barHeight]: '4px' },
-    md: { [vars$f.barHeight]: '6px' },
-    lg: { [vars$f.barHeight]: '8px' },
-  },
+var numberField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: numberField,
+  vars: vars$r
+});
 
-  mode: {
-    primary: {
-      [vars$f.barColor]: globalRefs$9.colors.primary.main,
-    },
-    secondary: {
-      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
-    },
-  },
+const vars$q = EmailFieldClass.cssVarList;
 
-  _hidden: {
-    [vars$f.hostDisplay]: 'none',
-  },
+const emailField = {
+  [vars$q.hostWidth]: refs.width,
+  [vars$q.hostMinWidth]: refs.minWidth,
+  [vars$q.hostDirection]: refs.direction,
+  [vars$q.fontSize]: refs.fontSize,
+  [vars$q.fontFamily]: refs.fontFamily,
+  [vars$q.labelTextColor]: refs.labelTextColor,
+  [vars$q.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$q.inputValueTextColor]: refs.valueTextColor,
+  [vars$q.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$q.inputPlaceholderColor]: refs.placeholderTextColor,
+  [vars$q.inputBorderWidth]: refs.borderWidth,
+  [vars$q.inputBorderStyle]: refs.borderStyle,
+  [vars$q.inputBorderColor]: refs.borderColor,
+  [vars$q.inputBorderRadius]: refs.borderRadius,
+  [vars$q.inputOutlineWidth]: refs.outlineWidth,
+  [vars$q.inputOutlineStyle]: refs.outlineStyle,
+  [vars$q.inputOutlineColor]: refs.outlineColor,
+  [vars$q.inputOutlineOffset]: refs.outlineOffset,
+  [vars$q.inputBackgroundColor]: refs.backgroundColor,
+  [vars$q.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$q.inputHeight]: refs.inputHeight,
 };
 
-var loaderLinear$1 = /*#__PURE__*/Object.freeze({
+var emailField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: loaderLinear,
-  vars: vars$f
+  default: emailField,
+  vars: vars$q
 });
 
-const globalRefs$8 = getThemeRefs(globals);
-const compVars$1 = LoaderRadialClass.cssVarList;
-
-const [helperTheme, helperRefs, helperVars] = createHelperVars(
-  {
-    spinnerColor: globalRefs$8.colors.surface.contrast,
-    mode: {
-      primary: {
-        spinnerColor: globalRefs$8.colors.primary.main,
-      },
-      secondary: {
-        spinnerColor: globalRefs$8.colors.secondary.main,
-      },
-    },
-  },
-  componentName$z
-);
-
-const loaderRadial = {
-  ...helperTheme,
+const globalRefs$f = getThemeRefs(globals);
+const vars$p = TextAreaClass.cssVarList;
 
-  [compVars$1.animationDuration]: '2s',
-  [compVars$1.animationTimingFunction]: 'linear',
-  [compVars$1.animationIterationCount]: 'infinite',
-  [compVars$1.spinnerBorderStyle]: 'solid',
-  [compVars$1.spinnerBorderWidth]: '0.2em',
-  [compVars$1.spinnerBorderRadius]: '50%',
-  [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [compVars$1.spinnerQuadrant2Color]: 'transparent',
-  [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [compVars$1.spinnerQuadrant4Color]: 'transparent',
+const textArea = {
+  [vars$p.hostWidth]: refs.width,
+  [vars$p.hostMinWidth]: refs.minWidth,
+  [vars$p.hostDirection]: refs.direction,
+  [vars$p.fontSize]: refs.fontSize,
+  [vars$p.fontFamily]: refs.fontFamily,
+  [vars$p.labelTextColor]: refs.labelTextColor,
+  [vars$p.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$p.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$p.inputBackgroundColor]: refs.backgroundColor,
+  [vars$p.inputValueTextColor]: refs.valueTextColor,
+  [vars$p.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$p.inputBorderRadius]: refs.borderRadius,
+  [vars$p.inputBorderWidth]: refs.borderWidth,
+  [vars$p.inputBorderStyle]: refs.borderStyle,
+  [vars$p.inputBorderColor]: refs.borderColor,
+  [vars$p.inputOutlineWidth]: refs.outlineWidth,
+  [vars$p.inputOutlineStyle]: refs.outlineStyle,
+  [vars$p.inputOutlineColor]: refs.outlineColor,
+  [vars$p.inputOutlineOffset]: refs.outlineOffset,
+  [vars$p.inputResizeType]: 'vertical',
+  [vars$p.inputMinHeight]: '5em',
 
-  size: {
-    xs: { [compVars$1.spinnerSize]: '20px' },
-    sm: { [compVars$1.spinnerSize]: '30px' },
-    md: { [compVars$1.spinnerSize]: '40px' },
-    lg: { [compVars$1.spinnerSize]: '60px' },
-    xl: { [compVars$1.spinnerSize]: '80px' },
+  _disabled: {
+    [vars$p.inputBackgroundColor]: globalRefs$f.colors.surface.light,
   },
 
-  _hidden: {
-    [compVars$1.hostDisplay]: 'none',
+  _readonly: {
+    [vars$p.inputResizeType]: 'none',
   },
 };
-const vars$e = {
-  ...compVars$1,
-  ...helperVars,
-};
 
-var loaderRadial$1 = /*#__PURE__*/Object.freeze({
+var textArea$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: loaderRadial,
-  vars: vars$e
+  default: textArea,
+  vars: vars$p
 });
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$d = ComboBoxClass.cssVarList;
-
-const comboBox = {
-  [vars$d.hostWidth]: refs.width,
-  [vars$d.hostDirection]: refs.direction,
-  [vars$d.fontSize]: refs.fontSize,
-  [vars$d.fontFamily]: refs.fontFamily,
-  [vars$d.labelTextColor]: refs.labelTextColor,
-  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$d.inputBorderColor]: refs.borderColor,
-  [vars$d.inputBorderWidth]: refs.borderWidth,
-  [vars$d.inputBorderStyle]: refs.borderStyle,
-  [vars$d.inputBorderRadius]: refs.borderRadius,
-  [vars$d.inputOutlineColor]: refs.outlineColor,
-  [vars$d.inputOutlineOffset]: refs.outlineOffset,
-  [vars$d.inputOutlineWidth]: refs.outlineWidth,
-  [vars$d.inputOutlineStyle]: refs.outlineStyle,
-  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$d.inputValueTextColor]: refs.valueTextColor,
-  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$d.inputBackgroundColor]: refs.backgroundColor,
-  [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars$d.inputHeight]: refs.inputHeight,
-  [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
-  [vars$d.inputDropdownButtonCursor]: 'pointer',
-  [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
-  [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
-  [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
+const vars$o = CheckboxClass.cssVarList;
+const checkboxSize = '1.35em';
 
-  _readonly: {
-    [vars$d.inputDropdownButtonCursor]: 'default',
-  },
+const checkbox = {
+  [vars$o.hostWidth]: refs.width,
+  [vars$o.hostDirection]: refs.direction,
+  [vars$o.fontSize]: refs.fontSize,
+  [vars$o.fontFamily]: refs.fontFamily,
+  [vars$o.labelTextColor]: refs.labelTextColor,
+  [vars$o.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$o.labelFontWeight]: '400',
+  [vars$o.labelLineHeight]: checkboxSize,
+  [vars$o.labelSpacing]: '1em',
+  [vars$o.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$o.inputOutlineWidth]: refs.outlineWidth,
+  [vars$o.inputOutlineOffset]: refs.outlineOffset,
+  [vars$o.inputOutlineColor]: refs.outlineColor,
+  [vars$o.inputOutlineStyle]: refs.outlineStyle,
+  [vars$o.inputBorderRadius]: refs.borderRadius,
+  [vars$o.inputBorderColor]: refs.borderColor,
+  [vars$o.inputBorderWidth]: refs.borderWidth,
+  [vars$o.inputBorderStyle]: refs.borderStyle,
+  [vars$o.inputBackgroundColor]: refs.backgroundColor,
+  [vars$o.inputSize]: checkboxSize,
 
-  // Overlay theme exposed via the component:
-  [vars$d.overlayFontSize]: refs.fontSize,
-  [vars$d.overlayFontFamily]: refs.fontFamily,
-  [vars$d.overlayCursor]: 'pointer',
-  [vars$d.overlayItemBoxShadow]: 'none',
+  _checked: {
+    [vars$o.inputValueTextColor]: refs.valueTextColor,
+  },
 
-  // Overlay direct theme:
-  [vars$d.overlay.minHeight]: '400px',
-  [vars$d.overlay.margin]: '0',
+  _disabled: {
+    [vars$o.labelTextColor]: refs.labelTextColor,
+  },
 };
 
-var comboBox$1 = /*#__PURE__*/Object.freeze({
+var checkbox$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  comboBox: comboBox,
-  default: comboBox,
-  vars: vars$d
+  default: checkbox,
+  vars: vars$o
 });
 
-const vars$c = ImageClass.cssVarList;
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
 
-const image = {};
+const globalRefs$e = getThemeRefs(globals);
+const vars$n = SwitchToggleClass.cssVarList;
 
-var image$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: image,
-  vars: vars$c
-});
+const switchToggle = {
+  [vars$n.hostWidth]: refs.width,
+  [vars$n.hostDirection]: refs.direction,
+  [vars$n.fontSize]: refs.fontSize,
+  [vars$n.fontFamily]: refs.fontFamily,
 
-const vars$b = PhoneFieldClass.cssVarList;
+  [vars$n.inputOutlineWidth]: refs.outlineWidth,
+  [vars$n.inputOutlineOffset]: refs.outlineOffset,
+  [vars$n.inputOutlineColor]: refs.outlineColor,
+  [vars$n.inputOutlineStyle]: refs.outlineStyle,
 
-const phoneField = {
-  [vars$b.hostWidth]: refs.width,
-  [vars$b.hostDirection]: refs.direction,
-  [vars$b.fontSize]: refs.fontSize,
-  [vars$b.fontFamily]: refs.fontFamily,
-  [vars$b.labelTextColor]: refs.labelTextColor,
-  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$b.inputValueTextColor]: refs.valueTextColor,
-  [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$b.inputBorderStyle]: refs.borderStyle,
-  [vars$b.inputBorderWidth]: refs.borderWidth,
-  [vars$b.inputBorderColor]: refs.borderColor,
-  [vars$b.inputBorderRadius]: refs.borderRadius,
-  [vars$b.inputOutlineStyle]: refs.outlineStyle,
-  [vars$b.inputOutlineWidth]: refs.outlineWidth,
-  [vars$b.inputOutlineColor]: refs.outlineColor,
-  [vars$b.inputOutlineOffset]: refs.outlineOffset,
-  [vars$b.phoneInputWidth]: refs.minWidth,
-  [vars$b.countryCodeInputWidth]: '5em',
-  [vars$b.countryCodeDropdownWidth]: '20em',
+  [vars$n.trackBorderStyle]: refs.borderStyle,
+  [vars$n.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
+  [vars$n.trackBorderColor]: refs.borderColor,
+  [vars$n.trackBackgroundColor]: 'none',
+  [vars$n.trackBorderRadius]: globalRefs$e.radius.md,
+  [vars$n.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
+  [vars$n.trackHeight]: checkboxHeight,
 
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
-};
+  [vars$n.knobSize]: `calc(1em - ${knobMargin})`,
+  [vars$n.knobRadius]: '50%',
+  [vars$n.knobTopOffset]: '1px',
+  [vars$n.knobLeftOffset]: knobMargin,
+  [vars$n.knobColor]: refs.valueTextColor,
+  [vars$n.knobTransitionDuration]: '0.3s',
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: phoneField,
-  vars: vars$b
-});
+  [vars$n.labelTextColor]: refs.labelTextColor,
+  [vars$n.labelFontWeight]: '400',
+  [vars$n.labelLineHeight]: '1.35em',
+  [vars$n.labelSpacing]: '1em',
+  [vars$n.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$n.errorMessageTextColor]: refs.errorMessageTextColor,
 
-const vars$a = PhoneFieldInputBoxClass.cssVarList;
+  _checked: {
+    [vars$n.trackBorderColor]: refs.borderColor,
+    [vars$n.trackBackgroundColor]: refs.backgroundColor,
+    [vars$n.knobLeftOffset]: `calc(100% - var(${vars$n.knobSize}) - ${knobMargin})`,
+    [vars$n.knobColor]: refs.valueTextColor,
+    [vars$n.knobTextColor]: refs.valueTextColor,
+  },
 
-const phoneInputBoxField = {
-  [vars$a.hostWidth]: '16em',
-  [vars$a.hostMinWidth]: refs.minWidth,
-  [vars$a.hostDirection]: refs.direction,
-  [vars$a.fontSize]: refs.fontSize,
-  [vars$a.fontFamily]: refs.fontFamily,
-  [vars$a.labelTextColor]: refs.labelTextColor,
-  [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$a.inputValueTextColor]: refs.valueTextColor,
-  [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars$a.inputBorderStyle]: refs.borderStyle,
-  [vars$a.inputBorderWidth]: refs.borderWidth,
-  [vars$a.inputBorderColor]: refs.borderColor,
-  [vars$a.inputBorderRadius]: refs.borderRadius,
-  [vars$a.inputOutlineStyle]: refs.outlineStyle,
-  [vars$a.inputOutlineWidth]: refs.outlineWidth,
-  [vars$a.inputOutlineColor]: refs.outlineColor,
-  [vars$a.inputOutlineOffset]: refs.outlineOffset,
-  _fullWidth: {
-    [vars$a.hostWidth]: refs.width,
+  _disabled: {
+    [vars$n.knobColor]: globalRefs$e.colors.surface.light,
+    [vars$n.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    [vars$n.labelTextColor]: refs.labelTextColor,
+    _checked: {
+      [vars$n.knobColor]: globalRefs$e.colors.surface.light,
+      [vars$n.trackBackgroundColor]: globalRefs$e.colors.surface.main,
+    },
+  },
+
+  _invalid: {
+    [vars$n.trackBorderColor]: globalRefs$e.colors.error.main,
+    [vars$n.knobColor]: globalRefs$e.colors.error.main,
   },
 };
 
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
+var switchToggle$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$a
+  default: switchToggle,
+  vars: vars$n
 });
 
-const vars$9 = NewPasswordClass.cssVarList;
+const globalRefs$d = getThemeRefs(globals);
 
-const newPassword = {
-  [vars$9.hostWidth]: refs.width,
-  [vars$9.hostMinWidth]: refs.minWidth,
-  [vars$9.hostDirection]: refs.direction,
-  [vars$9.fontSize]: refs.fontSize,
-  [vars$9.fontFamily]: refs.fontFamily,
-  [vars$9.spaceBetweenInputs]: '1em',
-  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
+const compVars$3 = ContainerClass.cssVarList;
 
-  _required: {
-    // NewPassword doesn't pass `required` attribute to its Password components.
-    // That's why we fake the required indicator on each input.
-    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
-    [vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
-  },
+const verticalAlignment = {
+  start: { verticalAlignment: 'start' },
+  center: { verticalAlignment: 'safe center' },
+  end: { verticalAlignment: 'end' },
 };
 
-var newPassword$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: newPassword,
-  vars: vars$9
-});
-
-const vars$8 = UploadFileClass.cssVarList;
+const horizontalAlignment = {
+  start: { horizontalAlignment: 'start' },
+  center: { horizontalAlignment: 'safe center' },
+  end: { horizontalAlignment: 'end' },
+};
 
-const uploadFile = {
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.fontFamily]: refs.fontFamily,
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
+  {
+    verticalAlignment,
+    horizontalAlignment,
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName$y
+);
 
-  [vars$8.iconSize]: '2em',
+const { shadowColor: shadowColor$1 } = helperRefs$2;
 
-  [vars$8.hostPadding]: '0.75em',
-  [vars$8.gap]: '0.5em',
+const container = {
+  ...helperTheme$2,
 
-  [vars$8.fontSize]: '16px',
-  [vars$8.titleFontWeight]: '500',
-  [vars$8.lineHeight]: '1em',
+  [compVars$3.hostWidth]: '100%',
+  [compVars$3.boxShadow]: 'none',
+  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
+  [compVars$3.color]: globalRefs$d.colors.surface.contrast,
+  [compVars$3.borderRadius]: '0px',
 
-  [vars$8.borderWidth]: refs.borderWidth,
-  [vars$8.borderColor]: refs.borderColor,
-  [vars$8.borderRadius]: refs.borderRadius,
-  [vars$8.borderStyle]: 'dashed',
+  verticalPadding: {
+    sm: { [compVars$3.verticalPadding]: '5px' },
+    md: { [compVars$3.verticalPadding]: '10px' },
+    lg: { [compVars$3.verticalPadding]: '20px' },
+  },
 
-  _required: {
-    [vars$8.requiredIndicator]: refs.requiredIndicator,
+  horizontalPadding: {
+    sm: { [compVars$3.horizontalPadding]: '5px' },
+    md: { [compVars$3.horizontalPadding]: '10px' },
+    lg: { [compVars$3.horizontalPadding]: '20px' },
   },
 
-  size: {
-    xs: {
-      [vars$8.hostHeight]: '196px',
-      [vars$8.hostWidth]: '200px',
-      [vars$8.titleFontSize]: '0.875em',
-      [vars$8.descriptionFontSize]: '0.875em',
-      [vars$8.lineHeight]: '1.25em',
+  direction: {
+    row: {
+      [compVars$3.flexDirection]: 'row',
+      [compVars$3.alignItems]: helperRefs$2.verticalAlignment,
+      [compVars$3.justifyContent]: helperRefs$2.horizontalAlignment,
+      [compVars$3.flexWrap]: 'wrap',
+      horizontalAlignment: {
+        spaceBetween: {
+          [helperVars$2.horizontalAlignment]: 'space-between',
+        },
+      },
     },
-    sm: {
-      [vars$8.hostHeight]: '216px',
-      [vars$8.hostWidth]: '230px',
-      [vars$8.titleFontSize]: '1em',
-      [vars$8.descriptionFontSize]: '0.875em',
-      [vars$8.lineHeight]: '1.25em',
+    column: {
+      [compVars$3.flexDirection]: 'column',
+      [compVars$3.alignItems]: helperRefs$2.horizontalAlignment,
+      [compVars$3.justifyContent]: helperRefs$2.verticalAlignment,
+      verticalAlignment: {
+        spaceBetween: {
+          [helperVars$2.verticalAlignment]: 'space-between',
+        },
+      },
+    },
+  },
+
+  spaceBetween: {
+    sm: { [compVars$3.gap]: '10px' },
+    md: { [compVars$3.gap]: '20px' },
+    lg: { [compVars$3.gap]: '30px' },
+  },
+
+  shadow: {
+    sm: {
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.sm} ${shadowColor$1}`,
     },
     md: {
-      [vars$8.hostHeight]: '256px',
-      [vars$8.hostWidth]: '312px',
-      [vars$8.titleFontSize]: '1.125em',
-      [vars$8.descriptionFontSize]: '1em',
-      [vars$8.lineHeight]: '1.5em',
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.md} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.md} ${shadowColor$1}`,
     },
     lg: {
-      [vars$8.hostHeight]: '280px',
-      [vars$8.hostWidth]: '336px',
-      [vars$8.titleFontSize]: '1.125em',
-      [vars$8.descriptionFontSize]: '1.125em',
-      [vars$8.lineHeight]: '1.75em',
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.lg} ${shadowColor$1}`,
+    },
+    xl: {
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$d.shadow.narrow.xl} ${shadowColor$1}`,
+    },
+    '2xl': {
+      [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$3.boxShadow]: `${globalRefs$d.shadow.wide['2xl']} ${shadowColor$1}`,
     },
   },
 
-  _fullWidth: {
-    [vars$8.hostWidth]: refs.width,
+  borderRadius: {
+    sm: { [compVars$3.borderRadius]: globalRefs$d.radius.sm },
+    md: { [compVars$3.borderRadius]: globalRefs$d.radius.md },
+    lg: { [compVars$3.borderRadius]: globalRefs$d.radius.lg },
+    xl: { [compVars$3.borderRadius]: globalRefs$d.radius.xl },
+    '2xl': { [compVars$3.borderRadius]: globalRefs$d.radius['2xl'] },
+    '3xl': { [compVars$3.borderRadius]: globalRefs$d.radius['3xl'] },
   },
 };
 
-var uploadFile$1 = /*#__PURE__*/Object.freeze({
+const vars$m = {
+  ...compVars$3,
+  ...helperVars$2,
+};
+
+var container$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: uploadFile,
-  vars: vars$8
+  default: container,
+  vars: vars$m
 });
 
-const globalRefs$6 = getThemeRefs(globals);
-
-const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
-
-const buttonSelectionGroupItem = {
-  [vars$7.hostDirection]: 'inherit',
-  [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
-  [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$7.borderColor]: globalRefs$6.colors.surface.main,
-  [vars$7.borderStyle]: 'solid',
-  [vars$7.borderRadius]: globalRefs$6.radius.sm,
-
-  _hover: {
-    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
-  },
+const vars$l = LogoClass.cssVarList;
 
-  _selected: {
-    [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
-    [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
-    [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
-  },
+const logo$1 = {
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
-var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
+var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: buttonSelectionGroupItem,
-  vars: vars$7
+  default: logo$1,
+  vars: vars$l
 });
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = ButtonSelectionGroupClass.cssVarList;
+const vars$k = TotpImageClass.cssVarList;
 
-const buttonSelectionGroup = {
-  [vars$6.hostDirection]: refs.direction,
-  [vars$6.fontFamily]: refs.fontFamily,
-  [vars$6.labelTextColor]: refs.labelTextColor,
-  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
-  [vars$6.hostWidth]: refs.width,
+const logo = {
+  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
 };
 
-var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
+var totpImage = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: buttonSelectionGroup,
-  vars: vars$6
+  default: logo,
+  vars: vars$k
 });
 
-const componentName$2 = getComponentName('modal');
+const globalRefs$c = getThemeRefs(globals);
+const vars$j = TextClass.cssVarList;
 
-const customMixin = (superclass) =>
-  class ModalMixinClass extends superclass {
-    get opened() {
-      return this.getAttribute('opened') === 'true';
-    }
+const text = {
+  [vars$j.hostDirection]: globalRefs$c.direction,
+  [vars$j.textLineHeight]: '1.35em',
+  [vars$j.textAlign]: 'left',
+  [vars$j.textColor]: globalRefs$c.colors.surface.dark,
+  variant: {
+    h1: {
+      [vars$j.fontSize]: globalRefs$c.typography.h1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h1.font,
+    },
+    h2: {
+      [vars$j.fontSize]: globalRefs$c.typography.h2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h2.font,
+    },
+    h3: {
+      [vars$j.fontSize]: globalRefs$c.typography.h3.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.h3.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.h3.font,
+    },
+    subtitle1: {
+      [vars$j.fontSize]: globalRefs$c.typography.subtitle1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.subtitle1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars$j.fontSize]: globalRefs$c.typography.subtitle2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.subtitle2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.subtitle2.font,
+    },
+    body1: {
+      [vars$j.fontSize]: globalRefs$c.typography.body1.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.body1.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.body1.font,
+    },
+    body2: {
+      [vars$j.fontSize]: globalRefs$c.typography.body2.size,
+      [vars$j.fontWeight]: globalRefs$c.typography.body2.weight,
+      [vars$j.fontFamily]: globalRefs$c.typography.body2.font,
+    },
+  },
 
-    handleOpened() {
-      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
-      if (this.opened) {
-        this.style.display = '';
-      } else {
-        this.style.display = 'none';
-      }
-    }
+  mode: {
+    primary: {
+      [vars$j.textColor]: globalRefs$c.colors.primary.main,
+    },
+    secondary: {
+      [vars$j.textColor]: globalRefs$c.colors.secondary.main,
+    },
+    error: {
+      [vars$j.textColor]: globalRefs$c.colors.error.main,
+    },
+    success: {
+      [vars$j.textColor]: globalRefs$c.colors.success.main,
+    },
+  },
 
-    init() {
-      super.init?.();
-      this.style.display = 'none';
+  textAlign: {
+    right: { [vars$j.textAlign]: 'right' },
+    left: { [vars$j.textAlign]: 'left' },
+    center: { [vars$j.textAlign]: 'center' },
+  },
 
-      // vaadin-dialog might not be loaded in time
-      // in order to make sure it's loaded before this block is running
-      // we are wrapping it with setTimeout
-      setTimeout(() => {
-        // we want to sync descope-modal content through vaadin-dialog into the overlay
-        // so we are adding a slot to the overlay, which allows us to forward the content from
-        // vaadin-dialog to vaadin-dialog-overlay
-        this.baseElement.shadowRoot
-          .querySelector('vaadin-dialog-overlay')
-          .appendChild(document.createElement('slot'));
+  _fullWidth: {
+    [vars$j.hostWidth]: '100%',
+  },
 
-        this.#overrideOverlaySettings();
+  _italic: {
+    [vars$j.fontStyle]: 'italic',
+  },
 
-        // we need to always open the modal in `opened=false`
-        // to prevent it from rendering outside the dialog
-        // first, we have to run `overrideOverlaySettings` to setup
-        // the component.
-        this.handleOpened();
-      });
-    }
+  _uppercase: {
+    [vars$j.textTransform]: 'uppercase',
+  },
 
-    // the default vaadin behavior is to attach the overlay to the body when opened
-    // we do not want that because it's difficult to style the overlay in this way
-    // so we override it to open inside the shadow DOM
-    #overrideOverlaySettings() {
-      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+  _lowercase: {
+    [vars$j.textTransform]: 'lowercase',
+  },
+};
 
-      overlay._attachOverlay = () => {
-        overlay.bringToFront();
-        this.baseElement.setAttribute('style', 'display:flex!important;');
-      };
-      overlay._detachOverlay = () => {
-        this.baseElement.style.display = 'none';
-      };
-      overlay._enterModalState = () => {};
+var text$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: text,
+  vars: vars$j
+});
 
-      overlay.close = () => false;
-    }
-  };
+const globalRefs$b = getThemeRefs(globals);
+const vars$i = LinkClass.cssVarList;
 
-const ModalClass = compose(
-  createStyleMixin({
-    mappings: {
-      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
-      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
-      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
-    },
-  }),
-  portalMixin({
-    name: 'overlay',
-    selector: '',
-    mappings: {
-      hostDisplay: {
-        selector: () => ':host(.descope-modal)',
-        property: 'display',
-        important: true,
-      },
-      backgroundColor: [
-        { selector: () => '::part(content)', property: 'background-color' },
-        { selector: () => '::part(overlay)', property: 'background-color' },
-      ],
-      width: { selector: () => '::part(overlay)', property: 'width' },
-      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+const link = {
+  [vars$i.hostDirection]: globalRefs$b.direction,
+  [vars$i.cursor]: 'pointer',
+
+  [vars$i.textColor]: globalRefs$b.colors.primary.main,
+
+  textAlign: {
+    right: { [vars$i.textAlign]: 'right' },
+    left: { [vars$i.textAlign]: 'left' },
+    center: { [vars$i.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars$i.hostWidth]: '100%',
+  },
+
+  mode: {
+    primary: {
+      [vars$i.textColor]: globalRefs$b.colors.primary.main,
     },
-    forward: {
-      include: false,
-      attributes: ['opened'],
+    secondary: {
+      [vars$i.textColor]: globalRefs$b.colors.secondary.main,
     },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: [''],
-    wrappedEleName: 'vaadin-dialog',
-    style: () => ``,
-    excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$2,
-  })
+    error: {
+      [vars$i.textColor]: globalRefs$b.colors.error.main,
+    },
+    success: {
+      [vars$i.textColor]: globalRefs$b.colors.success.main,
+    },
+  },
+};
+
+var link$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: link,
+  vars: vars$i
+});
+
+const globalRefs$a = getThemeRefs(globals);
+const compVars$2 = DividerClass.cssVarList;
+
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
+  {
+    thickness: '2px',
+    spacing: '10px',
+  },
+  componentName$w
 );
 
-const globalRefs$4 = getThemeRefs(globals);
+const divider = {
+  ...helperTheme$1,
 
-const compVars = ModalClass.cssVarList;
+  [compVars$2.hostDirection]: globalRefs$a.direction,
+  [compVars$2.alignItems]: 'center',
+  [compVars$2.flexDirection]: 'row',
+  [compVars$2.alignSelf]: 'stretch',
+  [compVars$2.hostWidth]: '100%',
+  [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
+  [compVars$2.stripeColorOpacity]: '0.5',
+  [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
+  [compVars$2.labelTextWidth]: 'fit-content',
+  [compVars$2.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$2.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$2.textAlign]: 'center',
 
-const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
-  [compVars.overlayShadow]: 'none',
-  [compVars.overlayWidth]: '700px',
+  _vertical: {
+    [compVars$2.minHeight]: '200px',
+    [compVars$2.flexDirection]: 'column',
+    [compVars$2.hostWidth]: 'fit-content',
+    [compVars$2.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+    [compVars$2.stripeVerticalThickness]: helperRefs$1.thickness,
+    [compVars$2.labelTextWidth]: 'fit-content',
+    [compVars$2.labelTextMaxWidth]: '100%',
+    [compVars$2.labelTextVerticalSpacing]: helperRefs$1.spacing,
+  },
 };
 
-const vars$5 = {
-  ...compVars,
+const vars$h = {
+  ...compVars$2,
+  ...helperVars$1,
 };
 
-var modal$1 = /*#__PURE__*/Object.freeze({
+var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: modal,
-  vars: vars$5
+  default: divider,
+  vars: vars$h
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = GridClass.cssVarList;
+const vars$g = PasscodeClass.cssVarList;
 
-const grid = {
-  [vars$4.hostWidth]: '100%',
-  [vars$4.hostHeight]: '100%',
-  [vars$4.hostMinHeight]: '400px',
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
+const passcode = {
+  [vars$g.hostDirection]: refs.direction,
+  [vars$g.fontFamily]: refs.fontFamily,
+  [vars$g.fontSize]: refs.fontSize,
+  [vars$g.labelTextColor]: refs.labelTextColor,
+  [vars$g.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$g.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$g.digitValueTextColor]: refs.valueTextColor,
+  [vars$g.digitPadding]: '0',
+  [vars$g.digitTextAlign]: 'center',
+  [vars$g.digitSpacing]: '4px',
+  [vars$g.hostWidth]: refs.width,
+  [vars$g.digitOutlineColor]: 'transparent',
+  [vars$g.digitOutlineWidth]: refs.outlineWidth,
+  [vars$g.focusedDigitFieldOutlineColor]: refs.outlineColor,
+  [vars$g.digitSize]: refs.inputHeight,
 
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
+  size: {
+    xs: { [vars$g.spinnerSize]: '15px' },
+    sm: { [vars$g.spinnerSize]: '20px' },
+    md: { [vars$g.spinnerSize]: '20px' },
+    lg: { [vars$g.spinnerSize]: '20px' },
+  },
 
-  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
-  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
-  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
+  _hideCursor: {
+    [vars$g.digitCaretTextColor]: 'transparent',
+  },
 
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputBorderColor]: 'transparent',
+  _loading: {
+    [vars$g.overlayOpacity]: refs.overlayOpacity,
+  },
+};
 
-  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
+var passcode$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: passcode,
+  vars: vars$g
+});
 
-  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
+const globalRefs$9 = getThemeRefs(globals);
+const vars$f = LoaderLinearClass.cssVarList;
 
-  _bordered: {
-    [vars$4.inputBorderColor]: refs.borderColor,
+const loaderLinear = {
+  [vars$f.hostDisplay]: 'inline-block',
+  [vars$f.hostWidth]: '100%',
+
+  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
+  [vars$f.barWidth]: '20%',
+
+  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$f.barBorderRadius]: '4px',
+
+  [vars$f.animationDuration]: '2s',
+  [vars$f.animationTimingFunction]: 'linear',
+  [vars$f.animationIterationCount]: 'infinite',
+  [vars$f.verticalPadding]: '0.25em',
+
+  size: {
+    xs: { [vars$f.barHeight]: '2px' },
+    sm: { [vars$f.barHeight]: '4px' },
+    md: { [vars$f.barHeight]: '6px' },
+    lg: { [vars$f.barHeight]: '8px' },
+  },
+
+  mode: {
+    primary: {
+      [vars$f.barColor]: globalRefs$9.colors.primary.main,
+    },
+    secondary: {
+      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
+    },
+  },
+
+  _hidden: {
+    [vars$f.hostDisplay]: 'none',
   },
 };
 
-var grid$1 = /*#__PURE__*/Object.freeze({
+var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: grid,
-  grid: grid,
-  vars: vars$4
+  default: loaderLinear,
+  vars: vars$f
 });
 
-const componentName$1 = getComponentName('notification-card');
+const globalRefs$8 = getThemeRefs(globals);
+const compVars$1 = LoaderRadialClass.cssVarList;
 
-const notificationCardMixin = (superclass) =>
-  class NotificationCardMixinClass extends superclass {
-    close() {
-      // if animation is not applied to the element, the node will not be removed
-      // from the DOM. We should avoid that. So, if in any case we allow
-      // customizing the animation - we should check if animation is applied
-      // and if it's not applied - remove the element from the DOM and dispatch
-      // `card-closed` event.
-      this.baseElement.addEventListener('animationend', () => {
-        this.remove();
-        this.dispatchEvent(new Event('card-closed'));
-      });
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
+  {
+    spinnerColor: globalRefs$8.colors.surface.contrast,
+    mode: {
+      primary: {
+        spinnerColor: globalRefs$8.colors.primary.main,
+      },
+      secondary: {
+        spinnerColor: globalRefs$8.colors.secondary.main,
+      },
+    },
+  },
+  componentName$z
+);
 
-      this.setAttribute('opened', 'false');
-    }
+const loaderRadial = {
+  ...helperTheme,
 
-    constructor() {
-      super();
+  [compVars$1.animationDuration]: '2s',
+  [compVars$1.animationTimingFunction]: 'linear',
+  [compVars$1.animationIterationCount]: 'infinite',
+  [compVars$1.spinnerBorderStyle]: 'solid',
+  [compVars$1.spinnerBorderWidth]: '0.2em',
+  [compVars$1.spinnerBorderRadius]: '50%',
+  [compVars$1.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars$1.spinnerQuadrant2Color]: 'transparent',
+  [compVars$1.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars$1.spinnerQuadrant4Color]: 'transparent',
 
-      this.baseElement.innerHTML = `
-      <div part="root">
-        <div part="content">
-          <slot></slot>
-        </div>
-        <div part="close">
-          <slot name="close"></slot>
-        </div>
-      </div>
-      `;
+  size: {
+    xs: { [compVars$1.spinnerSize]: '20px' },
+    sm: { [compVars$1.spinnerSize]: '30px' },
+    md: { [compVars$1.spinnerSize]: '40px' },
+    lg: { [compVars$1.spinnerSize]: '60px' },
+    xl: { [compVars$1.spinnerSize]: '80px' },
+  },
 
-      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
-    }
+  _hidden: {
+    [compVars$1.hostDisplay]: 'none',
+  },
+};
+const vars$e = {
+  ...compVars$1,
+  ...helperVars,
+};
 
-    init() {
-      super.init?.();
+var loaderRadial$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: loaderRadial,
+  vars: vars$e
+});
 
-      this.closeEle.onclick = () => {
-        this.close();
-      };
-    }
-  };
+const globalRefs$7 = getThemeRefs(globals);
+const vars$d = ComboBoxClass.cssVarList;
 
-const selectors = {
-  content: () => 'vaadin-notification-card::part(content)',
-  overlay: () => 'vaadin-notification-card::part(overlay)',
-};
+const comboBox = {
+  [vars$d.hostWidth]: refs.width,
+  [vars$d.hostDirection]: refs.direction,
+  [vars$d.fontSize]: refs.fontSize,
+  [vars$d.fontFamily]: refs.fontFamily,
+  [vars$d.labelTextColor]: refs.labelTextColor,
+  [vars$d.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$d.inputBorderColor]: refs.borderColor,
+  [vars$d.inputBorderWidth]: refs.borderWidth,
+  [vars$d.inputBorderStyle]: refs.borderStyle,
+  [vars$d.inputBorderRadius]: refs.borderRadius,
+  [vars$d.inputOutlineColor]: refs.outlineColor,
+  [vars$d.inputOutlineOffset]: refs.outlineOffset,
+  [vars$d.inputOutlineWidth]: refs.outlineWidth,
+  [vars$d.inputOutlineStyle]: refs.outlineStyle,
+  [vars$d.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$d.inputValueTextColor]: refs.valueTextColor,
+  [vars$d.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$d.inputBackgroundColor]: refs.backgroundColor,
+  [vars$d.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars$d.inputHeight]: refs.inputHeight,
+  [vars$d.inputDropdownButtonColor]: globalRefs$7.colors.surface.contrast,
+  [vars$d.inputDropdownButtonCursor]: 'pointer',
+  [vars$d.inputDropdownButtonSize]: refs.toggleButtonSize,
+  [vars$d.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
+  [vars$d.overlayItemPaddingInlineStart]: globalRefs$7.spacing.xs,
+  [vars$d.overlayItemPaddingInlineEnd]: globalRefs$7.spacing.lg,
 
-const NotificationCardClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostMinWidth: { selector: selectors.content, property: 'min-width' },
-      fontFamily: {},
-      fontSize: {},
-      backgroundColor: { selector: selectors.content },
-      textColor: { property: 'color' },
-      boxShadow: {},
-      borderWidth: { selector: selectors.content, property: 'border-width' },
-      borderColor: { selector: selectors.content, property: 'border-color' },
-      borderStyle: { selector: selectors.content, property: 'border-style' },
-      borderRadius: [
-        { selector: selectors.content, property: 'border-radius' },
-        { selector: selectors.overlay, property: 'border-radius' },
-      ],
-      verticalPadding: [
-        { selector: selectors.content, property: 'padding-top' },
-        { selector: selectors.content, property: 'padding-bottom' },
-      ],
-      horizontalPadding: [
-        { selector: selectors.content, property: 'padding-right' },
-        { selector: selectors.content, property: 'padding-left' },
-      ],
-    },
-  }),
-  notificationCardMixin
-)(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-notification-card',
-    style: () => `
-    vaadin-notification-card {
-      box-shadow: none;
-    }
-    ::part(overlay) {
-      box-shadow: none;
-      background: none;
-    }
+  _readonly: {
+    [vars$d.inputDropdownButtonCursor]: 'default',
+  },
 
-    [part="close"] {
-      cursor: pointer;
-      display: flex;
-    }
+  // Overlay theme exposed via the component:
+  [vars$d.overlayFontSize]: refs.fontSize,
+  [vars$d.overlayFontFamily]: refs.fontFamily,
+  [vars$d.overlayCursor]: 'pointer',
+  [vars$d.overlayItemBoxShadow]: 'none',
 
-    [part="content"] {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-    }
+  // Overlay direct theme:
+  [vars$d.overlay.minHeight]: '400px',
+  [vars$d.overlay.margin]: '0',
+};
 
-    [part="root"] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-    `,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1,
-  })
-);
+var comboBox$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  comboBox: comboBox,
+  default: comboBox,
+  vars: vars$d
+});
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = NotificationCardClass.cssVarList;
+const vars$c = ImageClass.cssVarList;
 
-const shadowColor = '#00000020';
+const image = {};
 
-const notification = {
-  [vars$3.hostMinWidth]: '415px',
-  [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
-  [vars$3.fontSize]: globalRefs$2.typography.body1.size,
-  [vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
-  [vars$3.textColor]: globalRefs$2.colors.surface.contrast,
-  [vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
-  [vars$3.verticalPadding]: '0.625em',
-  [vars$3.horizontalPadding]: '1.5em',
-  [vars$3.borderRadius]: globalRefs$2.radius.xs,
+var image$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: image,
+  vars: vars$c
+});
 
-  _bordered: {
-    [vars$3.borderWidth]: globalRefs$2.border.sm,
-    [vars$3.borderStyle]: 'solid',
-    [vars$3.borderColor]: 'transparent',
-  },
+const vars$b = PhoneFieldClass.cssVarList;
 
-  size: {
-    xs: { [vars$3.fontSize]: '12px' },
-    sm: { [vars$3.fontSize]: '14px' },
-    md: { [vars$3.fontSize]: '16px' },
-    lg: { [vars$3.fontSize]: '18px' },
-  },
+const phoneField = {
+  [vars$b.hostWidth]: refs.width,
+  [vars$b.hostDirection]: refs.direction,
+  [vars$b.fontSize]: refs.fontSize,
+  [vars$b.fontFamily]: refs.fontFamily,
+  [vars$b.labelTextColor]: refs.labelTextColor,
+  [vars$b.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$b.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$b.inputValueTextColor]: refs.valueTextColor,
+  [vars$b.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$b.inputBorderStyle]: refs.borderStyle,
+  [vars$b.inputBorderWidth]: refs.borderWidth,
+  [vars$b.inputBorderColor]: refs.borderColor,
+  [vars$b.inputBorderRadius]: refs.borderRadius,
+  [vars$b.inputOutlineStyle]: refs.outlineStyle,
+  [vars$b.inputOutlineWidth]: refs.outlineWidth,
+  [vars$b.inputOutlineColor]: refs.outlineColor,
+  [vars$b.inputOutlineOffset]: refs.outlineOffset,
+  [vars$b.phoneInputWidth]: refs.minWidth,
+  [vars$b.countryCodeInputWidth]: '5em',
+  [vars$b.countryCodeDropdownWidth]: '20em',
 
-  mode: {
-    primary: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
-      [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.primary.light,
-    },
-    success: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
-      [vars$3.textColor]: globalRefs$2.colors.success.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.success.light,
-    },
-    error: {
-      [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
-      [vars$3.textColor]: globalRefs$2.colors.error.contrast,
-      [vars$3.borderColor]: globalRefs$2.colors.error.light,
-    },
-  },
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
 };
 
-var notificationCard = /*#__PURE__*/Object.freeze({
+var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: notification,
-  vars: vars$3
+  default: phoneField,
+  vars: vars$b
 });
 
-const componentName = getComponentName('multi-select-combo-box');
+const vars$a = PhoneFieldInputBoxClass.cssVarList;
 
-const MultiSelectComboBoxMixin = (superclass) =>
-  class MultiSelectComboBoxMixinClass extends superclass {
-    // eslint-disable-next-line class-methods-use-this
-    #renderItem = ({ displayName, value, label }) => {
-      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
-    };
+const phoneInputBoxField = {
+  [vars$a.hostWidth]: '16em',
+  [vars$a.hostMinWidth]: refs.minWidth,
+  [vars$a.hostDirection]: refs.direction,
+  [vars$a.fontSize]: refs.fontSize,
+  [vars$a.fontFamily]: refs.fontFamily,
+  [vars$a.labelTextColor]: refs.labelTextColor,
+  [vars$a.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$a.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$a.inputValueTextColor]: refs.valueTextColor,
+  [vars$a.inputPlaceholderTextColor]: refs.placeholderTextColor,
+  [vars$a.inputBorderStyle]: refs.borderStyle,
+  [vars$a.inputBorderWidth]: refs.borderWidth,
+  [vars$a.inputBorderColor]: refs.borderColor,
+  [vars$a.inputBorderRadius]: refs.borderRadius,
+  [vars$a.inputOutlineStyle]: refs.outlineStyle,
+  [vars$a.inputOutlineWidth]: refs.outlineWidth,
+  [vars$a.inputOutlineColor]: refs.outlineColor,
+  [vars$a.inputOutlineOffset]: refs.outlineOffset,
+  _fullWidth: {
+    [vars$a.hostWidth]: refs.width,
+  },
+};
 
-    #data;
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: phoneInputBoxField,
+  vars: vars$a
+});
 
-    get defaultValues() {
-      const defaultValuesAttr = this.getAttribute('default-values');
-      if (defaultValuesAttr) {
-        try {
-          const defaultValues = JSON.parse(defaultValuesAttr);
-          if (this.isValidDataType(defaultValues)) {
-            return defaultValues;
-          }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error('could not parse data string from attribute "default-values" -', e.message);
-        }
-      }
-      return [];
-    }
+const vars$9 = NewPasswordClass.cssVarList;
 
-    get renderItem() {
-      return this.#renderItem;
-    }
+const newPassword = {
+  [vars$9.hostWidth]: refs.width,
+  [vars$9.hostMinWidth]: refs.minWidth,
+  [vars$9.hostDirection]: refs.direction,
+  [vars$9.fontSize]: refs.fontSize,
+  [vars$9.fontFamily]: refs.fontFamily,
+  [vars$9.spaceBetweenInputs]: '1em',
+  [vars$9.errorMessageTextColor]: refs.errorMessageTextColor,
 
-    set renderItem(renderFn) {
-      this.#renderItem = renderFn;
-      this.renderItems();
-    }
+  _required: {
+    // NewPassword doesn't pass `required` attribute to its Password components.
+    // That's why we fake the required indicator on each input.
+    // We do that by injecting `::after` element, and populating it with requiredIndicator content.
+    [vars$9.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
+  },
+};
 
-    get data() {
-      if (this.#data) return this.#data;
+var newPassword$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: newPassword,
+  vars: vars$9
+});
 
-      const dataAttr = this.getAttribute('data');
+const vars$8 = UploadFileClass.cssVarList;
 
-      if (dataAttr) {
-        try {
-          const data = JSON.parse(dataAttr);
-          if (this.isValidDataType(data)) {
-            return data;
-          }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error('could not parse data string from attribute "data" -', e.message);
-        }
-      }
+const uploadFile = {
+  [vars$8.hostDirection]: refs.direction,
+  [vars$8.labelTextColor]: refs.labelTextColor,
+  [vars$8.fontFamily]: refs.fontFamily,
 
-      return [];
-    }
+  [vars$8.iconSize]: '2em',
 
-    set data(data) {
-      if (this.isValidDataType(data)) {
-        this.#data = data;
-        this.renderItems();
-      }
-    }
+  [vars$8.hostPadding]: '0.75em',
+  [vars$8.gap]: '0.5em',
 
-    get allowCustomValue() {
-      return this.getAttribute('allow-custom-value') === 'true';
-    }
+  [vars$8.fontSize]: '16px',
+  [vars$8.titleFontWeight]: '500',
+  [vars$8.lineHeight]: '1em',
 
-    get minItemsSelection() {
-      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
-    }
+  [vars$8.borderWidth]: refs.borderWidth,
+  [vars$8.borderColor]: refs.borderColor,
+  [vars$8.borderRadius]: refs.borderRadius,
+  [vars$8.borderStyle]: 'dashed',
 
-    get maxItemsSelection() {
-      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
-    }
+  _required: {
+    [vars$8.requiredIndicator]: refs.requiredIndicator,
+  },
 
-    // eslint-disable-next-line class-methods-use-this
-    isValidDataType(data) {
-      const isValid = Array.isArray(data);
-      if (!isValid) {
-        // eslint-disable-next-line no-console
-        console.error('data and default-values must be an array, received:', data);
-      }
+  size: {
+    xs: {
+      [vars$8.hostHeight]: '196px',
+      [vars$8.hostWidth]: '200px',
+      [vars$8.titleFontSize]: '0.875em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
+    },
+    sm: {
+      [vars$8.hostHeight]: '216px',
+      [vars$8.hostWidth]: '230px',
+      [vars$8.titleFontSize]: '1em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
+    },
+    md: {
+      [vars$8.hostHeight]: '256px',
+      [vars$8.hostWidth]: '312px',
+      [vars$8.titleFontSize]: '1.125em',
+      [vars$8.descriptionFontSize]: '1em',
+      [vars$8.lineHeight]: '1.5em',
+    },
+    lg: {
+      [vars$8.hostHeight]: '280px',
+      [vars$8.hostWidth]: '336px',
+      [vars$8.titleFontSize]: '1.125em',
+      [vars$8.descriptionFontSize]: '1.125em',
+      [vars$8.lineHeight]: '1.75em',
+    },
+  },
 
-      return isValid;
-    }
+  _fullWidth: {
+    [vars$8.hostWidth]: refs.width,
+  },
+};
 
-    getItemsTemplate() {
-      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
-    }
+var uploadFile$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: uploadFile,
+  vars: vars$8
+});
 
-    renderItems() {
-      const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
-    }
+const globalRefs$6 = getThemeRefs(globals);
 
-    handleSelectedItems() {
-      const currentSelected =
-        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
+const vars$7 = ButtonSelectionGroupItemClass.cssVarList;
 
-      this.baseElement.selectedItems = [];
+const buttonSelectionGroupItem = {
+  [vars$7.hostDirection]: 'inherit',
+  [vars$7.backgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$7.labelTextColor]: globalRefs$6.colors.surface.contrast,
+  [vars$7.borderColor]: globalRefs$6.colors.surface.main,
+  [vars$7.borderStyle]: 'solid',
+  [vars$7.borderRadius]: globalRefs$6.radius.sm,
 
-      // if previously selected item ID exists in current children, set it as selected
-      if (currentSelected.length > 0) {
-        this.value = currentSelected;
-      }
+  _hover: {
+    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+  },
 
-      // otherwise, if default value is specified, set default value as selected item
-      if (this.value.length === 0) {
-        this.setDefaultValues();
-      }
-    }
+  _selected: {
+    [vars$7.borderColor]: globalRefs$6.colors.surface.contrast,
+    [vars$7.backgroundColor]: globalRefs$6.colors.surface.contrast,
+    [vars$7.labelTextColor]: globalRefs$6.colors.surface.light,
+  },
+};
 
-    // eslint-disable-next-line class-methods-use-this
-    customValueTransformFn(val) {
-      return val;
-    }
+var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: buttonSelectionGroupItem,
+  vars: vars$7
+});
 
-    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
-    // field that it searches the value, and the finaly display value of the input.
-    // We provide a custom transform function to override that behavior.
-    setComboBoxDescriptor() {
-      const valueDescriptor = Object.getOwnPropertyDescriptor(
-        this.inputElement.constructor.prototype,
-        'value'
-      );
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = ButtonSelectionGroupClass.cssVarList;
 
-      const comboBox = this;
+const buttonSelectionGroup = {
+  [vars$6.hostDirection]: refs.direction,
+  [vars$6.fontFamily]: refs.fontFamily,
+  [vars$6.labelTextColor]: refs.labelTextColor,
+  [vars$6.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars$6.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars$6.itemsSpacing]: globalRefs$5.spacing.sm,
+  [vars$6.hostWidth]: refs.width,
+};
 
-      Object.defineProperties(this.inputElement, {
-        value: {
-          ...valueDescriptor,
-          set(val) {
-            const transformedValue = comboBox.customValueTransformFn(val) || '';
+var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: buttonSelectionGroup,
+  vars: vars$6
+});
 
-            if (transformedValue === this.value) {
-              return;
-            }
+const componentName$1 = getComponentName('modal');
 
-            valueDescriptor.set.call(this, transformedValue);
-          },
-        },
-      });
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
     }
 
-    // vaadin api is to set props on their combo box node,
-    // in order to avoid it, we are passing the children of this component
-    // to the items & renderer props, so it will be used as the combo box items
-    #onChildrenChange() {
-      const items = Array.from(this.children);
-
-      // we want the data-name attribute to be accessible as an object attribute
-      if (items.length) {
-        this.removeAttribute('has-no-options');
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
+      }
+    }
 
-        items.forEach((node) => {
-          Object.defineProperty(node, 'data-name', {
-            value: node.getAttribute('data-name'),
-            configurable: true,
-            writable: true,
-          });
-          Object.defineProperty(node, 'data-id', {
-            value: node.getAttribute('data-id'),
-            configurable: true,
-            writable: true,
-          });
-        });
+    init() {
+      super.init?.();
+      this.style.display = 'none';
 
-        this.baseElement.items = items;
+      // vaadin-dialog might not be loaded in time
+      // in order to make sure it's loaded before this block is running
+      // we are wrapping it with setTimeout
+      setTimeout(() => {
+        // we want to sync descope-modal content through vaadin-dialog into the overlay
+        // so we are adding a slot to the overlay, which allows us to forward the content from
+        // vaadin-dialog to vaadin-dialog-overlay
+        this.baseElement.shadowRoot
+          .querySelector('vaadin-dialog-overlay')
+          .appendChild(document.createElement('slot'));
 
-        setTimeout(() => {
-          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-          this.handleSelectedItems();
-        }, 0);
-      } else {
-        this.baseElement.items = [];
-        this.setAttribute('has-no-options', '');
-      }
+        this.#overrideOverlaySettings();
 
-      // use vaadin combobox custom renderer to render options as HTML
-      // and not via default renderer, which renders only the data-name's value
-      // in its own HTML template
-      this.baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
-        root.innerHTML = model.item.outerHTML;
-      };
+        // we need to always open the modal in `opened=false`
+        // to prevent it from rendering outside the dialog
+        // first, we have to run `overrideOverlaySettings` to setup
+        // the component.
+        this.handleOpened();
+      });
     }
 
     // the default vaadin behavior is to attach the overlay to the body when opened
     // we do not want that because it's difficult to style the overlay in this way
     // so we override it to open inside the shadow DOM
     #overrideOverlaySettings() {
-      const overlay = this.baseElement.shadowRoot
-        .querySelector('vaadin-multi-select-combo-box-internal')
-        .shadowRoot.querySelector('vaadin-multi-select-combo-box-overlay');
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+
       overlay._attachOverlay = () => {
         overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
       };
-      overlay._detachOverlay = () => {};
       overlay._enterModalState = () => {};
-    }
 
-    #handleCustomValues() {
-      if (this.allowCustomValue) {
-        this.baseElement.addEventListener('custom-value-set', (e) => {
-          const newItemHtml = this.#renderItem({
-            label: e.detail,
-            displayName: e.detail,
-            value: e.detail,
-          });
-          this.innerHTML += newItemHtml;
-          // The value needs to be set with a timeout because it needs to execute after
-          // the custom value is added to items by the children change observer
-          setTimeout(() => {
-            this.value = [...this.value, e.detail];
-          }, 0);
-        });
-      }
+      overlay.close = () => false;
     }
+  };
 
-    setGetValidity() {
-      // eslint-disable-next-line func-names
-      this.getValidity = function () {
-        if (this.isRequired && !this.value.length) {
-          return {
-            valueMissing: true,
-          };
-        }
-        // If the field is not required, no minimum selection can be set
-        if (
-          this.isRequired &&
-          this.minItemsSelection &&
-          this.value.length < this.minItemsSelection
-        ) {
-          return {
-            rangeUnderflow: true,
-          };
-        }
-        if (this.maxItemsSelection && this.value.length > this.maxItemsSelection) {
-          return {
-            rangeOverflow: true,
-          };
-        }
-        return {};
-      };
-    }
+const ModalClass = compose(
+  createStyleMixin({
+    mappings: {
+      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
+      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
+      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      hostDisplay: {
+        selector: () => ':host(.descope-modal)',
+        property: 'display',
+        important: true,
+      },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
+      width: { selector: () => '::part(overlay)', property: 'width' },
+      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+    },
+    forward: {
+      include: false,
+      attributes: ['opened'],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-dialog',
+    style: () => ``,
+    excludeAttrsSync: ['tabindex', 'opened'],
+    componentName: componentName$1,
+  })
+);
 
-    init() {
-      super.init?.();
+const globalRefs$4 = getThemeRefs(globals);
 
-      this.setGetValidity();
+const compVars = ModalClass.cssVarList;
 
-      this.setComboBoxDescriptor();
+const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
+  [compVars.overlayShadow]: 'none',
+  [compVars.overlayWidth]: '700px',
+};
 
-      this.#overrideOverlaySettings();
+const vars$5 = {
+  ...compVars,
+};
 
-      this.#handleCustomValues();
+var modal$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: modal,
+  vars: vars$5
+});
 
-      this.renderItems();
+const globalRefs$3 = getThemeRefs(globals);
+const vars$4 = GridClass.cssVarList;
 
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+const grid = {
+  [vars$4.hostWidth]: '100%',
+  [vars$4.hostHeight]: '100%',
+  [vars$4.hostMinHeight]: '400px',
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
 
-      observeChildren(this, this.#onChildrenChange.bind(this));
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
 
-      // 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'] });
+  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
+  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
+  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
 
-      this.setDefaultValues();
-    }
+  [vars$4.inputBorderWidth]: refs.borderWidth,
+  [vars$4.inputBorderStyle]: refs.borderStyle,
+  [vars$4.inputBorderRadius]: refs.borderRadius,
+  [vars$4.inputBorderColor]: 'transparent',
 
-    setDefaultValues() {
-      this.value = this.defaultValues;
-    }
+  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
+  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
 
-    set value(vals) {
-      if (vals && vals.length > 0) {
-        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
+  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
+  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
 
-        if (children?.length > 0) {
-          this.baseElement.selectedItems = children;
-        }
-      } else {
-        this.baseElement.selectedItems = [];
-      }
+  _bordered: {
+    [vars$4.inputBorderColor]: refs.borderColor,
+  },
+};
+
+var grid$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: grid,
+  grid: grid,
+  vars: vars$4
+});
+
+const componentName = getComponentName('notification-card');
+
+const notificationCardMixin = (superclass) =>
+  class NotificationCardMixinClass extends superclass {
+    close() {
+      // if animation is not applied to the element, the node will not be removed
+      // from the DOM. We should avoid that. So, if in any case we allow
+      // customizing the animation - we should check if animation is applied
+      // and if it's not applied - remove the element from the DOM and dispatch
+      // `card-closed` event.
+      this.baseElement.addEventListener('animationend', () => {
+        this.remove();
+        this.dispatchEvent(new Event('card-closed'));
+      });
+
+      this.setAttribute('opened', 'false');
     }
 
-    get value() {
-      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    constructor() {
+      super();
+
+      this.baseElement.innerHTML = `
+      <div part="root">
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="close">
+          <slot name="close"></slot>
+        </div>
+      </div>
+      `;
+
+      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
     }
-  };
 
-const {
-  host,
-  inputField,
-  inputElement,
-  placeholder,
-  toggle,
-  label,
-  requiredIndicator,
-  helperText,
-  errorMessage,
-  chip,
-  chipLabel,
-  overflowChipFirstBorder,
-  overflowChipSecondBorder,
-} = {
-  host: { selector: () => ':host' },
-  inputField: { selector: '::part(input-field)' },
-  inputElement: { selector: 'input' },
-  placeholder: { selector: '> input:placeholder-shown' },
-  toggle: { selector: '::part(toggle-button)' },
-  label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-  helperText: { selector: '::part(helper-text)' },
-  errorMessage: { selector: '::part(error-message)' },
-  chip: { selector: 'vaadin-multi-select-combo-box-chip' },
-  chipLabel: { selector: 'vaadin-multi-select-combo-box-chip::part(label)' },
-  overflowChipFirstBorder: {
-    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::before",
-  },
-  overflowChipSecondBorder: {
-    selector: "vaadin-multi-select-combo-box-chip[slot='overflow']::after",
-  },
+    init() {
+      super.init?.();
+
+      this.closeEle.onclick = () => {
+        this.close();
+      };
+    }
+  };
+
+const selectors = {
+  content: () => 'vaadin-notification-card::part(content)',
+  overlay: () => 'vaadin-notification-card::part(overlay)',
 };
 
-const MultiSelectComboBoxClass = compose(
+const NotificationCardClass = compose(
   createStyleMixin({
     mappings: {
-      hostWidth: { ...host, property: 'width' },
-      hostDirection: { ...host, property: 'direction' },
-      // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host],
-      chipFontSize: { ...chipLabel, property: 'font-size' },
-      fontFamily: [label, placeholder, inputField, helperText, errorMessage, chipLabel],
-      labelTextColor: [
-        { ...label, property: 'color' },
-        { ...requiredIndicator, property: 'color' },
-      ],
-      errorMessageTextColor: { ...errorMessage, property: 'color' },
-      inputHeight: { ...inputField, property: 'min-height' },
-      inputBackgroundColor: { ...inputField, property: 'background-color' },
-      inputBorderColor: { ...inputField, property: 'border-color' },
-      inputBorderWidth: { ...inputField, property: 'border-width' },
-      inputBorderStyle: { ...inputField, property: 'border-style' },
-      inputBorderRadius: { ...inputField, property: 'border-radius' },
-      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-      inputValueTextColor: { ...inputField, property: 'color' },
-      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-      inputDropdownButtonCursor: { ...toggle, property: 'cursor' },
-      inputDropdownButtonColor: { ...toggle, property: 'color' },
-      inputDropdownButtonSize: { ...toggle, property: 'font-size' },
-      inputDropdownButtonOffset: [
-        { ...toggle, property: 'margin-right' },
-        { ...toggle, property: 'margin-left' },
-      ],
-      inputOutlineColor: { ...inputField, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField, property: 'outline-width' },
-      inputOutlineStyle: { ...inputField, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-      inputHorizontalPadding: [
-        { ...inputElement, property: 'padding-left' },
-        { ...inputElement, property: 'padding-right' },
-        { ...inputField, property: 'padding-inline-start' },
+      hostMinWidth: { selector: selectors.content, property: 'min-width' },
+      fontFamily: {},
+      fontSize: {},
+      backgroundColor: { selector: selectors.content },
+      textColor: { property: 'color' },
+      boxShadow: {},
+      borderWidth: { selector: selectors.content, property: 'border-width' },
+      borderColor: { selector: selectors.content, property: 'border-color' },
+      borderStyle: { selector: selectors.content, property: 'border-style' },
+      borderRadius: [
+        { selector: selectors.content, property: 'border-radius' },
+        { selector: selectors.overlay, property: 'border-radius' },
       ],
-      inputVerticalPadding: [
-        { ...inputField, property: 'padding-top' },
-        { ...inputField, property: 'padding-bottom' },
+      verticalPadding: [
+        { selector: selectors.content, property: 'padding-top' },
+        { selector: selectors.content, property: 'padding-bottom' },
       ],
-      chipTextColor: { ...chipLabel, property: 'color' },
-      chipBackgroundColor: [
-        { ...chip, property: 'background-color' },
-        { ...overflowChipFirstBorder, property: 'border-color' },
-        { ...overflowChipSecondBorder, property: 'border-color' },
+      horizontalPadding: [
+        { selector: selectors.content, property: 'padding-right' },
+        { selector: selectors.content, property: 'padding-left' },
       ],
-
-      // we need to use the variables from the portal mixin
-      // so we need to use an arrow function on the selector
-      // for that to work, because ComboBox is not available
-      // at this time.
-      overlayBackground: {
-        property: () => MultiSelectComboBoxClass.cssVarList.overlay.backgroundColor,
-      },
-      overlayBorder: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.border },
-      overlayFontSize: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontSize },
-      overlayFontFamily: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.fontFamily },
-      overlayCursor: { property: () => MultiSelectComboBoxClass.cssVarList.overlay.cursor },
-      overlayItemBoxShadow: {
-        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemBoxShadow,
-      },
-      overlayItemPaddingInlineStart: {
-        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
-      },
-      overlayItemPaddingInlineEnd: {
-        property: () => MultiSelectComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
-      },
     },
   }),
-  draggableMixin,
-  portalMixin({
-    name: 'overlay',
-    selector: 'vaadin-multi-select-combo-box-internal',
-    mappings: {
-      backgroundColor: { selector: 'vaadin-multi-select-combo-box-scroller' },
-      minHeight: { selector: 'vaadin-multi-select-combo-box-overlay' },
-      margin: { selector: 'vaadin-multi-select-combo-box-overlay' },
-      cursor: { selector: 'vaadin-multi-select-combo-box-item' },
-      fontFamily: { selector: 'vaadin-multi-select-combo-box-item' },
-      fontSize: { selector: 'vaadin-multi-select-combo-box-item' },
-      itemBoxShadow: { selector: 'vaadin-multi-select-combo-box-item', property: 'box-shadow' },
-      itemPaddingInlineStart: {
-        selector: 'vaadin-multi-select-combo-box-item',
-        property: 'padding-inline-start',
-      },
-      itemPaddingInlineEnd: {
-        selector: 'vaadin-multi-select-combo-box-item',
-        property: 'padding-inline-end',
-      },
-    },
-    forward: {
-      include: false,
-      attributes: ['size'],
-    },
-  }),
-  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-items-changed' }),
-  componentNameValidationMixin,
-  MultiSelectComboBoxMixin
+  notificationCardMixin
 )(
   createProxy({
-    slots: ['', 'prefix'],
-    wrappedEleName: 'vaadin-multi-select-combo-box',
+    slots: [],
+    wrappedEleName: 'vaadin-notification-card',
     style: () => `
-		:host {
-			display: inline-flex;
-			box-sizing: border-box;
-			-webkit-mask-image: none;
-		}
-		${useHostExternalPadding(MultiSelectComboBoxClass.cssVarList)}
-		${resetInputReadonlyStyle('vaadin-multi-select-combo-box')}
-		${resetInputPlaceholder('vaadin-multi-select-combo-box')}
-		${resetInputCursor('vaadin-multi-select-combo-box')}
-
-		vaadin-multi-select-combo-box {
-			padding: 0;
-			width: 100%;
-		}
-		vaadin-multi-select-combo-box::before {
-			height: initial;
-		}
-		vaadin-multi-select-combo-box [slot="input"] {
-			-webkit-mask-image: none;
-			min-height: 0;
-      align-self: center;
-			box-sizing: border-box;
-		}
-
-		::part(input-field) {
-      padding: 0;
-			box-shadow: none;
-		}
-    ${resetInputLabelPosition('vaadin-multi-select-combo-box')}
-    :host([has-label]) vaadin-multi-select-combo-box-chip::part(label) {
-      display: block;
+    vaadin-notification-card {
+      box-shadow: none;
+    }
+    ::part(overlay) {
+      box-shadow: none;
+      background: none;
     }
 
-    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::before,
-    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
-      left: -4px;
-      right: -4px;
-      border-left-width: 0;
-      border-inline-start-style: solid;
-      border-inline-start-width: 2px;
+    [part="close"] {
+      cursor: pointer;
+      display: flex;
     }
-    vaadin-multi-select-combo-box vaadin-multi-select-combo-box-chip[slot='overflow']::after {
-      left: -8px;
-      right: -8px;
+
+    [part="content"] {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
     }
 
-    :host([has-no-options][allow-custom-value='true']) ::part(toggle-button) {
-      display: none;
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
     }
-		`,
-    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
-    // with the same name. Including it will cause Vaadin to calculate NaN size,
-    // and reset items to an empty array, and opening the list box with no items
-    // to display.
-    // Note: we exclude `placeholder` because the vaadin component observes it and
-    // tries to override it, causing us to lose the user set placeholder.
-    excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
+    `,
+    excludeAttrsSync: ['tabindex'],
     componentName,
-    includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = NotificationCardClass.cssVarList;
+
+const shadowColor = '#00000020';
+
+const notification = {
+  [vars$3.hostMinWidth]: '415px',
+  [vars$3.fontFamily]: globalRefs$2.fonts.font1.family,
+  [vars$3.fontSize]: globalRefs$2.typography.body1.size,
+  [vars$3.backgroundColor]: globalRefs$2.colors.surface.main,
+  [vars$3.textColor]: globalRefs$2.colors.surface.contrast,
+  [vars$3.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${shadowColor}`,
+  [vars$3.verticalPadding]: '0.625em',
+  [vars$3.horizontalPadding]: '1.5em',
+  [vars$3.borderRadius]: globalRefs$2.radius.xs,
+
+  _bordered: {
+    [vars$3.borderWidth]: globalRefs$2.border.sm,
+    [vars$3.borderStyle]: 'solid',
+    [vars$3.borderColor]: 'transparent',
+  },
+
+  size: {
+    xs: { [vars$3.fontSize]: '12px' },
+    sm: { [vars$3.fontSize]: '14px' },
+    md: { [vars$3.fontSize]: '16px' },
+    lg: { [vars$3.fontSize]: '18px' },
+  },
+
+  mode: {
+    primary: {
+      [vars$3.backgroundColor]: globalRefs$2.colors.primary.main,
+      [vars$3.textColor]: globalRefs$2.colors.primary.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.primary.light,
+    },
+    success: {
+      [vars$3.backgroundColor]: globalRefs$2.colors.success.main,
+      [vars$3.textColor]: globalRefs$2.colors.success.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.success.light,
+    },
+    error: {
+      [vars$3.backgroundColor]: globalRefs$2.colors.error.main,
+      [vars$3.textColor]: globalRefs$2.colors.error.contrast,
+      [vars$3.borderColor]: globalRefs$2.colors.error.light,
+    },
+  },
+};
+
+var notificationCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: notification,
+  vars: vars$3
+});
+
 const globalRefs$1 = getThemeRefs(globals);
 const vars$2 = MultiSelectComboBoxClass.cssVarList;
 
@@ -9795,5 +9809,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$w, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map