@descope/web-components-ui 1.0.243 → 1.0.245

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';
@@ -6730,8 +6731,6 @@ const ButtonSelectionGroupClass = compose(
 
 customElements.define(componentName$b, ButtonSelectionGroupInternalClass);
 
-customElements.define(componentName$a, ButtonSelectionGroupClass);
-
 const componentName$9 = getComponentName('button-selection-group-item');
 
 class RawSelectItem extends createBaseClass({
@@ -6835,6 +6834,8 @@ const ButtonSelectionGroupItemClass = compose(
 
 customElements.define(componentName$9, ButtonSelectionGroupItemClass);
 
+customElements.define(componentName$a, ButtonSelectionGroupClass);
+
 class GridTextColumnClass extends GridSortColumn {
   get sortable() {
     return this.getAttribute('sortable') === 'true';
@@ -6867,7 +6868,7 @@ class GridCustomColumnClass extends GridTextColumnClass {
     // we are going over the elements, and when finding an element which is pattern matches the data,
     // we are cloning this element, and injecting the data as its child
     const contentEle = Array.from(this.children).find((child) => {
-      const pattern = child.getAttribute('pattern');
+      const pattern = child.getAttribute('data-pattern');
       if (!pattern) return true;
 
       const regEx = new RegExp(pattern);
@@ -6902,7 +6903,8 @@ const createCheckboxEle = () => {
   return checkbox;
 };
 
-const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
+const getIsAllItemsSelected = (grid) =>
+  !!grid.items?.length && grid.selectedItems.length === grid.items.length;
 
 class GridSelectionColumnClass extends GridSelectionColumn {
   // eslint-disable-next-line class-methods-use-this
@@ -7201,173 +7203,720 @@ const GridClass = compose(
 
 customElements.define(componentName$5, GridClass);
 
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
-
-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));
-  }, {});
-};
-
-const stringifyArray = (strArr) =>
-  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+const componentName$4 = getComponentName('multi-select-combo-box');
 
-const getCssVarValue = (val) => {
-  switch (true) {
-    case Array.isArray(val):
-      return stringifyArray(val);
-    case isUrl(val):
-      return `url(${val})`;
-    default:
-      return val;
-  }
-};
+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 themeToCSSVarsObj = (theme) =>
-  transformTheme(theme, [], (path, val) => ({
-    [getVarName(path)]: getCssVarValue(val),
-  }));
+    #data;
 
-const getThemeRefs = (theme, prefix) =>
-  transformTheme(theme, [], (path) =>
-    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-  );
+    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 getThemeVars = (theme, prefix) =>
-  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+    get renderItem() {
+      return this.#renderItem;
+    }
 
-const globalsThemeToStyle = (theme, themeName = '') => {
-  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
-    (acc, entry) => `${acc}${entry.join(':')};\n`,
-    ''
-  );
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
 
-  if (!themeName) return style;
+    get data() {
+      if (this.#data) return this.#data;
 
-  return `*[data-theme="${themeName}"] {${style}}`;
-};
+      const dataAttr = this.getAttribute('data');
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-  transformTheme(componentsTheme, [], (path, val) => {
-    const [component, ...restPath] = path;
-    const property = restPath.pop();
-    const componentName = getComponentName(component);
+      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);
+        }
+      }
 
-    if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+      return [];
     }
 
-    // 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;
+    set data(data) {
+      if (this.isValidDataType(data)) {
+        this.#data = data;
+        this.renderItems();
+      }
+    }
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    get allowCustomValue() {
+      return this.getAttribute('allow-custom-value') === 'true';
     }
 
-    // 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"]`;
+    get minItemsSelection() {
+      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
+    }
 
-      const nextSection = restPath[idx + 1];
+    get maxItemsSelection() {
+      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
+    }
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+    // 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(
-          'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
-        );
-        return acc;
+        console.error('data and default-values must be an array, received:', data);
       }
 
-      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
-    }, '');
+      return isValid;
+    }
 
-    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+    getItemsTemplate() {
+      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+    }
 
-    return {
-      [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
-          },
-        },
-      },
-    };
-  });
+    renderItems() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
 
