@descope/web-components-ui 1.0.73 → 1.0.75

package/dist/index.esm.js

@@ -6,6 +6,7 @@ import '@vaadin/number-field';
 import '@vaadin/text-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
+import '@vaadin/combo-box';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
@@ -563,7 +564,9 @@ const observedAttributes$2 = [
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
-  patternMismatch: 'data-errormessage-pattern-mismatch'
+  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() {
@@ -593,6 +596,14 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     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) {
     switch (true) {
       case flags.valueMissing:
@@ -601,6 +612,12 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
       case flags.patternMismatch || flags.typeMismatch:
         return this.getAttribute(errorAttributes.patternMismatch) ||
           this.defaultErrorMsgPatternMismatch
+      case flags.tooShort:
+        return this.getAttribute(errorAttributes.tooShort) ||
+          this.defaultErrorMsgTooShort
+      case flags.tooLong:
+        return this.getAttribute(errorAttributes.tooLong) ||
+          this.defaultErrorMsgTooLong
       case flags.customError:
         return this.validationMessage
       default:
@@ -668,7 +685,10 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
     this.addEventListener('invalid', (e) => e.stopPropagation());
     this.addEventListener('input', this.#setValidity);
 
-    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());
   }
 };
 
@@ -896,7 +916,12 @@ const sanitizeSelector = (selector) => selector.replace(/[^\w\s]/gi, '');
 
 const getDomNode = (maybeDomNode) => maybeDomNode.host || maybeDomNode;
 
-const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
+const portalMixin = ({
+  name,
+  selector,
+  mappings = {},
+  forward: { attributes = [], include = true } = {}
+}) => (superclass) => {
   const eleDisplayName = name || sanitizeSelector(selector);
 
   const BaseClass = createStyleMixin({
@@ -939,7 +964,7 @@ const portalMixin = ({ name, selector, mappings = {} }) => (superclass) => {
 
     init() {
       super.init?.();
-      forwardAttrs(this, this.#portalEle, { excludeAttrs: ['hover'] });
+      forwardAttrs(this, this.#portalEle, { [include ? 'includeAttrs' : 'excludeAttrs']: attributes });
 
       this.#handleHoverAttribute();
     }
@@ -997,7 +1022,7 @@ const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclas
   }
 };
 
-const componentName$j = getComponentName('button');
+const componentName$l = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -1020,7 +1045,7 @@ const iconStyles = `
 	}
 `;
 
-const { label: label$1, host: host$3 } = {
+const { label: label$2, host: host$4 } = {
 	label: { selector: '::part(label)' },
 	host: { selector: () => ':host' }
 };
@@ -1030,16 +1055,16 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: label$1,
+			color: label$2,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: host$3,
+			width: host$4,
 			cursor: {},
-			padding: label$1,
-			textDecoration: label$1
+			padding: label$2,
+			textDecoration: label$2
 		}
 	}),
 	draggableMixin,
@@ -1051,7 +1076,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$j
+		componentName: componentName$l
 	})
 );
 
@@ -1088,9 +1113,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$j, Button);
+customElements.define(componentName$l, Button);
 
-const componentName$i = getComponentName('checkbox');
+const componentName$k = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -1116,17 +1141,17 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$i
+		componentName: componentName$k
 	})
 );
 
-customElements.define(componentName$i, Checkbox);
+customElements.define(componentName$k, Checkbox);
 
-const componentName$h = getComponentName('loader-linear');
+const componentName$j = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
 	static get componentName() {
-		return componentName$h;
+		return componentName$j;
 	}
 	constructor() {
 		super();
@@ -1157,19 +1182,19 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$h,
 	}
 }
 
