@descope/web-components-ui 1.0.110 → 1.0.112

package/dist/cjs/index.cjs.js

@@ -2,8 +2,10 @@
 
 var merge = require('lodash.merge');
 var set = require('lodash.set');
+var Color = require('color');
 
 const DESCOPE_PREFIX = 'descope';
+const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
 const BASE_THEME_SECTION = 'host';
 const PORTAL_THEME_PREFIX = '@';
 
@@ -15,6 +17,12 @@ const kebabCase = (str) =>
 
 const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
 
+const compose = (...fns) =>
+	(val) =>
+		fns.reduceRight((res, fn) => fn(res), val);
+
+const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
 const isUrl = (maybeUrl) => {
 	try {
 		new URL(maybeUrl);
@@ -25,11 +33,105 @@ const isUrl = (maybeUrl) => {
 	}
 };
 
+const observeAttributes = (
+	ele,
+	callback,
+	{ excludeAttrs = [], includeAttrs = [] }
+) => {
+	// sync all attrs on init
+	const filteredAttrs = Array.from(ele.attributes)
+		.filter((attr) =>
+			!excludeAttrs.includes(attr.name) &&
+			(!includeAttrs.length || includeAttrs.includes(attr.name))
+		)
+		.map((attr) => attr.name);
+
+	callback(filteredAttrs);
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === 'attributes' &&
+				!excludeAttrs.includes(mutation.attributeName) &&
+				(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+			) {
+				callback([mutation.attributeName]);
+			}
+		}
+	});
+
+	observer.observe(ele, { attributes: true });
+};
+
+// calling the callback with this object: { addedNodes, removedNodes }
+const observeChildren = (
+	ele,
+	callback,
+) => {
+	callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+
+	observer.observe(ele, { childList: true });
+};
+
+const createSyncAttrsCb =
+	(srcEle, targetEle, mapAttrs = {}) =>
+		(attrNames) => {
+			attrNames.forEach((attrName) => {
+				const targetAttrName = mapAttrs[attrName] || attrName;
+				const srcAttrVal = srcEle.getAttribute(attrName);
+				if (srcAttrVal !== null) {
+					if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+						targetEle.setAttribute(targetAttrName, srcAttrVal);
+					}
+				} else {
+					targetEle.removeAttribute(targetAttrName);
+				}
+			});
+		};
+
+const syncAttrs = (ele1, ele2, options) => {
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
 const getCssVarName = (...args) =>
 	`--${kebabCaseJoin(...args)}`;
 
+const forwardAttrs = (source, dest, options = {}) => {
+	observeAttributes(
+		source,
+		createSyncAttrsCb(source, dest, options.mapAttrs),
+		options
+	);
+};
+
+const forwardProps = (src, target, props = []) => {
+	if (!props.length) return;
+
+	const config = props.reduce((acc, prop) => Object.assign(acc, {
+		[prop]: {
+			get() {
+				return src[prop]
+			},
+			set(v) {
+				src[prop] = v;
+			}
+		}
+	}), {});
+
+	Object.defineProperties(target, config);
+};
+
 class ComponentsThemeManager {
   static mountOnPropName = 'DescopeThemeManager';
 
@@ -222,9 +324,4216 @@ const createHelperVars = (theme, prefix) => {
 	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)
+	};
+};
+
+const genColors = (colors) => {
+	return Object.keys(colors).reduce((acc, colorName) => {
+		const currentColor = colors[colorName];
+
+		return Object.assign(acc, {
+			[colorName]: genColor(currentColor)
+		});
+	}, {});
+};
+
+const createCssVarFallback = (first, ...rest) =>
+	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+
+const createCssSelector = (
+	baseSelector = '',
+	relativeSelectorOrSelectorFn = ''
+) =>
+	isFunction(relativeSelectorOrSelectorFn)
+		? relativeSelectorOrSelectorFn(baseSelector)
+		: `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+			? ` ${relativeSelectorOrSelectorFn}`
+			: relativeSelectorOrSelectorFn
+		}`;
+
+class StyleBuilder {
+	constructor() {
+		this.styleMap = new Map();
+	}
+
+	add(selector, property, value) {
+		if (!this.styleMap.has(selector)) {
+			this.styleMap.set(selector, []);
+		}
+
+		this.styleMap.set(selector, [
+			...this.styleMap.get(selector),
+			{ property, value }
+		]);
+	}
+
+	toString() {
+		return Array.from(this.styleMap.entries()).reduce(
+			(style, [selector, propValArr]) =>
+			(style += `${selector} { \n${propValArr
+				.map(({ property, value }) => `${property}: ${value}`)
+				.join(';\n')} \n}\n\n`),
+			''
+		);
+	}
+}
+
+const normalizeConfig = (attr, config) => {
+	const defaultMapping = { selector: '', property: kebabCase(attr) };
+
+	if (!config || !Object.keys(config).length) return [defaultMapping];
+
+	if (Array.isArray(config))
+		return config.map((entry) => Object.assign({}, defaultMapping, entry));
+
+	return [Object.assign({}, defaultMapping, config)];
+};
+
+const createStyle = (componentName, baseSelector, mappings) => {
+	const style = new StyleBuilder();
+
+	Object.keys(mappings).forEach((attr) => {
+		const attrConfig = normalizeConfig(attr, mappings[attr]);
+
+		const cssVarName = getCssVarName(componentName, attr);
+
+		attrConfig.forEach(
+			({ selector: relativeSelectorOrSelectorFn, property }) => {
+				style.add(
+					createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+					isFunction(property) ? property() : property,
+					createCssVarFallback(cssVarName)
+				);
+			}
+		);
+	});
+
+	return style.toString();
+};
+
+const createCssVarsList = (componentName, mappings) =>
+	Object.keys(mappings).reduce(
+		(acc, attr) =>
+			Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+		{}
+	);
+
+// on some cases we need a selector to be more specific than another
+// for this we have this fn that generate a class selector multiple times
+const createClassSelectorSpecifier = (className, numOfRepeats) => Array(numOfRepeats)
+	.fill(`.${className}`)
+	.join('');
+
+const STYLE_OVERRIDE_ATTR_PREFIX = 'st';
+
+
+const createStyleMixin =
+	({ mappings = {} }) => (superclass) =>
+		class CustomStyleMixinClass extends superclass {
+			static get cssVarList() {
+				return {
+					...superclass.cssVarList,
+					...createCssVarsList(superclass.componentName, {
+						...mappings,
+					})
+				};
+			}
+
+			#overrideStyleEle;
+			#themeStyleEle;
+			#disconnectThemeManager
+			#componentNameSuffix
+			#themeSection
+			#rootElement
+			#baseSelector
+			#styleAttributes
+
+			// we are using this mixin also for portalMixin
+			// so we should be able to inject styles to other DOM elements
+			// this is why we need to support these overrides
+			constructor({
+				getRootElement,
+				componentNameSuffix = '',
+				themeSection = BASE_THEME_SECTION,
+				baseSelector
+			} = {}) {
+				super();
+				this.#componentNameSuffix = componentNameSuffix;
+				this.#themeSection = themeSection;
+				this.#rootElement = getRootElement?.(this) || this.shadowRoot;
+				this.#baseSelector = baseSelector ?? this.baseSelector;
+
+				this.#styleAttributes = Object.keys(mappings).map((key) =>
+					kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
+				);
+
+				this.#createMappingStyle();
+				this.#createComponentTheme();
+				this.#createOverridesStyle();
+			}
+
+			get componentTheme() {
+				return componentsThemeManager.currentTheme?.[superclass.componentName] || ''
+			}
+
+			#onComponentThemeChange() {
+				this.#themeStyleEle.innerHTML = this.componentTheme[this.#themeSection];
+			}
+
+			#createComponentTheme() {
+				this.#themeStyleEle = document.createElement('style');
+				this.#themeStyleEle.id = 'style-mixin-theme';
+				this.#rootElement.prepend(this.#themeStyleEle);
+				this.#disconnectThemeManager = componentsThemeManager.onCurrentThemeChange(this.#onComponentThemeChange.bind(this));
+				this.#onComponentThemeChange();
+			}
+
+			#createOverridesStyle() {
+				this.#overrideStyleEle = document.createElement('style');
+				this.#overrideStyleEle.id = 'style-mixin-overrides';
+
+				const classSpecifier = createClassSelectorSpecifier(superclass.componentName, CSS_SELECTOR_SPECIFIER_MULTIPLY);
+
+				this.#overrideStyleEle.innerText = `:host(${classSpecifier}) {}`;
+				this.#rootElement.append(this.#overrideStyleEle);
+			}
+
+			#setAttrOverride(attrName, value) {
+				const style = this.#overrideStyleEle?.sheet?.cssRules[0].style;
+				if (!style) return;
+
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(new RegExp(`^${STYLE_OVERRIDE_ATTR_PREFIX}-`), '')
+				);
+
+				if (value) style?.setProperty(varName, value);
+				else { 
+					style?.removeProperty(varName);
+					this.removeAttribute(attrName);
+				}
+			}
+
+			#updateOverridesStyle(attrs = []) {
+				for (const attr of attrs) {
+					if (this.#styleAttributes.includes(attr)) {
+						this.#setAttrOverride(attr, this.getAttribute(attr));
+					}
+				}
+
+				// we are rewriting the style back to the style tag
+				this.#overrideStyleEle.innerHTML = this.#overrideStyleEle?.sheet?.cssRules[0].cssText;
+			}
+
+			#createMappingStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-mappings';
+				themeStyle.innerHTML = createStyle(
+					kebabCaseJoin(superclass.componentName, this.#componentNameSuffix),
+					this.#baseSelector,
+					mappings
+				);
+				this.#rootElement.prepend(themeStyle);
+			}
+
+			#addClassName(className) {
+				(this.#rootElement.classList || this.#rootElement.host.classList).add(className);
+			}
+
+			init() {
+				super.init?.();
+				if (this.shadowRoot.isConnected) {
+					this.#addClassName(superclass.componentName);
+
+					// this is instead attributeChangedCallback because we cannot use static methods in this case
+					observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
+				}
+			}
+
+			disconnectedCallback() {
+				super.disconnectedCallback?.();
+
+				this.#disconnectThemeManager?.();
+			}
+		};
+
+const draggableMixin = (superclass) =>
+	class DraggableMixinClass extends superclass {
+		#styleEle = null;
+
+		static get observedAttributes() {
+			const superAttrs = superclass.observedAttributes || [];
+			return [...superAttrs, 'draggable'];
+		}
+
+		constructor() {
+			super();
+
+			this.#styleEle = document.createElement('style');
+			this.#styleEle.innerText = `* { cursor: inherit!important }`;
+		}
+
+		#handleDraggableStyle(isDraggable) {
+			if (isDraggable) {
+				this.shadowRoot.appendChild(this.#styleEle);
+			} else {
+				this.#styleEle.remove();
+			}
+		}
+
+		get isDraggable() {
+			return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
+		}
+
+		init() {
+			// because we are delegating the focus from the outer component, 
+			// the D&D is not working well in the page editor
+			// in order to solve it we are making the inner component focusable on mouse down
+			// and removing it on complete
+			this.addEventListener('mousedown', (e) => {
+				if (this.isDraggable) {
+					const prevTabIndex = this.baseElement.getAttribute('tabindex');
+					this.baseElement.setAttribute('tabindex', '-1');
+
+					const onComplete = () => {
+						prevTabIndex ?
+							this.baseElement.setAttribute('tabindex', prevTabIndex) :
+							this.baseElement.removeAttribute('tabindex');
+
+						e.target.removeEventListener('mouseup', onComplete);
+						e.target.removeEventListener('dragend', onComplete);
+					};
+
+					e.target.addEventListener('mouseup', onComplete, { once: true });
+					e.target.addEventListener('dragend', onComplete, { once: true });
+				}
+			});
+
+			super.init?.();
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			if (attrName === 'draggable') {
+				this.#handleDraggableStyle(newValue === 'true');
+			}
+		}
+	};
+
+const componentNameValidationMixin = (superclass) =>
+	class ComponentNameValidationMixinClass extends superclass {
+		#checkComponentName() {
+			const currentComponentName = this.localName;
+
+			if (!superclass.componentName) {
+				throw Error(
+					`component name is not defined on super class, make sure you have a static get for "componentName"`
+				);
+			}
+
+			if (currentComponentName !== superclass.componentName) {
+				throw Error(
+					`component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+				);
+			}
+		}
+
+		init() {
+			super.init?.();
+			this.#checkComponentName();
+		}
+	};
+
+const hoverableMixin = (superclass) =>
+	class HoverableMixinClass extends superclass {
+		init() {
+			super.init?.();
+
+			this.baseElement.addEventListener('mouseover', (e) => {
+				this.setAttribute('hover', 'true');
+				e.target.addEventListener(
+					'mouseleave',
+					() => this.removeAttribute('hover'),
+					{ once: true }
+				);
+			});
+		}
+	};
+
+const booleanAttributesList = [
+  'readonly',
+  'focused',
+  'invalid',
+  'has-label',
+  'required',
+  'disabled',
+  'checked',
+  'has-helper',
+  'has-value',
+  'step-buttons-visible',
+  'hover',
+  'has-error-message',
+  'focus-ring',
+  'opened',
+  'active'
+];
+
+const isBooleanAttribute = (attr) => {
+  return booleanAttributesList.includes(attr)
+};
+// we want all the valueless attributes to have "true" value
+// and all the falsy attribute to be removed
+const normalizeBooleanAttributesMixin = (superclass) => class NormalizeBooleanAttributesMixinClass extends superclass {
+  init() {
+    super.init?.();
+
+    observeAttributes(this, (attrs) =>
+      attrs.forEach(attr => {
+        const attrVal = this.getAttribute(attr);
+
+        if (isBooleanAttribute(attr)) {
+          if (attrVal === '') {
+            this.setAttribute(attr, 'true');
+          } else if (attrVal === 'false') {
+            this.removeAttribute(attr);
+          }
+        } else if (!attrVal) {
+          console.warn(`attribute "${attr}" has no value, should it be added to the boolean attributes list?`);
+        }
+      }), {});
+  }
+};
+
+const createBaseClass = ({ componentName, baseSelector = '' }) => {
+  class DescopeBaseClass extends HTMLElement {
+    static get componentName() {
+      return componentName;
+    }
+
+    #baseElement;
+
+    #isInit = true;
+
+    // base selector is the selector for the component wrapper,
+    // it's the highest element that is relevant for the layout
+    get baseSelector() {
+      return baseSelector
+    }
+
+    // this is the base element, which returned by querying the base selector
+    get baseElement() {
+      this.#baseElement ??= this.baseSelector ?
+        this.rootElement.querySelector(this.baseSelector) :
+        this;
+
+      if(!this.#baseElement) {
+        console.warn('missing base element for component', this.localName);
+      }
+      return this.#baseElement
+    }
+
+    // this is the component root level element, 
+    // it can be either a shadow root or the component's node from the light DOM
+    get rootElement() {
+      return this.shadowRoot || this
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
+    }
+  }
+
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin
+  )(DescopeBaseClass)
+};
+
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+
+const createProxy = ({
+	componentName,
+	wrappedEleName,
+	slots = [],
+	style,
+	excludeAttrsSync = [],
+	includeAttrsSync = [],
+	includeForwardProps = []
+}) => {
+	class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
+		#dispatchBlur = createDispatchEvent.bind(this, 'blur')
+		#dispatchFocus = createDispatchEvent.bind(this, 'focus')
+
+		constructor() {
+			super().attachShadow({ mode: 'open', delegatesFocus: true }).innerHTML = `
+			<style id="create-proxy">${isFunction(style) ? style() : style
+				}</style>
+			<${wrappedEleName}>
+			<slot></slot>
+			${slots.map((slot) => `<slot name="${slot}" slot="${slot}"></slot>`).join('')}
+			</${wrappedEleName}>
+		`;
+		}
+
+		init() {
+			super.init?.();
+
+			this.baseElement.addEventListener('blur', (e) => {
+				this.#dispatchBlur();
+			});
+
+			this.baseElement.addEventListener('focus', (e) => {
+				this.#dispatchFocus();
+			});
+
+			// this is needed for components that uses props, such as combo box
+			forwardProps(this.baseElement, this, includeForwardProps);
+
+			syncAttrs(this.baseElement, this, {
+				excludeAttrs: excludeAttrsSync,
+				includeAttrs: includeAttrsSync
+			});
+		}
+	}
+
+	return ProxyClass;
+};
+
+const observedAttributes$2 = [
+  'required',
+  'pattern',
+];
+
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch',
+  tooShort: 'data-errormessage-pattern-mismatch-too-short',
+  tooLong: 'data-errormessage-pattern-mismatch-too-long',
+};
+const inputValidationMixin = (superclass) => class InputValidationMixinClass extends superclass {
+  static get observedAttributes() {
+    return [
+      ...superclass.observedAttributes || [],
+      ...observedAttributes$2
+    ];
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  #internals
+
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals();
+  }
+
+  get defaultErrorMsgValueMissing() {
+    return 'Please fill out this field.'
+  }
+
+  get defaultErrorMsgPatternMismatch() {
+    return 'Please match the requested format.'
+  }
+
+  get defaultErrorMsgTooShort() {
+    return `Minimum length is ${this.getAttribute('minlength')}.`
+  }
+
+  get defaultErrorMsgTooLong() {
+    return `Maximum length is ${this.getAttribute('maxlength')}.  `
+  }
+
+  getErrorMessage(flags) {
+    const {
+      valueMissing,
+      patternMismatch,
+      typeMismatch,
+      stepMismatch,
+      tooShort,
+      tooLong,
+      customError
+    } = flags;
+    switch (true) {
+      case valueMissing:
+        return this.getAttribute(errorAttributes.valueMissing) ||
+          this.defaultErrorMsgValueMissing
+      case patternMismatch || typeMismatch || stepMismatch:
+        return this.getAttribute(errorAttributes.patternMismatch) ||
+          this.defaultErrorMsgPatternMismatch
+      case tooShort:
+        return this.getAttribute(errorAttributes.tooShort) ||
+          this.defaultErrorMsgTooShort
+      case tooLong:
+        return this.getAttribute(errorAttributes.tooLong) ||
+          this.defaultErrorMsgTooLong
+      case customError:
+        return this.validationMessage
+      default:
+        return ''
+    }
+  }
+
+  #setValidity() {
+    const validity = this.isReadOnly ? {} : this.getValidity();
+    this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  getValidity() {
+    console.warn('getValidity', 'is not implemented');
+  }
+
+  checkValidity() {
+    return this.#internals.validity.valid
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  get validationTarget() {
+    return this.inputElement
+  }
+
+  setCustomValidity(errorMessage) {
+    if (errorMessage) {
+      this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
+    } else {
+      this.#internals.setValidity({});
+      this.#setValidity();
+    }
+  }
+
+  get isRequired() {
+    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+  }
+
+  get isReadOnly() {
+    return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+  }
+
+  get pattern() {
+    return this.getAttribute('pattern')
+  }
+
+  get form() {
+    return this.#internals.form
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (observedAttributes$2.includes(attrName)) {
+      this.#setValidity();
+    }
+  }
+
+  init() {
+    super.init?.();
+    this.addEventListener('change', this.#setValidity);
+    this.addEventListener('invalid', (e) => e.stopPropagation());
+    this.addEventListener('input', this.#setValidity);
+
+    // The attribute sync takes time, so getValidity returns valid,
+    // even when it shouldn't. This way allows all attributes to sync
+    // after render, before checking the validity.
+    setTimeout(() => this.#setValidity());
+  }
+};
+
+const errorAttrs = ['invalid', 'required'];
+
+const propertyObserver = (src, target, property) => {
+	Object.defineProperty(src, property, {
+		set: function (v) {
+			return (target[property] = v);
+		},
+		get: function () {
+			return target[property];
+		},
+		configurable: true
+	});
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+	if (!ele) return;
+
+	const nestingLevel = 10;
+
+	let nonSlotEle = ele;
+	for (let i = 0; i < nestingLevel; i++) {
+		nonSlotEle = nonSlotEle.assignedElements()[0];
+		if (nonSlotEle.localName !== 'slot') return nonSlotEle
+	}
+};
+
+const proxyInputMixin = (superclass) =>
+	class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+		static get observedAttributes() {
+			return [...superclass.observedAttributes || [], ...errorAttrs];
+		}
+
+		#inputElement
+
+		#dispatchChange = createDispatchEvent.bind(this, 'change')
+
+		constructor() {
+			super();
+
+			this.#inputElement = super.inputElement;
+		}
+
+		// the web-component does not loaded immediately, so we want to defer the warning
+		// and show it only if the input element was not found after the component is loaded
+		warnIfInputElementIsMissing() {
+			clearTimeout(this.inputElementTimerId);
+
+			this.inputElementTimerId = setTimeout(() => {
+				!this.#inputElement && console.warn(this.localName, 'no input was found');
+			}, 0);
+		}
+
+		get inputElement() {
+			this.warnIfInputElementIsMissing();
+
+			const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+			const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+
+			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+
+			return this.#inputElement
+		}
+
+		set inputElement(ele) {
+			this.#inputElement = ele;
+		}
+
+		getValidity() {
+			return this.inputElement?.validity || {}
+		}
+
+		handleInternalInputErrorMessage() {
+			if (!this.inputElement.checkValidity()) {
+				this.inputElement.setCustomValidity(this.validationMessage);
+			}
+		}
+
+		#handleErrorMessage() {
+			this.handleInternalInputErrorMessage();
+			this.setAttribute('error-message', this.validationMessage);
+		}
+
+		init() {
+			super.init?.();
+
+			this.inputElement.addEventListener('input', (e) => {
+				if (!this.inputElement.checkValidity()) {
+					this.inputElement.setCustomValidity('');
+					// after updating the input validity we want to trigger set validity on the wrapping element
+					// so we will get the updated validity
+					this.setCustomValidity('');
+
+					// Vaadin is getting the input event before us, 
+					// so in order to make sure they use the updated validity
+					// we calling their fn after updating the input validity
+					this.baseElement.__onInput(e);
+
+					this.#handleErrorMessage();
+				}
+			});
+
+			this.baseElement.addEventListener('change', () => {
+				this.#dispatchChange();
+			});
+
+			this.#inputElement.addEventListener('blur', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
+					this.#handleErrorMessage();
+				}
+			});
+
+
+			this.addEventListener('invalid', () => {
+				if (!this.checkValidity()) {
+					this.setAttribute('invalid', 'true');
+				}
+				this.#handleErrorMessage();
+			});
+
+			this.handleInternalInputErrorMessage();
+
+			// sync properties
+			propertyObserver(this, this.inputElement, 'value');
+			propertyObserver(this, this.inputElement, 'selectionStart');
+			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+
+			forwardAttrs(this, this.inputElement, {includeAttrs: ['inputmode']});
+		}
+	};
+
+// this is needed because we might generate the same css vars names
+// e.g. "overlayColor" attribute in style mixin's mapping, 
+// will generate the same var as "color" attribute in portals's mapping 
+// when the portal name is "overlay".
+// because of that, we are adding this separator that is also used as a differentiator
+const DISPLAY_NAME_SEPARATOR = '_';
+
+const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
+
+const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
+
+const portalMixin = ({
+  name,
+  selector,
+  mappings = {},
+  forward: { attributes = [], include = true } = {}
+}) => (superclass) => {
+  const eleDisplayName = name || sanitizeSelector(selector);
+
+  const BaseClass = createStyleMixin({
+    mappings
+  })(superclass);
+
+  return class PortalMixinClass extends BaseClass {
+    static get cssVarList() {
+      return {
+        ...BaseClass.cssVarList,
+        [eleDisplayName]: createCssVarsList(kebabCaseJoin(superclass.componentName, DISPLAY_NAME_SEPARATOR + eleDisplayName), mappings)
+      };
+    }
+
+    #portalEle
+
+    constructor() {
+      // we cannot use "this" before calling "super"
+      const getRootElement = (that) => {
+        const baseEle = that.shadowRoot.querySelector(that.baseSelector);
+        const portal = selector ? baseEle.shadowRoot.querySelector(selector) : baseEle;
+
+        return portal.shadowRoot || portal
+      };
+
+      super({
+        getRootElement,
+        componentNameSuffix: DISPLAY_NAME_SEPARATOR + eleDisplayName,
+        themeSection: PORTAL_THEME_PREFIX + eleDisplayName,
+        baseSelector: ':host'
+      });
+
+      this.#portalEle = getDomNode(getRootElement(this));
+    }
+
+    #handleHoverAttribute() {
+      this.#portalEle.onmouseenter = (e) => { e.target.setAttribute('hover', 'true'); };
+      this.#portalEle.onmouseleave = (e) => { e.target.removeAttribute('hover'); };
+    }
+
+    init() {
+      super.init?.();
+      forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes });
+
+      this.#handleHoverAttribute();
+    }
+  }
+};
+
+const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
+  #dispatchChange = createDispatchEvent.bind(this, 'change')
+
+  init() {
+    super.init?.();
+    this.prevValue = this.value;
+
+    this.addEventListener('change', (e) => {
+      e.stopPropagation();
+    });
+
+    this.addEventListener('blur', () => {
+      if (this.value !== this.prevValue) {
+        this.#dispatchChange();
+        this.prevValue = this.value;
+      }
+    });
+  }
+};
+
+const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
+  init() {
+    this.#blockNativeEvents();
+
+    super.init?.();
+  }
+
+  // we want to block the native (trusted) events and control when these events are being dispatched
+  #blockNativeEvents() {
+    ['blur', 'focus', 'focusin', 'focusout'].forEach(event => {
+      this.addEventListener(event, (e) => {
+        e.isTrusted && e.target === this && e.stopImmediatePropagation();
+      });
+    });
+  }
+
+  handleFocusEventsDispatching(inputs) {
+    let timerId;
+
+    // in order to simulate blur & focusout on root input element
+    // we are checking if focus on one of the inner elements happened immediately after blur
+    // if not, the component is no longer focused and we should dispatch blur & focusout
+    inputs?.forEach(input => {
+      input?.addEventListener('focusout', (e) => {
+        e.stopImmediatePropagation();
+        timerId = setTimeout(() => {
+          timerId = null;
+
+          createDispatchEvent.call(this, 'blur');
+          createDispatchEvent.call(this, 'focusout', { bubbles: true });
+        });
+      });
+
+      // in order to simulate focus & focusin on the root input element
+      // we are holding a timer id and clearing it on focusin
+      // if there is a timer id, it means that the root input is still focused
+      // otherwise, it was not focused before, and we should dispatch focus & focusin
+      const onFocus = (e) => {
+        e.stopImmediatePropagation();
+        clearTimeout(timerId);
+        if (!timerId) {
+          createDispatchEvent.call(this, 'focus');
+          createDispatchEvent.call(this, 'focusin', { bubbles: true });
+        }
+      };
+
+      // some components are not dispatching focusin but only focus
+      input?.addEventListener('focusin', onFocus);
+      input?.addEventListener('focus', onFocus);
+    });
+  }
+
+  // we want to block the input events from propagating in case the value of the root input wasn't change
+  // this can happen if we are sanitizing characters on the internal inputs and do not want it to affect the root input element value
+  // in this case, on each input event, we are comparing the root input value to the previous one, and only if it does not match, we are allowing the input event to propagate
+  handleInputEventDispatching() {
+    let previousRootComponentValue = this.value;
+
+    this.addEventListener('input', (e) => {
+      // we are comparing the previous value to the new one,
+      // and if they have the same value, we are blocking the input event
+      if (previousRootComponentValue === this.value) {
+        e.stopImmediatePropagation();
+      } else {
+        previousRootComponentValue = this.value;
+      }
+    });
+  }
+};
+
+const createBaseInputClass = (...args) => compose(
+  inputValidationMixin,
+  changeMixin,
+  normalizeBooleanAttributesMixin,
+  inputEventsDispatchingMixin
+)(createBaseClass(...args));
+
+const componentName$n = getComponentName('boolean-field-internal');
+
+createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
+
+const booleanFieldMixin = (superclass) =>
+    class BooleanFieldMixinClass extends superclass {
+        constructor() {
+            super();
+        }
+
+        init() {
+            super.init?.();
+
+            const template = document.createElement('template');
+            template.innerHTML = `
+				<${componentName$n} 
+					tabindex="-1"
+					slot="input"
+				></${componentName$n}>
+			`;
+
+            this.baseElement.appendChild(template.content.cloneNode(true));
+            this.inputElement = this.shadowRoot.querySelector(componentName$n);
+            this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+            forwardAttrs(this, this.inputElement, {
+                includeAttrs: [
+                    'required',
+                    'full-width',
+                    'size',
+                    'label',
+                    'invalid',
+                ]
+            });
+
+            forwardProps(this.inputElement, this, ['checked']);
+            syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+        }
+    };
+
+var commonStyles = `
+:host {
+	--vaadin-field-default-width: auto;
+	display: inline-flex;
+}
+.wrapper {
+	display: flex;
+}
+
+vaadin-text-field {
+	position: relative;
+	padding: 0;
+	display: inline-flex;
+	align-items: flex-start;
+}
+vaadin-text-field::before {
+	height: 0;
+	margin: 0;
+}
+vaadin-text-field::part(label) {
+    position: absolute;
+    top: 0;
+}
+vaadin-text-field::part(input-field) {
+	padding: 0;
+	background: none;
+	min-height: 0;
+}
+vaadin-text-field::part(input-field)::after {
+    background: none;
+}
+vaadin-text-field[focus-ring]::part(input-field) {
+	box-shadow: none;
+}
+vaadin-text-field[required]::part(required-indicator)::after {
+	content: "*";
+}
+
+vaadin-checkbox [slot="label"] {
+    align-self: flex-start;
+    opacity: 0;
+    padding: 0;
+}
+[required] vaadin-checkbox [slot="label"] {
+	padding-right: 1em;
+}
+vaadin-checkbox::part(checkbox) {
+	margin: 0;
+}
+vaadin-checkbox[focus-ring]::part(checkbox) {
+	box-shadow: none;
+}
+
+descope-boolean-field-internal {
+	-webkit-mask-image: none;
+	min-height: 0;
+	padding: 0;
+}
+`;
+
+const componentName$m = getComponentName('checkbox');
+
+const {
+	host: host$a,
+	component: component$1,
+	checkboxElement,
+	checkboxSurface,
+	checkboxHiddenLabel: checkboxHiddenLabel$1,
+	label: label$7,
+	requiredIndicator: requiredIndicator$5
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+};
+
+const CheckboxClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$a,
+			cursor: component$1,
+
+			// Checkbox
+			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
+			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
+
+			checkboxSize: [
+				{ ...checkboxElement, property: 'width' },
+				{ ...label$7, property: 'margin-left' },
+				{ ...checkboxElement, property: 'height' },
+				{ ...checkboxSurface, property: 'font-size' },
+				{ ...component$1, property: 'font-size' },
+				{ ...label$7, property: 'line-height' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' }
+			],
+
+			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
+			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
+			// Checkmark
+			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
+
+			// Label
+			labelFontSize: [
+				{ ...host$a, property: 'font-size' },
+				{ ...checkboxElement, property: 'font-size' },
+				{ ...label$7, property: 'font-size' },
+				{ ...checkboxHiddenLabel$1, property: 'font-size' }
+			],
+			labelFontWeight: [
+				{ ...label$7, property: 'font-weight' },
+				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
+			],
+			labelMargin: [
+				{ ...label$7, property: 'left' },
+				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
+			],
+			labelTextColor: [
+				{ ...label$7, property: 'color' },
+				{ ...requiredIndicator$5, property: 'color' },
+			],
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	booleanFieldMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: `
+		${commonStyles}
+
+		vaadin-checkbox [slot="label"] {
+			height: 100%;
+			cursor: pointer;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$m
+	})
+);
+
+const componentName$l = getComponentName('switch-toggle');
+
+const {
+	host: host$9,
+	component,
+	checkboxElement: track,
+	checkboxSurface: knob,
+	checkboxHiddenLabel,
+	label: label$6,
+	requiredIndicator: requiredIndicator$4,
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+};
+
+const SwitchToggleClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$9,
+			cursor: [component, checkboxHiddenLabel, track],
+			fontSize: [component, label$6, checkboxHiddenLabel],
+
+			// Track
+			trackBorderWidth: { ...track, property: 'border-width' },
+			trackBorderStyle: { ...track, property: 'border-style' },
+			trackBorderColor: { ...track, property: 'border-color' },
+
+			// Checkbox
+			trackBackgroundColor: { ...track, property: 'background-color' },
+			trackRadius: { ...track, property: 'border-radius' },
+
+			trackWidth: [
+				{ ...track, property: 'width' },
+			],
+			trackHeight: [
+				{ ...knob, property: 'font-size' },
+				{ ...track, property: 'height' }
+			],
+			switchOutlineWidth: { ...track, property: 'outline-width' },
+			switchOutlineOffset: { ...track, property: 'outline-offset' },
+			switchOutlineColor: { ...track, property: 'outline-color' },
+			switchOutlineStyle: { ...track, property: 'outline-style' },
+
+			// Knob
+			knobSize: [
+				{ ...knob, property: 'width' },
+				{ ...knob, property: 'height' },
+			],
+			knobTextColor: { ...knob, property: 'color' },
+			knobRadius: { ...knob, property: 'border-radius' },
+			knobTransition: { ...knob, property: 'transition' },
+			knobColor: { ...knob, property: 'background-color' },
+			knobTopOffset: { ...knob, property: 'top' },
+			knobPosition: { ...knob, property: 'left' },
+
+			// Label
+			labelMargin: [
+				{ ...label$6, property: 'padding-left' },
+				{ ...checkboxHiddenLabel, property: 'padding-left' }
+			],
+			labelLineHeight: [
+				{ ...label$6, property: 'line-height' },
+				{ ...checkboxHiddenLabel, property: 'line-height' }
+			],
+			labelFontWeight: [
+				{ ...label$6, property: 'font-weight' },
+				{ ...checkboxHiddenLabel, property: 'font-weight' }
+			],
+			labelTextColor: [
+				{ ...label$6, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' },
+			],
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	booleanFieldMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+		${commonStyles}
+
+		vaadin-text-field::part(label) {
+			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
+		}
+
+		vaadin-checkbox[active]::part(checkbox) {
+			transform: none;
+		}
+		vaadin-checkbox[checked]::part(checkbox) {
+			background: none;
+		}
+		vaadin-checkbox::part(checkbox)::after {
+			position: absolute;
+			opacity: 1;
+			content: '';
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$l
+	})
+);
+
+const componentName$k = getComponentName('button');
+
+const resetStyles = `
+	:host {
+		display: inline-block;
+	}
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+	}
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
+
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+`;
+
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const { host: host$8, label: label$5 } = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+};
+
+const ButtonClass = compose(
+	createStyleMixin({
+		mappings: {
+			color: {},
+			textDecoration: label$5,
+			fontSize: {},
+			cursor: {},
+			backgroundColor: {},
+			borderRadius: {},
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+			width: host$8,
+			gap: label$5,
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' },
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' },
+			]
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'label', 'suffix'],
+		wrappedEleName: 'vaadin-button',
+		style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$k
+	})
+);
+
+const { color, fontSize } = ButtonClass.cssVarList;
+const loadingIndicatorStyles = `
+	@keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+	:host([loading="true"]) ::before {
+		animation: spin 2s linear infinite;
+		position: absolute;
+		content: '';
+		z-index: 1;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		border-style: solid;
+		color: var(${color});
+		top: calc(50% - (var(${fontSize}) / 2));
+		left: calc(50% - (var(${fontSize}) / 2));
+		border-width: calc(var(${fontSize}) / 10);
+		width: var(${fontSize});
+		height: var(${fontSize});
+	}
+	:host([loading="true"])::part(prefix),
+	:host([loading="true"])::part(label) {
+		visibility: hidden;
+	}
+`;
+
+const componentName$j = getComponentName('loader-linear');
+
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
+	static get componentName() {
+		return componentName$j;
+	}
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes tilt {
+				0% { transform: translateX(0); }
+				50% { transform: translateX(400%); }
+			}
+			:host {
+				position: relative;
+				display: flex;
+			}
+			div::after {
+				content: '';
+				animation-name: tilt;
+				position: absolute;
+				left: 0;
+			}
+
+			:host > div {
+				width: 100%;
+			}
+		</style>
+		<div></div>
+	`;
+	}
+}
+
+const selectors$3 = {
+	root: {},
+	after: { selector: '::after' },
+	host: { selector: () => ':host' }
+};
+
+const { root: root$1, after: after$1, host: host$7 } = selectors$3;
+
+const LoaderLinearClass = compose(
+	createStyleMixin({
+		mappings: {
+			display: root$1,
+			width: host$7,
+			height: [root$1, after$1],
+			borderRadius: [root$1, after$1],
+			surfaceColor: [{ property: 'background-color' }],
+			barColor: [{ ...after$1, property: 'background-color' }],
+			barWidth: { ...after$1, property: 'width' },
+			animationDuration: [root$1, after$1],
+			animationTimingFunction: [root$1, after$1],
+			animationIterationCount: [root$1, after$1]
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderLinear);
+
+const componentName$i = getComponentName('loader-radial');
+
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
+	}
+}
+
+const LoaderRadialClass = compose(
+	createStyleMixin({
+		mappings: {
+			display: {},
+			width: {},
+			height: {},
+			spinnerWidth: { property: 'border-width' },
+			spinnerStyle: { property: 'border-style' },
+			spinnerRadius: { property: 'border-radius' },
+			spinnerTopColor: { property: 'border-top-color' },
+			spinnerBottomColor: { property: 'border-bottom-color' },
+			spinnerRightColor: { property: 'border-right-color' },
+			spinnerLeftColor: { property: 'border-left-color' },
+			color: {},
+			animationDuration: {},
+			animationTimingFunction: {},
+			animationIterationCount: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderRadial);
+
+const componentName$h = getComponentName('container');
+
+class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: hidden;
+			}
+			:host {
+				display: inline-block;
+				overflow: auto;
+			}
+		</style>
+		<slot></slot>
+	`;
+	}
+}
+
+const ContainerClass = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+			flexWrap: {},
+
+			backgroundColor: {},
+			color: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawContainer);
+
+const componentName$g = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > div {
+				display: flex;
+				height: 100%;
+				width: 100%;
+			}
+			:host > div::before,
+			:host > div::after {
+				content: '';
+				flex-grow: 1;
+			}
+
+			descope-text {
+				flex-grow: 0;
+				flex-shrink: 0;
+				min-width: fit-content;
+			}
+
+			:host(:empty) descope-text {
+				display: none;
+			}
+
+			:host([vertical="true"]) div {
+				width: fit-content;
+			}
+
+		</style>
+		<div>
+			<descope-text>
+				<slot></slot>
+			</descope-text>
+		</div>
+	`;
+
+		this.textComponent = this.shadowRoot.querySelector('descope-text');
+
+		forwardAttrs(this, this.textComponent, {
+			includeAttrs: ['mode', 'variant', 'italic']
+		});
+	}
+}
+
+const selectors$2 = {
+	root: { selector: '' },
+	before: { selector: '::before' },
+	after: { selector: '::after' },
+	text: { selector: 'descope-text' },
+	host: { selector: () => ':host' },
+};
+
+const { root, before, after, text: text$1, host: host$6 } = selectors$2;
+
+const DividerClass = compose(
+	createStyleMixin({
+		mappings: {
+			maxTextWidth: { ...text$1, property: 'max-width' },
+			minHeight: root,
+			alignItems: root,
+			alignSelf: root,
+			flexDirection: root,
+			textPadding: { ...text$1, property: 'padding' },
+			width: host$6,
+			padding: host$6,
+			backgroundColor: [before, after],
+			opacity: [before, after],
+			textWidth: { ...text$1, property: 'width' },
+			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
+			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawDivider);
+
+const selectors$1 = {
+	label: '::part(label)',
+	inputWrapper: '::part(input-field)',
+	readOnlyInput: '[readonly]::part(input-field)::after',
+	placeholder: '> input:placeholder-shown',
+	host: () => ':host',
+	input: 'input'
+};
+
+var textFieldMappings = {
+	backgroundColor: { selector: selectors$1.inputWrapper },
+	labelTextColor: { selector: selectors$1.label, property: 'color' },
+	color: { selector: selectors$1.inputWrapper },
+	width: { selector: selectors$1.host },
+	borderColor: [
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderWidth: [
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderStyle: [
+		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$1.readOnlyInput }
+	],
+	borderRadius: { selector: selectors$1.inputWrapper },
+	boxShadow: { selector: selectors$1.inputWrapper },
+
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [{}, { selector: selectors$1.host }],
+
+	height: { selector: selectors$1.inputWrapper },
+	padding: { selector: selectors$1.inputWrapper },
+	margin: { selector: selectors$1.inputWrapper },
+	caretColor: { selector: selectors$1.input },
+	outlineColor: { selector: selectors$1.inputWrapper },
+	outlineStyle: { selector: selectors$1.inputWrapper },
+	outlineWidth: [
+		{ selector: selectors$1.inputWrapper },
+		// we need to make sure there is enough space for the outline
+		{ property: 'padding' }
+	],
+	outlineOffset: { selector: selectors$1.inputWrapper },
+	textAlign: { selector: selectors$1.input },
+	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
+};
+
+const componentName$f = getComponentName('email-field');
+
+let overrides$4 = ``;
+
+const EmailFieldClass = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-email-field',
+		style: () => overrides$4,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$f
+	})
+);
+
+overrides$4 = `
+	:host {
+		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
+	}
+	vaadin-email-field {
+		margin: 0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-email-field::before {
+		height: 0;
+	}
+	vaadin-email-field > input {
+		-webkit-mask-image: none;
+	}
+	vaadin-email-field::part(input-field) {
+		overflow: hidden;
+		padding: 0;
+	}
+	vaadin-email-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-email-field input:-webkit-autofill,
+	vaadin-email-field input:-webkit-autofill::first-line,
+	vaadin-email-field input:-webkit-autofill:hover,
+	vaadin-email-field input:-webkit-autofill:active,
+	vaadin-email-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-email-field[required]::part(required-indicator)::after {
+		content: "*";
+		color: var(${EmailFieldClass.cssVarList.color});
+	}
+	vaadin-email-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+const componentName$e = getComponentName('text');
+
+class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
+	}
+}
+
+const TextClass = compose(
+	createStyleMixin({
+		mappings: {
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
+			width: { selector: () => ':host' },
+			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
+			textAlign: {},
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawText);
+
+const componentName$d = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		:host {
+			display: inline-block;
+		}
+		:host a {
+			display: inline-block;
+		}
+		</style>
+		<div>
+			<a>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</a>
+		</div>
+		`;
+
+		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+			includeAttrs: ['href', 'target', 'tooltip'],
+			mapAttrs: {
+				tooltip: 'title'
+			}
+		});
+
+		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+			includeAttrs: ['mode', 'variant'],
+		});
+	}
+}
+
+const selectors = {
+	host: { selector: () => ':host' },
+	anchor: {},
+	wrapper: { selector: () => ':host > div' },
+	text: { selector: () => TextClass.componentName }
+};
+
+const { anchor, text, host: host$5, wrapper } = selectors;
+
+const LinkClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$5,
+			textAlign: wrapper,
+			color: [anchor, { ...text, property: TextClass.cssVarList.color }],
+			cursor: anchor,
+			borderBottomWidth: anchor,
+			borderBottomStyle: anchor,
+			borderBottomColor: anchor
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLink);
+
+const componentName$c = getComponentName('logo');
+
+let style;
+const getStyle = () => style;
+
+class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div></div>`;
+	}
+}
+
+const LogoClass = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+			fallbackUrl: { property: 'content' },
+			url: { property: 'content' },
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLogo);
+
+style = `
+:host {
+	display: inline-flex;
+}
+:host > div {
+	display: inline-block;
+	content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	margin: auto;
+}
+:host([draggable="true"]) > div {
+	pointer-events: none
+}
+`;
+
+const componentName$b = getComponentName('number-field');
+
+let overrides$3 = ``;
+
+const NumberFieldClass = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-number-field',
+		style: () => overrides$3,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$b
+	})
+);
+
+overrides$3 = `
+	:host {
+		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
+	}
+	vaadin-number-field {
+		margin: 0;
+		padding: 0;
+		width: 100%;
+	}
+	vaadin-number-field > input {
+		-webkit-mask-image: none;
+	}
+	vaadin-number-field::part(input-field) {
+		padding: 0;
+	}
+	vaadin-number-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-number-field input:-webkit-autofill,
+	vaadin-number-field input:-webkit-autofill::first-line,
+	vaadin-number-field input:-webkit-autofill:hover,
+	vaadin-number-field input:-webkit-autofill:active,
+	vaadin-number-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${NumberFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${NumberFieldClass.cssVarList.height}) var(${NumberFieldClass.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-number-field[required]::part(required-indicator)::after {
+		content: "*";
+		color: var(${NumberFieldClass.cssVarList.color});
+	}
+	vaadin-number-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+const componentName$a = getComponentName('passcode-internal');
+
+createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+
+const componentName$9 = getComponentName('text-field');
+
+let overrides$2 = ``;
+
+const observedAttrs = ['type'];
+
+const customMixin$3 = (superclass) =>
+	class TextFieldClass extends superclass {
+		static get observedAttributes() {
+			return observedAttrs.concat(superclass.observedAttributes || []);
+		}
+
+		attributeChangedCallback(attrName, oldVal, newVal) {
+			super.attributeChangeCallback?.(attrName, oldVal, newVal);
+
+			// Vaadin doesn't allow to change the input type attribute.
+			// We need the ability to do that, so we're overriding their
+			// behavior with their private API.
+			// When receiving a `type` attribute, we use their private API
+			// to set it on the input.
+			if (attrName === 'type') {
+				this.baseElement._setType(newVal);
+			}
+		}
+	};
+
+const TextFieldClass = compose(
+	createStyleMixin({
+		mappings: textFieldMappings
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	customMixin$3
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides$2,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$9
+	})
+);
+
+overrides$2 = `
+	:host {
+		display: inline-block;
+		--vaadin-field-default-width: auto;
+		max-width: 100%;
+		min-width: 10em;
+
+	}
+	vaadin-text-field {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+	}
+
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+		padding: 0;
+	}
+	vaadin-text-field[disabled] > input:placeholder-shown,
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-text-field input:-webkit-autofill,
+	vaadin-text-field input:-webkit-autofill::first-line,
+	vaadin-text-field input:-webkit-autofill:hover,
+	vaadin-text-field input:-webkit-autofill:active,
+	vaadin-text-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
+	}
+
+	vaadin-text-field > input {
+		-webkit-mask-image: none;
+		min-height: 0;
+	}
+
+	vaadin-text-field[required]::part(required-indicator)::after {
+		content: "*";
+		color: var(${TextFieldClass.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field)::after {
+		opacity: 0 !important;
+	}
+
+	vaadin-text-field::before {
+		height: unset;
+	}
+`;
+
+const componentName$8 = getComponentName('passcode');
+
+const observedAttributes$1 = [
+	'digits'
+];
+
+const customMixin$2 = (superclass) =>
+	class PasscodeMixinClass extends superclass {
+		static get observedAttributes() {
+			return observedAttributes$1.concat(superclass.observedAttributes || []);
+		}
+
+		constructor() {
+			super();
+		}
+
+		get digits() {
+			return Number.parseInt(this.getAttribute('digits')) || 6;
+		}
+
+		init() {
+			super.init?.();
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+			<${componentName$a} 
+				bordered="true" 
+				name="code" 
+				tabindex="-1"
+				slot="input"
+			></${componentName$a}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$a);
+
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'digits') {
+				this.style.setProperty('--passcode-digits-count', newValue);
+			}
+		}
+	};
+
+const { borderStyle, borderWidth, ...restTextFieldMappings } =
+	textFieldMappings;
+
+const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
+	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+	digitField: { selector: () => TextFieldClass.componentName },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
+};
+
+const textVars$1 = TextFieldClass.cssVarList;
+
+const PasscodeClass = compose(
+	createStyleMixin({
+		mappings: {
+			...restTextFieldMappings,
+			borderColor: { ...digitField, property: textVars$1.borderColor },
+			outlineColor: { ...digitField, property: textVars$1.outlineColor },
+			outlineWidth: [
+				{ ...digitField, property: textVars$1.outlineWidth },
+				// we want to leave enough space to the digits outline, 
+				// ideally, this would be part of the text field
+				{ ...internalWrapper, property: 'padding' }
+			],
+			color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
+			padding: { ...digitField, property: textVars$1.padding },
+			margin: { ...digitField, property: textVars$1.margin },
+			textAlign: { ...digitField, property: textVars$1.textAlign },
+			caretColor: { ...digitField, property: textVars$1.caretColor },
+			digitsGap: { ...internalWrapper, property: 'gap' },
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.outlineColor }
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	customMixin$2
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+				max-width: 100%;
+				min-width: calc(var(--passcode-digits-count) * 2em);
+			}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+			descope-passcode-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				min-height: initial;
+			}
+
+			descope-passcode-internal .wrapper {
+				box-sizing: border-box;
+				min-height: initial;
+				height: 100%;
+				justify-content: space-between;
+			}
+
+			descope-passcode-internal descope-text-field {
+				min-width: 2em;
+				max-width: var(${textVars$1.height});
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field::part(input-field):focus {
+				cursor: text;
+			}
+
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+    	`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$8
+	})
+);
+
+const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
+	get isReadOnly() {
+		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+	}
+
+	init() {
+		// there is an issue in Chrome that input field with type password cannot be D&D
+		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
+		// and return the original type when done
+		this.addEventListener('mousedown', (e) => {
+			if (this.isDraggable & this.isReadOnly) {
+				const inputEle = this.baseElement.querySelector('input');
+				const prevType = inputEle.getAttribute('type');
+
+				inputEle.setAttribute('type', 'text');
+				setTimeout(() => inputEle.focus());
+
+				const onComplete = (e) => {
+					inputEle.setAttribute('type', prevType);
+
+					e.target.removeEventListener('mouseup', onComplete);
+					e.target.removeEventListener('dragend', onComplete);
+				};
+
+				e.target.addEventListener('mouseup', onComplete, { once: true });
+				e.target.addEventListener('dragend', onComplete, { once: true });
+			}
+		});
+
+		super.init?.();
+	}
+};
+
+const componentName$7 = getComponentName('password-field');
+
+const {
+	host: host$4,
+	inputWrapper: inputWrapper$1,
+	inputElement,
+	inputElementPlaceholder,
+	revealButton,
+	revealButtonIcon,
+	revealButtonIconOutline,
+	label: label$3,
+	requiredIndicator: requiredIndicator$2
+} = {
+	host: { selector: () => ':host' },
+	inputWrapper: { selector: '::part(input-field)' },
+	inputElement: { selector: '> input' },
+	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButton: { selector: 'vaadin-password-field-button' },
+	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
+	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+};
+
+const PasswordFieldClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$4,
+			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
+			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
+			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
+			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+
+			revealButtonOutlineBoxShadow: [
+				{
+					...revealButtonIconOutline,
+					property: 'box-shadow'
+				}
+			],
+
+			labelTextColor: [
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$2, property: 'color' }
+			],
+			inputTextColor: [
+				{ ...inputElement, property: 'color' },
+				{ ...revealButtonIcon, property: 'color' }
+			],
+			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+			fontSize: [{}, host$4],
+			height: inputWrapper$1,
+			padding: inputWrapper$1,
+			pointerCursor: [
+				{ ...revealButton, property: 'cursor' },
+				{ ...label$3, property: 'cursor' },
+				{ ...requiredIndicator$2, property: 'cursor' }
+			],
+			outlineColor: inputWrapper$1,
+			outlineStyle: inputWrapper$1,
+			outlineWidth: [
+				inputWrapper$1,
+				// we need to make sure there is enough space for the outline
+				{ property: 'padding' }
+			],
+			backgroundColor: inputWrapper$1
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	passwordDraggableMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-password-field',
+		style: `
+			:host {
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
+			}
+			vaadin-password-field {
+				width: 100%;
+				box-sizing: border-box;
+			}
+			vaadin-password-field::part(input-field) {
+				padding: 0;
+			}
+			vaadin-password-field > input {
+				min-height: 0;
+				-webkit-mask-image: none;
+			}
+			vaadin-password-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+			vaadin-password-field::before {
+				height: initial;
+			}
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}	
+			vaadin-password-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			[readonly] vaadin-password-field-button {
+				pointer-events: none;
+			}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$7
+	})
+);
+
+const componentName$6 = getComponentName('text-area');
+
+const {
+	host: host$3,
+	placeholder: placeholder$1,
+	input: input$1,
+	textArea,
+	label: label$2,
+	requiredIndicator: requiredIndicator$1
+} = {
+	host: { selector: () => ':host' },
+	textArea: { selector: '> textarea' },
+	label: { selector: '::part(label)' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: 'textarea:placeholder-shown' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+};
+
+let overrides$1 = ``;
+
+const TextAreaClass = compose(
+	createStyleMixin({
+		mappings: {
+			fontSize: [host$3, textArea],
+			resize: textArea,
+			color: textArea,
+			cursor: {},
+			labelColor: [
+				{ ...label$2, property: 'color' },
+				{ ...requiredIndicator$1, property: 'color' }
+			],
+			placeholderColor: { ...placeholder$1, property: 'color' },
+			width: host$3,
+			backgroundColor: input$1,
+			borderWidth: input$1,
+			borderStyle: input$1,
+			borderColor: input$1,
+			borderRadius: input$1,
+			outlineWidth: [input$1, { property: 'padding' }],
+			outlineStyle: input$1,
+			outlineColor: input$1,
+			outlineOffset: input$1,
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-area',
+		style: () => overrides$1,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$6
+	})
+);
+
+overrides$1 = `
+	:host {
+		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
+	}
+	vaadin-text-area {
+		margin: 0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-text-area > label,
+	vaadin-text-area::part(input-field) {
+		padding: 0;
+	}
+	vaadin-text-area[required]::part(required-indicator)::after {
+		content: "*";
+	}
+	vaadin-text-area[disabled] > textarea:placeholder-shown,
+	vaadin-text-area[readonly] > textarea:placeholder-shown {
+		opacity: 1;
+	}
+`;
+
+const observedAttributes = ['src', 'alt'];
+
+const componentName$5 = getComponentName('image');
+
+const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
+class RawImage extends BaseClass {
+	static get observedAttributes() {
+		return observedAttributes.concat(BaseClass.observedAttributes || []);
+	}
+
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > img {
+				width: 100%;
+				height: 100%
+			}
+			:host {
+				display: inline-flex;
+			}
+		</style>
+		<img/>
+	`;
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.();
+
+		forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes });
+	}
+}
+
+const ImageClass = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+		}
+	}),
+	draggableMixin,
+)(RawImage);
+
+var CountryCodes = [
+	{
+		name: 'Afghanistan',
+		dialCode: '+93',
+		code: 'AF'
+	},
+	{
+		name: 'Aland Islands',
+		dialCode: '+358',
+		code: 'AX'
+	},
+	{
+		name: 'Albania',
+		dialCode: '+355',
+		code: 'AL'
+	},
+	{
+		name: 'Algeria',
+		dialCode: '+213',
+		code: 'DZ'
+	},
+	{
+		name: 'AmericanSamoa',
+		dialCode: '+1684',
+		code: 'AS'
+	},
+	{
+		name: 'Andorra',
+		dialCode: '+376',
+		code: 'AD'
+	},
+	{
+		name: 'Angola',
+		dialCode: '+244',
+		code: 'AO'
+	},
+	{
+		name: 'Anguilla',
+		dialCode: '+1264',
+		code: 'AI'
+	},
+	{
+		name: 'Antarctica',
+		dialCode: '+672',
+		code: 'AQ'
+	},
+	{
+		name: 'Antigua and Barbuda',
+		dialCode: '+1268',
+		code: 'AG'
+	},
+	{
+		name: 'Argentina',
+		dialCode: '+54',
+		code: 'AR'
+	},
+	{
+		name: 'Armenia',
+		dialCode: '+374',
+		code: 'AM'
+	},
+	{
+		name: 'Aruba',
+		dialCode: '+297',
+		code: 'AW'
+	},
+	{
+		name: 'Australia',
+		dialCode: '+61',
+		code: 'AU'
+	},
+	{
+		name: 'Austria',
+		dialCode: '+43',
+		code: 'AT'
+	},
+	{
+		name: 'Azerbaijan',
+		dialCode: '+994',
+		code: 'AZ'
+	},
+	{
+		name: 'Bahamas',
+		dialCode: '+1242',
+		code: 'BS'
+	},
+	{
+		name: 'Bahrain',
+		dialCode: '+973',
+		code: 'BH'
+	},
+	{
+		name: 'Bangladesh',
+		dialCode: '+880',
+		code: 'BD'
+	},
+	{
+		name: 'Barbados',
+		dialCode: '+1246',
+		code: 'BB'
+	},
+	{
+		name: 'Belarus',
+		dialCode: '+375',
+		code: 'BY'
+	},
+	{
+		name: 'Belgium',
+		dialCode: '+32',
+		code: 'BE'
+	},
+	{
+		name: 'Belize',
+		dialCode: '+501',
+		code: 'BZ'
+	},
+	{
+		name: 'Benin',
+		dialCode: '+229',
+		code: 'BJ'
+	},
+	{
+		name: 'Bermuda',
+		dialCode: '+1441',
+		code: 'BM'
+	},
+	{
+		name: 'Bhutan',
+		dialCode: '+975',
+		code: 'BT'
+	},
+	{
+		name: 'Bolivia, Plurinational State of',
+		dialCode: '+591',
+		code: 'BO'
+	},
+	{
+		name: 'Bosnia and Herzegovina',
+		dialCode: '+387',
+		code: 'BA'
+	},
+	{
+		name: 'Botswana',
+		dialCode: '+267',
+		code: 'BW'
+	},
+	{
+		name: 'Brazil',
+		dialCode: '+55',
+		code: 'BR'
+	},
+	{
+		name: 'British Indian Ocean Territory',
+		dialCode: '+246',
+		code: 'IO'
+	},
+	{
+		name: 'Brunei Darussalam',
+		dialCode: '+673',
+		code: 'BN'
+	},
+	{
+		name: 'Bulgaria',
+		dialCode: '+359',
+		code: 'BG'
+	},
+	{
+		name: 'Burkina Faso',
+		dialCode: '+226',
+		code: 'BF'
+	},
+	{
+		name: 'Burundi',
+		dialCode: '+257',
+		code: 'BI'
+	},
+	{
+		name: 'Cambodia',
+		dialCode: '+855',
+		code: 'KH'
+	},
+	{
+		name: 'Cameroon',
+		dialCode: '+237',
+		code: 'CM'
+	},
+	{
+		name: 'Canada',
+		dialCode: '+1',
+		code: 'CA'
+	},
+	{
+		name: 'Cape Verde',
+		dialCode: '+238',
+		code: 'CV'
+	},
+	{
+		name: 'Cayman Islands',
+		dialCode: '+345',
+		code: 'KY'
+	},
+	{
+		name: 'Central African Republic',
+		dialCode: '+236',
+		code: 'CF'
+	},
+	{
+		name: 'Chad',
+		dialCode: '+235',
+		code: 'TD'
+	},
+	{
+		name: 'Chile',
+		dialCode: '+56',
+		code: 'CL'
+	},
+	{
+		name: 'China',
+		dialCode: '+86',
+		code: 'CN'
+	},
+	{
+		name: 'Christmas Island',
+		dialCode: '+61',
+		code: 'CX'
+	},
+	{
+		name: 'Cocos (Keeling) Islands',
+		dialCode: '+61',
+		code: 'CC'
+	},
+	{
+		name: 'Colombia',
+		dialCode: '+57',
+		code: 'CO'
+	},
+	{
+		name: 'Comoros',
+		dialCode: '+269',
+		code: 'KM'
+	},
+	{
+		name: 'Congo',
+		dialCode: '+242',
+		code: 'CG'
+	},
+	{
+		name: 'Congo, The Democratic Republic of the Congo',
+		dialCode: '+243',
+		code: 'CD'
+	},
+	{
+		name: 'Cook Islands',
+		dialCode: '+682',
+		code: 'CK'
+	},
+	{
+		name: 'Costa Rica',
+		dialCode: '+506',
+		code: 'CR'
+	},
+	{
+		name: "Cote d'Ivoire",
+		dialCode: '+225',
+		code: 'CI'
+	},
+	{
+		name: 'Croatia',
+		dialCode: '+385',
+		code: 'HR'
+	},
+	{
+		name: 'Cuba',
+		dialCode: '+53',
+		code: 'CU'
+	},
+	{
+		name: 'Cyprus',
+		dialCode: '+357',
+		code: 'CY'
+	},
+	{
+		name: 'Czech Republic',
+		dialCode: '+420',
+		code: 'CZ'
+	},
+	{
+		name: 'Denmark',
+		dialCode: '+45',
+		code: 'DK'
+	},
+	{
+		name: 'Djibouti',
+		dialCode: '+253',
+		code: 'DJ'
+	},
+	{
+		name: 'Dominica',
+		dialCode: '+1767',
+		code: 'DM'
+	},
+	{
+		name: 'Dominican Republic',
+		dialCode: '+1849',
+		code: 'DO'
+	},
+	{
+		name: 'Ecuador',
+		dialCode: '+593',
+		code: 'EC'
+	},
+	{
+		name: 'Egypt',
+		dialCode: '+20',
+		code: 'EG'
+	},
+	{
+		name: 'El Salvador',
+		dialCode: '+503',
+		code: 'SV'
+	},
+	{
+		name: 'Equatorial Guinea',
+		dialCode: '+240',
+		code: 'GQ'
+	},
+	{
+		name: 'Eritrea',
+		dialCode: '+291',
+		code: 'ER'
+	},
+	{
+		name: 'Estonia',
+		dialCode: '+372',
+		code: 'EE'
+	},
+	{
+		name: 'Ethiopia',
+		dialCode: '+251',
+		code: 'ET'
+	},
+	{
+		name: 'Falkland Islands (Malvinas)',
+		dialCode: '+500',
+		code: 'FK'
+	},
+	{
+		name: 'Faroe Islands',
+		dialCode: '+298',
+		code: 'FO'
+	},
+	{
+		name: 'Fiji',
+		dialCode: '+679',
+		code: 'FJ'
+	},
+	{
+		name: 'Finland',
+		dialCode: '+358',
+		code: 'FI'
+	},
+	{
+		name: 'France',
+		dialCode: '+33',
+		code: 'FR'
+	},
+	{
+		name: 'French Guiana',
+		dialCode: '+594',
+		code: 'GF'
+	},
+	{
+		name: 'French Polynesia',
+		dialCode: '+689',
+		code: 'PF'
+	},
+	{
+		name: 'Gabon',
+		dialCode: '+241',
+		code: 'GA'
+	},
+	{
+		name: 'Gambia',
+		dialCode: '+220',
+		code: 'GM'
+	},
+	{
+		name: 'Georgia',
+		dialCode: '+995',
+		code: 'GE'
+	},
+	{
+		name: 'Germany',
+		dialCode: '+49',
+		code: 'DE'
+	},
+	{
+		name: 'Ghana',
+		dialCode: '+233',
+		code: 'GH'
+	},
+	{
+		name: 'Gibraltar',
+		dialCode: '+350',
+		code: 'GI'
+	},
+	{
+		name: 'Greece',
+		dialCode: '+30',
+		code: 'GR'
+	},
+	{
+		name: 'Greenland',
+		dialCode: '+299',
+		code: 'GL'
+	},
+	{
+		name: 'Grenada',
+		dialCode: '+1473',
+		code: 'GD'
+	},
+	{
+		name: 'Guadeloupe',
+		dialCode: '+590',
+		code: 'GP'
+	},
+	{
+		name: 'Guam',
+		dialCode: '+1671',
+		code: 'GU'
+	},
+	{
+		name: 'Guatemala',
+		dialCode: '+502',
+		code: 'GT'
+	},
+	{
+		name: 'Guernsey',
+		dialCode: '+44',
+		code: 'GG'
+	},
+	{
+		name: 'Guinea',
+		dialCode: '+224',
+		code: 'GN'
+	},
+	{
+		name: 'Guinea-Bissau',
+		dialCode: '+245',
+		code: 'GW'
+	},
+	{
+		name: 'Guyana',
+		dialCode: '+595',
+		code: 'GY'
+	},
+	{
+		name: 'Haiti',
+		dialCode: '+509',
+		code: 'HT'
+	},
+	{
+		name: 'Holy See (Vatican City State)',
+		dialCode: '+379',
+		code: 'VA'
+	},
+	{
+		name: 'Honduras',
+		dialCode: '+504',
+		code: 'HN'
+	},
+	{
+		name: 'Hong Kong',
+		dialCode: '+852',
+		code: 'HK'
+	},
+	{
+		name: 'Hungary',
+		dialCode: '+36',
+		code: 'HU'
+	},
+	{
+		name: 'Iceland',
+		dialCode: '+354',
+		code: 'IS'
+	},
+	{
+		name: 'India',
+		dialCode: '+91',
+		code: 'IN'
+	},
+	{
+		name: 'Indonesia',
+		dialCode: '+62',
+		code: 'ID'
+	},
+	{
+		name: 'Iran, Islamic Republic of Persian Gulf',
+		dialCode: '+98',
+		code: 'IR'
+	},
+	{
+		name: 'Iraq',
+		dialCode: '+964',
+		code: 'IQ'
+	},
+	{
+		name: 'Ireland',
+		dialCode: '+353',
+		code: 'IE'
+	},
+	{
+		name: 'Isle of Man',
+		dialCode: '+44',
+		code: 'IM'
+	},
+	{
+		name: 'Israel',
+		dialCode: '+972',
+		code: 'IL'
+	},
+	{
+		name: 'Italy',
+		dialCode: '+39',
+		code: 'IT'
+	},
+	{
+		name: 'Jamaica',
+		dialCode: '+1876',
+		code: 'JM'
+	},
+	{
+		name: 'Japan',
+		dialCode: '+81',
+		code: 'JP'
+	},
+	{
+		name: 'Jersey',
+		dialCode: '+44',
+		code: 'JE'
+	},
+	{
+		name: 'Jordan',
+		dialCode: '+962',
+		code: 'JO'
+	},
+	{
+		name: 'Kazakhstan',
+		dialCode: '+77',
+		code: 'KZ'
+	},
+	{
+		name: 'Kenya',
+		dialCode: '+254',
+		code: 'KE'
+	},
+	{
+		name: 'Kiribati',
+		dialCode: '+686',
+		code: 'KI'
+	},
+	{
+		name: "Korea, Democratic People's Republic of Korea",
+		dialCode: '+850',
+		code: 'KP'
+	},
+	{
+		name: 'Korea, Republic of South Korea',
+		dialCode: '+82',
+		code: 'KR'
+	},
+	{
+		name: 'Kuwait',
+		dialCode: '+965',
+		code: 'KW'
+	},
+	{
+		name: 'Kyrgyzstan',
+		dialCode: '+996',
+		code: 'KG'
+	},
+	{
+		name: 'Laos',
+		dialCode: '+856',
+		code: 'LA'
+	},
+	{
+		name: 'Latvia',
+		dialCode: '+371',
+		code: 'LV'
+	},
+	{
+		name: 'Lebanon',
+		dialCode: '+961',
+		code: 'LB'
+	},
+	{
+		name: 'Lesotho',
+		dialCode: '+266',
+		code: 'LS'
+	},
+	{
+		name: 'Liberia',
+		dialCode: '+231',
+		code: 'LR'
+	},
+	{
+		name: 'Libyan Arab Jamahiriya',
+		dialCode: '+218',
+		code: 'LY'
+	},
+	{
+		name: 'Liechtenstein',
+		dialCode: '+423',
+		code: 'LI'
+	},
+	{
+		name: 'Lithuania',
+		dialCode: '+370',
+		code: 'LT'
+	},
+	{
+		name: 'Luxembourg',
+		dialCode: '+352',
+		code: 'LU'
+	},
+	{
+		name: 'Macao',
+		dialCode: '+853',
+		code: 'MO'
+	},
+	{
+		name: 'Macedonia',
+		dialCode: '+389',
+		code: 'MK'
+	},
+	{
+		name: 'Madagascar',
+		dialCode: '+261',
+		code: 'MG'
+	},
+	{
+		name: 'Malawi',
+		dialCode: '+265',
+		code: 'MW'
+	},
+	{
+		name: 'Malaysia',
+		dialCode: '+60',
+		code: 'MY'
+	},
+	{
+		name: 'Maldives',
+		dialCode: '+960',
+		code: 'MV'
+	},
+	{
+		name: 'Mali',
+		dialCode: '+223',
+		code: 'ML'
+	},
+	{
+		name: 'Malta',
+		dialCode: '+356',
+		code: 'MT'
+	},
+	{
+		name: 'Marshall Islands',
+		dialCode: '+692',
+		code: 'MH'
+	},
+	{
+		name: 'Martinique',
+		dialCode: '+596',
+		code: 'MQ'
+	},
+	{
+		name: 'Mauritania',
+		dialCode: '+222',
+		code: 'MR'
+	},
+	{
+		name: 'Mauritius',
+		dialCode: '+230',
+		code: 'MU'
+	},
+	{
+		name: 'Mayotte',
+		dialCode: '+262',
+		code: 'YT'
+	},
+	{
+		name: 'Mexico',
+		dialCode: '+52',
+		code: 'MX'
+	},
+	{
+		name: 'Micronesia, Federated States of Micronesia',
+		dialCode: '+691',
+		code: 'FM'
+	},
+	{
+		name: 'Moldova',
+		dialCode: '+373',
+		code: 'MD'
+	},
+	{
+		name: 'Monaco',
+		dialCode: '+377',
+		code: 'MC'
+	},
+	{
+		name: 'Mongolia',
+		dialCode: '+976',
+		code: 'MN'
+	},
+	{
+		name: 'Montenegro',
+		dialCode: '+382',
+		code: 'ME'
+	},
+	{
+		name: 'Montserrat',
+		dialCode: '+1664',
+		code: 'MS'
+	},
+	{
+		name: 'Morocco',
+		dialCode: '+212',
+		code: 'MA'
+	},
+	{
+		name: 'Mozambique',
+		dialCode: '+258',
+		code: 'MZ'
+	},
+	{
+		name: 'Myanmar',
+		dialCode: '+95',
+		code: 'MM'
+	},
+	{
+		name: 'Namibia',
+		dialCode: '+264',
+		code: 'NA'
+	},
+	{
+		name: 'Nauru',
+		dialCode: '+674',
+		code: 'NR'
+	},
+	{
+		name: 'Nepal',
+		dialCode: '+977',
+		code: 'NP'
+	},
+	{
+		name: 'Netherlands',
+		dialCode: '+31',
+		code: 'NL'
+	},
+	{
+		name: 'Netherlands Antilles',
+		dialCode: '+599',
+		code: 'AN'
+	},
+	{
+		name: 'New Caledonia',
+		dialCode: '+687',
+		code: 'NC'
+	},
+	{
+		name: 'New Zealand',
+		dialCode: '+64',
+		code: 'NZ'
+	},
+	{
+		name: 'Nicaragua',
+		dialCode: '+505',
+		code: 'NI'
+	},
+	{
+		name: 'Niger',
+		dialCode: '+227',
+		code: 'NE'
+	},
+	{
+		name: 'Nigeria',
+		dialCode: '+234',
+		code: 'NG'
+	},
+	{
+		name: 'Niue',
+		dialCode: '+683',
+		code: 'NU'
+	},
+	{
+		name: 'Norfolk Island',
+		dialCode: '+672',
+		code: 'NF'
+	},
+	{
+		name: 'Northern Mariana Islands',
+		dialCode: '+1670',
+		code: 'MP'
+	},
+	{
+		name: 'Norway',
+		dialCode: '+47',
+		code: 'NO'
+	},
+	{
+		name: 'Oman',
+		dialCode: '+968',
+		code: 'OM'
+	},
+	{
+		name: 'Pakistan',
+		dialCode: '+92',
+		code: 'PK'
+	},
+	{
+		name: 'Palau',
+		dialCode: '+680',
+		code: 'PW'
+	},
+	{
+		name: 'Palestinian Territory, Occupied',
+		dialCode: '+970',
+		code: 'PS'
+	},
+	{
+		name: 'Panama',
+		dialCode: '+507',
+		code: 'PA'
+	},
+	{
+		name: 'Papua New Guinea',
+		dialCode: '+675',
+		code: 'PG'
+	},
+	{
+		name: 'Paraguay',
+		dialCode: '+595',
+		code: 'PY'
+	},
+	{
+		name: 'Peru',
+		dialCode: '+51',
+		code: 'PE'
+	},
+	{
+		name: 'Philippines',
+		dialCode: '+63',
+		code: 'PH'
+	},
+	{
+		name: 'Pitcairn',
+		dialCode: '+872',
+		code: 'PN'
+	},
+	{
+		name: 'Poland',
+		dialCode: '+48',
+		code: 'PL'
+	},
+	{
+		name: 'Portugal',
+		dialCode: '+351',
+		code: 'PT'
+	},
+	{
+		name: 'Puerto Rico',
+		dialCode: '+1939',
+		code: 'PR'
+	},
+	{
+		name: 'Qatar',
+		dialCode: '+974',
+		code: 'QA'
+	},
+	{
+		name: 'Romania',
+		dialCode: '+40',
+		code: 'RO'
+	},
+	{
+		name: 'Russia',
+		dialCode: '+7',
+		code: 'RU'
+	},
+	{
+		name: 'Rwanda',
+		dialCode: '+250',
+		code: 'RW'
+	},
+	{
+		name: 'Reunion',
+		dialCode: '+262',
+		code: 'RE'
+	},
+	{
+		name: 'Saint Barthelemy',
+		dialCode: '+590',
+		code: 'BL'
+	},
+	{
+		name: 'Saint Helena, Ascension and Tristan Da Cunha',
+		dialCode: '+290',
+		code: 'SH'
+	},
+	{
+		name: 'Saint Kitts and Nevis',
+		dialCode: '+1869',
+		code: 'KN'
+	},
+	{
+		name: 'Saint Lucia',
+		dialCode: '+1758',
+		code: 'LC'
+	},
+	{
+		name: 'Saint Martin',
+		dialCode: '+590',
+		code: 'MF'
+	},
+	{
+		name: 'Saint Pierre and Miquelon',
+		dialCode: '+508',
+		code: 'PM'
+	},
+	{
+		name: 'Saint Vincent and the Grenadines',
+		dialCode: '+1784',
+		code: 'VC'
+	},
+	{
+		name: 'Samoa',
+		dialCode: '+685',
+		code: 'WS'
+	},
+	{
+		name: 'San Marino',
+		dialCode: '+378',
+		code: 'SM'
+	},
+	{
+		name: 'Sao Tome and Principe',
+		dialCode: '+239',
+		code: 'ST'
+	},
+	{
+		name: 'Saudi Arabia',
+		dialCode: '+966',
+		code: 'SA'
+	},
+	{
+		name: 'Senegal',
+		dialCode: '+221',
+		code: 'SN'
+	},
+	{
+		name: 'Serbia',
+		dialCode: '+381',
+		code: 'RS'
+	},
+	{
+		name: 'Seychelles',
+		dialCode: '+248',
+		code: 'SC'
+	},
+	{
+		name: 'Sierra Leone',
+		dialCode: '+232',
+		code: 'SL'
+	},
+	{
+		name: 'Singapore',
+		dialCode: '+65',
+		code: 'SG'
+	},
+	{
+		name: 'Slovakia',
+		dialCode: '+421',
+		code: 'SK'
+	},
+	{
+		name: 'Slovenia',
+		dialCode: '+386',
+		code: 'SI'
+	},
+	{
+		name: 'Solomon Islands',
+		dialCode: '+677',
+		code: 'SB'
+	},
+	{
+		name: 'Somalia',
+		dialCode: '+252',
+		code: 'SO'
+	},
+	{
+		name: 'South Africa',
+		dialCode: '+27',
+		code: 'ZA'
+	},
+	{
+		name: 'South Sudan',
+		dialCode: '+211',
+		code: 'SS'
+	},
+	{
+		name: 'South Georgia and the South Sandwich Islands',
+		dialCode: '+500',
+		code: 'GS'
+	},
+	{
+		name: 'Spain',
+		dialCode: '+34',
+		code: 'ES'
+	},
+	{
+		name: 'Sri Lanka',
+		dialCode: '+94',
+		code: 'LK'
+	},
+	{
+		name: 'Sudan',
+		dialCode: '+249',
+		code: 'SD'
+	},
+	{
+		name: 'Suriname',
+		dialCode: '+597',
+		code: 'SR'
+	},
+	{
+		name: 'Svalbard and Jan Mayen',
+		dialCode: '+47',
+		code: 'SJ'
+	},
+	{
+		name: 'Swaziland',
+		dialCode: '+268',
+		code: 'SZ'
+	},
+	{
+		name: 'Sweden',
+		dialCode: '+46',
+		code: 'SE'
+	},
+	{
+		name: 'Switzerland',
+		dialCode: '+41',
+		code: 'CH'
+	},
+	{
+		name: 'Syrian Arab Republic',
+		dialCode: '+963',
+		code: 'SY'
+	},
+	{
+		name: 'Taiwan',
+		dialCode: '+886',
+		code: 'TW'
+	},
+	{
+		name: 'Tajikistan',
+		dialCode: '+992',
+		code: 'TJ'
+	},
+	{
+		name: 'Tanzania, United Republic of Tanzania',
+		dialCode: '+255',
+		code: 'TZ'
+	},
+	{
+		name: 'Thailand',
+		dialCode: '+66',
+		code: 'TH'
+	},
+	{
+		name: 'Timor-Leste',
+		dialCode: '+670',
+		code: 'TL'
+	},
+	{
+		name: 'Togo',
+		dialCode: '+228',
+		code: 'TG'
+	},
+	{
+		name: 'Tokelau',
+		dialCode: '+690',
+		code: 'TK'
+	},
+	{
+		name: 'Tonga',
+		dialCode: '+676',
+		code: 'TO'
+	},
+	{
+		name: 'Trinidad and Tobago',
+		dialCode: '+1868',
+		code: 'TT'
+	},
+	{
+		name: 'Tunisia',
+		dialCode: '+216',
+		code: 'TN'
+	},
+	{
+		name: 'Turkey',
+		dialCode: '+90',
+		code: 'TR'
+	},
+	{
+		name: 'Turkmenistan',
+		dialCode: '+993',
+		code: 'TM'
+	},
+	{
+		name: 'Turks and Caicos Islands',
+		dialCode: '+1649',
+		code: 'TC'
+	},
+	{
+		name: 'Tuvalu',
+		dialCode: '+688',
+		code: 'TV'
+	},
+	{
+		name: 'Uganda',
+		dialCode: '+256',
+		code: 'UG'
+	},
+	{
+		name: 'Ukraine',
+		dialCode: '+380',
+		code: 'UA'
+	},
+	{
+		name: 'United Arab Emirates',
+		dialCode: '+971',
+		code: 'AE'
+	},
+	{
+		name: 'United Kingdom',
+		dialCode: '+44',
+		code: 'GB'
+	},
+	{
+		name: 'United States',
+		dialCode: '+1',
+		code: 'US'
+	},
+	{
+		name: 'Uruguay',
+		dialCode: '+598',
+		code: 'UY'
+	},
+	{
+		name: 'Uzbekistan',
+		dialCode: '+998',
+		code: 'UZ'
+	},
+	{
+		name: 'Vanuatu',
+		dialCode: '+678',
+		code: 'VU'
+	},
+	{
+		name: 'Venezuela, Bolivarian Republic of Venezuela',
+		dialCode: '+58',
+		code: 'VE'
+	},
+	{
+		name: 'Vietnam',
+		dialCode: '+84',
+		code: 'VN'
+	},
+	{
+		name: 'Virgin Islands, British',
+		dialCode: '+1284',
+		code: 'VG'
+	},
+	{
+		name: 'Virgin Islands, U.S.',
+		dialCode: '+1340',
+		code: 'VI'
+	},
+	{
+		name: 'Wallis and Futuna',
+		dialCode: '+681',
+		code: 'WF'
+	},
+	{
+		name: 'Yemen',
+		dialCode: '+967',
+		code: 'YE'
+	},
+	{
+		name: 'Zambia',
+		dialCode: '+260',
+		code: 'ZM'
+	},
+	{
+		name: 'Zimbabwe',
+		dialCode: '+263',
+		code: 'ZW'
+	}
+].sort((a, b) => (a.name < b.name ? -1 : 1));
+
+const componentName$4 = getComponentName('phone-field-internal');
+
+createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
+
+const componentName$3 = getComponentName('combo-box');
+
+
+const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
+	constructor() {
+		super();
+	}
+
+	// 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 baseElement = this.shadowRoot.querySelector(this.baseSelector);
+		const items = Array.from(this.children);
+
+		// we want the data-name attribute to be accessible as an object attribute
+		if (items.length) {
+			items.forEach((node) => {
+				Object.defineProperty(node, 'data-name', {
+					value: node.getAttribute('data-name'),
+				});
+				Object.defineProperty(node, 'data-id', {
+					value: node.getAttribute('data-id')
+				});
+			});
+
+			baseElement.items = items;
+
+			baseElement.renderer = (root, combo, model) => {
+				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-combo-box-overlay');
+
+		overlay._attachOverlay = function () { this.bringToFront(); };
+		overlay._detachOverlay = function () { };
+		overlay._enterModalState = function () { };
+	}
+
+	init() {
+		super.init?.();
+
+		this.#overrideOverlaySettings();
+		observeChildren(this, this.#onChildrenChange.bind(this));
+	}
+};
+
+const {
+	host: host$2,
+	input,
+	placeholder,
+	toggle,
+	label: label$1
+} = {
+	host: { selector: () => ':host' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: '> input:placeholder-shown' },
+	toggle: { selector: '::part(toggle-button)' },
+	label: { selector: '::part(label)' }
+};
+
+// const { slotted, selected } = {
+// 	slotted: { selector: () => '::slotted(*)' },
+// 	selected: { selector: () => '::slotted([selected])' }
+// }
+
+const ComboBoxClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$2,
+			height: input,
+			padding: input,
+
+			inputBackgroundColor: { ...input, property: 'background-color' },
+			boxShadow: input,
+
+			borderColor: input,
+			borderWidth: input,
+			borderStyle: input,
+			borderRadius: input,
+
+			color: [label$1, input],
+
+			// we apply font-size also on the host so we can set its width with em
+			fontSize: [{}, host$2],
+
+			placeholderColor: { ...placeholder, property: 'color' },
+
+			toggleCursor: { ...toggle, property: 'cursor' },
+			toggleColor: { ...toggle, property: '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: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+			overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
+		}
+	}),
+	draggableMixin,
+	portalMixin({
+		name: 'overlay',
+		selector: '',
+		mappings: {
+			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+			// TODO: this mapping doesn't work, needs fixing.
+			cursor: { selector: 'vaadin-combo-box-item' },
+		},
+		forward: {
+			include: false,
+			attributes: ['size']
+		},
+	}),
+	proxyInputMixin,
+	componentNameValidationMixin,
+	ComboBoxMixin
+)(
+	createProxy({
+		slots: ['prefix'],
+		wrappedEleName: 'vaadin-combo-box',
+		style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		vaadin-combo-box {
+			padding: 0;
+		}
+		vaadin-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+		}
+		vaadin-combo-box::part(input-field) {
+			-webkit-mask-image: none;
+			border-radius: 0;
+			padding: 0;
+		}
+		vaadin-combo-box::part(input-field)::after {
+			opacity: 0;
+		}
+		vaadin-combo-box[readonly]::part(input-field)::after {
+			border: none;
+		}
+		vaadin-combo-box[readonly] > input:placeholder-shown {
+			opacity: 1;
+		}		
+		`,
+		// 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.
+		excludeAttrsSync: ['tabindex', 'size'],
+		componentName: componentName$3,
+		includeForwardProps: ['items', 'renderer', 'selectedItem']
+	})
+);
+
+const textVars = TextFieldClass.cssVarList;
+const comboVars = ComboBoxClass.cssVarList;
+
+const componentName$2 = getComponentName('phone-field');
+
+const customMixin$1 = (superclass) =>
+	class PhoneFieldMixinClass extends superclass {
+		static get CountryCodes() {
+			return CountryCodes;
+		}
+
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+				<${componentName$4} 
+					tabindex="-1"
+					slot="input"
+				></${componentName$4}>
+      		`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$4);
+
+			forwardAttrs(this.shadowRoot.host, this.inputElement, {
+				includeAttrs: [
+					'size',
+					'bordered',
+					'invalid',
+					'minlength',
+					'maxlength',
+					'default-code',
+					'country-input-placeholder',
+					'phone-input-placeholder',
+				]
+			});
+		}
+	};
+
+const {
+	host: host$1,
+	inputWrapper,
+	countryCodeInput,
+	phoneInput,
+	label,
+	requiredIndicator,
+	separator
+} = {
+	host: { selector: () => ':host' },
+	inputWrapper: { selector: '::part(input-field)' },
+	phoneInput: { selector: () => 'descope-text-field' },
+	countryCodeInput: { selector: () => 'descope-combo-box' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	separator: { selector: 'descope-phone-field-internal .separator' }
+};
+
+const PhoneFieldClass = compose(
+	createStyleMixin({
+		mappings: {
+			fontSize: [
+				host$1, inputWrapper,
+				{
+					selector: TextFieldClass.componentName,
+					property: TextFieldClass.cssVarList.fontSize
+				},
+				{
+					selector: ComboBoxClass.componentName,
+					property: ComboBoxClass.cssVarList.fontSize
+				}
+			],
+
+			componentWidth: { ...host$1, property: 'width' },
+
+			wrapperBorderStyle: [
+				{ ...inputWrapper, property: 'border-style' },
+				{ ...separator, property: 'border-left-style' }
+			],
+			wrapperBorderWidth: [
+				{ ...inputWrapper, property: 'border-width' },
+				{ ...separator, property: 'border-left-width' }
+			],
+			wrapperBorderColor: [
+				{ ...inputWrapper, property: 'border-color' },
+				{ ...separator, property: 'border-left-color' }
+			],
+			wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
+
+			inputHeight: { ...inputWrapper, property: 'height' },
+
+			countryCodeInputWidth: { ...countryCodeInput, property: comboVars.width },
+			countryCodeDropdownWidth: {
+				...countryCodeInput,
+				property: '--vaadin-combo-box-overlay-width'
+			},
+
+			phoneInputWidth: { ...phoneInput, property: 'width' },
+
+			color: [
+				label,
+				requiredIndicator,
+				{ ...phoneInput, property: textVars.color },
+				{ ...countryCodeInput, property: comboVars.color }
+			],
+
+			placeholderColor: {
+				...phoneInput,
+				property: textVars.placeholderColor
+			},
+
+			overlayItemBackgroundColor: {
+				selector: 'descope-combo-box',
+				property: comboVars.overlayItemBackgroundColor
+			},
+
+			outlineStyle: inputWrapper,
+			outlineWidth: [inputWrapper, { property: 'padding' }],
+			outlineColor: inputWrapper,
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin$1,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+				max-width: 100%;
+				min-width: 15em;
+			}
+			div {
+				display: inline-flex;
+			}
+			vaadin-text-field {
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+			}
+			vaadin-text-field[focus-ring]::part(input-field) {
+				box-shadow: none;
+			}
+			vaadin-text-field::before {
+				height: 0;
+			}
+			vaadin-text-field::part(input-field) {
+				padding: 0;
+				min-height: 0;
+				background: transparent;
+				overflow: hidden;
+			}
+			descope-phone-field-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				min-height: 0;
+				width: 100%;
+				height: 100%;
+			}
+			descope-phone-field-internal > div {
+				width: 100%;
+				height: 100%;
+			}
+			descope-phone-field-internal .separator {
+				flex: 0;
+				border: none;
+			}
+			descope-combo-box {
+				flex-shrink: 0;
+				height: 100%;
+				${comboVars.borderWidth}: 0;
+			}
+			descope-text-field {
+				flex-grow: 1;
+				min-height: 0;
+				height: 100%;
+				${textVars.outlineWidth}: 0;
+				${textVars.borderWidth}: 0;
+				${textVars.borderRadius}: 0;
+			}
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+			vaadin-text-field::part(input-field)::after {
+				border: none;
+			}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$2
+	})
+);
+
+const componentName$1 = getComponentName('new-password-internal');
+
+const componentName = getComponentName('new-password');
+
+const customMixin = (superclass) =>
+	class NewPasswordMixinClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+			<${componentName$1} 
+				name="new-password" 
+				tabindex="-1"
+				slot="input"
+			></${componentName$1}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$1);
+
+			forwardAttrs(this, this.inputElement, {
+				includeAttrs: [
+					'password-label',
+					'password-placeholder',
+					'confirm-label',
+					'confirm-placeholder',
+					'full-width',
+					'size',
+					'bordered',
+					'label',
+					'has-confirm',
+					'invalid',
+					'readonly',
+					'draggable'
+				]
+			});
+		}
+	};
+
+const { host, internalInputsWrapper } = {
+	host: { selector: () => ':host' },
+	internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' }
+};
+
+const NewPasswordClass = compose(
+	createStyleMixin({
+		mappings: {
+			fontSize: [
+				host,
+				{
+					selector: PasswordFieldClass.componentName,
+					property: PasswordFieldClass.cssVarList.fontSize
+				}
+			],
+			componentWidth: { ...host, property: 'width' },
+			requiredContent: { ...host, property: 'content' },
+			inputsGap: { ...internalInputsWrapper, property: 'gap' },
+		}
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+const overrides = `
+	:host {
+		--vaadin-field-default-width: auto;
+		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
+	}
+	vaadin-text-field {
+		padding: 0;
+		width: 100%;
+		height: 100%;
+	}
+	vaadin-text-field::part(input-field) {
+		min-height: 0;
+		background: transparent;
+		overflow: hidden;
+		box-shadow: none;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field)::after {
+		background: transparent;
+		opacity: 0;
+	}
+	descope-new-password-internal {
+		-webkit-mask-image: none;
+		min-height: 0;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+	}
+	descope-new-password-internal > .wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+   		flex-direction: column;
+	}
+	descope-password-field {
+		display: block;
+		width: 100%;
+	}
+	descope-new-password-internal vaadin-password-field::before {
+		height: initial;
+	}
+`;
+
+exports.ButtonClass = ButtonClass;
+exports.CheckboxClass = CheckboxClass;
+exports.ContainerClass = ContainerClass;
+exports.DividerClass = DividerClass;
+exports.EmailFieldClass = EmailFieldClass;
+exports.ImageClass = ImageClass;
+exports.LinkClass = LinkClass;
+exports.LoaderLinearClass = LoaderLinearClass;
+exports.LoaderRadialClass = LoaderRadialClass;
+exports.LogoClass = LogoClass;
+exports.NewPasswordClass = NewPasswordClass;
+exports.NumberFieldClass = NumberFieldClass;
+exports.PasscodeClass = PasscodeClass;
+exports.PasswordFieldClass = PasswordFieldClass;
+exports.PhoneFieldClass = PhoneFieldClass;
+exports.SwitchToggleClass = SwitchToggleClass;
+exports.TextAreaClass = TextAreaClass;
+exports.TextClass = TextClass;
+exports.TextFieldClass = TextFieldClass;
 exports.componentsThemeManager = componentsThemeManager;
 exports.createComponentsTheme = createComponentsTheme;
 exports.createHelperVars = createHelperVars;
+exports.genColor = genColor;
+exports.genColors = genColors;
 exports.getThemeRefs = getThemeRefs;
 exports.globalsThemeToStyle = globalsThemeToStyle;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;