-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`,
-    ''
-  );
+    handleSelectedItems() {
+      const currentSelected =
+        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
 
-const createComponentsTheme = (componentsTheme) => {
-  const styleObj = componentsThemeToStyleObj(componentsTheme);
+      this.baseElement.selectedItems = [];
 
-  return Object.keys(styleObj).reduce((acc, componentName) => {
-    const componentThemes = styleObj[componentName];
+      // if previously selected item ID exists in current children, set it as selected
+      if (currentSelected.length > 0) {
+        this.value = currentSelected;
+      }
 
-    return Object.assign(acc, {
-      [componentName]: Object.keys(componentThemes).reduce(
-        (res, theme) =>
-          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-        {}
-      ),
-    });
-  }, {});
-};
+      // otherwise, if default value is specified, set default value as selected item
+      if (this.value.length === 0) {
+        this.setDefaultValues();
+      }
+    }
 
-const themeToStyle = ({ globals, components }, themeName) => ({
-  globals: globalsThemeToStyle(globals, themeName),
-  components: createComponentsTheme(components),
-});
+    // eslint-disable-next-line class-methods-use-this
+    customValueTransformFn(val) {
+      return val;
+    }
 
-const useVar = (varName) => `var(${varName})`;
+    // 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 createHelperVars = (theme, prefix) => {
-  const res = transformTheme(theme, [], (path, value) => {
-    const modifiedPath = [...path];
-    const property = modifiedPath.splice(-1);
-    const varName = getCssVarName(prefix, property);
+      const comboBox = this;
 
-    const vars = { [property]: varName };
-    const useVars = { [property]: useVar(varName) };
+      Object.defineProperties(this.inputElement, {
+        value: {
+          ...valueDescriptor,
+          set(val) {
+            const transformedValue = comboBox.customValueTransformFn(val) || '';
 
-    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
-  });
+            if (transformedValue === this.value) {
+              return;
+            }
 
-  return [res.theme, res.useVars, res.vars];
-};
+            valueDescriptor.set.call(this, transformedValue);
+          },
+        },
+      });
+    }
 
-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();
-};
+    // 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);
 
-const genColor = (color) => {
-  const mainColor = new Color(color.main || color);
+      // we want the data-name attribute to be accessible as an object attribute
+      if (items.length) {
+        this.removeAttribute('has-no-options');
 
-  return {
-    main: mainColor.hex(),
-    dark: color.dark || genDark(mainColor),
-    light: color.light || genLight(mainColor),
-    contrast: color.contrast || genContrast(mainColor),
+        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,
+          });
+        });
+
+        this.baseElement.items = items;
+
+        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', '');
+      }
+
+      // 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;
+      };
+    }
+
+    // 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 = () => {};
+    }
+
+    #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);
+        });
+      }
+    }
+
+    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 {};
+      };
+    }
+
+    init() {
+      super.init?.();
+
+      this.setGetValidity();
+
+      this.setComboBoxDescriptor();
+
+      this.#overrideOverlaySettings();
+
+      this.#handleCustomValues();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      observeChildren(this, this.#onChildrenChange.bind(this));
+
+      // Note: we need to forward the `placeholder` because the vaadin component observes it and
+      // tries to override it, causing us to lose the user set placeholder.
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['placeholder'] });
+
+      this.setDefaultValues();
+    }
+
+    setDefaultValues() {
+      this.value = this.defaultValues;
+    }
+
+    set value(vals) {
+      if (vals && vals.length > 0) {
+        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
+
+        if (children?.length > 0) {
+          this.baseElement.selectedItems = children;
+        }
+      } else {
+        this.baseElement.selectedItems = [];
+      }
+    }
+
+    get value() {
+      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    }
+  };
+
+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",
+  },
+};
+
+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' },
+      ],
+
+      // 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
+)(
+  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')}
+
+		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-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;
+    }
+
+    :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'],
+  })
+);
+
+customElements.define(componentName$4, MultiSelectComboBoxClass);
+
+const componentName$3 = getComponentName('badge');
+
+class RawBadge extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        width: 100%;
+      }
+		</style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+  }
+}
+
+const BadgeClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostDirection: { property: 'direction' },
+
+      fontFamily: {},
+      fontSize: {},
+      fontWeight: {},
+      textTransform: {},
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
+
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+      borderRadius: {},
+
+      backgroundColor: {},
+
+      textColor: { property: 'color' },
+      textAlign: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawBadge);
+
+customElements.define(componentName$3, BadgeClass);
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+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));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // 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];
+
+      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;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
+
+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);
+
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
+
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+        {}
+      ),
+    });
+  }, {});
+};
+
+const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
+});
+
+const useVar = (varName) => `var(${varName})`;
+
+const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(prefix, property);
+
+    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 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 genColor = (color) => {
+  const mainColor = new Color(color.main || color);
+
+  return {
+    main: mainColor.hex(),
+    dark: color.dark || genDark(mainColor),
+    light: color.light || genLight(mainColor),
+    contrast: color.contrast || genContrast(mainColor),
   };
 };
 
@@ -7652,7 +8201,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const componentName$4 = getComponentName('input-wrapper');
+const componentName$2 = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
 const [theme$1, refs, vars$u] = createHelperVars(
@@ -7721,7 +8270,7 @@ const [theme$1, refs, vars$u] = createHelperVars(
       backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$4
+  componentName$2
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -8131,1443 +8680,950 @@ var container$1 = /*#__PURE__*/Object.freeze({
   vars: vars$m
 });
 
-const vars$l = LogoClass.cssVarList;
-
-const logo$1 = {
-  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
-};
-
-var logo$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo$1,
-  vars: vars$l
-});
-
-const vars$k = TotpImageClass.cssVarList;
-
-const logo = {
-  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
-};
-
-var totpImage = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: logo,
-  vars: vars$k
-});
-
-const globalRefs$c = getThemeRefs(globals);
-const vars$j = TextClass.cssVarList;
-
-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,
-    },
-  },
-
-  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,
-    },
-  },
-
-  textAlign: {
-    right: { [vars$j.textAlign]: 'right' },
-    left: { [vars$j.textAlign]: 'left' },
-    center: { [vars$j.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars$j.hostWidth]: '100%',
-  },
-
-  _italic: {
-    [vars$j.fontStyle]: 'italic',
-  },
-
-  _uppercase: {
-    [vars$j.textTransform]: 'uppercase',
-  },
-
-  _lowercase: {
-    [vars$j.textTransform]: 'lowercase',
-  },
-};
-
-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',
-
-  [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,
-    },
-    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,
-    },
-  },
-};
-
-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 divider = {
-  ...helperTheme$1,
-
-  [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',
-
-  _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$h = {
-  ...compVars$2,
-  ...helperVars$1,
-};
-
-var divider$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: divider,
-  vars: vars$h
-});
-
-const vars$g = PasscodeClass.cssVarList;
-
-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,
-
-  size: {
-    xs: { [vars$g.spinnerSize]: '15px' },
-    sm: { [vars$g.spinnerSize]: '20px' },
-    md: { [vars$g.spinnerSize]: '20px' },
-    lg: { [vars$g.spinnerSize]: '20px' },
-  },
-
-  _hideCursor: {
-    [vars$g.digitCaretTextColor]: 'transparent',
-  },
+const vars$l = LogoClass.cssVarList;
 
-  _loading: {
-    [vars$g.overlayOpacity]: refs.overlayOpacity,
-  },
+const logo$1 = {
+  [vars$l.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)',
 };
 
-var passcode$1 = /*#__PURE__*/Object.freeze({
+var logo$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: passcode,
-  vars: vars$g
+  default: logo$1,
+  vars: vars$l
 });
 
-const globalRefs$9 = getThemeRefs(globals);
-const vars$f = LoaderLinearClass.cssVarList;
-
-const loaderLinear = {
-  [vars$f.hostDisplay]: 'inline-block',
-  [vars$f.hostWidth]: '100%',
+const vars$k = TotpImageClass.cssVarList;
 
-  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
-  [vars$f.barWidth]: '20%',
+const logo = {
+  [vars$k.fallbackUrl]: 'url(https://imgs.descope.com/components/totp-placeholder.svg)',
+};
 
-  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
-  [vars$f.barBorderRadius]: '4px',
+var totpImage = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: logo,
+  vars: vars$k
+});
 
-  [vars$f.animationDuration]: '2s',
-  [vars$f.animationTimingFunction]: 'linear',
-  [vars$f.animationIterationCount]: 'infinite',
-  [vars$f.verticalPadding]: '0.25em',
+const globalRefs$c = getThemeRefs(globals);
+const vars$j = TextClass.cssVarList;
 
-  size: {
-    xs: { [vars$f.barHeight]: '2px' },
-    sm: { [vars$f.barHeight]: '4px' },
-    md: { [vars$f.barHeight]: '6px' },
-    lg: { [vars$f.barHeight]: '8px' },
+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,
+    },
   },
 
   mode: {
     primary: {
-      [vars$f.barColor]: globalRefs$9.colors.primary.main,
+      [vars$j.textColor]: globalRefs$c.colors.primary.main,
     },
     secondary: {
-      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
+      [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,
     },
   },
 
-  _hidden: {
-    [vars$f.hostDisplay]: 'none',
+  textAlign: {
+    right: { [vars$j.textAlign]: 'right' },
+    left: { [vars$j.textAlign]: 'left' },
+    center: { [vars$j.textAlign]: 'center' },
   },
-};
-
-var loaderLinear$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: loaderLinear,
-  vars: vars$f
-});
-
-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,
-      },
-    },
+  _fullWidth: {
+    [vars$j.hostWidth]: '100%',
   },
-  componentName$z
-);
-
-const loaderRadial = {
-  ...helperTheme,
-
-  [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',
 
-  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' },
+  _italic: {
+    [vars$j.fontStyle]: 'italic',
   },
 
-  _hidden: {
-    [compVars$1.hostDisplay]: 'none',
+  _uppercase: {
+    [vars$j.textTransform]: 'uppercase',
   },
-};
-const vars$e = {
-  ...compVars$1,
-  ...helperVars,
-};
-
-var loaderRadial$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: loaderRadial,
-  vars: vars$e
-});
-
-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,
 
-  _readonly: {
-    [vars$d.inputDropdownButtonCursor]: 'default',
+  _lowercase: {
+    [vars$j.textTransform]: 'lowercase',
   },
-
-  // Overlay theme exposed via the component:
-  [vars$d.overlayFontSize]: refs.fontSize,
-  [vars$d.overlayFontFamily]: refs.fontFamily,
-  [vars$d.overlayCursor]: 'pointer',
-  [vars$d.overlayItemBoxShadow]: 'none',
-
-  // Overlay direct theme:
-  [vars$d.overlay.minHeight]: '400px',
-  [vars$d.overlay.margin]: '0',
 };
 
-var comboBox$1 = /*#__PURE__*/Object.freeze({
+var text$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  comboBox: comboBox,
-  default: comboBox,
-  vars: vars$d
+  default: text,
+  vars: vars$j
 });
 
-const vars$c = ImageClass.cssVarList;
+const globalRefs$b = getThemeRefs(globals);
+const vars$i = LinkClass.cssVarList;
 
-const image = {};
+const link = {
+  [vars$i.hostDirection]: globalRefs$b.direction,
+  [vars$i.cursor]: 'pointer',
 
-var image$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: image,
-  vars: vars$c
-});
+  [vars$i.textColor]: globalRefs$b.colors.primary.main,
 
-const vars$b = PhoneFieldClass.cssVarList;
+  textAlign: {
+    right: { [vars$i.textAlign]: 'right' },
+    left: { [vars$i.textAlign]: 'left' },
+    center: { [vars$i.textAlign]: 'center' },
+  },
 
-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',
+  _fullWidth: {
+    [vars$i.hostWidth]: '100%',
+  },
 
-  // '@overlay': {
-  // 	overlayItemBackgroundColor: 'red'
-  // }
+  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,
+    },
+  },
 };
 
-var phoneField$1 = /*#__PURE__*/Object.freeze({
+var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneField,
-  vars: vars$b
+  default: link,
+  vars: vars$i
 });
 
-const vars$a = PhoneFieldInputBoxClass.cssVarList;
+const globalRefs$a = getThemeRefs(globals);
+const compVars$2 = DividerClass.cssVarList;
 
-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,
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
+  {
+    thickness: '2px',
+    spacing: '10px',
+  },
+  componentName$w
+);
+
+const divider = {
+  ...helperTheme$1,
+
+  [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',
+
+  _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,
   },
 };
 
-var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
+const vars$h = {
+  ...compVars$2,
+  ...helperVars$1,
+};
+
+var divider$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: phoneInputBoxField,
-  vars: vars$a
+  default: divider,
+  vars: vars$h
 });
 
-const vars$9 = NewPasswordClass.cssVarList;
+const vars$g = PasscodeClass.cssVarList;
 
-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 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,
 
-  _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
+  size: {
+    xs: { [vars$g.spinnerSize]: '15px' },
+    sm: { [vars$g.spinnerSize]: '20px' },
+    md: { [vars$g.spinnerSize]: '20px' },
+    lg: { [vars$g.spinnerSize]: '20px' },
+  },
+
+  _hideCursor: {
+    [vars$g.digitCaretTextColor]: 'transparent',
+  },
+
+  _loading: {
+    [vars$g.overlayOpacity]: refs.overlayOpacity,
   },
 };
 
-var newPassword$1 = /*#__PURE__*/Object.freeze({
+var passcode$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: newPassword,
-  vars: vars$9
+  default: passcode,
+  vars: vars$g
 });
 
-const vars$8 = UploadFileClass.cssVarList;
-
-const uploadFile = {
-  [vars$8.hostDirection]: refs.direction,
-  [vars$8.labelTextColor]: refs.labelTextColor,
-  [vars$8.fontFamily]: refs.fontFamily,
+const globalRefs$9 = getThemeRefs(globals);
+const vars$f = LoaderLinearClass.cssVarList;
 
-  [vars$8.iconSize]: '2em',
+const loaderLinear = {
+  [vars$f.hostDisplay]: 'inline-block',
+  [vars$f.hostWidth]: '100%',
 
-  [vars$8.hostPadding]: '0.75em',
-  [vars$8.gap]: '0.5em',
+  [vars$f.barColor]: globalRefs$9.colors.surface.contrast,
+  [vars$f.barWidth]: '20%',
 
-  [vars$8.fontSize]: '16px',
-  [vars$8.titleFontWeight]: '500',
-  [vars$8.lineHeight]: '1em',
+  [vars$f.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$f.barBorderRadius]: '4px',
 
-  [vars$8.borderWidth]: refs.borderWidth,
-  [vars$8.borderColor]: refs.borderColor,
-  [vars$8.borderRadius]: refs.borderRadius,
-  [vars$8.borderStyle]: 'dashed',
+  [vars$f.animationDuration]: '2s',
+  [vars$f.animationTimingFunction]: 'linear',
+  [vars$f.animationIterationCount]: 'infinite',
+  [vars$f.verticalPadding]: '0.25em',
 
-  _required: {
-    [vars$8.requiredIndicator]: refs.requiredIndicator,
+  size: {
+    xs: { [vars$f.barHeight]: '2px' },
+    sm: { [vars$f.barHeight]: '4px' },
+    md: { [vars$f.barHeight]: '6px' },
+    lg: { [vars$f.barHeight]: '8px' },
   },
 
-  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',
+  mode: {
+    primary: {
+      [vars$f.barColor]: globalRefs$9.colors.primary.main,
     },
-    lg: {
-      [vars$8.hostHeight]: '280px',
-      [vars$8.hostWidth]: '336px',
-      [vars$8.titleFontSize]: '1.125em',
-      [vars$8.descriptionFontSize]: '1.125em',
-      [vars$8.lineHeight]: '1.75em',
+    secondary: {
+      [vars$f.barColor]: globalRefs$9.colors.secondary.main,
     },
   },
 
-  _fullWidth: {
-    [vars$8.hostWidth]: refs.width,
+  _hidden: {
+    [vars$f.hostDisplay]: 'none',
   },
 };
 
-var uploadFile$1 = /*#__PURE__*/Object.freeze({
+var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: uploadFile,
-  vars: vars$8
+  default: loaderLinear,
+  vars: vars$f
 });
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
+const compVars$1 = LoaderRadialClass.cssVarList;
 
-const vars$7 = ButtonSelectionGroupItemClass.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 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,
+const loaderRadial = {
+  ...helperTheme,
+
+  [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',
 
-  _hover: {
-    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+  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' },
   },
 
-  _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,
+  _hidden: {
+    [compVars$1.hostDisplay]: 'none',
   },
 };
-
-var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: buttonSelectionGroupItem,
-  vars: vars$7
-});
-
-const globalRefs$5 = getThemeRefs(globals);
-const vars$6 = ButtonSelectionGroupClass.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 vars$e = {
+  ...compVars$1,
+  ...helperVars,
 };
 
-var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
+var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: buttonSelectionGroup,
-  vars: vars$6
+  default: loaderRadial,
+  vars: vars$e
 });
 
-const componentName$3 = getComponentName('modal');
-
-const customMixin = (superclass) =>
-  class ModalMixinClass extends superclass {
-    get opened() {
-      return this.getAttribute('opened') === 'true';
-    }
-
-    handleOpened() {
-      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
-      if (this.opened) {
-        this.style.display = '';
-      } else {
-        this.style.display = 'none';
-      }
-    }
-
-    init() {
-      super.init?.();
-      this.style.display = 'none';
+const globalRefs$7 = getThemeRefs(globals);
+const vars$d = ComboBoxClass.cssVarList;
 
-      // 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'));
+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,
 
-        this.#overrideOverlaySettings();
+  _readonly: {
+    [vars$d.inputDropdownButtonCursor]: 'default',
+  },
 
-        // 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();
-      });
-    }
+  // Overlay theme exposed via the component:
+  [vars$d.overlayFontSize]: refs.fontSize,
+  [vars$d.overlayFontFamily]: refs.fontFamily,
+  [vars$d.overlayCursor]: 'pointer',
+  [vars$d.overlayItemBoxShadow]: 'none',
 
-    // 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');
+  // Overlay direct theme:
+  [vars$d.overlay.minHeight]: '400px',
+  [vars$d.overlay.margin]: '0',
+};
 
-      overlay._attachOverlay = () => {
-        overlay.bringToFront();
-        this.baseElement.setAttribute('style', 'display:flex!important;');
-      };
-      overlay._detachOverlay = () => {
-        this.baseElement.style.display = 'none';
-      };
-      overlay._enterModalState = () => {};
+var comboBox$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  comboBox: comboBox,
+  default: comboBox,
+  vars: vars$d
+});
 
-      overlay.close = () => false;
-    }
-  };
+const vars$c = ImageClass.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' },
-    },
-    forward: {
-      include: false,
-      attributes: ['opened'],
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: [''],
-    wrappedEleName: 'vaadin-dialog',
-    style: () => ``,
-    excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$3,
-  })
-);
+const image = {};
 
-const globalRefs$4 = getThemeRefs(globals);
+var image$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: image,
+  vars: vars$c
+});
 
-const compVars = ModalClass.cssVarList;
+const vars$b = PhoneFieldClass.cssVarList;
 
-const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
-  [compVars.overlayShadow]: 'none',
-  [compVars.overlayWidth]: '700px',
-};
+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',
 
-const vars$5 = {
-  ...compVars,
+  // '@overlay': {
+  // 	overlayItemBackgroundColor: 'red'
+  // }
 };
 
-var modal$1 = /*#__PURE__*/Object.freeze({
+var phoneField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: modal,
-  vars: vars$5
+  default: phoneField,
+  vars: vars$b
 });
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$4 = GridClass.cssVarList;
-
-const grid = {
-  [vars$4.hostWidth]: '100%',
-  [vars$4.hostHeight]: '100%',
-  [vars$4.hostMinHeight]: '400px',
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
-
-  [vars$4.fontSize]: refs.fontSize,
-  [vars$4.fontFamily]: refs.fontFamily,
-
-  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
-  [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
-  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
-
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputBorderColor]: 'transparent',
-
-  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
-
-  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
+const vars$a = PhoneFieldInputBoxClass.cssVarList;
 
-  _bordered: {
-    [vars$4.inputBorderColor]: refs.borderColor,
+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,
   },
 };
 
-var grid$1 = /*#__PURE__*/Object.freeze({
+var phoneInputBoxField$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: grid,
-  grid: grid,
-  vars: vars$4
+  default: phoneInputBoxField,
+  vars: vars$a
 });
 
-const componentName$2 = 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');
-    }
-
-    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"]');
-    }
-
-    init() {
-      super.init?.();
+const vars$9 = NewPasswordClass.cssVarList;
 
-      this.closeEle.onclick = () => {
-        this.close();
-      };
-    }
-  };
+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 selectors = {
-  content: () => 'vaadin-notification-card::part(content)',
-  overlay: () => 'vaadin-notification-card::part(overlay)',
+  _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 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;
-    }
+var newPassword$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: newPassword,
+  vars: vars$9
+});
 
-    [part="close"] {
-      cursor: pointer;
-      display: flex;
-    }
+const vars$8 = UploadFileClass.cssVarList;
 
-    [part="content"] {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-    }
+const uploadFile = {
+  [vars$8.hostDirection]: refs.direction,
+  [vars$8.labelTextColor]: refs.labelTextColor,
+  [vars$8.fontFamily]: refs.fontFamily,
 
-    [part="root"] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-    }
-    `,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$2,
-  })
-);
+  [vars$8.iconSize]: '2em',
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$3 = NotificationCardClass.cssVarList;
+  [vars$8.hostPadding]: '0.75em',
+  [vars$8.gap]: '0.5em',
 