-const selectors$5 = {
+const selectors$4 = {
 	root: {},
 	after: { selector: '::after' },
 	host: { selector: () => ':host' }
 };
 
-const { root: root$1, after: after$1, host: host$2 } = selectors$5;
+const { root: root$1, after: after$1, host: host$3 } = selectors$4;
 
 const LoaderLinear = compose(
 	createStyleMixin({
 		mappings: {
 			display: root$1,
-			width: host$2,
+			width: host$3,
 			height: [root$1, after$1],
 			borderRadius: [root$1, after$1],
 			surfaceColor: [{ property: 'background-color' }],
@@ -1184,11 +1209,11 @@ const LoaderLinear = compose(
 	componentNameValidationMixin
 )(RawLoaderLinear);
 
-customElements.define(componentName$h, LoaderLinear);
+customElements.define(componentName$j, LoaderLinear);
 
-const componentName$g = getComponentName('loader-radial');
+const componentName$i = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1234,11 +1259,11 @@ const LoaderRadial = compose(
 	componentNameValidationMixin
 )(RawLoaderRadial);
 
-customElements.define(componentName$g, LoaderRadial);
+customElements.define(componentName$i, LoaderRadial);
 
-const componentName$f = getComponentName('container');
+const componentName$h = getComponentName('container');
 
-class RawContainer extends createBaseClass({componentName: componentName$f, baseSelector: ':host > slot'}) {
+class RawContainer extends createBaseClass({componentName: componentName$h, baseSelector: ':host > slot'}) {
 	constructor() {
 		super();
 
@@ -1294,26 +1319,26 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$f, Container);
+customElements.define(componentName$h, Container);
 
-const componentName$e = getComponentName('date-picker');
+const componentName$g = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$e,
+		componentName: componentName$g,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$e, DatePicker);
+customElements.define(componentName$g, DatePicker);
 
-const componentName$d = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
+const componentName$f = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1359,7 +1384,7 @@ class RawDivider extends createBaseClass({ componentName: componentName$d, baseS
 	}
 }
 
-const selectors$4 = {
+const selectors$3 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
@@ -1367,7 +1392,7 @@ const selectors$4 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$1 } = selectors$4;
+const { root, before, after, text: text$2, host: host$2 } = selectors$3;
 
 const Divider = compose(
 	createStyleMixin({
@@ -1378,8 +1403,8 @@ const Divider = compose(
 			alignSelf: root,
 			flexDirection: root,
 			textPadding: { ...text$2, property: 'padding' },
-			width: host$1,
-			padding: host$1,
+			width: host$2,
+			padding: host$2,
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...text$2, property: 'width' },
@@ -1391,9 +1416,9 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$c = getComponentName('text');
+const componentName$e = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
 	constructor() {
 		super();
 
@@ -1435,11 +1460,11 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$c, Text);
+customElements.define(componentName$e, Text);
 
-customElements.define(componentName$d, Divider);
+customElements.define(componentName$f, Divider);
 
-const selectors$3 = {
+const selectors$2 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -1448,33 +1473,36 @@ const selectors$3 = {
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$3.input },
-	color: { selector: selectors$3.input },
-	width: { selector: selectors$3.host },
+	backgroundColor: { selector: selectors$2.input },
+	color: { selector: selectors$2.input },
+	width: { selector: selectors$2.host },
 	borderColor: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$3.input },
-		{ selector: selectors$3.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$3.input },
-	boxShadow: { selector: selectors$3.input },
-	fontSize: {},
-	height: { selector: selectors$3.input },
-	padding: { selector: selectors$3.input },
-	outline: { selector: selectors$3.input },
-	outlineOffset: { selector: selectors$3.input },
+	borderRadius: { selector: selectors$2.input },
+	boxShadow: { selector: selectors$2.input },
+
+	// we apply font-size also on the host so we can set its width with em
+	fontSize: [{}, { selector: selectors$2.host }],
+
+	height: { selector: selectors$2.input },
+	padding: { selector: selectors$2.input },
+	outline: { selector: selectors$2.input },
+	outlineOffset: { selector: selectors$2.input },
 
-	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
+	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
 };
 
-const componentName$b = getComponentName('email-field');
+const componentName$d = getComponentName('email-field');
 
 let overrides$5 = ``;
 
@@ -1493,7 +1521,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
+		componentName: componentName$d
 	})
 );
 
@@ -1537,10 +1565,10 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$b, EmailField);
+customElements.define(componentName$d, EmailField);
 
-const componentName$a = getComponentName('link');
-class RawLink extends createBaseClass({ componentName: componentName$a, baseSelector: ':host a' }) {
+const componentName$c = getComponentName('link');
+class RawLink extends createBaseClass({ componentName: componentName$c, baseSelector: ':host a' }) {
 	constructor() {
 		super();
 		document.createElement('template');
@@ -1576,19 +1604,19 @@ class RawLink extends createBaseClass({ componentName: componentName$a, baseSele
 	}
 }
 
-const selectors$2 = {
+const selectors$1 = {
 	host: { selector: () => 'host' },
 	anchor: {},
 	wrapper: {selector: () => ':host > div'},
 	text: { selector: () => Text.componentName }
 };
 
-const { anchor, text: text$1, host, wrapper } = selectors$2;
+const { anchor, text: text$1, host: host$1, wrapper } = selectors$1;
 
 const Link = compose(
 	createStyleMixin({
 		mappings: {
-			width: host,
+			width: host$1,
 			textAlign: wrapper,
 			color: [anchor, { ...text$1, property: Text.cssVarList.color }],
 			cursor: anchor,
@@ -1601,14 +1629,14 @@ const Link = compose(
 	componentNameValidationMixin
 )(RawLink);
 
-customElements.define(componentName$a, Link);
+customElements.define(componentName$c, Link);
 
-const componentName$9 = getComponentName('logo');
+const componentName$b = getComponentName('logo');
 
 let style;
 const getStyle = () => style;
 
-class RawLogo extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
+class RawLogo extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
 	constructor() {
 		super();
 
@@ -1641,14 +1669,14 @@ style = `
 	display: inline-block;
 	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
 }
-:host[draggable="true"] > div {
+:host([draggable="true"]) > div {
 	pointer-events: none
 }
 `;
 
-customElements.define(componentName$9, Logo);
+customElements.define(componentName$b, Logo);
 
-const componentName$8 = getComponentName('number-field');
+const componentName$a = getComponentName('number-field');
 
 let overrides$4 = ``;
 
@@ -1667,7 +1695,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$a
 	})
 );
 
@@ -1711,7 +1739,7 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$8, NumberField);
+customElements.define(componentName$a, NumberField);
 
 const createBaseInputClass = (...args) => compose(
   focusMixin,
@@ -1734,7 +1762,7 @@ const getSanitizedCharacters = (str) => {
 	return [...pin]; // creating array of chars
 };
 
-const componentName$7 = getComponentName('passcode-internal');
+const componentName$9 = getComponentName('passcode-internal');
 
 const observedAttributes$1 = [
 	'disabled',
@@ -1744,15 +1772,15 @@ const observedAttributes$1 = [
 	'readonly'
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass {
+class PasscodeInternal extends BaseInputClass$1 {
 	static get observedAttributes() {
-		return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
+		return observedAttributes$1.concat(BaseInputClass$1.observedAttributes || []);
 	}
 
 	static get componentName() {
-		return componentName$7;
+		return componentName$9;
 	}
 
 	#dispatchBlur = createDispatchEvent.bind(this, 'blur')
@@ -1930,38 +1958,67 @@ class PasscodeInternal extends BaseInputClass {
 	}
 }
 
-const componentName$6 = getComponentName('text-field');
+const componentName$8 = getComponentName('text-field');
 
 let overrides$3 = ``;
 
+const observedAttrs = ['type'];
+
+const customMixin$2 = (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 TextField = compose(
 	createStyleMixin({
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	customMixin$2
 )(
 	createProxy({
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$8
 	})
 );
 
 overrides$3 = `
 	:host {
 		display: inline-block;
+		--vaadin-field-default-width: auto;
 	}
-
 	vaadin-text-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
+		height: 100%;
+	}
+	vaadin-text-field input {
+		min-height: 0;
 	}
 	vaadin-text-field::part(input-field) {
 		overflow: hidden;
+		padding: 0;
 	}
 	vaadin-text-field[readonly] > input:placeholder-shown {
 		opacity: 1;
@@ -1976,7 +2033,6 @@ overrides$3 = `
 	}
 	vaadin-text-field > label,
 	vaadin-text-field::part(input-field) {
-		cursor: pointer;
 		color: var(${TextField.cssVarList.color});
 	}
 	vaadin-text-field::part(input-field):focus {
@@ -1992,10 +2048,10 @@ overrides$3 = `
 	}
 `;
 
-const componentName$5 = getComponentName('passcode');
+const componentName$7 = getComponentName('passcode');
 
-const customMixin = (superclass) =>
-	class DraggableMixinClass extends superclass {
+const customMixin$1 = (superclass) =>
+	class PasscodeClass extends superclass {
 		constructor() {
 			super();
 		}
@@ -2009,46 +2065,43 @@ const customMixin = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-			<${componentName$7} 
+			<${componentName$9} 
 				bordered="true" 
 				name="code" 
 				tabindex="-1"
 				slot="input"
-			></${componentName$7}>
+			></${componentName$9}>
 			`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$7);
-
-			forwardAttrs(this.shadowRoot.host, this.inputElement, { includeAttrs: ['required', 'pattern'] });
-
+			this.inputElement = this.shadowRoot.querySelector(componentName$9);
 		}
 	};
 
 const { borderStyle, borderWidth, ...restTextFieldMappings } =
 	textFieldMappings;
 
-const { digitField, label, requiredIndicator } = {
+const { digitField, label: label$1, requiredIndicator: requiredIndicator$1 } = {
 	digitField: { selector: () => TextField.componentName },
 	label: { selector: '> label' },
 	requiredIndicator: { selector: '[required]::part(required-indicator)::after' }
 };
 
-const textVars = TextField.cssVarList;
+const textVars$1 = TextField.cssVarList;
 
 const Passcode = compose(
 	createStyleMixin({
 		mappings: {
 			...restTextFieldMappings,
-			borderColor: { ...digitField, property: textVars.borderColor },
-			color: [restTextFieldMappings.color, label, requiredIndicator],
+			borderColor: { ...digitField, property: textVars$1.borderColor },
+			color: [restTextFieldMappings.color, label$1, requiredIndicator$1],
 		},
 	}),
 	draggableMixin,
 	proxyInputMixin,
 	componentNameValidationMixin,
-	customMixin
+	customMixin$1
 )(
 	createProxy({
 		slots: [],
@@ -2094,17 +2147,17 @@ const Passcode = compose(
 		}
     `,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$5
+		componentName: componentName$7
 	})
 );
 
-customElements.define(componentName$6, TextField);
+customElements.define(componentName$8, TextField);
 
-customElements.define(componentName$7, PasscodeInternal);
+customElements.define(componentName$9, PasscodeInternal);
 
-customElements.define(componentName$5, Passcode);
+customElements.define(componentName$7, Passcode);
 
-const componentName$4 = getComponentName('password-field');
+const componentName$6 = getComponentName('password-field');
 
 let overrides$2 = ``;
 
@@ -2129,7 +2182,7 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
+		componentName: componentName$6
 	})
 );
 
@@ -2173,9 +2226,9 @@ overrides$2 = `
 	}
 `;
 
-customElements.define(componentName$4, PasswordField);
+customElements.define(componentName$6, PasswordField);
 
-const componentName$3 = getComponentName('switch-toggle');
+const componentName$5 = getComponentName('switch-toggle');
 
 let overrides$1 = ``;
 
@@ -2195,7 +2248,7 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$5
 	})
 );
 
@@ -2253,11 +2306,11 @@ overrides$1 = `
 	}
 `;
 
-customElements.define(componentName$3, SwitchToggle);
+customElements.define(componentName$5, SwitchToggle);
 
-const componentName$2 = getComponentName('text-area');
+const componentName$4 = getComponentName('text-area');
 
-const selectors$1 = {
+const selectors = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	required: '::part(required-indicator)::after',
@@ -2270,16 +2323,16 @@ const TextArea = compose(
 	createStyleMixin({
 		mappings: {
 			resize: { selector: '> textarea' },
-			color: { selector: selectors$1.label },
+			color: { selector: selectors.label },
 			cursor: {},
-			width: { selector: selectors$1.host },
-			backgroundColor: { selector: selectors$1.input },
-			borderWidth: { selector: selectors$1.input },
-			borderStyle: { selector: selectors$1.input },
-			borderColor: { selector: selectors$1.input },
-			borderRadius: { selector: selectors$1.input },
-			outline: { selector: selectors$1.input },
-			outlineOffset: { selector: selectors$1.input }
+			width: { selector: selectors.host },
+			backgroundColor: { selector: selectors.input },
+			borderWidth: { selector: selectors.input },
+			borderStyle: { selector: selectors.input },
+			borderColor: { selector: selectors.input },
+			borderRadius: { selector: selectors.input },
+			outline: { selector: selectors.input },
+			outlineOffset: { selector: selectors.input }
 		}
 	}),
 	draggableMixin,
@@ -2291,7 +2344,7 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
+		componentName: componentName$4
 	})
 );
 
@@ -2317,13 +2370,13 @@ overrides = `
 	}	
 `;
 
-customElements.define(componentName$2, TextArea);
+customElements.define(componentName$4, TextArea);
 
 const observedAttributes = ['src', 'alt'];
 
-const componentName$1 = getComponentName('image');
+const componentName$3 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$1, baseSelector: ':host > img' });
+const BaseClass = createBaseClass({ componentName: componentName$3, baseSelector: ':host > img' });
 class RawImage extends BaseClass {
 	static get observedAttributes() {
 		return observedAttributes.concat(BaseClass.observedAttributes || []);
@@ -2363,160 +2416,1922 @@ const Image = compose(
 	draggableMixin,
 )(RawImage);
 
-customElements.define(componentName$1, Image);
-
-const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
-
-const transformTheme = (theme, path, getTransformation) => {
-	return Object.entries(theme).reduce((acc, [key, val]) => {
-		if (val?.constructor !== Object) {
-			return merge(acc, getTransformation(path.concat(key), val));
-		} else {
-			return merge(acc, transformTheme(val, [...path, key], getTransformation));
-		}
-	}, {});
-};
+customElements.define(componentName$3, Image);
 
-const stringifyArray = (strArr) =>
-	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+const componentName$2 = getComponentName('combo-box');
 
-const themeToCSSVarsObj = (theme) =>
-	transformTheme(theme, [], (path, val) => ({
-		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
-	}));
 
-const getThemeRefs = (theme, prefix) =>
-	transformTheme(theme, [], (path) =>
-		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
-	);
+const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
+	constructor() {
+		super();
+	}
 
-const globalsThemeToStyle = (theme, themeName = '') => `
-*[data-theme="${themeName}"] {
-	${Object.entries(themeToCSSVarsObj(theme)).reduce(
-	(acc, entry) => (acc += `${entry.join(':')};\n`),
-	''
-)}
-}
-`;
+	// 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);
 
-const componentsThemeToStyleObj = (componentsTheme) =>
-	transformTheme(componentsTheme, [], (path, val) => {
-		const [component, ...restPath] = path;
-		const property = restPath.pop();
-		const componentName = getComponentName(component);
+		// 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')
+				});
+			});
 
-		// we need a support for portal components theme (e.g. overlay)
-		// this allows us to generate those themes under different sections
-		// if the theme has root level attribute that starts with #
-		// we are generating a new theme
-		let themeName = BASE_THEME_SECTION;
+			baseElement.items = items;
 
-		if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-			themeName = restPath.shift();
+			baseElement.renderer = (root, combo, model) => {
+				root.innerHTML = model.item.outerHTML;
+			};
 		}
+	}
 
-		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
-		// starts with underscore -> attribute selector
-		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_'))
-				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
-
-			const nextSection = restPath[idx + 1];
-
-			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
-				console.error(
-					'theme generator',
-					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
-				);
-				return acc;
-			}
-
-			return (acc += `[${kebabCase(section)}="${restPath
-				.splice(idx + 1, 1)
-				.join('')}"]`);
-		}, '');
-
-		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
-
-		return {
-			[componentName]: {
-				[themeName]: {
-					[selector]: {
-						[property]: val
-					}
-				}
-			}
-		};
-	});
+	// 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 () { };
+	}
 
