@descope/web-components-ui 1.0.53 → 1.0.55

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import '@vaadin/button';
+import '@vaadin/checkbox';
 import '@vaadin/text-field';
-import '@vaadin/number-field';
+import '@vaadin/date-picker';
 import '@vaadin/email-field';
+import '@vaadin/number-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
-import '@vaadin/date-picker';
-import '@vaadin/checkbox';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
@@ -249,6 +249,30 @@ const draggableMixin = (superclass) =>
 
 class DescopeBaseClass extends HTMLElement {}
 
+const hoverableMixin =
+	(relativeSelector = '') =>
+	(superclass) =>
+		class HovrerableMixinClass extends superclass {
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				const onMouseOver = (e) => {
+					this.shadowRoot.host.setAttribute('hover', 'true');
+					e.target.addEventListener(
+						'mouseleave',
+						() => this.shadowRoot.host.removeAttribute('hover'),
+						{ once: true }
+					);
+				};
+
+				const baseElement = this.shadowRoot.querySelector(
+					this.baseSelector + relativeSelector
+				);
+
+				baseElement.addEventListener('mouseover', onMouseOver);
+			}
+		};
+
 const observeAttributes = (
 	ele,
 	callback,
@@ -270,7 +294,7 @@ const observeAttributes = (
 			if (
 				mutation.type === 'attributes' &&
 				!excludeAttrs.includes(mutation.attributeName) &&
-				(!includeAttrs.length || includeAttrs.includes(attr.name))
+				(!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
 			) {
 				callback([mutation.attributeName]);
 			}
@@ -281,16 +305,17 @@ const observeAttributes = (
 };
 
 const createSyncAttrsCb =
-	(srcEle, targetEle) =>
+	(srcEle, targetEle, mapAttrs = {}) =>
 	(...attrNames) => {
 		attrNames.forEach((attrName) => {
+			const targetAttrName = mapAttrs[attrName] || attrName;
 			const srcAttrVal = srcEle.getAttribute(attrName);
 			if (srcAttrVal !== null) {
-				if (targetEle.getAttribute(attrName) !== srcAttrVal) {
-					targetEle.setAttribute(attrName, srcAttrVal);
+				if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+					targetEle.setAttribute(targetAttrName, srcAttrVal);
 				}
 			} else {
-				targetEle.removeAttribute(attrName);
+				targetEle.removeAttribute(targetAttrName);
 			}
 		});
 	};
@@ -300,8 +325,12 @@ const syncAttrs = (ele1, ele2, options) => {
 	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
 };
 
-const forwardAttrs = (source, dest, options) => {
-	observeAttributes(source, createSyncAttrsCb(source, dest), options);
+const forwardAttrs = (source, dest, options = {}) => {
+	observeAttributes(
+		source,
+		createSyncAttrsCb(source, dest, options.mapAttrs),
+		options
+	);
 };
 
 const createProxy = ({
@@ -354,19 +383,9 @@ const createProxy = ({
 					}
 				};
 
-				this.mouseoverCbRef = () => {
-					this.proxyElement.setAttribute('hover', '');
-					this.proxyElement.addEventListener(
-						'mouseleave',
-						() => this.proxyElement.removeAttribute('hover'),
-						{ once: true }
-					);
-				};
-
-				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
-
 				// sync events
-				this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
+				this.addEventListener = (...args) =>
+					this.proxyElement.addEventListener(...args);
 
 				syncAttrs(this.proxyElement, this.hostElement, {
 					excludeAttrs: excludeAttrsSync
@@ -385,7 +404,7 @@ const createProxy = ({
 		}
 	}
 
-	return ProxyElement;
+	return compose(hoverableMixin())(ProxyElement);
 };
 
 const attrs = {
@@ -516,7 +535,7 @@ const compose =
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const componentName$f = getComponentName('button');
+const componentName$g = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -539,7 +558,7 @@ const iconStyles = `
 	}
 `;
 
-const selectors$3 = {
+const selectors$4 = {
 	label: '::part(label)'
 };
 
@@ -548,7 +567,7 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: { selector: selectors$3.label },
+			color: { selector: selectors$4.label },
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
@@ -556,8 +575,8 @@ const Button = compose(
 			height: {},
 			width: matchHostStyle(),
 			cursor: {},
-			padding: [{ selector: selectors$3.label }],
-			textDecoration: { selector: selectors$3.label }
+			padding: [{ selector: selectors$4.label }],
+			textDecoration: { selector: selectors$4.label }
 		}
 	}),
 	draggableMixin,
@@ -569,7 +588,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$g
 	})
 );
 
@@ -602,9 +621,37 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$f, Button);
+customElements.define(componentName$g, Button);
 
-const selectors$2 = {
+const componentName$f = getComponentName('checkbox');
+
+const Checkbox = compose(
+	createStyleMixin({
+		mappings: {
+			width: matchHostStyle(),
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: `
+		:host {
+			display: inline-block;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$f
+	})
+);
+
+customElements.define(componentName$f, Checkbox);
+
+const selectors$3 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -612,31 +659,31 @@ const selectors$2 = {
 };
 
 var textFieldMappings = {
-	color: { selector: selectors$2.input },
-	backgroundColor: { selector: selectors$2.input },
-	color: { selector: selectors$2.input },
+	color: { selector: selectors$3.input },
+	backgroundColor: { selector: selectors$3.input },
+	color: { selector: selectors$3.input },
 	width: matchHostStyle({}),
 	borderColor: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$2.input },
-		{ selector: selectors$2.readOnlyInput }
+		{ selector: selectors$3.input },
+		{ selector: selectors$3.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$2.input },
-	boxShadow: { selector: selectors$2.input },
+	borderRadius: { selector: selectors$3.input },
+	boxShadow: { selector: selectors$3.input },
 	fontSize: {},
-	height: { selector: selectors$2.input },
-	padding: { selector: selectors$2.input },
-	outline: { selector: selectors$2.input },
-	outlineOffset: { selector: selectors$2.input },
+	height: { selector: selectors$3.input },
+	padding: { selector: selectors$3.input },
+	outline: { selector: selectors$3.input },
+	outlineOffset: { selector: selectors$3.input },
 
-	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
+	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
 };
 
 const componentName$e = getComponentName('text-field');
@@ -724,390 +771,83 @@ class Combo extends DescopeBaseClass {
 
 customElements.define(componentName$d, Combo);
 
-const componentName$c = getComponentName('number-field');
+const componentName$c = getComponentName('container');
 
-let overrides$5 = ``;
+class RawContainer extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$c;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				:host > slot {
+					box-sizing: border-box;
+				}
+			</style>
+			<slot></slot>
+		`;
 
-const NumberField = compose(
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
+}
+
+const Container = compose(
 	createStyleMixin({
 		mappings: {
-			...textFieldMappings
-		}
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-number-field',
-		style: () => overrides$5,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$c
-	})
-);
+			height: matchHostStyle(),
+			width: matchHostStyle(),
 
-overrides$5 = `
-	:host {
-		display: inline-block;
-	}
-	vaadin-number-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-number-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-number-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-number-field input:-webkit-autofill,
-	vaadin-number-field input:-webkit-autofill::first-line,
-	vaadin-number-field input:-webkit-autofill:hover,
-	vaadin-number-field input:-webkit-autofill:active,
-	vaadin-number-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
-		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-number-field > label,
-	vaadin-number-field::part(input-field) {
-		cursor: pointer;
-		color: var(${NumberField.cssVarList.color});
-	}
-	vaadin-number-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-number-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${NumberField.cssVarList.color});
-	}
-	vaadin-number-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
 
-customElements.define(componentName$c, NumberField);
+			display: {}, // maybe this should be hardcoded to flex
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
 
-const componentName$b = getComponentName('email-field');
+			backgroundColor: {},
+			borderRadius: {},
 
-let overrides$4 = ``;
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
 
-const EmailField = compose(
-	createStyleMixin({
-		mappings: {
-			...textFieldMappings
+			boxShadow: {}
 		}
 	}),
 	draggableMixin,
-	inputMixin,
 	componentNameValidationMixin
-)(
-	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-email-field',
-		style: () => overrides$4,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
-	})
-);
-
-overrides$4 = `
-	:host {
-		display: inline-block;
-	}
-	vaadin-email-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-email-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-email-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-email-field input:-webkit-autofill,
-	vaadin-email-field input:-webkit-autofill::first-line,
-	vaadin-email-field input:-webkit-autofill:hover,
-	vaadin-email-field input:-webkit-autofill:active,
-	vaadin-email-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
-		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-email-field > label,
-	vaadin-email-field::part(input-field) {
-		cursor: pointer;
-		color: var(${EmailField.cssVarList.color});
-	}
-	vaadin-email-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-email-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${EmailField.cssVarList.color});
-	}
-	vaadin-email-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
-customElements.define(componentName$b, EmailField);
+)(RawContainer);
 
-const componentName$a = getComponentName('password-field');
+customElements.define(componentName$c, Container);
 
-let overrides$3 = ``;
+const componentName$b = getComponentName('date-picker');
 
-const PasswordField = compose(
-	createStyleMixin({
-		mappings: {
-			...textFieldMappings,
-			revealCursor: [
-				{
-					selector: '::part(reveal-button)::before',
-					property: 'cursor'
-				}
-			]
-		}
-	}),
+const DatePicker = compose(
 	draggableMixin,
-	inputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-password-field',
-		style: () => overrides$3,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$b,
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-date-picker',
+		style: ``
 	})
 );
 
-overrides$3 = `
-	:host {
-		display: inline-block;
-	}
-	vaadin-password-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-password-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-password-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-	vaadin-password-field input:-webkit-autofill,
-	vaadin-password-field input:-webkit-autofill::first-line,
-	vaadin-password-field input:-webkit-autofill:hover,
-	vaadin-password-field input:-webkit-autofill:active,
-	vaadin-password-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
-		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
-	}
-	vaadin-password-field > label,
-	vaadin-password-field::part(input-field) {
-		cursor: pointer;
-		color: var(${PasswordField.cssVarList.color});
-	}
-	vaadin-password-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-password-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${PasswordField.cssVarList.color});
-	}
-	vaadin-password-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
-customElements.define(componentName$a, PasswordField);
-
-const componentName$9 = getComponentName('text-area');
-
-const selectors$1 = {
-	label: '::part(label)',
-	input: '::part(input-field)',
-	required: '::part(required-indicator)::after'
-};
-
-let overrides$2 = ``;
-
-const TextArea = compose(
-	createStyleMixin({
-		mappings: {
-			resize: { selector: '> textarea' },
-			color: { selector: selectors$1.label },
-			cursor: {},
-			width: matchHostStyle(),
-			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 }
-		}
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides$2,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
-	})
-);
-
-overrides$2 = `
-	:host {
-		display: inline-block;
-	}
-
-	vaadin-text-area {
-		margin: 0;
-	}
-	vaadin-text-area > label,
-	vaadin-text-area::part(input-field) {
-		cursor: pointer;
-	}
-	vaadin-text-area[focused]::part(input-field) {
-		cursor: text;
-	}
-	vaadin-text-area::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-	}	
-`;
-
-customElements.define(componentName$9, TextArea);
-
-const componentName$8 = getComponentName('date-picker');
-
-const DatePicker = compose(
-	draggableMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		componentName: componentName$8,
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-date-picker',
-		style: ``
-	})
-);
-
-customElements.define(componentName$8, DatePicker);
-
-const componentName$7 = getComponentName('container');
-
-class RawContainer extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$7;
-	}
-	constructor() {
-		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-			<style>
-				:host > slot {
-					box-sizing: border-box;
-				}
-			</style>
-			<slot></slot>
-		`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > slot';
-	}
-}
-
-const Container = compose(
-	createStyleMixin({
-		mappings: {
-			height: matchHostStyle(),
-			width: matchHostStyle(),
-
-			verticalPadding: [
-				{ property: 'padding-top' },
-				{ property: 'padding-bottom' }
-			],
-			horizontalPadding: [
-				{ property: 'padding-left' },
-				{ property: 'padding-right' }
-			],
-
-			display: {}, // maybe this should be hardcoded to flex
-			flexDirection: {},
-			justifyContent: {},
-			alignItems: {},
-			gap: {},
-
-			backgroundColor: {},
-			borderRadius: {},
-
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
-
-			boxShadow: {}
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawContainer);
-
-customElements.define(componentName$7, Container);
-
-const componentName$6 = getComponentName('text');
-
-class RawText extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$6;
-	}
-	constructor() {
-		super();
-		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > slot';
-	}
-}
-
-const Text = compose(
-	createStyleMixin({
-		mappings: {
-			fontFamily: {},
-			lineHeight: {},
-			fontStyle: {},
-			fontSize: {},
-			fontWeight: {},
-			width: {},
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
-			borderWidth: {},
-			borderStyle: {},
-			borderColor: {},
-			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawText);
-
-customElements.define(componentName$6, Text);
+customElements.define(componentName$b, DatePicker);
 
 const getChildObserver = (callback) => {
 	return new MutationObserver((mutationsList) => {
@@ -1203,10 +943,10 @@ const enforceNestingElementsStylesMixin =
 		};
 	};
 
-const componentName$5 = getComponentName('divider');
+const componentName$a = getComponentName('divider');
 class RawDivider extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$5;
+		return componentName$a;
 	}
 	constructor() {
 		super();
@@ -1240,14 +980,14 @@ class RawDivider extends DescopeBaseClass {
 	}
 }
 
-const selectors = {
+const selectors$2 = {
 	root: { selector: '' },
 	before: { selector: '::before' },
 	after: { selector: '::after' },
 	slotted: { selector: () => '::slotted(*)' }
 };
 
-const { root, before, after, slotted } = selectors;
+const { root, before, after, slotted } = selectors$2;
 
 const Divider = compose(
 	enforceNestingElementsStylesMixin({
@@ -1276,65 +1016,60 @@ const Divider = compose(
 	componentNameValidationMixin
 )(RawDivider);
 
-customElements.define(componentName$5, Divider);
-
-const componentName$4 = getComponentName('logo');
-
-let style;
-const getStyle = () => style;
+const componentName$9 = getComponentName('text');
 
-class RawLogo extends DescopeBaseClass {
+class RawText extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$4;
+		return componentName$9;
 	}
 	constructor() {
 		super();
 		const template = document.createElement('template');
-		template.innerHTML = `
-		<style>
-			${getStyle()}
-		</style>
-		<div></div>`;
+		template.innerHTML = `<slot></slot>`;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
 
-		this.baseSelector = ':host > div';
+		this.baseSelector = ':host > slot';
 	}
 }
 
-const Logo = compose(
+const Text = compose(
 	createStyleMixin({
 		mappings: {
-			height: {},
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
 			width: {},
-			url: {},
-			fallbackUrl: {}
+			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
+			textAlign: matchHostStyle(),
+			display: matchHostStyle()
 		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
-)(RawLogo);
+)(RawText);
 
-style = `
-:host {
-	display: inline-block;
-}
-:host > div {
-	display: inline-block;
-	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
-}
-`;
+customElements.define(componentName$9, Text);
 
-customElements.define(componentName$4, Logo);
+customElements.define(componentName$a, Divider);
 
-const componentName$3 = getComponentName('checkbox');
+const componentName$8 = getComponentName('email-field');
 
-const Checkbox = compose(
+let overrides$5 = ``;
+
+const EmailField = compose(
 	createStyleMixin({
 		mappings: {
-			width: matchHostStyle(),
-			cursor: [{}, { selector: '> label' }]
+			...textFieldMappings
 		}
 	}),
 	draggableMixin,
@@ -1342,19 +1077,809 @@ const Checkbox = compose(
 	componentNameValidationMixin
 )(
 	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-checkbox',
-		style: `
-		:host {
-			display: inline-block;
-		}
-		`,
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-email-field',
+		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$8
 	})
 );
 
-customElements.define(componentName$3, Checkbox);
+overrides$5 = `
+	:host {
+		display: inline-block;
+	}
+	vaadin-email-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-email-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-email-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-email-field input:-webkit-autofill,
+	vaadin-email-field input:-webkit-autofill::first-line,
+	vaadin-email-field input:-webkit-autofill:hover,
+	vaadin-email-field input:-webkit-autofill:active,
+	vaadin-email-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${EmailField.cssVarList.color});
+		box-shadow: 0 0 0 var(${EmailField.cssVarList.height}) var(${EmailField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-email-field > label,
+	vaadin-email-field::part(input-field) {
+		cursor: pointer;
+		color: var(${EmailField.cssVarList.color});
+	}
+	vaadin-email-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-email-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${EmailField.cssVarList.color});
+	}
+	vaadin-email-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$8, EmailField);
+
+const componentName$7 = getComponentName('link');
+class RawLink extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$7;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+
+		template.innerHTML = `
+		<style>
+		:host {
+			display: inline-block;
+		}
+		:host a {
+			display: inline-block;
+		}
+		</style>
+		<div>
+			<a>
+				<slot name="text"></slot>
+			</a>
+		</div>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		forwardAttrs(this.shadowRoot.host, this.shadowRoot.querySelector('a'), {
+			includeAttrs: ['href', 'target', 'tooltip'],
+			mapAttrs: {
+				tooltip: 'title'
+			}
+		});
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const selectors$1 = {
+	anchor: { selector: '> a' }
+};
+
+const { anchor } = selectors$1;
+
+const Link = compose(
+	enforceNestingElementsStylesMixin({
+		nestingElementTagName: 'descope-text',
+		nestingElementDestSlotName: 'text',
+		forwardAttrOptions: {
+			includeAttrs: ['variant', 'italic', 'uppercase', 'lowercase']
+		}
+	}),
+	createStyleMixin({
+		mappings: {
+			width: matchHostStyle(),
+			textAlign: {},
+			color: anchor,
+			cursor: anchor,
+			borderBottomWidth: anchor,
+			borderBottomStyle: anchor,
+			borderBottomColor: anchor
+		},
+		nestedMappings: {
+			color: {
+				selector: ` ${Text.componentName}`,
+				property: Text.cssVarList.color
+			}
+		}
+	}),
+	hoverableMixin(anchor.selector),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLink);
+
+customElements.define(componentName$7, Link);
+
+const componentName$6 = getComponentName('logo');
+
+let style;
+const getStyle = () => style;
+
+class RawLogo extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$6;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div></div>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const Logo = compose(
+	createStyleMixin({
+		mappings: {
+			height: {},
+			width: {},
+			url: {},
+			fallbackUrl: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLogo);
+
+style = `
+:host {
+	display: inline-block;
+}
+:host > div {
+	display: inline-block;
+	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
+}
+`;
+
+customElements.define(componentName$6, Logo);
+
+const componentName$5 = getComponentName('number-field');
+
+let overrides$4 = ``;
+
+const NumberField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-number-field',
+		style: () => overrides$4,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$5
+	})
+);
+
+overrides$4 = `
+	:host {
+		display: inline-block;
+	}
+	vaadin-number-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-number-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-number-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-number-field input:-webkit-autofill,
+	vaadin-number-field input:-webkit-autofill::first-line,
+	vaadin-number-field input:-webkit-autofill:hover,
+	vaadin-number-field input:-webkit-autofill:active,
+	vaadin-number-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${NumberField.cssVarList.color});
+		box-shadow: 0 0 0 var(${NumberField.cssVarList.height}) var(${NumberField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-number-field > label,
+	vaadin-number-field::part(input-field) {
+		cursor: pointer;
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-number-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${NumberField.cssVarList.color});
+	}
+	vaadin-number-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$5, NumberField);
+
+const focusElement = (ele) => {
+	ele?.focus();
+	ele?.setSelectionRange(1, 1);
+};
+
+const getSanitizedCharacters = (str) => {
+	const pin = str.replace(/\s/g, ''); // sanitize string
+
+	// accept only numbers
+	if (!pin.match(/^\d+$/)) return [];
+
+	return [...pin]; // creating array of chars
+};
+
+const componentName$4 = getComponentName('passcode-internal');
+
+class PasscodeInternal extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			'disabled',
+			'bordered',
+			'size'
+		];
+	}
+
+	static get componentName() {
+		return componentName$4;
+	}
+
+	static get formAssociated() {
+		return true;
+	}
+
+	#internals
+
+	constructor() {
+		super();
+		const template = document.createElement('template');
+
+		const inputs = [...Array(this.digits).keys()].map((idx) => `
+		<descope-text-field
+			st-width="35px"
+			data-id=${idx}
+			type="tel"
+			autocomplete="none"
+		></descope-text-field>
+	`);
+
+		template.innerHTML = `
+		<div>
+			${inputs.join('')}
+		</div>
+		`;
+
+		this.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+
+		this.#internals = this.attachInternals();
+
+		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
+	}
+
+	checkValidity() {
+		// we need to toggle the has-error-message so the text inside the digits will become red when there is an error
+		if (this.#internals.validity.valid) {
+			this.inputs.forEach(input => input.removeAttribute('has-error-message'));
+		} else {
+			this.inputs.forEach(input => input.setAttribute('has-error-message', 'true'));
+			// we need to call it so the has-error-message with have the correct format (="true")
+			this.oninvalid?.();
+		}
+		return this.#internals.validity.valid
+	}
+
+	get digits() {
+		return Number.parseInt(this.getAttribute('digits')) || 6
+	}
+
+	get value() {
+		return this.inputs.map(({ value }) => value).join('')
+	}
+
+	set value(val) { }
+
+	get isRequired() {
+		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+	}
+
+	get pattern() {
+		return `^$|^\\d{${this.digits},}$`
+	}
+
+	get valueMissingErrMsg() {
+		return 'Please fill out this field.'
+	}
+
+	get patternMismatchErrMsg() {
+		return `Must be a ${this.digits} digits number.`
+	}
+
+	get validity() {
+		return this.#internals.validity;
+	}
+
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+
+	reportValidity() {
+		this.#internals.reportValidity();
+	}
+
+	formAssociatedCallback() {
+		this.setValidity?.();
+	}
+
+	setValidity = () => {
+		if (this.isRequired && !this.value) {
+			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+		}
+		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
+			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+		}
+		else {
+			this.#internals.setValidity({});
+		}
+	};
+
+	async connectedCallback() {
+		this.setValidity();
+		this.initInputs();
+
+		this.onfocus = () => {
+			this.inputs[0].focus();
+		};
+	}
+
+	getInputIdx(inputEle) {
+		return Number.parseInt(inputEle.getAttribute('data-id'), 10)
+	}
+
+	getNextInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput);
+		const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);
+		return this.inputs[newIdx]
+	}
+
+	getPrevInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput);
+		const newIdx = Math.max(currentIdx - 1, 0);
+		return this.inputs[newIdx]
+	}
+
+	fillDigits(charArr, currentInput) {
+		for (let i = 0; i < charArr.length; i += 1) {
+			currentInput.value = charArr[i] ?? '';
+
+			const nextInput = this.getNextInput(currentInput);
+			if (nextInput === currentInput) break;
+			currentInput = nextInput;
+		}
+
+		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+	};
+
+	initInputs() {
+		this.inputs.forEach((input) => {
+
+			// in order to simulate blur on the input
+			// we are checking if focus on one of the digits happened immediately after blur on another digit
+			// if not, the component is no longer focused and we should simulate blur
+			input.addEventListener('blur', () => {
+				const timerId = setTimeout(() => {
+					this.dispatchEvent(new Event('blur'));
+				});
+
+				this.inputs.forEach((ele) =>
+					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
+				);
+			});
+
+			input.oninput = (e) => {
+				const charArr = getSanitizedCharacters(input.value);
+
+				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
+				else this.fillDigits(charArr, input);
+
+				this.setValidity();
+			};
+
+			input.onkeydown = ({ key }) => {
+				if (key === 'Backspace') {
+					input.value = '';
+
+					// if the user deleted the digit we want to focus the previous digit
+					const prevInput = this.getPrevInput(input);
+
+					!prevInput.hasAttribute('focused') && setTimeout(() => {
+						focusElement(prevInput);
+					});
+				} else if (key.match(/^(\d)$/g)) { // if input is a digit
+					input.value = ''; // we are clearing the previous value so we can override it with the new value
+				}
+
+				this.setValidity();
+			};
+		});
+	}
+
+	attributeChangedCallback(
+		attrName,
+		oldValue,
+		newValue
+	) {
+		if (oldValue !== newValue &&
+			PasscodeInternal.observedAttributes.includes(attrName)) {
+			this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
+		}
+	}
+}
+
+const componentName$3 = getComponentName('passcode');
+
+const customMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+    constructor() {
+      super();
+    }
+
+    get digits() {
+      return Number.parseInt(this.getAttribute('digits')) || 6
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      const template = document.createElement('template');
+
+      //forward required & pattern TODO use forwardAttrs
+      template.innerHTML = `
+      <${componentName$4} 
+        bordered="true" 
+        name="code" 
+        tabindex="0"
+        slot="input"
+        required="${this.shadowRoot.host.getAttribute('required')}"
+        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
+      ></${componentName$4}>
+      `;
+
+      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
+      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
+      this.proxyElement.appendChild(slotEle);
+
+      // we want to control when the element is out of focus 
+      // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
+      this.proxyElement._setFocused = () => { };
+
+      this.shadowRoot.host.appendChild(template.content.cloneNode(true));
+      this.inputElement = this.querySelector(componentName$4);
+
+      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
+      this.inputElement.addEventListener('blur', () => {
+        this.proxyElement.validate();
+      });
+    }
+  };
+
+const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
+
+const Passcode = compose(
+  createStyleMixin({
+    mappings: {
+      ...restTextFieldMappings,
+    },
+    nestedMappings: {
+      borderColor: {
+        selector: ` ${TextField.componentName}`,
+        property: TextField.cssVarList.borderColor
+      }
+    }
+  }),
+  draggableMixin,
+  inputMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+    :host {
+      --vaadin-field-default-width: auto;
+    }
+
+    ::slotted([slot='input']) {
+      -webkit-mask-image: none;
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      padding: 0;
+    }
+
+    vaadin-text-field::part(input-field) {
+      background-color: transparent;
+      padding: 0;
+    }
+
+    ${overrides$3}
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName: componentName$3
+  })
+);
+
+const overrides$3 = `
+	:host {
+		display: inline-block;
+	}
+
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+
+	vaadin-text-field > label,
+	vaadin-text-field::part(input-field) {
+		cursor: pointer;
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$4, PasscodeInternal);
+
+customElements.define(componentName$3, Passcode);
+
+const componentName$2 = getComponentName('password-field');
+
+let overrides$2 = ``;
+
+const PasswordField = compose(
+	createStyleMixin({
+		mappings: {
+			...textFieldMappings,
+			revealCursor: [
+				{
+					selector: '::part(reveal-button)::before',
+					property: 'cursor'
+				}
+			]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-password-field',
+		style: () => overrides$2,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$2
+	})
+);
+
+overrides$2 = `
+	:host {
+		display: inline-block;
+	}
+	vaadin-password-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-password-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-password-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+	vaadin-password-field input:-webkit-autofill,
+	vaadin-password-field input:-webkit-autofill::first-line,
+	vaadin-password-field input:-webkit-autofill:hover,
+	vaadin-password-field input:-webkit-autofill:active,
+	vaadin-password-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${PasswordField.cssVarList.color});
+		box-shadow: 0 0 0 var(${PasswordField.cssVarList.height}) var(${PasswordField.cssVarList.backgroundColor}) inset;
+	}
+	vaadin-password-field > label,
+	vaadin-password-field::part(input-field) {
+		cursor: pointer;
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-password-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${PasswordField.cssVarList.color});
+	}
+	vaadin-password-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+customElements.define(componentName$2, PasswordField);
+
+const componentName$1 = getComponentName('switch-toggle');
+
+let overrides$1 = ``;
+
+const SwitchToggle = compose(
+	createStyleMixin({
+		mappings: {
+			width: matchHostStyle(),
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: () => overrides$1,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$1
+	})
+);
+
+overrides$1 = `
+	:host {
+		display: inline-block;
+	}
+	
+	:host {
+		--margin: 7px;
+		--width: var(${SwitchToggle.cssVarList.width});
+		--height: calc(var(--width) / 2);
+		--radius: var(--height);
+		--knobSize: calc(var(--height) - 5px);
+		--bgColor: #fff;
+		--knobBgColor: #000;
+	}
+	vaadin-checkbox>label {
+		cursor: pointer;
+		border: 1px solid;
+		text-indent: -99999px;
+		display: block;
+		position: relative;			
+		width: var(--width);
+		height: var(--height);
+		background: var(--bgColor);
+		border-radius: var(--radius);
+	}
+	vaadin-checkbox>label::after {
+		content: '';
+		position: absolute;
+		transition: 0.3s;
+		top: var(--margin);
+		left: var(--margin);
+		width: var(--knobSize);
+		height: var(--knobSize);
+		background: var(--knobBgColor);
+		border-radius: var(--knobSize);
+	}
+	vaadin-checkbox::part(checkbox) {
+		height: 0;
+		width: 0;
+		visibility: hidden;
+	}
+	vaadin-checkbox[checked]>label::after {
+		transform: translateX(-100%);
+		left: calc(100% - var(--margin));
+	}
+	vaadin-checkbox[active]>label::after {
+		width: calc(var(--knobSize) + 15px);
+	}
+`;
+
+customElements.define(componentName$1, SwitchToggle);
+
+const componentName = getComponentName('text-area');
+
+const selectors = {
+	label: '::part(label)',
+	input: '::part(input-field)',
+	required: '::part(required-indicator)::after'
+};
+
+let overrides = ``;
+
+const TextArea = compose(
+	createStyleMixin({
+		mappings: {
+			resize: { selector: '> textarea' },
+			color: { selector: selectors.label },
+			cursor: {},
+			width: matchHostStyle(),
+			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,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-area',
+		style: () => overrides,
+		excludeAttrsSync: ['tabindex'],
+		componentName
+	})
+);
+
+overrides = `
+	:host {
+		display: inline-block;
+	}
+
+	vaadin-text-area {
+		margin: 0;
+	}
+	vaadin-text-area > label,
+	vaadin-text-area::part(input-field) {
+		cursor: pointer;
+	}
+	vaadin-text-area[focused]::part(input-field) {
+		cursor: text;
+	}
+	vaadin-text-area::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+	}	
+`;
+
+customElements.define(componentName, TextArea);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -1594,150 +2119,150 @@ var globals = {
 	fonts
 };
 
-const globalRefs$4 = getThemeRefs(globals);
-const vars$9 = Button.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$a = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$4.colors.primary,
-	secondary: globalRefs$4.colors.secondary,
-	success: globalRefs$4.colors.success,
-	error: globalRefs$4.colors.error,
-	surface: globalRefs$4.colors.surface
+	primary: globalRefs$5.colors.primary,
+	secondary: globalRefs$5.colors.secondary,
+	success: globalRefs$5.colors.success,
+	error: globalRefs$5.colors.error,
+	surface: globalRefs$5.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$f);
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$g);
 
 const button = {
 	...helperTheme$1,
 
 	size: {
 		xs: {
-			[vars$9.height]: '10px',
-			[vars$9.fontSize]: '10px',
-			[vars$9.padding]: `0 ${globalRefs$4.spacing.xs}`
+			[vars$a.height]: '10px',
+			[vars$a.fontSize]: '10px',
+			[vars$a.padding]: `0 ${globalRefs$5.spacing.xs}`
 		},
 		sm: {
-			[vars$9.height]: '20px',
-			[vars$9.fontSize]: '10px',
-			[vars$9.padding]: `0 ${globalRefs$4.spacing.sm}`
+			[vars$a.height]: '20px',
+			[vars$a.fontSize]: '10px',
+			[vars$a.padding]: `0 ${globalRefs$5.spacing.sm}`
 		},
 		md: {
-			[vars$9.height]: '30px',
-			[vars$9.fontSize]: '14px',
-			[vars$9.padding]: `0 ${globalRefs$4.spacing.md}`
+			[vars$a.height]: '30px',
+			[vars$a.fontSize]: '14px',
+			[vars$a.padding]: `0 ${globalRefs$5.spacing.md}`
 		},
 		lg: {
-			[vars$9.height]: '40px',
-			[vars$9.fontSize]: '20px',
-			[vars$9.padding]: `0 ${globalRefs$4.spacing.lg}`
+			[vars$a.height]: '40px',
+			[vars$a.fontSize]: '20px',
+			[vars$a.padding]: `0 ${globalRefs$5.spacing.lg}`
 		},
 		xl: {
-			[vars$9.height]: '50px',
-			[vars$9.fontSize]: '25px',
-			[vars$9.padding]: `0 ${globalRefs$4.spacing.xl}`
+			[vars$a.height]: '50px',
+			[vars$a.fontSize]: '25px',
+			[vars$a.padding]: `0 ${globalRefs$5.spacing.xl}`
 		}
 	},
 
-	[vars$9.borderRadius]: globalRefs$4.radius.lg,
-	[vars$9.cursor]: 'pointer',
-	[vars$9.borderWidth]: '2px',
-	[vars$9.borderStyle]: 'solid',
-	[vars$9.borderColor]: 'transparent',
+	[vars$a.borderRadius]: globalRefs$5.radius.lg,
+	[vars$a.cursor]: 'pointer',
+	[vars$a.borderWidth]: '2px',
+	[vars$a.borderStyle]: 'solid',
+	[vars$a.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$9.width]: '100%'
+		[vars$a.width]: '100%'
 	},
 	_loading: {
-		[vars$9.cursor]: 'wait'
+		[vars$a.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$9.color]: helperRefs$1.contrast,
-			[vars$9.backgroundColor]: helperRefs$1.main,
+			[vars$a.color]: helperRefs$1.contrast,
+			[vars$a.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$9.backgroundColor]: helperRefs$1.dark
+				[vars$a.backgroundColor]: helperRefs$1.dark
 			},
 			_loading: {
-				[vars$9.backgroundColor]: helperRefs$1.main
+				[vars$a.backgroundColor]: helperRefs$1.main
 			}
 		},
 		outline: {
-			[vars$9.color]: helperRefs$1.main,
-			[vars$9.borderColor]: helperRefs$1.main,
+			[vars$a.color]: helperRefs$1.main,
+			[vars$a.borderColor]: helperRefs$1.main,
 			_hover: {
-				[vars$9.color]: helperRefs$1.dark,
-				[vars$9.borderColor]: helperRefs$1.dark,
+				[vars$a.color]: helperRefs$1.dark,
+				[vars$a.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$9.color]: helperRefs$1.error
+					[vars$a.color]: helperRefs$1.error
 				}
 			}
 		},
 		link: {
-			[vars$9.color]: helperRefs$1.main,
-			[vars$9.padding]: 0,
-			[vars$9.margin]: 0,
-			[vars$9.lineHeight]: helperRefs$1.height,
-			[vars$9.borderRadius]: 0,
+			[vars$a.color]: helperRefs$1.main,
+			[vars$a.padding]: 0,
+			[vars$a.margin]: 0,
+			[vars$a.lineHeight]: helperRefs$1.height,
+			[vars$a.borderRadius]: 0,
 			_hover: {
-				[vars$9.color]: helperRefs$1.main,
-				[vars$9.textDecoration]: 'underline'
+				[vars$a.color]: helperRefs$1.main,
+				[vars$a.textDecoration]: 'underline'
 			}
 		}
 	}
 };
 
-const globalRefs$3 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
-const vars$8 = TextField.cssVarList;
+const vars$9 = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$3.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$4.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$3.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$4.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$3.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$4.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '16px',
-			[vars.padding]: `0 ${globalRefs$3.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$4.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$3.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$4.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$3.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$3.colors.surface.contrast,
+	[vars.color]: globalRefs$4.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$4.colors.surface.contrast,
 
-	[vars.backgroundColor]: globalRefs$3.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$4.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$3.radius.sm,
+	[vars.borderRadius]: globalRefs$4.radius.sm,
 
 	_borderOffset: {
 		[vars.outlineOffset]: '2px'
 	},
 
 	_disabled: {
-		[vars.color]: globalRefs$3.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$3.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$3.colors.surface.main
+		[vars.color]: globalRefs$4.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$4.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$4.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -1745,27 +2270,27 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
+		[vars.outline]: `2px solid ${globalRefs$4.colors.surface.main}`
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$3.colors.surface.main
+		[vars.borderColor]: globalRefs$4.colors.surface.main
 	},
 
 	_hasErrorMessage: {
-		[vars.borderColor]: globalRefs$3.colors.error.main,
-		[vars.color]: globalRefs$3.colors.error.main,
-		[vars.placeholderColor]: globalRefs$3.colors.error.light
+		[vars.borderColor]: globalRefs$4.colors.error.main,
+		[vars.color]: globalRefs$4.colors.error.main,
+		[vars.placeholderColor]: globalRefs$4.colors.error.light
 	}
 });
 
-var textField$1 = textField(vars$8);
+var textField$1 = textField(vars$9);
 
-const vars$7 = PasswordField.cssVarList;
+const vars$8 = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$7),
-	[vars$7.revealCursor]: 'pointer'
+	...textField(vars$8),
+	[vars$8.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -1776,134 +2301,60 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$2 = getThemeRefs(globals);
-const vars$6 = TextArea.cssVarList;
+const globalRefs$3 = getThemeRefs(globals);
+const vars$7 = TextArea.cssVarList;
 
 const textArea = {
-	[vars$6.color]: globalRefs$2.colors.primary.main,
-	[vars$6.backgroundColor]: globalRefs$2.colors.surface.light,
-	[vars$6.resize]: 'vertical',
+	[vars$7.color]: globalRefs$3.colors.primary.main,
+	[vars$7.backgroundColor]: globalRefs$3.colors.surface.light,
+	[vars$7.resize]: 'vertical',
 
-	[vars$6.borderRadius]: globalRefs$2.radius.sm,
-	[vars$6.borderWidth]: '1px',
-	[vars$6.borderStyle]: 'solid',
-	[vars$6.borderColor]: 'transparent',
+	[vars$7.borderRadius]: globalRefs$3.radius.sm,
+	[vars$7.borderWidth]: '1px',
+	[vars$7.borderStyle]: 'solid',
+	[vars$7.borderColor]: 'transparent',
 
 	_borderOffset: {
-		[vars$6.outlineOffset]: '2px'
+		[vars$7.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars$6.borderColor]: globalRefs$2.colors.surface.main
+		[vars$7.borderColor]: globalRefs$3.colors.surface.main
 	},
 
 	_focused: {
-		[vars$6.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
+		[vars$7.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$6.width]: '100%'
+		[vars$7.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$6.cursor]: 'not-allowed'
+		[vars$7.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$6.outline]: `2px solid ${globalRefs$2.colors.error.main}`
+		[vars$7.outline]: `2px solid ${globalRefs$3.colors.error.main}`
 	}
 };
 
-const vars$5 = Checkbox.cssVarList;
+const vars$6 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$5.cursor]: 'pointer'
+	[vars$6.cursor]: 'pointer'
 };
 
-const componentName$2 = getComponentName('switch-toggle');
-
-let overrides$1 = ``;
-
-const SwitchToggle = compose(
-	createStyleMixin({
-		mappings: {
-			width: matchHostStyle(),
-			cursor: [{}, { selector: '> label' }]
-		}
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-checkbox',
-		style: () => overrides$1,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$2
-	})
-);
-
-overrides$1 = `
-	:host {
-		display: inline-block;
-	}
-	
-	:host {
-		--margin: 7px;
-		--width: var(${SwitchToggle.cssVarList.width});
-		--height: calc(var(--width) / 2);
-		--radius: var(--height);
-		--knobSize: calc(var(--height) - 5px);
-		--bgColor: #fff;
-		--knobBgColor: #000;
-	}
-	vaadin-checkbox>label {
-		cursor: pointer;
-		border: 1px solid;
-		text-indent: -99999px;
-		display: block;
-		position: relative;			
-		width: var(--width);
-		height: var(--height);
-		background: var(--bgColor);
-		border-radius: var(--radius);
-	}
-	vaadin-checkbox>label::after {
-		content: '';
-		position: absolute;
-		transition: 0.3s;
-		top: var(--margin);
-		left: var(--margin);
-		width: var(--knobSize);
-		height: var(--knobSize);
-		background: var(--knobBgColor);
-		border-radius: var(--knobSize);
-	}
-	vaadin-checkbox::part(checkbox) {
-		height: 0;
-		width: 0;
-		visibility: hidden;
-	}
-	vaadin-checkbox[checked]>label::after {
-		transform: translateX(-100%);
-		left: calc(100% - var(--margin));
-	}
-	vaadin-checkbox[active]>label::after {
-		width: calc(var(--knobSize) + 15px);
-	}
-`;
-
-const vars$4 = SwitchToggle.cssVarList;
+const vars$5 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$4.width]: '70px',
-	[vars$4.cursor]: [{}, { selector: '> label' }]
+	[vars$5.width]: '70px',
+	[vars$5.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$2 = getThemeRefs(globals);
 
-const vars$3 = Container.cssVarList;
+const vars$4 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -1926,31 +2377,31 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars$3.display]: 'flex',
+	[vars$4.display]: 'flex',
 	verticalPadding: {
-		sm: { [vars$3.verticalPadding]: '5px' },
-		md: { [vars$3.verticalPadding]: '10px' },
-		lg: { [vars$3.verticalPadding]: '20px' },
+		sm: { [vars$4.verticalPadding]: '5px' },
+		md: { [vars$4.verticalPadding]: '10px' },
+		lg: { [vars$4.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$3.horizontalPadding]: '5px' },
-		md: { [vars$3.horizontalPadding]: '10px' },
-		lg: { [vars$3.horizontalPadding]: '20px' },
+		sm: { [vars$4.horizontalPadding]: '5px' },
+		md: { [vars$4.horizontalPadding]: '10px' },
+		lg: { [vars$4.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$3.flexDirection]: 'row',
-			[vars$3.alignItems]: helperRefs.verticalAlignment,
-			[vars$3.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$4.flexDirection]: 'row',
+			[vars$4.alignItems]: helperRefs.verticalAlignment,
+			[vars$4.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$3.flexDirection]: 'column',
-			[vars$3.alignItems]: helperRefs.horizontalAlignment,
-			[vars$3.justifyContent]: helperRefs.verticalAlignment,
+			[vars$4.flexDirection]: 'column',
+			[vars$4.alignItems]: helperRefs.horizontalAlignment,
+			[vars$4.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -1959,131 +2410,183 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$3.gap]: '10px'
+			[vars$4.gap]: '10px'
 		},
 		md: {
-			[vars$3.gap]: '20px'
+			[vars$4.gap]: '20px'
 		},
 		lg: {
-			[vars$3.gap]: '30px'
+			[vars$4.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${helperRefs.shadowColor}`
 		},
 		md: {
-			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.md} ${helperRefs.shadowColor}`
 		},
 		lg: {
-			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.lg} ${helperRefs.shadowColor}`
 		},
 		xl: {
-			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$3.borderRadius]: globalRefs$1.radius.sm
+			[vars$4.borderRadius]: globalRefs$2.radius.sm
 		},
 		md: {
-			[vars$3.borderRadius]: globalRefs$1.radius.md
+			[vars$4.borderRadius]: globalRefs$2.radius.md
 		},
 		lg: {
-			[vars$3.borderRadius]: globalRefs$1.radius.lg
+			[vars$4.borderRadius]: globalRefs$2.radius.lg
 		},
 	}
 };
 
-const vars$2 = Logo.cssVarList;
+const vars$3 = Logo.cssVarList;
 
 const logo = {
-	[vars$2.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$3.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs = getThemeRefs(globals);
+const globalRefs$1 = getThemeRefs(globals);
 
-const vars$1 = Text.cssVarList;
+const vars$2 = Text.cssVarList;
 
 const text = {
-	[vars$1.lineHeight]: '1em',
-	[vars$1.display]: 'inline-block',
-	[vars$1.textAlign]: 'left',
-	[vars$1.color]: globalRefs.colors.surface.dark,
+	[vars$2.lineHeight]: '1em',
+	[vars$2.display]: 'inline-block',
+	[vars$2.textAlign]: 'left',
+	[vars$2.color]: globalRefs$1.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$1.fontSize]: globalRefs.typography.h1.size,
-			[vars$1.fontWeight]: globalRefs.typography.h1.weight,
-			[vars$1.fontFamily]: globalRefs.typography.h1.font
+			[vars$2.fontSize]: globalRefs$1.typography.h1.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.h1.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.h1.font
 		},
 		h2: {
-			[vars$1.fontSize]: globalRefs.typography.h2.size,
-			[vars$1.fontWeight]: globalRefs.typography.h2.weight,
-			[vars$1.fontFamily]: globalRefs.typography.h2.font
+			[vars$2.fontSize]: globalRefs$1.typography.h2.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.h2.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.h2.font
 		},
 		h3: {
-			[vars$1.fontSize]: globalRefs.typography.h3.size,
-			[vars$1.fontWeight]: globalRefs.typography.h3.weight,
-			[vars$1.fontFamily]: globalRefs.typography.h3.font
+			[vars$2.fontSize]: globalRefs$1.typography.h3.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.h3.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.h3.font
 		},
 		subtitle1: {
-			[vars$1.fontSize]: globalRefs.typography.subtitle1.size,
-			[vars$1.fontWeight]: globalRefs.typography.subtitle1.weight,
-			[vars$1.fontFamily]: globalRefs.typography.subtitle1.font
+			[vars$2.fontSize]: globalRefs$1.typography.subtitle1.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.subtitle1.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$1.fontSize]: globalRefs.typography.subtitle2.size,
-			[vars$1.fontWeight]: globalRefs.typography.subtitle2.weight,
-			[vars$1.fontFamily]: globalRefs.typography.subtitle2.font
+			[vars$2.fontSize]: globalRefs$1.typography.subtitle2.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.subtitle2.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.subtitle2.font
 		},
 		body1: {
-			[vars$1.fontSize]: globalRefs.typography.body1.size,
-			[vars$1.fontWeight]: globalRefs.typography.body1.weight,
-			[vars$1.fontFamily]: globalRefs.typography.body1.font
+			[vars$2.fontSize]: globalRefs$1.typography.body1.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.body1.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.body1.font
 		},
 		body2: {
-			[vars$1.fontSize]: globalRefs.typography.body2.size,
-			[vars$1.fontWeight]: globalRefs.typography.body2.weight,
-			[vars$1.fontFamily]: globalRefs.typography.body2.font
+			[vars$2.fontSize]: globalRefs$1.typography.body2.size,
+			[vars$2.fontWeight]: globalRefs$1.typography.body2.weight,
+			[vars$2.fontFamily]: globalRefs$1.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$1.color]: globalRefs.colors.primary.main
+			[vars$2.color]: globalRefs$1.colors.primary.main
 		},
 		secondary: {
-			[vars$1.color]: globalRefs.colors.secondary.main
+			[vars$2.color]: globalRefs$1.colors.secondary.main
 		},
 		error: {
-			[vars$1.color]: globalRefs.colors.error.main
+			[vars$2.color]: globalRefs$1.colors.error.main
 		},
 		success: {
-			[vars$1.color]: globalRefs.colors.success.main
+			[vars$2.color]: globalRefs$1.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$1.textAlign]: 'right' },
-		left: { [vars$1.textAlign]: 'left' },
-		center: { [vars$1.textAlign]: 'center' }
+		right: { [vars$2.textAlign]: 'right' },
+		left: { [vars$2.textAlign]: 'left' },
+		center: { [vars$2.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$1.width]: '100%',
-		[vars$1.display]: 'block'
+		[vars$2.width]: '100%',
+		[vars$2.display]: 'block'
 	},
 	_italic: {
-		[vars$1.fontStyle]: 'italic'
+		[vars$2.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$1.textTransform]: 'uppercase'
+		[vars$2.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$1.textTransform]: 'lowercase'
+		[vars$2.textTransform]: 'lowercase'
+	}
+};
+
+const globalRefs = getThemeRefs(globals);
+const vars$1 = Link.cssVarList;
+
+const link = {
+	[vars$1.cursor]: 'pointer',
+	[vars$1.borderBottomWidth]: '2px',
+	[vars$1.borderBottomStyle]: 'solid',
+	[vars$1.borderBottomColor]: 'transparent',
+	[vars$1.color]: globalRefs.colors.primary.main,
+
+	_hover: {
+		[vars$1.borderBottomColor]: globalRefs.colors.primary.main
+	},
+
+	textAlign: {
+		right: { [vars$1.textAlign]: 'right' },
+		left: { [vars$1.textAlign]: 'left' },
+		center: { [vars$1.textAlign]: 'center' }
+	},
+
+	_fullWidth: {
+		[vars$1.width]: '100%'
+	},
+
+	mode: {
+		primary: {
+			[vars$1.color]: globalRefs.colors.primary.main,
+			_hover: {
+				[vars$1.borderBottomColor]: globalRefs.colors.primary.main
+			}
+		},
+		secondary: {
+			[vars$1.color]: globalRefs.colors.secondary.main,
+			_hover: {
+				[vars$1.borderBottomColor]: globalRefs.colors.secondary.main
+			}
+		},
+		error: {
+			[vars$1.color]: globalRefs.colors.error.main,
+			_hover: {
+				[vars$1.borderBottomColor]: globalRefs.colors.error.main
+			}
+		},
+		success: {
+			[vars$1.color]: globalRefs.colors.success.main,
+			_hover: {
+				[vars$1.borderBottomColor]: globalRefs.colors.success.main
+			}
+		}
 	}
 };
 
@@ -2108,135 +2611,6 @@ const divider = {
 	}
 };
 
-const componentName$1 = getComponentName('passcode-internal');
-
-const componentName = getComponentName('passcode');
-
-const customMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    constructor() {
-      super();
-    }
-
-    get digits() {
-      return Number.parseInt(this.getAttribute('digits')) || 6
-    }
-
-    connectedCallback() {
-      super.connectedCallback?.();
-      const template = document.createElement('template');
-
-      //forward required & pattern TODO use forwardAttrs
-      template.innerHTML = `
-      <${componentName$1} 
-        bordered="true" 
-        name="code" 
-        tabindex="0"
-        slot="input"
-        required="${this.shadowRoot.host.getAttribute('required')}"
-        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
-      ></${componentName$1}>
-      `;
-
-      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
-      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
-      this.proxyElement.appendChild(slotEle);
-
-      // we want to control when the element is out of focus 
-      // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
-      this.proxyElement._setFocused = () => { };
-
-      this.shadowRoot.host.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.querySelector(componentName$1);
-
-      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
-      this.inputElement.addEventListener('blur', () => {
-        this.proxyElement.validate();
-      });
-    }
-  };
-
-const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
-
-const Passcode = compose(
-  createStyleMixin({
-    mappings: {
-      ...restTextFieldMappings,
-    },
-    nestedMappings: {
-      borderColor: {
-        selector: ` ${TextField.componentName}`,
-        property: TextField.cssVarList.borderColor
-      }
-    }
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-text-field',
-    style: () => `
-    :host {
-      --vaadin-field-default-width: auto;
-    }
-
-    ::slotted([slot='input']) {
-      -webkit-mask-image: none;
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      padding: 0;
-    }
-
-    vaadin-text-field::part(input-field) {
-      background-color: transparent;
-      padding: 0;
-    }
-
-    ${overrides}
-    `,
-    excludeAttrsSync: ['tabindex'],
-    componentName
-  })
-);
-
-const overrides = `
-	:host {
-		display: inline-block;
-	}
-
-	vaadin-text-field {
-		margin: 0;
-		padding: 0;
-	}
-	vaadin-text-field::part(input-field) {
-		overflow: hidden;
-	}
-	vaadin-text-field[readonly] > input:placeholder-shown {
-		opacity: 1;
-	}
-
-	vaadin-text-field > label,
-	vaadin-text-field::part(input-field) {
-		cursor: pointer;
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field):focus {
-		cursor: text;
-	}
-	vaadin-text-field[required]::part(required-indicator)::after {
-		font-size: "12px";
-		content: "*";
-		color: var(${Passcode.cssVarList.color});
-	}
-	vaadin-text-field[readonly]::part(input-field)::after {
-		border: 0 solid;
-	}
-`;
-
 const passcode = {
 	...textField(Passcode.cssVarList),
 };
@@ -2253,6 +2627,7 @@ var components = {
 	container,
 	logo,
 	text,
+	link,
 	divider,
 	passcode
 };