-const shadowColor = '#00000020';
+  [vars$8.fontSize]: '16px',
+  [vars$8.titleFontWeight]: '500',
+  [vars$8.lineHeight]: '1em',
 
-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,
+  [vars$8.borderWidth]: refs.borderWidth,
+  [vars$8.borderColor]: refs.borderColor,
+  [vars$8.borderRadius]: refs.borderRadius,
+  [vars$8.borderStyle]: 'dashed',
 
-  _bordered: {
-    [vars$3.borderWidth]: globalRefs$2.border.sm,
-    [vars$3.borderStyle]: 'solid',
-    [vars$3.borderColor]: 'transparent',
+  _required: {
+    [vars$8.requiredIndicator]: refs.requiredIndicator,
   },
 
   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,
+    xs: {
+      [vars$8.hostHeight]: '196px',
+      [vars$8.hostWidth]: '200px',
+      [vars$8.titleFontSize]: '0.875em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
     },
-    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,
+    sm: {
+      [vars$8.hostHeight]: '216px',
+      [vars$8.hostWidth]: '230px',
+      [vars$8.titleFontSize]: '1em',
+      [vars$8.descriptionFontSize]: '0.875em',
+      [vars$8.lineHeight]: '1.25em',
     },
-  },
-};
-
-var notificationCard = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: notification,
-  vars: vars$3
-});
-
-const componentName$1 = getComponentName('multi-select-combo-box');
-
-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>`;
-    };
-
-    #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);
-        }
-      }
-      return [];
-    }
-
-    get renderItem() {
-      return this.#renderItem;
-    }
+    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',
+    },
+  },
 
-    set renderItem(renderFn) {
-      this.#renderItem = renderFn;
-      this.renderItems();
-    }
+  _fullWidth: {
+    [vars$8.hostWidth]: refs.width,
+  },
+};
 
-    get data() {
-      if (this.#data) return this.#data;
+var uploadFile$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: uploadFile,
+  vars: vars$8
+});
 
-      const dataAttr = this.getAttribute('data');
+const globalRefs$6 = getThemeRefs(globals);
 
-      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 vars$7 = ButtonSelectionGroupItemClass.cssVarList;
 
-      return [];
-    }
+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,
 
-    set data(data) {
-      if (this.isValidDataType(data)) {
-        this.#data = data;
-        this.renderItems();
-      }
-    }
+  _hover: {
+    [vars$7.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+  },
 
-    get allowCustomValue() {
-      return this.getAttribute('allow-custom-value') === 'true';
-    }
+  _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,
+  },
+};
 
-    get minItemsSelection() {
-      return parseInt(this.getAttribute('min-items-selection'), 10) || 0;
-    }
+var buttonSelectionGroupItem$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: buttonSelectionGroupItem,
+  vars: vars$7
+});
 
-    get maxItemsSelection() {
-      return parseInt(this.getAttribute('max-items-selection'), 10) || 0;
-    }
+const globalRefs$5 = getThemeRefs(globals);
+const vars$6 = ButtonSelectionGroupClass.cssVarList;
 
-    // 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 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,
+};
 
-      return isValid;
-    }
+var buttonSelectionGroup$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: buttonSelectionGroup,
+  vars: vars$6
+});
 
-    getItemsTemplate() {
-      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
-    }
+const componentName$1 = getComponentName('modal');
 
-    renderItems() {
-      const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
     }
 
-    handleSelectedItems() {
-      const currentSelected =
-        this.baseElement.selectedItems?.map((item) => item.getAttribute('data-id')) || [];
-
-      this.baseElement.selectedItems = [];
-
-      // if previously selected item ID exists in current children, set it as selected
-      if (currentSelected.length > 0) {
-        this.value = currentSelected;
-      }
-
-      // otherwise, if default value is specified, set default value as selected item
-      if (this.value.length === 0) {
-        this.setDefaultValues();
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
       }
     }
 
-    // eslint-disable-next-line class-methods-use-this
-    customValueTransformFn(val) {
-      return val;
-    }
-
-    // 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 comboBox = this;
+    init() {
+      super.init?.();
+      this.style.display = 'none';
 
-      Object.defineProperties(this.inputElement, {
-        value: {
-          ...valueDescriptor,
-          set(val) {
-            const transformedValue = comboBox.customValueTransformFn(val) || '';
+      // 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'));
 
-            if (transformedValue === this.value) {
-              return;
-            }
+        this.#overrideOverlaySettings();
 
-            valueDescriptor.set.call(this, transformedValue);
-          },
-        },
+        // 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();
       });
     }
 
-    // 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);
+    // 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');
 
-      // we want the data-name attribute to be accessible as an object attribute
-      if (items.length) {
-        this.removeAttribute('has-no-options');
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
+      };
+      overlay._enterModalState = () => {};
 
-        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,
-          });
-        });
+      overlay.close = () => false;
+    }
+  };
+
+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,
+  })
+);
 
-        this.baseElement.items = items;
+const globalRefs$4 = getThemeRefs(globals);
 
-        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 compVars = ModalClass.cssVarList;
 
-      // 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 modal = {
+  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
+  [compVars.overlayShadow]: 'none',
+  [compVars.overlayWidth]: '700px',
+};
 
-    // 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 = () => {};
-    }
+const vars$5 = {
+  ...compVars,
+};
 
-    #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);
-        });
-      }
-    }
+var modal$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: modal,
+  vars: vars$5
+});
 
-    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 globalRefs$3 = getThemeRefs(globals);
+const vars$4 = GridClass.cssVarList;
 
-    init() {
-      super.init?.();
+const grid = {
+  [vars$4.hostWidth]: '100%',
+  [vars$4.hostHeight]: '100%',
+  [vars$4.hostMinHeight]: '400px',
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
 
-      this.setGetValidity();
+  [vars$4.fontSize]: refs.fontSize,
+  [vars$4.fontFamily]: refs.fontFamily,
 
-      this.setComboBoxDescriptor();
+  [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.#overrideOverlaySettings();
+  [vars$4.inputBorderWidth]: refs.borderWidth,
+  [vars$4.inputBorderStyle]: refs.borderStyle,
+  [vars$4.inputBorderRadius]: refs.borderRadius,
+  [vars$4.inputBorderColor]: 'transparent',
 
-      this.#handleCustomValues();
+  [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
+  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
 
-      this.renderItems();
+  [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
+  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
 
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+  _bordered: {
+    [vars$4.inputBorderColor]: refs.borderColor,
+  },
+};
 
-      observeChildren(this, this.#onChildrenChange.bind(this));
+var grid$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: grid,
+  grid: grid,
+  vars: vars$4
+});
 
-      // 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 componentName = getComponentName('notification-card');
 
-      this.setDefaultValues();
-    }
+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'));
+      });
 
-    setDefaultValues() {
-      this.value = this.defaultValues;
+      this.setAttribute('opened', 'false');
     }
 
-    set value(vals) {
-      if (vals && vals.length > 0) {
-        const children = this.baseElement.items?.filter((item) => vals.includes(item['data-id']));
+    constructor() {
+      super();
 
-        if (children?.length > 0) {
-          this.baseElement.selectedItems = children;
-        }
-      } else {
-        this.baseElement.selectedItems = [];
-      }
+      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"]');
     }
 
-    get value() {
-      return this.baseElement.selectedItems.map((elem) => elem.getAttribute('data-id')) || [];
+    init() {
+      super.init?.();
+
+      this.closeEle.onclick = () => {
+        this.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",
-  },
+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'],
-    componentName: componentName$1,
-    includeForwardProps: ['items', 'renderer', 'selectedItems'],
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
   })
 );
 
+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;
 
@@ -9625,56 +9681,6 @@ var multiSelectComboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const componentName = getComponentName('badge');
-
-class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-      :host {
-        display: inline-flex;
-      }
-      :host > div {
-        width: 100%;
-      }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
-  }
-}
-
-const BadgeClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: [{ selector: () => ':host', property: 'width' }],
-      hostDirection: { property: 'direction' },
-
-      fontFamily: {},
-      fontSize: {},
-      fontWeight: {},
-      textTransform: {},
-      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
-      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
-
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-      borderRadius: {},
-
-      backgroundColor: {},
-
-      textColor: { property: 'color' },
-      textAlign: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawBadge);
-
 const globalRefs = getThemeRefs(globals);
 const vars$1 = BadgeClass.cssVarList;
 
@@ -9792,5 +9798,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$w, components: vars };
 
-export { ButtonClass, ButtonSelectionGroupClass, ButtonSelectionGroupItemClass, 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