-const createComponentsTheme = (componentsTheme) => {
-	const styleObj = componentsThemeToStyleObj(componentsTheme);
+	connectedCallback() {
+		super.connectedCallback?.();
 
-	return Object.keys(styleObj).reduce(
-		(acc, componentName) => {
-			const componentThemes = styleObj[componentName];
+		this.#overrideOverlaySettings();
+		observeChildren(this, this.#onChildrenChange.bind(this));
+	}
+};
 
-			return Object.assign(acc, {
-				[componentName]: Object.keys(componentThemes)
-					.reduce((acc, theme) =>
-						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
-						{})
-			})
-		},
-		{}
-	);
+const { host, input, placeholder, toggle } = {
+	host: { selector: () => ':host' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: '> input:placeholder-shown' },
+	toggle: { selector: '::part(toggle-button)' }
 };
 
-const componentsThemeToStyle = (componentsTheme) =>
-	Object.entries(componentsTheme).reduce(
-		(acc, [selector, vars]) =>
-		(acc += `${selector} { \n${Object.entries(
-			vars
-		)
-			.map(([key, val]) => `${key}: ${val}`)
-			.join(';\n')} \n}\n\n`),
-		''
-	);
+// const { slotted, selected } = {
+// 	slotted: { selector: () => '::slotted(*)' },
+// 	selected: { selector: () => '::slotted([selected])' }
+// }
 
-const themeToStyle = ({ globals, components }, themeName) => ({
-	globals: globalsThemeToStyle(globals, themeName),
-	components: createComponentsTheme(components)
-});
+const ComboBox = compose(
+	createStyleMixin({
+		mappings: {
+			width: host,
+			height: input,
+			padding: input,
 
-const useVar = (varName) => `var(${varName})`;
+			backgroundColor: input,
+			boxShadow: input,
 
-const createHelperVars = (theme, prefix) => {
-	const res = transformTheme(theme, [], (path, value) => {
-		const modifiedPath = [...path];
-		const property = modifiedPath.splice(-1);
-		const varName = getCssVarName(prefix, property);
+			borderColor: input,
+			borderWidth: input,
+			borderStyle: input,
+			borderRadius: input,
 
-		const vars = { [property]: varName };
-		const theme = set({}, [...modifiedPath, varName], value);
-		const useVars = { [property]: useVar(varName) };
+			color: input,
 
-		return { theme, useVars, vars };
-	});
+			// we apply font-size also on the host so we can set its width with em
+			fontSize: [{}, host],
 
-	return [res.theme, res.useVars, res.vars];
-};
+			placeholderColor: { ...placeholder, property: 'color' },
 
-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();
-};
+			toggleCursor: { ...toggle, property: 'cursor' },
+			toggleColor: { ...toggle, property: 'color' },
 
-const genColor = (color) => {
-	const mainColor = new Color(color.main || 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: () => ComboBox.cssVarList.overlay.backgroundColor },
+			overlayBorder: { property: () => ComboBox.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;
+		}
+		`,
+		// 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$2,
+		includeForwardProps: ['items', 'renderer']
+	})
+);
 
-	return {
-		main: mainColor.hex(),
+customElements.define(componentName$2, ComboBox);
+
+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));
+
+// We use JSDelivr in order to fetch the images as image file from this library (svg-country-flags)
+// This reduces our bundle size, and we use it as a static remote resource.
+const getCountryFlag = (code) =>
+	`https://cdn.jsdelivr.net/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;
+
+const comboBoxItem = ({ code, dialCode, name: country }) => (`
+	<div
+		style="display:flex; flex-direction: column;"
+		data-id="${code}"
+		data-name="${code} ${dialCode} ${country}"
+	>
+		<div>
+			<span>
+				<img src="${getCountryFlag(code)}" width="20"/>
+			</span>
+			<span>${country}</span>
+		</div>
+		<div>
+			<span>${code}</span>
+			<span>${dialCode}</span>
+		</div>
+	</div>
+`);
+
+const componentName$1 = getComponentName('phone-field-internal');
+
+const commonAttrs = [
+	'disabled',
+	'size',
+	'bordered',
+	'invalid',
+];
+const countryAttrs = ['country-input-placeholder', 'default-code'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
+const mapAttrs = {
+	'country-input-placeholder': 'placeholder',
+	'phone-input-placeholder': 'placeholder',
+};
+
+const inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs);
+
+const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: 'div' });
+
+class PhoneFieldInternal extends BaseInputClass {
+	static get observedAttributes() {
+		return [].concat(
+			BaseInputClass.observedAttributes || [],
+			inputRelatedAttrs,
+		);
+	}
+
+	#dispatchBlur = createDispatchEvent.bind(this, 'blur');
+	#dispatchFocus = createDispatchEvent.bind(this, 'focus');
+
+	constructor() {
+		super();
+
+		this.innerHTML = `
+        <div>
+            <descope-combo-box
+				item-label-path="data-name"
+				item-value-path="data-id"
+			>
+			${CountryCodes.map(item => comboBoxItem(item)).join('')}
+			</descope-combo-box>
+			<div class="separator"></div>
+            <descope-text-field type="tel"></descope-text-field>
+         </div>`;
+
+		this.countryCodeInput = this.querySelector('descope-combo-box');
+		this.phoneNumberInput = this.querySelector('descope-text-field');
+		this.inputs = [
+			this.countryCodeInput,
+			this.phoneNumberInput
+		];
+	}
+
+	get value() {
+		return this.inputs.map(({ value }) => value).join('-');
+	}
+
+	set value(val) {
+		const [countryCode = '', phoneNumber = ''] = val.split('-');
+		this.countryCodeInput.value = countryCode;
+		this.phoneNumberInput.value = phoneNumber;
+	}
+
+	get phoneNumberValue() {
+		return this.phoneNumberInput.value;
+	}
+
+	get countryCodeValue() {
+		return this.countryCodeInput.shadowRoot.querySelector('input').value;
+	}
+
+	get minLength() {
+		return parseInt(this.getAttribute('minlength'), 10) || 0;
+	}
+
+	getValidity() {
+		const hasCode = this.countryCodeInput.value;
+		const hasPhone = this.phoneNumberInput.value;
+		const emptyValue = !hasCode || !hasPhone;
+		const hasMinPhoneLength = this.phoneNumberInput.value.length && this.phoneNumberInput.value.length < this.minLength;
+
+		if (this.isRequired && emptyValue) {
+			return { valueMissing: true };
+		}
+		if (hasMinPhoneLength) {
+			return { tooShort: true };
+		}
+		if ((hasCode && !hasPhone) || (!hasCode && hasPhone)) {
+			return { valueMissing: true };
+		}
+		return {}
+	};
+
+	init() {
+		super.init();
+		this.initInputs();
+		this.setComboBoxDescriptor();
+	}
+
+	handleDefaultCountryCode(countryCode) {
+		if (!this.countryCodeInput.value) {
+			const countryData = this.countryCodeInput.items.find(c => c['data-id'] === countryCode)?.['data-name'];
+
+			// When replacing the input component (inserting internal component into text-field) -
+			// Vaadin resets the input's value. We use setTimeout in order to make sure this happens
+			// after the reset.
+			if (countryData) {
+				setTimeout(() => this.countryCodeInput.value = countryData);
+			}
+		}
+	}
+
+	// We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
+	// field that it searches the value, and the finaly display value of the input. We want to search ALL
+	// the values (so we made a field with all the values), but display ONLY the dial code, so we added
+	// this setter, which does that.
+	setComboBoxDescriptor() {
+		const comboBox = this.countryCodeInput;
+		const input = comboBox.shadowRoot.querySelector('input');
+		const valueDescriptor = Object.getOwnPropertyDescriptor(
+			input.constructor.prototype,
+			'value'
+		);
+		Object.defineProperties(input, {
+			value: {
+				...valueDescriptor,
+				set(val) {
+					if (!comboBox.items?.length) {
+						return;
+					}
+
+					const [_code, dialCode] = val.split(' ');
+
+					if (val === this.value) {
+						return;
+					}
+
+					valueDescriptor.set.call(this, dialCode || '');
+				}
+			}
+		});
+	}
+
+	initInputs() {
+		let prevVal = this.value;
+		let blurTimerId;
+
+		// Sanitize phone input value to filter everything but digits
+		this.phoneNumberInput.addEventListener('input', (e) => {
+			const telDigitsRegExp = /^\d$/;
+			const sanitizedInput = e.target.value
+				.split('')
+				.filter(char => telDigitsRegExp.test(char))
+				.join('');
+			e.target.value = sanitizedInput;
+		});
+
+		this.inputs.forEach(input => {
+			input.addEventListener('blur', (e) => {
+				e.stopImmediatePropagation();
+				blurTimerId = setTimeout(() => {
+					blurTimerId = null;
+					this.#dispatchBlur();
+				});
+			});
+
+			input.addEventListener('focus', (e) => {
+				e.stopImmediatePropagation();
+				clearTimeout(blurTimerId);
+				if (!blurTimerId) {
+					this.#dispatchFocus();
+				}
+			});
+
+			input.addEventListener('input', (e) => {
+				if (prevVal === this.value) {
+					e.stopImmediatePropagation();
+				}
+			});
+		});
+	}
+
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback(attrName, oldValue, newValue);
+
+		if (oldValue !== newValue) {
+			if (attrName === 'default-code' && newValue) {
+				this.handleDefaultCountryCode(newValue);
+			}
+			else if (inputRelatedAttrs.includes(attrName)) {
+				const attr = mapAttrs[attrName] || attrName;
+
+				if (commonAttrs.includes(attrName)) {
+					this.inputs.forEach(input => input.setAttribute(attr, newValue));
+				}
+				else if (countryAttrs.includes(attrName)) {
+					this.countryCodeInput.setAttribute(attr, newValue);
+				}
+				else if (phoneAttrs.includes(attrName)) {
+					this.phoneNumberInput.setAttribute(attr, newValue);
+				}
+			}
+		}
+	}
+}
+
+customElements.define(componentName$1, PhoneFieldInternal);
+
+const textVars = TextField.cssVarList;
+const comboVars = ComboBox.cssVarList;
+
+const componentName = getComponentName('phone-field');
+
+const customMixin = (superclass) =>
+	class PhoneFieldClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+				<${componentName$1} 
+					tabindex="-1"
+					slot="input"
+				></${componentName$1}>
+      		`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$1);
+
+			forwardAttrs(this.shadowRoot.host, this.inputElement, {
+				includeAttrs: [
+					'size',
+					'bordered',
+					'invalid',
+					'minlength',
+					'maxlength',
+					'default-code',
+					'country-input-placeholder',
+					'phone-input-placeholder',
+				]
+			});
+		}
+	};
+
+const {
+	inputWrapper,
+	countryCodeInput,
+	phoneInput,
+	label,
+	requiredIndicator,
+	separator
+} = {
+	inputWrapper: { selector: '::part(input-field)' },
+	phoneInput: { selector: () => 'descope-text-field' },
+	countryCodeInput: { selector: () => 'descope-combo-box' },
+	label: { selector: '> label' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	separator: { selector: 'descope-phone-field-internal .separator' }
+};
+
+const PhoneField = compose(
+	createStyleMixin({
+		mappings: {
+			componentWidth: { selector: () => ':host', 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],
+
+			placeholderColor: {
+				...phoneInput,
+				property: textVars.placeholderColor
+			},
+
+			overlayItemBackgroundColor: {
+				selector: 'descope-combo-box',
+				property: comboVars.overlayItemBackgroundColor
+			},
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	customMixin,
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+			}
+			div {
+				display: inline-flex;
+			}
+			vaadin-text-field {
+				padding: 0;
+				width: 100%;
+				height: 100%;
+			}
+			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.borderWidth}: 0;
+				${textVars.borderRadius}: 0;
+			}
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+customElements.define(componentName, PhoneField);
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+const transformTheme = (theme, path, getTransformation) => {
+	return Object.entries(theme).reduce((acc, [key, val]) => {
+		if (val?.constructor !== Object) {
+			return merge(acc, getTransformation(path.concat(key), val));
+		} else {
+			return merge(acc, transformTheme(val, [...path, key], getTransformation));
+		}
+	}, {});
+};
+
+const stringifyArray = (strArr) =>
+	strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const themeToCSSVarsObj = (theme) =>
+	transformTheme(theme, [], (path, val) => ({
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val
+	}));
+
+const getThemeRefs = (theme, prefix) =>
+	transformTheme(theme, [], (path) =>
+		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+	);
+
+const globalsThemeToStyle = (theme, themeName = '') => `
+*[data-theme="${themeName}"] {
+	${Object.entries(themeToCSSVarsObj(theme)).reduce(
+	(acc, entry) => (acc += `${entry.join(':')};\n`),
+	''
+)}
+}
+`;
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+	transformTheme(componentsTheme, [], (path, val) => {
+		const [component, ...restPath] = path;
+		const property = restPath.pop();
+		const componentName = getComponentName(component);
+
+		// we need a support for portal components theme (e.g. overlay)
+		// this allows us to generate those themes under different sections
+		// if the theme has root level attribute that starts with #
+		// we are generating a new theme
+		let themeName = BASE_THEME_SECTION;
+
+		if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+			themeName = restPath.shift();
+		}
+
+		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+		// starts with underscore -> attribute selector
+		const attrsSelector = restPath.reduce((acc, section, idx) => {
+			if (section.startsWith('_'))
+				return (acc += `[${kebabCase(section.replace(/^_/, ''))}="true"]`);
+
+			const nextSection = restPath[idx + 1];
+
+			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+				console.error(
+					'theme generator',
+					`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+				);
+				return acc;
+			}
+
+			return (acc += `[${kebabCase(section)}="${restPath
+				.splice(idx + 1, 1)
+				.join('')}"]`);
+		}, '');
+
+		let selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+		return {
+			[componentName]: {
+				[themeName]: {
+					[selector]: {
+						[property]: val
+					}
+				}
+			}
+		};
+	});
+
+
+const createComponentsTheme = (componentsTheme) => {
+	const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+	return Object.keys(styleObj).reduce(
+		(acc, componentName) => {
+			const componentThemes = styleObj[componentName];
+
+			return Object.assign(acc, {
+				[componentName]: Object.keys(componentThemes)
+					.reduce((acc, theme) =>
+						Object.assign(acc, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+						{})
+			})
+		},
+		{}
+	);
+};
+
+const componentsThemeToStyle = (componentsTheme) =>
+	Object.entries(componentsTheme).reduce(
+		(acc, [selector, vars]) =>
+		(acc += `${selector} { \n${Object.entries(
+			vars
+		)
+			.map(([key, val]) => `${key}: ${val}`)
+			.join(';\n')} \n}\n\n`),
+		''
+	);
+
+const themeToStyle = ({ globals, components }, themeName) => ({
+	globals: globalsThemeToStyle(globals, themeName),
+	components: createComponentsTheme(components)
+});
+
+const useVar = (varName) => `var(${varName})`;
+
+const createHelperVars = (theme, prefix) => {
+	const res = transformTheme(theme, [], (path, value) => {
+		const modifiedPath = [...path];
+		const property = modifiedPath.splice(-1);
+		const varName = getCssVarName(prefix, property);
+
+		const vars = { [property]: varName };
+		const theme = set({}, [...modifiedPath, varName], value);
+		const useVars = { [property]: useVar(varName) };
+
+		return { theme, useVars, vars };
+	});
+
+	return [res.theme, res.useVars, res.vars];
+};
+
+const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
+const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
+const genContrast = (c, percentage = 0.9) => {
+	const isDark = c.isDark();
+	return c
+		.mix(Color(isDark ? 'white' : 'black'), percentage)
+		.saturate(1)
+		.hex();
+};
+
+const genColor = (color) => {
+	const mainColor = new Color(color.main || color);
+
+	return {
+		main: mainColor.hex(),
 		dark: color.dark || genDark(mainColor),
 		light: color.light || genLight(mainColor),
 		contrast: color.contrast || genContrast(mainColor)
@@ -2636,146 +4451,146 @@ var globals = {
 	fonts
 };
 
-const globalRefs$7 = getThemeRefs(globals);
-const vars$d = Button.cssVarList;
+const globalRefs$9 = getThemeRefs(globals);
+const vars$e = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$7.colors.primary,
-	secondary: globalRefs$7.colors.secondary,
-	success: globalRefs$7.colors.success,
-	error: globalRefs$7.colors.error,
-	surface: globalRefs$7.colors.surface
+	primary: globalRefs$9.colors.primary,
+	secondary: globalRefs$9.colors.secondary,
+	success: globalRefs$9.colors.success,
+	error: globalRefs$9.colors.error,
+	surface: globalRefs$9.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$j);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$l);
 
 const button = {
 	...helperTheme$2,
-	[vars$d.width]: 'fit-content',
+	[vars$e.width]: 'fit-content',
 	size: {
 		xs: {
-			[vars$d.height]: '10px',
-			[vars$d.fontSize]: '10px',
-			[vars$d.padding]: `0 ${globalRefs$7.spacing.xs}`
+			[vars$e.height]: '10px',
+			[vars$e.fontSize]: '10px',
+			[vars$e.padding]: `0 ${globalRefs$9.spacing.xs}`
 		},
 		sm: {
-			[vars$d.height]: '20px',
-			[vars$d.fontSize]: '10px',
-			[vars$d.padding]: `0 ${globalRefs$7.spacing.sm}`
+			[vars$e.height]: '20px',
+			[vars$e.fontSize]: '10px',
+			[vars$e.padding]: `0 ${globalRefs$9.spacing.sm}`
 		},
 		md: {
-			[vars$d.height]: '30px',
-			[vars$d.fontSize]: '14px',
-			[vars$d.padding]: `0 ${globalRefs$7.spacing.md}`
+			[vars$e.height]: '30px',
+			[vars$e.fontSize]: '14px',
+			[vars$e.padding]: `0 ${globalRefs$9.spacing.md}`
 		},
 		lg: {
-			[vars$d.height]: '40px',
-			[vars$d.fontSize]: '20px',
-			[vars$d.padding]: `0 ${globalRefs$7.spacing.lg}`
+			[vars$e.height]: '40px',
+			[vars$e.fontSize]: '20px',
+			[vars$e.padding]: `0 ${globalRefs$9.spacing.lg}`
 		},
 		xl: {
-			[vars$d.height]: '50px',
-			[vars$d.fontSize]: '25px',
-			[vars$d.padding]: `0 ${globalRefs$7.spacing.xl}`
+			[vars$e.height]: '50px',
+			[vars$e.fontSize]: '25px',
+			[vars$e.padding]: `0 ${globalRefs$9.spacing.xl}`
 		}
 	},
 
-	[vars$d.borderRadius]: globalRefs$7.radius.lg,
-	[vars$d.cursor]: 'pointer',
-	[vars$d.borderWidth]: '2px',
-	[vars$d.borderStyle]: 'solid',
-	[vars$d.borderColor]: 'transparent',
+	[vars$e.borderRadius]: globalRefs$9.radius.lg,
+	[vars$e.cursor]: 'pointer',
+	[vars$e.borderWidth]: '2px',
+	[vars$e.borderStyle]: 'solid',
+	[vars$e.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$d.width]: '100%'
+		[vars$e.width]: '100%'
 	},
 	_loading: {
-		[vars$d.cursor]: 'wait'
+		[vars$e.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$d.color]: helperRefs$2.contrast,
-			[vars$d.backgroundColor]: helperRefs$2.main,
+			[vars$e.color]: helperRefs$2.contrast,
+			[vars$e.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$d.backgroundColor]: helperRefs$2.dark
+				[vars$e.backgroundColor]: helperRefs$2.dark
 			},
 			_loading: {
-				[vars$d.backgroundColor]: helperRefs$2.main
+				[vars$e.backgroundColor]: helperRefs$2.main
 			}
 		},
 		outline: {
-			[vars$d.color]: helperRefs$2.main,
-			[vars$d.borderColor]: helperRefs$2.main,
+			[vars$e.color]: helperRefs$2.main,
+			[vars$e.borderColor]: helperRefs$2.main,
 			_hover: {
-				[vars$d.color]: helperRefs$2.dark,
-				[vars$d.borderColor]: helperRefs$2.dark,
+				[vars$e.color]: helperRefs$2.dark,
+				[vars$e.borderColor]: helperRefs$2.dark,
 				_error: {
-					[vars$d.color]: helperRefs$2.error
+					[vars$e.color]: helperRefs$2.error
 				}
 			}
 		},
 		link: {
-			[vars$d.color]: helperRefs$2.main,
-			[vars$d.padding]: 0,
-			[vars$d.margin]: 0,
-			[vars$d.lineHeight]: helperRefs$2.height,
-			[vars$d.borderRadius]: 0,
+			[vars$e.color]: helperRefs$2.main,
+			[vars$e.padding]: 0,
+			[vars$e.margin]: 0,
+			[vars$e.lineHeight]: helperRefs$2.height,
+			[vars$e.borderRadius]: 0,
 			_hover: {
-				[vars$d.color]: helperRefs$2.main,
-				[vars$d.textDecoration]: 'underline'
+				[vars$e.color]: helperRefs$2.main,
+				[vars$e.textDecoration]: 'underline'
 			}
 		}
 	}
 };
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
-const vars$c = TextField.cssVarList;
+const vars$d = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$6.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$8.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$6.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$8.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$6.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$8.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
-			[vars.fontSize]: '16px',
-			[vars.padding]: `0 ${globalRefs$6.spacing.lg}`
+			[vars.fontSize]: '20px',
+			[vars.padding]: `0 ${globalRefs$8.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$6.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$8.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$6.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$6.colors.surface.contrast,
+	[vars.color]: globalRefs$8.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$8.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$6.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$8.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$6.radius.sm,
+	[vars.borderRadius]: globalRefs$8.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$6.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$6.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$6.colors.surface.main
+		[vars.color]: globalRefs$8.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$8.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$8.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -2783,27 +4598,27 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs$6.colors.surface.main}`
+		[vars.outline]: `2px solid ${globalRefs$8.colors.surface.main}`
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$6.colors.surface.main
+		[vars.borderColor]: globalRefs$8.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$6.colors.error.main,
-		[vars.color]: globalRefs$6.colors.error.main,
-		[vars.placeholderColor]: globalRefs$6.colors.error.light
+		[vars.borderColor]: globalRefs$8.colors.error.main,
+		[vars.color]: globalRefs$8.colors.error.main,
+		[vars.placeholderColor]: globalRefs$8.colors.error.light
 	}
 });
 
-var textField$1 = textField(vars$c);
+var textField$1 = textField(vars$d);
 
-const vars$b = PasswordField.cssVarList;
+const vars$c = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$b),
-	[vars$b.revealCursor]: 'pointer'
+	...textField(vars$c),
+	[vars$c.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -2814,58 +4629,58 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$a = TextArea.cssVarList;
+const globalRefs$7 = getThemeRefs(globals);
+const vars$b = TextArea.cssVarList;
 
 const textArea = {
-	[vars$a.width]: '100%',
-	[vars$a.color]: globalRefs$5.colors.primary.main,
-	[vars$a.backgroundColor]: globalRefs$5.colors.surface.light,
-	[vars$a.resize]: 'vertical',
+	[vars$b.width]: '100%',
+	[vars$b.color]: globalRefs$7.colors.primary.main,
+	[vars$b.backgroundColor]: globalRefs$7.colors.surface.light,
+	[vars$b.resize]: 'vertical',
 
-	[vars$a.borderRadius]: globalRefs$5.radius.sm,
-	[vars$a.borderWidth]: '1px',
-	[vars$a.borderStyle]: 'solid',
-	[vars$a.borderColor]: 'transparent',
+	[vars$b.borderRadius]: globalRefs$7.radius.sm,
+	[vars$b.borderWidth]: '1px',
+	[vars$b.borderStyle]: 'solid',
+	[vars$b.borderColor]: 'transparent',
 
 	_bordered: {
-		[vars$a.borderColor]: globalRefs$5.colors.surface.main
+		[vars$b.borderColor]: globalRefs$7.colors.surface.main
 	},
 
 	_focused: {
-		[vars$a.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
+		[vars$b.outline]: `2px solid ${globalRefs$7.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$a.width]: '100%'
+		[vars$b.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$a.cursor]: 'not-allowed'
+		[vars$b.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$a.outline]: `2px solid ${globalRefs$5.colors.error.main}`
+		[vars$b.outline]: `2px solid ${globalRefs$7.colors.error.main}`
 	}
 };
 
-const vars$9 = Checkbox.cssVarList;
+const vars$a = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$9.cursor]: 'pointer',
-	[vars$9.width]: 'fit-content'
+	[vars$a.cursor]: 'pointer',
+	[vars$a.width]: 'fit-content'
 };
 
-const vars$8 = SwitchToggle.cssVarList;
+const vars$9 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$8.width]: '70px',
-	[vars$8.cursor]: [{}, { selector: '> label' }]
+	[vars$9.width]: '70px',
+	[vars$9.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs$4 = getThemeRefs(globals);
+const globalRefs$6 = getThemeRefs(globals);
 
-const vars$7 = Container.cssVarList;
+const vars$8 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -2888,31 +4703,31 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 
 const container = {
 	...helperTheme$1,
-	[vars$7.width]: '100%',
+	[vars$8.width]: '100%',
 	verticalPadding: {
-		sm: { [vars$7.verticalPadding]: '5px' },
-		md: { [vars$7.verticalPadding]: '10px' },
-		lg: { [vars$7.verticalPadding]: '20px' },
+		sm: { [vars$8.verticalPadding]: '5px' },
+		md: { [vars$8.verticalPadding]: '10px' },
+		lg: { [vars$8.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$7.horizontalPadding]: '5px' },
-		md: { [vars$7.horizontalPadding]: '10px' },
-		lg: { [vars$7.horizontalPadding]: '20px' },
+		sm: { [vars$8.horizontalPadding]: '5px' },
+		md: { [vars$8.horizontalPadding]: '10px' },
+		lg: { [vars$8.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$7.flexDirection]: 'row',
-			[vars$7.alignItems]: helperRefs$1.verticalAlignment,
-			[vars$7.justifyContent]: helperRefs$1.horizontalAlignment,
+			[vars$8.flexDirection]: 'row',
+			[vars$8.alignItems]: helperRefs$1.verticalAlignment,
+			[vars$8.justifyContent]: helperRefs$1.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$7.flexDirection]: 'column',
-			[vars$7.alignItems]: helperRefs$1.horizontalAlignment,
-			[vars$7.justifyContent]: helperRefs$1.verticalAlignment,
+			[vars$8.flexDirection]: 'column',
+			[vars$8.alignItems]: helperRefs$1.horizontalAlignment,
+			[vars$8.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -2921,214 +4736,214 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$7.gap]: '10px'
+			[vars$8.gap]: '10px'
 		},
 		md: {
-			[vars$7.gap]: '20px'
+			[vars$8.gap]: '20px'
 		},
 		lg: {
-			[vars$7.gap]: '30px'
+			[vars$8.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
 		},
 		md: {
-			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.md} ${helperRefs$1.shadowColor}`
 		},
 		lg: {
-			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
 		},
 		xl: {
-			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$7.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$8.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$7.borderRadius]: globalRefs$4.radius.sm
+			[vars$8.borderRadius]: globalRefs$6.radius.sm
 		},
 		md: {
-			[vars$7.borderRadius]: globalRefs$4.radius.md
+			[vars$8.borderRadius]: globalRefs$6.radius.md
 		},
 		lg: {
-			[vars$7.borderRadius]: globalRefs$4.radius.lg
+			[vars$8.borderRadius]: globalRefs$6.radius.lg
 		},
 	}
 };
 
-const vars$6 = Logo.cssVarList;
+const vars$7 = Logo.cssVarList;
 
 const logo = {
-	[vars$6.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$7.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$5 = getThemeRefs(globals);
 
-const vars$5 = Text.cssVarList;
+const vars$6 = Text.cssVarList;
 
 const text = {
-	[vars$5.lineHeight]: '1em',
-	[vars$5.display]: 'inline-block',
-	[vars$5.textAlign]: 'left',
-	[vars$5.color]: globalRefs$3.colors.surface.dark,
+	[vars$6.lineHeight]: '1em',
+	[vars$6.display]: 'inline-block',
+	[vars$6.textAlign]: 'left',
+	[vars$6.color]: globalRefs$5.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$5.fontSize]: globalRefs$3.typography.h1.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.h1.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.h1.font
+			[vars$6.fontSize]: globalRefs$5.typography.h1.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.h1.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.h1.font
 		},
 		h2: {
-			[vars$5.fontSize]: globalRefs$3.typography.h2.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.h2.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.h2.font
+			[vars$6.fontSize]: globalRefs$5.typography.h2.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.h2.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.h2.font
 		},
 		h3: {
-			[vars$5.fontSize]: globalRefs$3.typography.h3.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.h3.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.h3.font
+			[vars$6.fontSize]: globalRefs$5.typography.h3.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.h3.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.h3.font
 		},
 		subtitle1: {
-			[vars$5.fontSize]: globalRefs$3.typography.subtitle1.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.subtitle1.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.subtitle1.font
+			[vars$6.fontSize]: globalRefs$5.typography.subtitle1.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.subtitle1.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$5.fontSize]: globalRefs$3.typography.subtitle2.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.subtitle2.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.subtitle2.font
+			[vars$6.fontSize]: globalRefs$5.typography.subtitle2.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.subtitle2.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.subtitle2.font
 		},
 		body1: {
-			[vars$5.fontSize]: globalRefs$3.typography.body1.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.body1.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.body1.font
+			[vars$6.fontSize]: globalRefs$5.typography.body1.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.body1.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.body1.font
 		},
 		body2: {
-			[vars$5.fontSize]: globalRefs$3.typography.body2.size,
-			[vars$5.fontWeight]: globalRefs$3.typography.body2.weight,
-			[vars$5.fontFamily]: globalRefs$3.typography.body2.font
+			[vars$6.fontSize]: globalRefs$5.typography.body2.size,
+			[vars$6.fontWeight]: globalRefs$5.typography.body2.weight,
+			[vars$6.fontFamily]: globalRefs$5.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$5.color]: globalRefs$3.colors.primary.main
+			[vars$6.color]: globalRefs$5.colors.primary.main
 		},
 		secondary: {
-			[vars$5.color]: globalRefs$3.colors.secondary.main
+			[vars$6.color]: globalRefs$5.colors.secondary.main
 		},
 		error: {
-			[vars$5.color]: globalRefs$3.colors.error.main
+			[vars$6.color]: globalRefs$5.colors.error.main
 		},
 		success: {
-			[vars$5.color]: globalRefs$3.colors.success.main
+			[vars$6.color]: globalRefs$5.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$5.textAlign]: 'right' },
-		left: { [vars$5.textAlign]: 'left' },
-		center: { [vars$5.textAlign]: 'center' }
+		right: { [vars$6.textAlign]: 'right' },
+		left: { [vars$6.textAlign]: 'left' },
+		center: { [vars$6.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$5.width]: '100%',
-		[vars$5.display]: 'block'
+		[vars$6.width]: '100%',
+		[vars$6.display]: 'block'
 	},
 	_italic: {
-		[vars$5.fontStyle]: 'italic'
+		[vars$6.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$5.textTransform]: 'uppercase'
+		[vars$6.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$5.textTransform]: 'lowercase'
+		[vars$6.textTransform]: 'lowercase'
 	}
 };
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$4 = Link.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+const vars$5 = Link.cssVarList;
 
 const link = {
-	[vars$4.cursor]: 'pointer',
-	[vars$4.borderBottomWidth]: '2px',
-	[vars$4.borderBottomStyle]: 'solid',
-	[vars$4.borderBottomColor]: 'transparent',
-	[vars$4.color]: globalRefs$2.colors.primary.main,
+	[vars$5.cursor]: 'pointer',
+	[vars$5.borderBottomWidth]: '2px',
+	[vars$5.borderBottomStyle]: 'solid',
+	[vars$5.borderBottomColor]: 'transparent',
+	[vars$5.color]: globalRefs$4.colors.primary.main,
 
 	_hover: {
-		[vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
+		[vars$5.borderBottomColor]: globalRefs$4.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$4.textAlign]: 'right' },
-		left: { [vars$4.textAlign]: 'left' },
-		center: { [vars$4.textAlign]: 'center' }
+		right: { [vars$5.textAlign]: 'right' },
+		left: { [vars$5.textAlign]: 'left' },
+		center: { [vars$5.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$4.width]: '100%'
+		[vars$5.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$4.color]: globalRefs$2.colors.primary.main,
+			[vars$5.color]: globalRefs$4.colors.primary.main,
 			_hover: {
-				[vars$4.borderBottomColor]: globalRefs$2.colors.primary.main
+				[vars$5.borderBottomColor]: globalRefs$4.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$4.color]: globalRefs$2.colors.secondary.main,
+			[vars$5.color]: globalRefs$4.colors.secondary.main,
 			_hover: {
-				[vars$4.borderBottomColor]: globalRefs$2.colors.secondary.main
+				[vars$5.borderBottomColor]: globalRefs$4.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$4.color]: globalRefs$2.colors.error.main,
+			[vars$5.color]: globalRefs$4.colors.error.main,
 			_hover: {
-				[vars$4.borderBottomColor]: globalRefs$2.colors.error.main
+				[vars$5.borderBottomColor]: globalRefs$4.colors.error.main
 			}
 		},
 		success: {
-			[vars$4.color]: globalRefs$2.colors.success.main,
+			[vars$5.color]: globalRefs$4.colors.success.main,
 			_hover: {
-				[vars$4.borderBottomColor]: globalRefs$2.colors.success.main
+				[vars$5.borderBottomColor]: globalRefs$4.colors.success.main
 			}
 		}
 	}
 };
 
-const vars$3 = Divider.cssVarList;
+const vars$4 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$d);
+const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$f);
 
 
 const divider = {
 	...helperTheme,
-	[vars$3.alignItems]: 'center',
-	[vars$3.dividerHeight]: helperRefs.thickness,
-	[vars$3.backgroundColor]: 'currentColor',
-	[vars$3.opacity]: '0.2',
-	[vars$3.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars$3.width]: '100%',
-	[vars$3.flexDirection]: 'row',
-	[vars$3.alignSelf]: 'strech',
-	[vars$3.textWidth]: 'fit-content',
-	[vars$3.maxTextWidth]: 'calc(100% - 100px)',
+	[vars$4.alignItems]: 'center',
+	[vars$4.dividerHeight]: helperRefs.thickness,
+	[vars$4.backgroundColor]: 'currentColor',
+	[vars$4.opacity]: '0.2',
+	[vars$4.textPadding]: `0 ${helperRefs.textPaddingSize}`,
+	[vars$4.width]: '100%',
+	[vars$4.flexDirection]: 'row',
+	[vars$4.alignSelf]: 'strech',
+	[vars$4.textWidth]: 'fit-content',
+	[vars$4.maxTextWidth]: 'calc(100% - 100px)',
 	_vertical: {
-		[vars$3.padding]: `0 calc(${thickness} * 3)`,
-		[vars$3.width]: 'fit-content',
-		[vars$3.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars$3.flexDirection]: 'column',
-		[vars$3.minHeight]: '200px',
-		[vars$3.textWidth]: 'fit-content',
-		[vars$3.dividerWidth]: helperRefs.thickness,
-		[vars$3.maxTextWidth]: '100%',
+		[vars$4.padding]: `0 calc(${thickness} * 3)`,
+		[vars$4.width]: 'fit-content',
+		[vars$4.textPadding]: `${helperRefs.textPaddingSize} 0`,
+		[vars$4.flexDirection]: 'column',
+		[vars$4.minHeight]: '200px',
+		[vars$4.textWidth]: 'fit-content',
+		[vars$4.dividerWidth]: helperRefs.thickness,
+		[vars$4.maxTextWidth]: '100%',
 	}
 };
 
@@ -3136,242 +4951,229 @@ const passcode = {
 	...textField(Passcode.cssVarList),
 };
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 
-const vars$2 = LoaderLinear.cssVarList;
+const vars$3 = LoaderLinear.cssVarList;
 
 const loaderLinear = {
-	[vars$2.display]: 'inline-block',
-	[vars$2.barColor]: globalRefs$1.colors.surface.contrast,
-	[vars$2.barWidth]: '20%',
-	[vars$2.surfaceColor]: globalRefs$1.colors.surface.main,
-	[vars$2.borderRadius]: '4px',
-	[vars$2.animationDuration]: '2s',
-	[vars$2.animationTimingFunction]: 'linear',
-	[vars$2.animationIterationCount]: 'infinite',
-	[vars$2.width]: '100%',
+	[vars$3.display]: 'inline-block',
+	[vars$3.barColor]: globalRefs$3.colors.surface.contrast,
+	[vars$3.barWidth]: '20%',
+	[vars$3.surfaceColor]: globalRefs$3.colors.surface.main,
+	[vars$3.borderRadius]: '4px',
+	[vars$3.animationDuration]: '2s',
+	[vars$3.animationTimingFunction]: 'linear',
+	[vars$3.animationIterationCount]: 'infinite',
+	[vars$3.width]: '100%',
 	size: {
 		xs: {
-			[vars$2.height]: '6px'
+			[vars$3.height]: '6px'
 		},
 		sm: {
-			[vars$2.height]: '8px'
+			[vars$3.height]: '8px'
 		},
 		md: {
-			[vars$2.height]: '10px'
+			[vars$3.height]: '10px'
 		},
 		lg: {
-			[vars$2.height]: '12px'
+			[vars$3.height]: '12px'
 		},
 		xl: {
-			[vars$2.height]: '14px'
+			[vars$3.height]: '14px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$2.barColor]: globalRefs$1.colors.primary.main
+			[vars$3.barColor]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$2.barColor]: globalRefs$1.colors.secondary.main
+			[vars$3.barColor]: globalRefs$3.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$2.display]: 'none'
+		[vars$3.display]: 'none'
 	}
 };
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 
-const vars$1 = LoaderRadial.cssVarList;
+const vars$2 = LoaderRadial.cssVarList;
 
 const loaderRadial = {
-	[vars$1.display]: 'inline-block',
-	[vars$1.color]: globalRefs.colors.surface.contrast,
-	[vars$1.animationDuration]: '2s',
-	[vars$1.animationTimingFunction]: 'linear',
-	[vars$1.animationIterationCount]: 'infinite',
-	[vars$1.spinnerStyle]: 'solid',
-	[vars$1.spinnerWidth]: '4px',
-	[vars$1.spinnerRadius]: '50%',
-	[vars$1.spinnerTopColor]: 'currentColor',
-	[vars$1.spinnerBottomColor]: 'transparent',
-	[vars$1.spinnerRightColor]: 'currentColor',
-	[vars$1.spinnerLeftColor]: 'transparent',
+	[vars$2.display]: 'inline-block',
+	[vars$2.color]: globalRefs$2.colors.surface.contrast,
+	[vars$2.animationDuration]: '2s',
+	[vars$2.animationTimingFunction]: 'linear',
+	[vars$2.animationIterationCount]: 'infinite',
+	[vars$2.spinnerStyle]: 'solid',
+	[vars$2.spinnerWidth]: '4px',
+	[vars$2.spinnerRadius]: '50%',
+	[vars$2.spinnerTopColor]: 'currentColor',
+	[vars$2.spinnerBottomColor]: 'transparent',
+	[vars$2.spinnerRightColor]: 'currentColor',
+	[vars$2.spinnerLeftColor]: 'transparent',
 	size: {
 		xs: {
-			[vars$1.width]: '20px',
-			[vars$1.height]: '20px',
-			[vars$1.spinnerWidth]: '2px'
+			[vars$2.width]: '20px',
+			[vars$2.height]: '20px',
+			[vars$2.spinnerWidth]: '2px'
 		},
 		sm: {
-			[vars$1.width]: '30px',
-			[vars$1.height]: '30px',
-			[vars$1.spinnerWidth]: '3px'
+			[vars$2.width]: '30px',
+			[vars$2.height]: '30px',
+			[vars$2.spinnerWidth]: '3px'
 		},
 		md: {
-			[vars$1.width]: '40px',
-			[vars$1.height]: '40px',
-			[vars$1.spinnerWidth]: '4px'
+			[vars$2.width]: '40px',
+			[vars$2.height]: '40px',
+			[vars$2.spinnerWidth]: '4px'
 		},
 		lg: {
-			[vars$1.width]: '60px',
-			[vars$1.height]: '60px',
-			[vars$1.spinnerWidth]: '5px'
+			[vars$2.width]: '60px',
+			[vars$2.height]: '60px',
+			[vars$2.spinnerWidth]: '5px'
 		},
 		xl: {
-			[vars$1.width]: '80px',
-			[vars$1.height]: '80px',
-			[vars$1.spinnerWidth]: '6px'
+			[vars$2.width]: '80px',
+			[vars$2.height]: '80px',
+			[vars$2.spinnerWidth]: '6px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$1.color]: globalRefs.colors.primary.main
+			[vars$2.color]: globalRefs$2.colors.primary.main
 		},
 		secondary: {
-			[vars$1.color]: globalRefs.colors.secondary.main
+			[vars$2.color]: globalRefs$2.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$1.display]: 'none'
+		[vars$2.display]: 'none'
 	}
 };
 
-const componentName = getComponentName('combo-box');
-
-const selectors = {
-	input: { selector: '::part(input-field)' },
-	toggle: { selector: '::part(toggle-button)' }
-};
+const globalRefs$1 = getThemeRefs(globals);
 
-const { input, toggle } = selectors;
+const vars$1 = ComboBox.cssVarList;
 
-const borderRadius = {
-	topRightRadius: {
-		selector: input.selector,
-		property: 'border-top-right-radius'
-	},
-	bottomRightRadius: {
-		selector: input.selector,
-		property: 'border-bottom-right-radius'
+const comboBox = {
+	[vars$1.borderColor]: globalRefs$1.colors.surface.main,
+	[vars$1.borderWidth]: '1px',
+	[vars$1.borderStyle]: 'solid',
+	[vars$1.cursor]: 'pointer',
+	[vars$1.padding]: '0',
+	[vars$1.placeholderColor]: globalRefs$1.colors.surface.main,
+	[vars$1.toggleColor]: globalRefs$1.colors.surface.contrast,
+	[vars$1.toggleCursor]: 'pointer',
+	size: {
+		xs: {
+			[vars$1.height]: '14px',
+			[vars$1.fontSize]: '8px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.xs}`
+		},
+		sm: {
+			[vars$1.height]: '20px',
+			[vars$1.fontSize]: '10px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.sm}`
+		},
+		md: {
+			[vars$1.height]: '30px',
+			[vars$1.fontSize]: '14px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.md}`
+		},
+		lg: {
+			[vars$1.height]: '40px',
+			[vars$1.fontSize]: '20px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.lg}`
+		},
+		xl: {
+			[vars$1.height]: '50px',
+			[vars$1.fontSize]: '25px',
+			[vars$1.padding]: `0 ${globalRefs$1.spacing.xl}`
+		}
 	},
-	topLeftRadius: {
-		selector: input.selector,
-		property: 'border-top-left-radius'
+	_invalid: {
+		[vars$1.borderColor]: globalRefs$1.colors.error.main,
+		[vars$1.placeholderColor]: globalRefs$1.colors.error.light,
+		[vars$1.toggleColor]: globalRefs$1.colors.error.main,
 	},
-	bottomLeftRadius: {
-		selector: input.selector,
-		property: 'border-bottom-left-radius'
-	}
+	// [vars.overlayCursor]: 'pointer',
+	// [vars.overlayBackground]: globalRefs.colors.surface.light,
+	// [vars.overlayBorder]: `2px solid red`,
 };
 
-const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
-
-	// 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
-		baseElement.items = items.map((node) =>
-			Object.defineProperty(node, 'data-name', {
-				value: node.getAttribute('data-name')
-			})
-		);
-
-		baseElement.renderer = (root, combo, model) => {
-			root.innerHTML = items[model.index].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 () { };
-	}
+Image.cssVarList;
 
-	init() {
-		super.init?.();
+const image = {};
 
-		this.#overrideOverlaySettings();
-		observeChildren(this, this.#onChildrenChange.bind(this));
-	}
-};
+const globalRefs = getThemeRefs(globals);
+const vars = PhoneField.cssVarList;
 
-const ComboBox = compose(
-	createStyleMixin({
-		mappings: {
-			...borderRadius,
-			backgroundColor: input,
-			width: input,
-			color: input,
-			padding: input,
-			borderColor: input,
-			borderStyle: input,
-			borderWidth: input,
-			cursor: toggle,
-			height: input,
-			// overlayBackground: { property: () => ComboBox.cssVarList.overlay.backgroundColor },
-			// overlayBorder: { property: () => ComboBox.cssVarList.overlay.border }
-		}
-	}),
-	draggableMixin,
-	portalMixin({
-		name: 'overlay',
-		selector: '',
-		mappings: {
-			// border: { selector: 'vaadin-combo-box-scroller' },
-			// backgroundColor: { selector: 'vaadin-combo-box-item' },
-		}
-	}),
-	proxyInputMixin,
-	componentNameValidationMixin,
-	ComboBoxMixin
-)(
-	createProxy({
-		slots: ['prefix'],
-		wrappedEleName: 'vaadin-combo-box',
-		style: () => `
-		:host {
-			-webkit-mask-image: none;
-		}
-		`,
-		excludeAttrsSync: ['tabindex'],
-		includeAttrsSync: [],
-		componentName,
-		includeForwardProps: ['items', 'renderer']
-	})
-);
+const phoneField = {
+	[vars.wrapperBorderStyle]: 'solid',
+	[vars.wrapperBorderWidth]: '1px',
+	[vars.wrapperBorderColor]: 'transparent',
+	[vars.wrapperBorderRadius]: globalRefs.radius.sm,
+	[vars.placeholderColor]: globalRefs.colors.surface.main,
 
-getThemeRefs(globals);
+	[vars.padding]: '0',
 
-const vars = ComboBox.cssVarList;
+	[vars.phoneInputWidth]: '15em',
+	[vars.countryCodeInputWidth]: '7em',
 
-const comboBox = {
-	...textField(ComboBox.cssVarList),
 	size: {
 		xs: {
-			[vars.width]: '30px'
+			[vars.inputHeight]: '14px',
+			[vars.fontSize]: '8px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`,
+			[vars.countryCodeDropdownWidth]: '200px',
+		},
+		sm: {
+			[vars.inputHeight]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`,
+			[vars.countryCodeDropdownWidth]: '240px',
+		},
+		md: {
+			[vars.inputHeight]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`,
+			[vars.countryCodeDropdownWidth]: '250px',
+		},
+		lg: {
+			[vars.inputHeight]: '40px',
+			[vars.fontSize]: '46px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`,
+			[vars.countryCodeDropdownWidth]: '250px',
+		},
+		xl: {
+			[vars.inputHeight]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`,
+			[vars.countryCodeDropdownWidth]: '400px',
 		}
 	},
-	[vars.borderColor]: 'green',
-	[vars.borderWidth]: '0',
-	[vars.cursor]: 'pointer',
-	[vars.padding]: '0',
-	// [vars.overlayBackground]: 'blue',
-	// [vars.overlayBorder]: '3px solid red',
-};
 
-Image.cssVarList;
+	_fullWidth: {
+		[vars.componentWidth]: '100%',
+		[vars.phoneInputWidth]: '100%',
+		[vars.countryCodeDropdownWidth]: '100%',
+	},
 
-const image = {};
+	_bordered: {
+		[vars.wrapperBorderColor]: globalRefs.colors.surface.main
+	},
+
+	_invalid: {
+		[vars.color]: globalRefs.colors.error.main,
+		[vars.placeholderColor]: globalRefs.colors.error.light,
+		[vars.wrapperBorderColor]: globalRefs.colors.error.main
+	},
+
+	// '@overlay': {
+	// 	overlayItemBackgroundColor: 'red'
+	// }
+};
 
 var components = {
 	button,
@@ -3391,7 +5193,8 @@ var components = {
 	loaderRadial,
 	loaderLinear,
 	comboBox,
-	image
+	image,
+	phoneField
 };
 
 var index = { globals, components };