@descope/web-components-ui 1.0.112 → 1.0.114

package/dist/cjs/index.cjs.js

@@ -208,6 +208,11 @@ const getThemeRefs = (theme, prefix) =>
 		set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
 	);
 
+const getThemeVars = (theme, prefix) =>
+	transformTheme(theme, [], (path) =>
+		set({}, path, getVarName(prefix ? [prefix, ...path] : path))
+	);
+
 const globalsThemeToStyle = (theme, themeName = '') => `
 *[data-theme="${themeName}"] {
 	${Object.entries(themeToCSSVarsObj(theme)).reduce(
@@ -223,7 +228,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		const property = restPath.pop();
 		const componentName = getComponentName(component);
 
-		if(property === 'undefined'){
+		if (property === 'undefined') {
 			console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
 		}
 
@@ -355,6 +360,154 @@ const genColors = (colors) => {
 	}, {});
 };
 
+const colors = genColors({
+	surface: {
+		main: 'lightgray',
+		light: '#fff',
+		dark: '#000',
+	},
+	primary: '#0082B5',
+	secondary: '#7D14EB',
+	success: 'green',
+	error: 'red'
+});
+
+const fonts = {
+	font1: {
+		family: [
+			"Roboto",
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Roboto",
+		url: "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
+	},
+	font2: {
+		family: [
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Roboto",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Sans Serif"
+	}
+};
+
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
+const typography = {
+	h1: {
+		font: fontsRef.font1.family,
+		weight: '900',
+		size: '48px'
+	},
+	h2: {
+		font: fontsRef.font1.family,
+		weight: '800',
+		size: '38px'
+	},
+	h3: {
+		font: fontsRef.font1.family,
+		weight: '600',
+		size: '28px'
+	},
+	subtitle1: {
+		font: fontsRef.font2.family,
+		weight: '500',
+		size: '22px'
+	},
+	subtitle2: {
+		font: fontsRef.font2.family,
+		weight: '400',
+		size: '20px'
+	},
+	body1: {
+		font: fontsRef.font1.family,
+		weight: '400',
+		size: '16px'
+	},
+	body2: {
+		font: fontsRef.font1.family,
+		weight: '400',
+		size: '14px'
+	}
+};
+
+const spacing = {
+	xs: '2px',
+	sm: '4px',
+	md: '8px',
+	lg: '16px',
+	xl: '32px'
+};
+
+const border = {
+	xs: '1px',
+	sm: '2px',
+	md: '3px',
+	lg: '4px',
+	xl: '5px'
+};
+
+const radius = {
+	xs: '5px',
+	sm: '10px',
+	md: '15px',
+	lg: '20px',
+	xl: '25px',
+	'2xl': '30px',
+	'3xl': '35px'
+};
+
+const shadow = {
+	wide: {
+		sm: '0 2px 3px -0.5px',
+		md: '0 4px 6px -1px',
+		lg: '0 10px 15px -3px',
+		xl: '0 20px 25px -5px',
+		'2xl': '0 25px 50px -12px'
+	},
+	narrow: {
+		sm: '0 1px 2px -1px',
+		md: '0 2px 4px -2px',
+		lg: '0 4px 6px -4px',
+		xl: '0 8px 10px -6px',
+		'2xl': '0 16px 16px -8px'
+	}
+};
+
+const globals = {
+	colors,
+	typography,
+	spacing,
+	border,
+	radius,
+	shadow,
+	fonts
+};
+const vars$l = getThemeVars(globals);
+
 const createCssVarFallback = (first, ...rest) =>
 	`var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
 
@@ -1276,389 +1429,81 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const createBaseInputClass = (...args) => compose(
-  inputValidationMixin,
-  changeMixin,
-  normalizeBooleanAttributesMixin,
-  inputEventsDispatchingMixin
-)(createBaseClass(...args));
-
-const componentName$n = getComponentName('boolean-field-internal');
-
-createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
-
-const booleanFieldMixin = (superclass) =>
-    class BooleanFieldMixinClass extends superclass {
-        constructor() {
-            super();
-        }
-
-        init() {
-            super.init?.();
-
-            const template = document.createElement('template');
-            template.innerHTML = `
-				<${componentName$n} 
-					tabindex="-1"
-					slot="input"
-				></${componentName$n}>
-			`;
-
-            this.baseElement.appendChild(template.content.cloneNode(true));
-            this.inputElement = this.shadowRoot.querySelector(componentName$n);
-            this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
-
-            forwardAttrs(this, this.inputElement, {
-                includeAttrs: [
-                    'required',
-                    'full-width',
-                    'size',
-                    'label',
-                    'invalid',
-                ]
-            });
-
-            forwardProps(this.inputElement, this, ['checked']);
-            syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
-        }
-    };
-
-var commonStyles = `
-:host {
-	--vaadin-field-default-width: auto;
-	display: inline-flex;
-}
-.wrapper {
-	display: flex;
-}
-
-vaadin-text-field {
-	position: relative;
-	padding: 0;
-	display: inline-flex;
-	align-items: flex-start;
-}
-vaadin-text-field::before {
-	height: 0;
-	margin: 0;
-}
-vaadin-text-field::part(label) {
-    position: absolute;
-    top: 0;
-}
-vaadin-text-field::part(input-field) {
-	padding: 0;
-	background: none;
-	min-height: 0;
-}
-vaadin-text-field::part(input-field)::after {
-    background: none;
-}
-vaadin-text-field[focus-ring]::part(input-field) {
-	box-shadow: none;
-}
-vaadin-text-field[required]::part(required-indicator)::after {
-	content: "*";
-}
+const componentName$n = getComponentName('button');
 
-vaadin-checkbox [slot="label"] {
-    align-self: flex-start;
-    opacity: 0;
-    padding: 0;
-}
-[required] vaadin-checkbox [slot="label"] {
-	padding-right: 1em;
-}
-vaadin-checkbox::part(checkbox) {
-	margin: 0;
-}
-vaadin-checkbox[focus-ring]::part(checkbox) {
-	box-shadow: none;
-}
+const resetStyles = `
+	:host {
+		display: inline-block;
+	}
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+	}
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
 
-descope-boolean-field-internal {
-	-webkit-mask-image: none;
-	min-height: 0;
-	padding: 0;
-}
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 `;
 
-const componentName$m = getComponentName('checkbox');
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 
-const {
-	host: host$a,
-	component: component$1,
-	checkboxElement,
-	checkboxSurface,
-	checkboxHiddenLabel: checkboxHiddenLabel$1,
-	label: label$7,
-	requiredIndicator: requiredIndicator$5
-} = {
+const { host: host$a, label: label$7 } = {
 	host: { selector: () => ':host' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
-	component: { selector: 'vaadin-checkbox' },
-	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
-	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
 };
 
-const CheckboxClass = compose(
+const ButtonClass = compose(
 	createStyleMixin({
 		mappings: {
+			color: {},
+			textDecoration: label$7,
+			fontSize: {},
+			cursor: {},
+			backgroundColor: {},
+			borderRadius: {},
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
 			width: host$a,
-			cursor: component$1,
-
-			// Checkbox
-			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
-			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
-
-			checkboxSize: [
-				{ ...checkboxElement, property: 'width' },
-				{ ...label$7, property: 'margin-left' },
-				{ ...checkboxElement, property: 'height' },
-				{ ...checkboxSurface, property: 'font-size' },
-				{ ...component$1, property: 'font-size' },
-				{ ...label$7, property: 'line-height' },
-				{ ...checkboxHiddenLabel$1, property: 'line-height' }
-			],
-
-			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
-			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
-			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
-			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
-
-			// Checkmark
-			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
-
-			// Label
-			labelFontSize: [
-				{ ...host$a, property: 'font-size' },
-				{ ...checkboxElement, property: 'font-size' },
-				{ ...label$7, property: 'font-size' },
-				{ ...checkboxHiddenLabel$1, property: 'font-size' }
-			],
-			labelFontWeight: [
-				{ ...label$7, property: 'font-weight' },
-				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
-			],
-			labelMargin: [
-				{ ...label$7, property: 'left' },
-				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
-			],
-			labelTextColor: [
-				{ ...label$7, property: 'color' },
-				{ ...requiredIndicator$5, property: 'color' },
+			gap: label$7,
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' },
 			],
-		},
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' },
+			]
+		}
 	}),
 	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	booleanFieldMixin
+	componentNameValidationMixin
 )(
 	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: `
-		${commonStyles}
-
-		vaadin-checkbox [slot="label"] {
-			height: 100%;
-			cursor: pointer;
-		}
+		slots: ['prefix', 'label', 'suffix'],
+		wrappedEleName: 'vaadin-button',
+		style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$m
-	})
-);
-
-const componentName$l = getComponentName('switch-toggle');
-
-const {
-	host: host$9,
-	component,
-	checkboxElement: track,
-	checkboxSurface: knob,
-	checkboxHiddenLabel,
-	label: label$6,
-	requiredIndicator: requiredIndicator$4,
-} = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '::part(required-indicator)::after' },
-	component: { selector: 'vaadin-checkbox' },
-	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
-	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
-	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
-};
-
-const SwitchToggleClass = compose(
-	createStyleMixin({
-		mappings: {
-			width: host$9,
-			cursor: [component, checkboxHiddenLabel, track],
-			fontSize: [component, label$6, checkboxHiddenLabel],
-
-			// Track
-			trackBorderWidth: { ...track, property: 'border-width' },
-			trackBorderStyle: { ...track, property: 'border-style' },
-			trackBorderColor: { ...track, property: 'border-color' },
-
-			// Checkbox
-			trackBackgroundColor: { ...track, property: 'background-color' },
-			trackRadius: { ...track, property: 'border-radius' },
-
-			trackWidth: [
-				{ ...track, property: 'width' },
-			],
-			trackHeight: [
-				{ ...knob, property: 'font-size' },
-				{ ...track, property: 'height' }
-			],
-			switchOutlineWidth: { ...track, property: 'outline-width' },
-			switchOutlineOffset: { ...track, property: 'outline-offset' },
-			switchOutlineColor: { ...track, property: 'outline-color' },
-			switchOutlineStyle: { ...track, property: 'outline-style' },
-
-			// Knob
-			knobSize: [
-				{ ...knob, property: 'width' },
-				{ ...knob, property: 'height' },
-			],
-			knobTextColor: { ...knob, property: 'color' },
-			knobRadius: { ...knob, property: 'border-radius' },
-			knobTransition: { ...knob, property: 'transition' },
-			knobColor: { ...knob, property: 'background-color' },
-			knobTopOffset: { ...knob, property: 'top' },
-			knobPosition: { ...knob, property: 'left' },
-
-			// Label
-			labelMargin: [
-				{ ...label$6, property: 'padding-left' },
-				{ ...checkboxHiddenLabel, property: 'padding-left' }
-			],
-			labelLineHeight: [
-				{ ...label$6, property: 'line-height' },
-				{ ...checkboxHiddenLabel, property: 'line-height' }
-			],
-			labelFontWeight: [
-				{ ...label$6, property: 'font-weight' },
-				{ ...checkboxHiddenLabel, property: 'font-weight' }
-			],
-			labelTextColor: [
-				{ ...label$6, property: 'color' },
-				{ ...requiredIndicator$4, property: 'color' },
-			],
-		},
-	}),
-	draggableMixin,
-	proxyInputMixin,
-	componentNameValidationMixin,
-	booleanFieldMixin
-)(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
-		${commonStyles}
-
-		vaadin-text-field::part(label) {
-			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
-		}
-
-		vaadin-checkbox[active]::part(checkbox) {
-			transform: none;
-		}
-		vaadin-checkbox[checked]::part(checkbox) {
-			background: none;
-		}
-		vaadin-checkbox::part(checkbox)::after {
-			position: absolute;
-			opacity: 1;
-			content: '';
-		}
-		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$l
-	})
-);
-
-const componentName$k = getComponentName('button');
-
-const resetStyles = `
-	:host {
-		display: inline-block;
-	}
-	vaadin-button {
-		margin: 0;
-		min-width: 0;
-		width: 100%;
-		height: auto;
-	}
-	vaadin-button::part(label) {
-		padding: 0;
-	}
-	vaadin-button::part(prefix) {
-		margin-left: 0;
-		margin-right: 0;
-	}
-`;
-
-const iconStyles = `
-	vaadin-button::part(prefix),
-	vaadin-button::part(label) {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-`;
-
-const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
-
-const { host: host$8, label: label$5 } = {
-	host: { selector: () => ':host' },
-	label: { selector: '::part(label)' },
-};
-
-const ButtonClass = compose(
-	createStyleMixin({
-		mappings: {
-			color: {},
-			textDecoration: label$5,
-			fontSize: {},
-			cursor: {},
-			backgroundColor: {},
-			borderRadius: {},
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
-			width: host$8,
-			gap: label$5,
-			verticalPadding: [
-				{ property: 'padding-top' },
-				{ property: 'padding-bottom' },
-			],
-			horizontalPadding: [
-				{ property: 'padding-left' },
-				{ property: 'padding-right' },
-			]
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: ['prefix', 'label', 'suffix'],
-		wrappedEleName: 'vaadin-button',
-		style: () => `
-			${resetStyles}
-			${iconStyles}
-			${loadingIndicatorStyles}
-			${editorOverrides}
-		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$k
+		componentName: componentName$n
 	})
 );
 
@@ -1691,261 +1536,97 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-const componentName$j = getComponentName('loader-linear');
+const globalRefs$e = getThemeRefs(globals);
+const compVars$2 = ButtonClass.cssVarList;
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$j, baseSelector: ':host > div' }) {
-	static get componentName() {
-		return componentName$j;
-	}
-	constructor() {
-		super();
+const mode = {
+	primary: globalRefs$e.colors.primary,
+	secondary: globalRefs$e.colors.secondary,
+	success: globalRefs$e.colors.success,
+	error: globalRefs$e.colors.error,
+	surface: globalRefs$e.colors.surface
+};
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes tilt {
-				0% { transform: translateX(0); }
-				50% { transform: translateX(400%); }
-			}
-			:host {
-				position: relative;
-				display: flex;
-			}
-			div::after {
-				content: '';
-				animation-name: tilt;
-				position: absolute;
-				left: 0;
-			}
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars({ mode }, componentName$n);
 
-			:host > div {
-				width: 100%;
-			}
-		</style>
-		<div></div>
-	`;
-	}
-}
+const verticalPaddingRatio = 3;
+const horizontalPaddingRatio = 2;
 
-const selectors$3 = {
-	root: {},
-	after: { selector: '::after' },
-	host: { selector: () => ':host' }
-};
+const button = {
+	...helperTheme$2,
 
-const { root: root$1, after: after$1, host: host$7 } = selectors$3;
+	[compVars$2.cursor]: 'pointer',
 
-const LoaderLinearClass = compose(
-	createStyleMixin({
-		mappings: {
-			display: root$1,
-			width: host$7,
-			height: [root$1, after$1],
-			borderRadius: [root$1, after$1],
-			surfaceColor: [{ property: 'background-color' }],
-			barColor: [{ ...after$1, property: 'background-color' }],
-			barWidth: { ...after$1, property: 'width' },
-			animationDuration: [root$1, after$1],
-			animationTimingFunction: [root$1, after$1],
-			animationIterationCount: [root$1, after$1]
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawLoaderLinear);
+	[compVars$2.borderRadius]: globalRefs$e.radius.sm,
+	[compVars$2.borderWidth]: '2px',
+	[compVars$2.borderStyle]: 'solid',
+	[compVars$2.borderColor]: 'transparent',
 
-const componentName$i = getComponentName('loader-radial');
+	[compVars$2.gap]: '0.25em',
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$i, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
+	[compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
+	[compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
-				0% { transform: rotate(0deg); }
-				100% { transform: rotate(360deg); }
-			}
-			:host {
-				position: relative;
-				display: inline-flex;
+	size: {
+		xs: { [compVars$2.fontSize]: '12px' },
+		sm: { [compVars$2.fontSize]: '14px' },
+		md: { [compVars$2.fontSize]: '18px' },
+		lg: { [compVars$2.fontSize]: '22px' },
+		xl: { [compVars$2.fontSize]: '26px' }
+	},
+
+	_fullWidth: {
+		[compVars$2.width]: '100%'
+	},
+
+	_loading: {
+		[compVars$2.cursor]: 'wait'
+	},
+
+	variant: {
+		contained: {
+			[compVars$2.color]: helperRefs$2.contrast,
+			[compVars$2.backgroundColor]: helperRefs$2.main,
+			_hover: {
+				[compVars$2.backgroundColor]: helperRefs$2.dark
+			},
+			_active: {
+				[compVars$2.backgroundColor]: helperRefs$2.dark
 			}
-			:host > div {
-				animation-name: spin;
+		},
+
+		outline: {
+			[compVars$2.color]: helperRefs$2.main,
+			[compVars$2.borderColor]: 'currentColor',
+			_hover: {
+				[compVars$2.color]: helperRefs$2.dark,
+			},
+			_active: {
+				[compVars$2.color]: helperRefs$2.light,
 			}
-		</style>
-		<div></div>
-	`;
-	}
-}
+		},
 
-const LoaderRadialClass = compose(
-	createStyleMixin({
-		mappings: {
-			display: {},
-			width: {},
-			height: {},
-			spinnerWidth: { property: 'border-width' },
-			spinnerStyle: { property: 'border-style' },
-			spinnerRadius: { property: 'border-radius' },
-			spinnerTopColor: { property: 'border-top-color' },
-			spinnerBottomColor: { property: 'border-bottom-color' },
-			spinnerRightColor: { property: 'border-right-color' },
-			spinnerLeftColor: { property: 'border-left-color' },
-			color: {},
-			animationDuration: {},
-			animationTimingFunction: {},
-			animationIterationCount: {}
+		link: {
+			[compVars$2.color]: helperRefs$2.main,
+			_hover: {
+				[compVars$2.color]: helperRefs$2.main,
+				[compVars$2.textDecoration]: 'underline'
+			},
+			_active: {
+				[compVars$2.color]: helperRefs$2.dark
+			}
 		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawLoaderRadial);
+	}
+};
+const vars$k = { ...compVars$2, ...helperVars$2 };
 
-const componentName$h = getComponentName('container');
+var button$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: button,
+	vars: vars$k
+});
 
-class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
-	constructor() {
-		super();
-
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host > slot {
-				box-sizing: border-box;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				overflow: hidden;
-			}
-			:host {
-				display: inline-block;
-				overflow: auto;
-			}
-		</style>
-		<slot></slot>
-	`;
-	}
-}
-
-const ContainerClass = compose(
-	createStyleMixin({
-		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
-
-			verticalPadding: [
-				{ property: 'padding-top' },
-				{ property: 'padding-bottom' }
-			],
-			horizontalPadding: [
-				{ property: 'padding-left' },
-				{ property: 'padding-right' }
-			],
-
-			flexDirection: {},
-			justifyContent: {},
-			alignItems: {},
-			gap: {},
-			flexWrap: {},
-
-			backgroundColor: {},
-			color: {},
-			borderRadius: {},
-
-			borderColor: {},
-			borderStyle: {},
-			borderWidth: {},
-
-			boxShadow: {}
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawContainer);
-
-const componentName$g = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
-
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > div {
-				display: flex;
-				height: 100%;
-				width: 100%;
-			}
-			:host > div::before,
-			:host > div::after {
-				content: '';
-				flex-grow: 1;
-			}
-
-			descope-text {
-				flex-grow: 0;
-				flex-shrink: 0;
-				min-width: fit-content;
-			}
-
-			:host(:empty) descope-text {
-				display: none;
-			}
-
-			:host([vertical="true"]) div {
-				width: fit-content;
-			}
-
-		</style>
-		<div>
-			<descope-text>
-				<slot></slot>
-			</descope-text>
-		</div>
-	`;
-
-		this.textComponent = this.shadowRoot.querySelector('descope-text');
-
-		forwardAttrs(this, this.textComponent, {
-			includeAttrs: ['mode', 'variant', 'italic']
-		});
-	}
-}
-
-const selectors$2 = {
-	root: { selector: '' },
-	before: { selector: '::before' },
-	after: { selector: '::after' },
-	text: { selector: 'descope-text' },
-	host: { selector: () => ':host' },
-};
-
-const { root, before, after, text: text$1, host: host$6 } = selectors$2;
-
-const DividerClass = compose(
-	createStyleMixin({
-		mappings: {
-			maxTextWidth: { ...text$1, property: 'max-width' },
-			minHeight: root,
-			alignItems: root,
-			alignSelf: root,
-			flexDirection: root,
-			textPadding: { ...text$1, property: 'padding' },
-			width: host$6,
-			padding: host$6,
-			backgroundColor: [before, after],
-			opacity: [before, after],
-			textWidth: { ...text$1, property: 'width' },
-			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
-			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
-		},
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawDivider);
-
-const selectors$1 = {
+const selectors$3 = {
 	label: '::part(label)',
 	inputWrapper: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -1955,262 +1636,435 @@ const selectors$1 = {
 };
 
 var textFieldMappings = {
-	backgroundColor: { selector: selectors$1.inputWrapper },
-	labelTextColor: { selector: selectors$1.label, property: 'color' },
-	color: { selector: selectors$1.inputWrapper },
-	width: { selector: selectors$1.host },
+	backgroundColor: { selector: selectors$3.inputWrapper },
+	labelTextColor: { selector: selectors$3.label, property: 'color' },
+	color: { selector: selectors$3.inputWrapper },
+	width: { selector: selectors$3.host },
 	borderColor: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$3.inputWrapper },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$3.inputWrapper },
+		{ selector: selectors$3.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$1.inputWrapper },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$3.inputWrapper },
+		{ selector: selectors$3.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$1.inputWrapper },
-	boxShadow: { selector: selectors$1.inputWrapper },
+	borderRadius: { selector: selectors$3.inputWrapper },
+	boxShadow: { selector: selectors$3.inputWrapper },
 
 	// we apply font-size also on the host so we can set its width with em
-	fontSize: [{}, { selector: selectors$1.host }],
-
-	height: { selector: selectors$1.inputWrapper },
-	padding: { selector: selectors$1.inputWrapper },
-	margin: { selector: selectors$1.inputWrapper },
-	caretColor: { selector: selectors$1.input },
-	outlineColor: { selector: selectors$1.inputWrapper },
-	outlineStyle: { selector: selectors$1.inputWrapper },
+	fontSize: [{}, { selector: selectors$3.host }],
+
+	height: { selector: selectors$3.inputWrapper },
+	padding: { selector: selectors$3.inputWrapper },
+	margin: { selector: selectors$3.inputWrapper },
+	caretColor: { selector: selectors$3.input },
+	outlineColor: { selector: selectors$3.inputWrapper },
+	outlineStyle: { selector: selectors$3.inputWrapper },
 	outlineWidth: [
-		{ selector: selectors$1.inputWrapper },
+		{ selector: selectors$3.inputWrapper },
 		// we need to make sure there is enough space for the outline
 		{ property: 'padding' }
 	],
-	outlineOffset: { selector: selectors$1.inputWrapper },
-	textAlign: { selector: selectors$1.input },
-	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
+	outlineOffset: { selector: selectors$3.inputWrapper },
+	textAlign: { selector: selectors$3.input },
+	placeholderColor: { selector: selectors$3.placeholder, property: 'color' }
 };
 
-const componentName$f = getComponentName('email-field');
+const componentName$m = getComponentName('text-field');
 
 let overrides$4 = ``;
 
-const EmailFieldClass = compose(
-	createStyleMixin({
-		mappings: {
-			...textFieldMappings
+const observedAttrs = ['type'];
+
+const customMixin$3 = (superclass) =>
+	class TextFieldClass extends superclass {
+		static get observedAttributes() {
+			return observedAttrs.concat(superclass.observedAttributes || []);
+		}
+
+		attributeChangedCallback(attrName, oldVal, newVal) {
+			super.attributeChangeCallback?.(attrName, oldVal, newVal);
+
+			// Vaadin doesn't allow to change the input type attribute.
+			// We need the ability to do that, so we're overriding their
+			// behavior with their private API.
+			// When receiving a `type` attribute, we use their private API
+			// to set it on the input.
+			if (attrName === 'type') {
+				this.baseElement._setType(newVal);
+			}
 		}
+	};
+
+const TextFieldClass = compose(
+	createStyleMixin({
+		mappings: textFieldMappings
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	customMixin$3
 )(
 	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-email-field',
+		slots: ['prefix', 'suffix'],
+		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$m
 	})
 );
 
 overrides$4 = `
 	:host {
 		display: inline-block;
-		min-width: 10em;
+		--vaadin-field-default-width: auto;
 		max-width: 100%;
+		min-width: 10em;
+
 	}
-	vaadin-email-field {
+	vaadin-text-field {
 		margin: 0;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 	}
-	vaadin-email-field::before {
-		height: 0;
-	}
-	vaadin-email-field > input {
-		-webkit-mask-image: none;
-	}
-	vaadin-email-field::part(input-field) {
+
+	vaadin-text-field::part(input-field) {
 		overflow: hidden;
 		padding: 0;
 	}
-	vaadin-email-field[readonly] > input:placeholder-shown {
+	vaadin-text-field[disabled] > input:placeholder-shown,
+	vaadin-text-field[readonly] > input:placeholder-shown {
 		opacity: 1;
 	}
-	vaadin-email-field input:-webkit-autofill,
-	vaadin-email-field input:-webkit-autofill::first-line,
-	vaadin-email-field input:-webkit-autofill:hover,
-	vaadin-email-field input:-webkit-autofill:active,
-	vaadin-email-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
+	vaadin-text-field input:-webkit-autofill,
+	vaadin-text-field input:-webkit-autofill::first-line,
+	vaadin-text-field input:-webkit-autofill:hover,
+	vaadin-text-field input:-webkit-autofill:active,
+	vaadin-text-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
 	}
-	vaadin-email-field[required]::part(required-indicator)::after {
+
+	vaadin-text-field > input {
+		-webkit-mask-image: none;
+		min-height: 0;
+	}
+
+	vaadin-text-field[required]::part(required-indicator)::after {
 		content: "*";
-		color: var(${EmailFieldClass.cssVarList.color});
+		color: var(${TextFieldClass.cssVarList.color});
 	}
-	vaadin-email-field[readonly]::part(input-field)::after {
-		border: 0 solid;
+	vaadin-text-field::part(input-field)::after {
+		opacity: 0 !important;
 	}
-`;
 
-const componentName$e = getComponentName('text');
+	vaadin-text-field::before {
+		height: unset;
+	}
+`;
 
-class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
-	constructor() {
-		super();
+const globalRefs$d = getThemeRefs(globals);
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host {
-				display: inline-block;
-			}
-			:host > slot {
-				width: 100%;
-				display: inline-block;
-			}
-		</style>
-		<slot></slot>
-		`;
-	}
-}
+const vars$j = TextFieldClass.cssVarList;
 
-const TextClass = compose(
-	createStyleMixin({
-		mappings: {
-			fontFamily: {},
-			lineHeight: {},
-			fontStyle: {},
-			fontSize: {},
-			fontWeight: {},
-			width: { selector: () => ':host' },
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
-			borderWidth: {},
-			borderStyle: {},
-			borderColor: {},
-			textTransform: {},
-			textAlign: {},
-		},
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawText);
+const textField = (vars) => ({
+	[vars.padding]: '0 1em',
 
-const componentName$d = getComponentName('link');
+	[vars.outlineWidth]: '2px',
+	[vars.outlineStyle]: 'solid',
+	[vars.outlineColor]: 'transparent',
 
-class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
-	constructor() {
-		super();
+	[vars.height]: '2em',
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-		}
-		:host a {
-			display: inline-block;
+	size: {
+		xs: {
+			[vars.fontSize]: '8px',
+		},
+		sm: {
+			[vars.fontSize]: '10px',
+		},
+		md: {
+			[vars.fontSize]: '14px',
+		},
+		lg: {
+			[vars.fontSize]: '20px',
+		},
+		xl: {
+			[vars.fontSize]: '25px',
 		}
-		</style>
-		<div>
-			<a>
-				<descope-text>
-					<slot></slot>
-				</descope-text>
-			</a>
-		</div>
-		`;
+	},
 
-		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
-			includeAttrs: ['href', 'target', 'tooltip'],
-			mapAttrs: {
-				tooltip: 'title'
+	[vars.color]: globalRefs$d.colors.surface.contrast,
+	[vars.labelTextColor]: globalRefs$d.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$d.colors.surface.main,
+
+	[vars.backgroundColor]: globalRefs$d.colors.surface.light,
+
+	[vars.borderWidth]: '1px',
+	[vars.borderStyle]: 'solid',
+	[vars.borderColor]: 'transparent',
+	[vars.borderRadius]: globalRefs$d.radius.xs,
+
+	_disabled: {
+		[vars.color]: globalRefs$d.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$d.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$d.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars.width]: '100%'
+	},
+
+	_focused: {
+		[vars.outlineColor]: globalRefs$d.colors.surface.main
+	},
+
+	_bordered: {
+		[vars.borderColor]: globalRefs$d.colors.surface.main
+	},
+
+	_invalid: {
+		[vars.borderColor]: globalRefs$d.colors.error.main,
+		[vars.color]: globalRefs$d.colors.error.main,
+		[vars.outlineColor]: globalRefs$d.colors.error.light,
+		[vars.placeholderColor]: globalRefs$d.colors.error.light
+	}
+});
+
+var textField$1 = textField(vars$j);
+
+var textField$2 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: textField$1,
+	textField: textField,
+	vars: vars$j
+});
+
+const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
+	get isReadOnly() {
+		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+	}
+
+	init() {
+		// there is an issue in Chrome that input field with type password cannot be D&D
+		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
+		// and return the original type when done
+		this.addEventListener('mousedown', (e) => {
+			if (this.isDraggable & this.isReadOnly) {
+				const inputEle = this.baseElement.querySelector('input');
+				const prevType = inputEle.getAttribute('type');
+
+				inputEle.setAttribute('type', 'text');
+				setTimeout(() => inputEle.focus());
+
+				const onComplete = (e) => {
+					inputEle.setAttribute('type', prevType);
+
+					e.target.removeEventListener('mouseup', onComplete);
+					e.target.removeEventListener('dragend', onComplete);
+				};
+
+				e.target.addEventListener('mouseup', onComplete, { once: true });
+				e.target.addEventListener('dragend', onComplete, { once: true });
 			}
 		});
 
-		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
-			includeAttrs: ['mode', 'variant'],
-		});
+		super.init?.();
 	}
-}
+};
 
-const selectors = {
+const componentName$l = getComponentName('password-field');
+
+const {
+	host: host$9,
+	inputWrapper: inputWrapper$1,
+	inputElement,
+	inputElementPlaceholder,
+	revealButton,
+	revealButtonIcon,
+	revealButtonIconOutline,
+	label: label$6,
+	requiredIndicator: requiredIndicator$5
+} = {
 	host: { selector: () => ':host' },
-	anchor: {},
-	wrapper: { selector: () => ':host > div' },
-	text: { selector: () => TextClass.componentName }
+	inputWrapper: { selector: '::part(input-field)' },
+	inputElement: { selector: '> input' },
+	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
+	revealButton: { selector: 'vaadin-password-field-button' },
+	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
+	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
-const { anchor, text, host: host$5, wrapper } = selectors;
-
-const LinkClass = compose(
+const PasswordFieldClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$5,
-			textAlign: wrapper,
-			color: [anchor, { ...text, property: TextClass.cssVarList.color }],
-			cursor: anchor,
-			borderBottomWidth: anchor,
-			borderBottomStyle: anchor,
-			borderBottomColor: anchor
-		},
+			width: host$9,
+			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
+			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
+			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
+			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+
+			revealButtonOutlineBoxShadow: [
+				{
+					...revealButtonIconOutline,
+					property: 'box-shadow'
+				}
+			],
+
+			labelTextColor: [
+				{ ...label$6, property: 'color' },
+				{ ...requiredIndicator$5, property: 'color' }
+			],
+			inputTextColor: [
+				{ ...inputElement, property: 'color' },
+				{ ...revealButtonIcon, property: 'color' }
+			],
+			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
+			fontSize: [{}, host$9],
+			height: inputWrapper$1,
+			padding: inputWrapper$1,
+			pointerCursor: [
+				{ ...revealButton, property: 'cursor' },
+				{ ...label$6, property: 'cursor' },
+				{ ...requiredIndicator$5, property: 'cursor' }
+			],
+			outlineColor: inputWrapper$1,
+			outlineStyle: inputWrapper$1,
+			outlineWidth: [
+				inputWrapper$1,
+				// we need to make sure there is enough space for the outline
+				{ property: 'padding' }
+			],
+			backgroundColor: inputWrapper$1
+		}
 	}),
 	draggableMixin,
-	componentNameValidationMixin
-)(RawLink);
+	proxyInputMixin,
+	componentNameValidationMixin,
+	passwordDraggableMixin
+)(
+	createProxy({
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-password-field',
+		style: `
+			:host {
+				display: inline-block;
+				min-width: 10em;
+				max-width: 100%;
+			}
+			vaadin-password-field {
+				width: 100%;
+				box-sizing: border-box;
+			}
+			vaadin-password-field::part(input-field) {
+				padding: 0;
+			}
+			vaadin-password-field > input {
+				min-height: 0;
+				-webkit-mask-image: none;
+			}
+			vaadin-password-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+			vaadin-password-field::before {
+				height: initial;
+			}
+			vaadin-password-field::part(input-field)::after {
+				opacity: 0;
+			}	
+			vaadin-password-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			[readonly] vaadin-password-field-button {
+				pointer-events: none;
+			}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$l
+	})
+);
 
-const componentName$c = getComponentName('logo');
+const globalRefs$c = getThemeRefs(globals);
 
-let style;
-const getStyle = () => style;
+const vars$i = PasswordFieldClass.cssVarList;
 
-class RawLogo extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
-	constructor() {
-		super();
+const passwordField = {
+	[vars$i.wrapperBorderStyle]: 'solid',
+	[vars$i.wrapperBorderWidth]: '1px',
+	[vars$i.wrapperBorderColor]: 'transparent',
+	[vars$i.wrapperBorderRadius]: globalRefs$c.radius.xs,
+	[vars$i.backgroundColor]: globalRefs$c.colors.surface.light,
 
-		this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			${getStyle()}
-		</style>
-		<div></div>`;
-	}
-}
+	[vars$i.outlineWidth]: '2px',
+	[vars$i.outlineStyle]: 'solid',
+	[vars$i.outlineColor]: 'transparent',
 
-const LogoClass = compose(
-	createStyleMixin({
-		mappings: {
-			height: { selector: () => ':host' },
-			width: { selector: () => ':host' },
-			fallbackUrl: { property: 'content' },
-			url: { property: 'content' },
+	[vars$i.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
+
+
+	[vars$i.labelTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$i.inputTextColor]: globalRefs$c.colors.surface.contrast,
+	[vars$i.placeholderTextColor]: globalRefs$c.colors.surface.main,
+
+	[vars$i.pointerCursor]: 'pointer',
+
+	[vars$i.padding]: '0',
+	[vars$i.height]: '2em',
+
+	size: {
+		xs: {
+			[vars$i.fontSize]: '8px',
+		},
+		sm: {
+			[vars$i.fontSize]: '10px',
+		},
+		md: {
+			[vars$i.fontSize]: '14px',
+		},
+		lg: {
+			[vars$i.fontSize]: '20px',
+		},
+		xl: {
+			[vars$i.fontSize]: '25px',
 		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawLogo);
+	},
 
-style = `
-:host {
-	display: inline-flex;
-}
-:host > div {
-	display: inline-block;
-	content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
-	max-width: 100%;
-	max-height: 100%;
-	object-fit: contain;
-	margin: auto;
-}
-:host([draggable="true"]) > div {
-	pointer-events: none
-}
-`;
+	_bordered: {
+		[vars$i.padding]: '0 0.5em',
+		[vars$i.wrapperBorderColor]: globalRefs$c.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars$i.width]: '100%'
+	},
+
+	_focused: {
+		[vars$i.outlineColor]: globalRefs$c.colors.surface.main
+	},
+
+	_invalid: {
+		[vars$i.labelTextColor]: globalRefs$c.colors.error.main,
+		[vars$i.inputTextColor]: globalRefs$c.colors.error.main,
+		[vars$i.placeholderTextColor]: globalRefs$c.colors.error.light,
+		[vars$i.wrapperBorderColor]: globalRefs$c.colors.error.main,
+		[vars$i.outlineColor]: globalRefs$c.colors.error.light,
+	},
+};
 
-const componentName$b = getComponentName('number-field');
+var passwordField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: passwordField,
+	vars: vars$i
+});
+
+const componentName$k = getComponentName('number-field');
 
 let overrides$3 = ``;
 
@@ -2229,7 +2083,7 @@ const NumberFieldClass = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
+		componentName: componentName$k
 	})
 );
 
@@ -2270,498 +2124,1946 @@ overrides$3 = `
 	}
 `;
 
-const componentName$a = getComponentName('passcode-internal');
+const numberField = {
+	...textField(NumberFieldClass.cssVarList)
+};
+const vars$h = NumberFieldClass.cssVarList;
 
-createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+var numberField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: numberField,
+	vars: vars$h
+});
 
-const componentName$9 = getComponentName('text-field');
+const componentName$j = getComponentName('email-field');
 
 let overrides$2 = ``;
 
-const observedAttrs = ['type'];
-
-const customMixin$3 = (superclass) =>
-	class TextFieldClass extends superclass {
-		static get observedAttributes() {
-			return observedAttrs.concat(superclass.observedAttributes || []);
-		}
-
-		attributeChangedCallback(attrName, oldVal, newVal) {
-			super.attributeChangeCallback?.(attrName, oldVal, newVal);
-
-			// Vaadin doesn't allow to change the input type attribute.
-			// We need the ability to do that, so we're overriding their
-			// behavior with their private API.
-			// When receiving a `type` attribute, we use their private API
-			// to set it on the input.
-			if (attrName === 'type') {
-				this.baseElement._setType(newVal);
-			}
-		}
-	};
-
-const TextFieldClass = compose(
+const EmailFieldClass = compose(
 	createStyleMixin({
-		mappings: textFieldMappings
+		mappings: {
+			...textFieldMappings
+		}
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin,
-	customMixin$3
+	componentNameValidationMixin
 )(
 	createProxy({
-		slots: ['prefix', 'suffix'],
-		wrappedEleName: 'vaadin-text-field',
+		slots: ['suffix'],
+		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$j
 	})
 );
 
 overrides$2 = `
 	:host {
 		display: inline-block;
-		--vaadin-field-default-width: auto;
-		max-width: 100%;
 		min-width: 10em;
-
+		max-width: 100%;
 	}
-	vaadin-text-field {
+	vaadin-email-field {
 		margin: 0;
 		width: 100%;
-		height: 100%;
 		box-sizing: border-box;
 	}
-
-	vaadin-text-field::part(input-field) {
+	vaadin-email-field::before {
+		height: 0;
+	}
+	vaadin-email-field > input {
+		-webkit-mask-image: none;
+	}
+	vaadin-email-field::part(input-field) {
 		overflow: hidden;
 		padding: 0;
 	}
-	vaadin-text-field[disabled] > input:placeholder-shown,
-	vaadin-text-field[readonly] > input:placeholder-shown {
+	vaadin-email-field[readonly] > input:placeholder-shown {
 		opacity: 1;
 	}
-	vaadin-text-field input:-webkit-autofill,
-	vaadin-text-field input:-webkit-autofill::first-line,
-	vaadin-text-field input:-webkit-autofill:hover,
-	vaadin-text-field input:-webkit-autofill:active,
-	vaadin-text-field input:-webkit-autofill:focus {
-		-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
-		box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
-	}
-
-	vaadin-text-field > input {
-		-webkit-mask-image: none;
-		min-height: 0;
+	vaadin-email-field input:-webkit-autofill,
+	vaadin-email-field input:-webkit-autofill::first-line,
+	vaadin-email-field input:-webkit-autofill:hover,
+	vaadin-email-field input:-webkit-autofill:active,
+	vaadin-email-field input:-webkit-autofill:focus {
+		-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
+		box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
 	}
-
-	vaadin-text-field[required]::part(required-indicator)::after {
+	vaadin-email-field[required]::part(required-indicator)::after {
 		content: "*";
-		color: var(${TextFieldClass.cssVarList.color});
-	}
-	vaadin-text-field::part(input-field)::after {
-		opacity: 0 !important;
+		color: var(${EmailFieldClass.cssVarList.color});
 	}
-
-	vaadin-text-field::before {
-		height: unset;
+	vaadin-email-field[readonly]::part(input-field)::after {
+		border: 0 solid;
 	}
 `;
 
-const componentName$8 = getComponentName('passcode');
-
-const observedAttributes$1 = [
-	'digits'
-];
-
-const customMixin$2 = (superclass) =>
-	class PasscodeMixinClass extends superclass {
-		static get observedAttributes() {
-			return observedAttributes$1.concat(superclass.observedAttributes || []);
-		}
-
-		constructor() {
-			super();
-		}
-
-		get digits() {
-			return Number.parseInt(this.getAttribute('digits')) || 6;
-		}
-
-		init() {
-			super.init?.();
-			const template = document.createElement('template');
-
-			template.innerHTML = `
-			<${componentName$a} 
-				bordered="true" 
-				name="code" 
-				tabindex="-1"
-				slot="input"
-			></${componentName$a}>
-			`;
-
-			this.baseElement.appendChild(template.content.cloneNode(true));
-
-			this.inputElement = this.shadowRoot.querySelector(componentName$a);
-
-			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
-		}
-
-		attributeChangedCallback(attrName, oldValue, newValue) {
-			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+const emailField = {
+	...textField(EmailFieldClass.cssVarList)
+};
+const vars$g = EmailFieldClass.cssVarList;
 
-			if (attrName === 'digits') {
-				this.style.setProperty('--passcode-digits-count', newValue);
-			}
-		}
-	};
+var emailField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: emailField,
+	vars: vars$g
+});
 
-const { borderStyle, borderWidth, ...restTextFieldMappings } =
-	textFieldMappings;
+const componentName$i = getComponentName('text-area');
 
-const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
-	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
-	digitField: { selector: () => TextFieldClass.componentName },
+const {
+	host: host$8,
+	placeholder: placeholder$1,
+	input: input$1,
+	textArea: textArea$2,
+	label: label$5,
+	requiredIndicator: requiredIndicator$4
+} = {
+	host: { selector: () => ':host' },
+	textArea: { selector: '> textarea' },
 	label: { selector: '::part(label)' },
-	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
-	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: 'textarea:placeholder-shown' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
 };
 
-const textVars$1 = TextFieldClass.cssVarList;
+let overrides$1 = ``;
 
-const PasscodeClass = compose(
+const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
-			...restTextFieldMappings,
-			borderColor: { ...digitField, property: textVars$1.borderColor },
-			outlineColor: { ...digitField, property: textVars$1.outlineColor },
-			outlineWidth: [
-				{ ...digitField, property: textVars$1.outlineWidth },
-				// we want to leave enough space to the digits outline, 
-				// ideally, this would be part of the text field
-				{ ...internalWrapper, property: 'padding' }
+			fontSize: [host$8, textArea$2],
+			resize: textArea$2,
+			color: textArea$2,
+			cursor: {},
+			labelColor: [
+				{ ...label$5, property: 'color' },
+				{ ...requiredIndicator$4, property: 'color' }
 			],
-			color: [restTextFieldMappings.color, label$4, requiredIndicator$3],
-			padding: { ...digitField, property: textVars$1.padding },
-			margin: { ...digitField, property: textVars$1.margin },
-			textAlign: { ...digitField, property: textVars$1.textAlign },
-			caretColor: { ...digitField, property: textVars$1.caretColor },
-			digitsGap: { ...internalWrapper, property: 'gap' },
-			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.outlineColor }
-		},
+			placeholderColor: { ...placeholder$1, property: 'color' },
+			width: host$8,
+			backgroundColor: input$1,
+			borderWidth: input$1,
+			borderStyle: input$1,
+			borderColor: input$1,
+			borderRadius: input$1,
+			outlineWidth: [input$1, { property: 'padding' }],
+			outlineStyle: input$1,
+			outlineColor: input$1,
+			outlineOffset: input$1,
+		}
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin,
-	customMixin$2
+	componentNameValidationMixin
 )(
 	createProxy({
 		slots: [],
-		wrappedEleName: 'vaadin-text-field',
-		style: () => `
-			:host {
-				--vaadin-field-default-width: auto;
-				display: inline-block;
-				max-width: 100%;
-				min-width: calc(var(--passcode-digits-count) * 2em);
-			}
-			:host::after {
-				background-color: transparent;
-			}
-			:host::part(input-field)::after {
-				background-color: transparent;
-			}
+		wrappedEleName: 'vaadin-text-area',
+		style: () => overrides$1,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$i
+	})
+);
 
-			descope-passcode-internal {
-				-webkit-mask-image: none;
-				padding: 0;
-				width: 100%;
-				height: 100%;
-				min-height: initial;
-			}
+overrides$1 = `
+	:host {
+		display: inline-block;
+		min-width: 10em;
+		max-width: 100%;
+	}
+	vaadin-text-area {
+		margin: 0;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	vaadin-text-area > label,
+	vaadin-text-area::part(input-field) {
+		padding: 0;
+	}
+	vaadin-text-area[required]::part(required-indicator)::after {
+		content: "*";
+	}
+	vaadin-text-area[disabled] > textarea:placeholder-shown,
+	vaadin-text-area[readonly] > textarea:placeholder-shown {
+		opacity: 1;
+	}
+`;
 
-			descope-passcode-internal .wrapper {
-				box-sizing: border-box;
-				min-height: initial;
-				height: 100%;
-				justify-content: space-between;
-			}
+const globalRefs$b = getThemeRefs(globals);
+const vars$f = TextAreaClass.cssVarList;
 
-			descope-passcode-internal descope-text-field {
-				min-width: 2em;
-				max-width: var(${textVars$1.height});
-			}
+const textArea = {
+	[vars$f.labelColor]: globalRefs$b.colors.surface.contrast,
+	[vars$f.placeholderColor]: globalRefs$b.colors.surface.main,
+	[vars$f.color]: globalRefs$b.colors.surface.contrast,
+	[vars$f.fontSize]: '14px',
 
-			vaadin-text-field::part(input-field) {
-				background-color: transparent;
-				padding: 0;
-				overflow: hidden;
-				-webkit-mask-image: none;
-			}
+	[vars$f.backgroundColor]: globalRefs$b.colors.surface.light,
+	[vars$f.resize]: 'vertical',
 
-			vaadin-text-field {
-				margin: 0;
-				padding: 0;
-				width: 100%
-			}
+	[vars$f.borderRadius]: globalRefs$b.radius.sm,
+	[vars$f.borderWidth]: '1px',
+	[vars$f.borderStyle]: 'solid',
+	[vars$f.borderColor]: 'transparent',
+	[vars$f.outlineWidth]: '2px',
+	[vars$f.outlineStyle]: 'solid',
+	[vars$f.outlineColor]: 'transparent',
+	[vars$f.outlineOffset]: '0',
 
-			vaadin-text-field::before {
-				height: 0;
-			}
+	_fullWidth: {
+		[vars$f.width]: '100%'
+	},
 
-			vaadin-text-field[readonly] > input:placeholder-shown {
-				opacity: 1;
-			}
+	_focused: {
+		[vars$f.outlineColor]: globalRefs$b.colors.surface.main
+	},
 
-			vaadin-text-field::part(input-field):focus {
-				cursor: text;
-			}
+	_disabled: {
+		[vars$f.cursor]: 'not-allowed'
+	},
 
-			vaadin-text-field[required]::part(required-indicator)::after {
-				content: "*";
-			}
-			vaadin-text-field[readonly]::part(input-field)::after {
-				border: 0 solid;
-			}
-    	`,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
-	})
-);
+	_bordered: {
+		[vars$f.borderColor]: globalRefs$b.colors.surface.main,
+	},
 
-const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
-	get isReadOnly() {
-		return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
+	_invalid: {
+		[vars$f.labelColor]: globalRefs$b.colors.error.main,
+		[vars$f.borderColor]: globalRefs$b.colors.error.main,
+		[vars$f.outlineColor]: globalRefs$b.colors.error.light,
+		[vars$f.placeholderColor]: globalRefs$b.colors.error.light,
+	},
+
+	_readonly: {
+		[vars$f.resize]: 'none',
 	}
+};
 
-	init() {
-		// there is an issue in Chrome that input field with type password cannot be D&D
-		// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging 
-		// and return the original type when done
-		this.addEventListener('mousedown', (e) => {
-			if (this.isDraggable & this.isReadOnly) {
-				const inputEle = this.baseElement.querySelector('input');
-				const prevType = inputEle.getAttribute('type');
+var textArea$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: textArea,
+	vars: vars$f
+});
 
-				inputEle.setAttribute('type', 'text');
-				setTimeout(() => inputEle.focus());
+const createBaseInputClass = (...args) => compose(
+  inputValidationMixin,
+  changeMixin,
+  normalizeBooleanAttributesMixin,
+  inputEventsDispatchingMixin
+)(createBaseClass(...args));
 
-				const onComplete = (e) => {
-					inputEle.setAttribute('type', prevType);
+const componentName$h = getComponentName('boolean-field-internal');
 
-					e.target.removeEventListener('mouseup', onComplete);
-					e.target.removeEventListener('dragend', onComplete);
-				};
+createBaseInputClass({ componentName: componentName$h, baseSelector: 'div' });
 
-				e.target.addEventListener('mouseup', onComplete, { once: true });
-				e.target.addEventListener('dragend', onComplete, { once: true });
-			}
-		});
+const booleanFieldMixin = (superclass) =>
+    class BooleanFieldMixinClass extends superclass {
+        constructor() {
+            super();
+        }
 
-		super.init?.();
-	}
-};
+        init() {
+            super.init?.();
+
+            const template = document.createElement('template');
+            template.innerHTML = `
+				<${componentName$h} 
+					tabindex="-1"
+					slot="input"
+				></${componentName$h}>
+			`;
+
+            this.baseElement.appendChild(template.content.cloneNode(true));
+            this.inputElement = this.shadowRoot.querySelector(componentName$h);
+            this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+            forwardAttrs(this, this.inputElement, {
+                includeAttrs: [
+                    'required',
+                    'full-width',
+                    'size',
+                    'label',
+                    'invalid',
+                ]
+            });
+
+            forwardProps(this.inputElement, this, ['checked']);
+            syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+        }
+    };
+
+var commonStyles = `
+:host {
+	--vaadin-field-default-width: auto;
+	display: inline-flex;
+}
+.wrapper {
+	display: flex;
+}
+
+vaadin-text-field {
+	position: relative;
+	padding: 0;
+	display: inline-flex;
+	align-items: flex-start;
+}
+vaadin-text-field::before {
+	height: 0;
+	margin: 0;
+}
+vaadin-text-field::part(label) {
+    position: absolute;
+    top: 0;
+}
+vaadin-text-field::part(input-field) {
+	padding: 0;
+	background: none;
+	min-height: 0;
+}
+vaadin-text-field::part(input-field)::after {
+    background: none;
+}
+vaadin-text-field[focus-ring]::part(input-field) {
+	box-shadow: none;
+}
+vaadin-text-field[required]::part(required-indicator)::after {
+	content: "*";
+}
+
+vaadin-checkbox [slot="label"] {
+    align-self: flex-start;
+    opacity: 0;
+    padding: 0;
+}
+[required] vaadin-checkbox [slot="label"] {
+	padding-right: 1em;
+}
+vaadin-checkbox::part(checkbox) {
+	margin: 0;
+}
+vaadin-checkbox[focus-ring]::part(checkbox) {
+	box-shadow: none;
+}
+
+descope-boolean-field-internal {
+	-webkit-mask-image: none;
+	min-height: 0;
+	padding: 0;
+}
+`;
 
-const componentName$7 = getComponentName('password-field');
+const componentName$g = getComponentName('checkbox');
 
 const {
-	host: host$4,
-	inputWrapper: inputWrapper$1,
-	inputElement,
-	inputElementPlaceholder,
-	revealButton,
-	revealButtonIcon,
-	revealButtonIconOutline,
-	label: label$3,
-	requiredIndicator: requiredIndicator$2
+	host: host$7,
+	component: component$1,
+	checkboxElement,
+	checkboxSurface,
+	checkboxHiddenLabel: checkboxHiddenLabel$1,
+	label: label$4,
+	requiredIndicator: requiredIndicator$3
 } = {
 	host: { selector: () => ':host' },
-	inputWrapper: { selector: '::part(input-field)' },
-	inputElement: { selector: '> input' },
-	inputElementPlaceholder: { selector: '> input:placeholder-shown' },
-	revealButton: { selector: 'vaadin-password-field-button' },
-	revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
-	revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
 	label: { selector: '::part(label)' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
 };
 
-const PasswordFieldClass = compose(
+const CheckboxClass = compose(
 	createStyleMixin({
 		mappings: {
-			width: host$4,
-			wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
-			wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
-			wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
-			wrapperBorderRadius: { ...inputWrapper$1, property: 'border-radius' },
+			width: host$7,
+			cursor: component$1,
 
-			revealButtonOutlineBoxShadow: [
-				{
-					...revealButtonIconOutline,
-					property: 'box-shadow'
-				}
+			// Checkbox
+			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
+			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
+
+			checkboxSize: [
+				{ ...checkboxElement, property: 'width' },
+				{ ...label$4, property: 'margin-left' },
+				{ ...checkboxElement, property: 'height' },
+				{ ...checkboxSurface, property: 'font-size' },
+				{ ...component$1, property: 'font-size' },
+				{ ...label$4, property: 'line-height' },
+				{ ...checkboxHiddenLabel$1, property: 'line-height' }
 			],
 
-			labelTextColor: [
-				{ ...label$3, property: 'color' },
-				{ ...requiredIndicator$2, property: 'color' }
+			checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+			checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+			checkboxOutlineColor: { ...checkboxElement, property: 'outline-color' },
+			checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
+			// Checkmark
+			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
+
+			// Label
+			labelFontSize: [
+				{ ...host$7, property: 'font-size' },
+				{ ...checkboxElement, property: 'font-size' },
+				{ ...label$4, property: 'font-size' },
+				{ ...checkboxHiddenLabel$1, property: 'font-size' }
 			],
-			inputTextColor: [
-				{ ...inputElement, property: 'color' },
-				{ ...revealButtonIcon, property: 'color' }
+			labelFontWeight: [
+				{ ...label$4, property: 'font-weight' },
+				{ ...checkboxHiddenLabel$1, property: 'font-weight' }
 			],
-			placeholderTextColor: { ...inputElementPlaceholder, property: 'color' },
-			fontSize: [{}, host$4],
-			height: inputWrapper$1,
-			padding: inputWrapper$1,
-			pointerCursor: [
-				{ ...revealButton, property: 'cursor' },
-				{ ...label$3, property: 'cursor' },
-				{ ...requiredIndicator$2, property: 'cursor' }
+			labelMargin: [
+				{ ...label$4, property: 'left' },
+				{ ...checkboxHiddenLabel$1, property: 'padding-left' }
 			],
-			outlineColor: inputWrapper$1,
-			outlineStyle: inputWrapper$1,
-			outlineWidth: [
-				inputWrapper$1,
-				// we need to make sure there is enough space for the outline
-				{ property: 'padding' }
+			labelTextColor: [
+				{ ...label$4, property: 'color' },
+				{ ...requiredIndicator$3, property: 'color' },
 			],
-			backgroundColor: inputWrapper$1
-		}
+		},
 	}),
 	draggableMixin,
 	proxyInputMixin,
 	componentNameValidationMixin,
-	passwordDraggableMixin
+	booleanFieldMixin
 )(
 	createProxy({
-		slots: ['suffix'],
-		wrappedEleName: 'vaadin-password-field',
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
 		style: `
-			:host {
-				display: inline-block;
-				min-width: 10em;
-				max-width: 100%;
-			}
-			vaadin-password-field {
-				width: 100%;
-				box-sizing: border-box;
-			}
-			vaadin-password-field::part(input-field) {
-				padding: 0;
-			}
-			vaadin-password-field > input {
-				min-height: 0;
-				-webkit-mask-image: none;
-			}
-			vaadin-password-field[readonly] > input:placeholder-shown {
-				opacity: 1;
-			}
-			vaadin-password-field::before {
-				height: initial;
-			}
-			vaadin-password-field::part(input-field)::after {
-				opacity: 0;
-			}	
-			vaadin-password-field[required]::part(required-indicator)::after {
-				content: "*";
-			}
-			[readonly] vaadin-password-field-button {
-				pointer-events: none;
-			}
+		${commonStyles}
+
+		vaadin-checkbox [slot="label"] {
+			height: 100%;
+			cursor: pointer;
+		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$7
+		componentName: componentName$g
 	})
 );
 
-const componentName$6 = getComponentName('text-area');
+const globalRefs$a = getThemeRefs(globals);
+const vars$e = CheckboxClass.cssVarList;
+
+const checkbox = {
+	[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+	[vars$e.cursor]: 'pointer',
+
+	[vars$e.checkboxRadius]: globalRefs$a.radius.xs,
+	[vars$e.checkboxSize]: '2em',
+
+	[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$e.labelMargin]: '0.5em',
+	[vars$e.labelFontWeight]: '400',
+
+	size: {
+		xs: {
+			[vars$e.labelFontSize]: '8px',
+		},
+		sm: {
+			[vars$e.labelFontSize]: '10px',
+		},
+		md: {
+			[vars$e.labelFontSize]: '14px',
+		},
+		lg: {
+			[vars$e.labelFontSize]: '20px',
+		},
+		xl: {
+			[vars$e.labelFontSize]: '25px',
+		}
+	},
+
+	_fullWidth: {
+		[vars$e.width]: '100%',
+	},
+
+	_checked: {
+		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
+		[vars$e.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
+	},
+
+	_disabled: {
+		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+	},
+
+	_focused: {
+		[vars$e.checkboxOutlineWidth]: '2px',
+		[vars$e.checkboxOutlineOffset]: '1px',
+		[vars$e.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
+		[vars$e.checkboxOutlineStyle]: 'solid'
+	},
+
+	_invalid: {
+		[vars$e.checkboxOutlineColor]: globalRefs$a.colors.error.main,
+		[vars$e.labelTextColor]: globalRefs$a.colors.error.main
+	},
+
+};
+
+var checkbox$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: checkbox,
+	vars: vars$e
+});
+
+const componentName$f = getComponentName('switch-toggle');
 
 const {
-	host: host$3,
-	placeholder: placeholder$1,
-	input: input$1,
-	textArea,
-	label: label$2,
-	requiredIndicator: requiredIndicator$1
+	host: host$6,
+	component,
+	checkboxElement: track,
+	checkboxSurface: knob,
+	checkboxHiddenLabel,
+	label: label$3,
+	requiredIndicator: requiredIndicator$2,
 } = {
 	host: { selector: () => ':host' },
-	textArea: { selector: '> textarea' },
 	label: { selector: '::part(label)' },
-	input: { selector: '::part(input-field)' },
-	placeholder: { selector: 'textarea:placeholder-shown' },
 	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
 };
 
-let overrides$1 = ``;
-
-const TextAreaClass = compose(
+const SwitchToggleClass = compose(
 	createStyleMixin({
 		mappings: {
-			fontSize: [host$3, textArea],
-			resize: textArea,
-			color: textArea,
-			cursor: {},
-			labelColor: [
-				{ ...label$2, property: 'color' },
-				{ ...requiredIndicator$1, property: 'color' }
+			width: host$6,
+			cursor: [component, checkboxHiddenLabel, track],
+			fontSize: [component, label$3, checkboxHiddenLabel],
+
+			// Track
+			trackBorderWidth: { ...track, property: 'border-width' },
+			trackBorderStyle: { ...track, property: 'border-style' },
+			trackBorderColor: { ...track, property: 'border-color' },
+
+			// Checkbox
+			trackBackgroundColor: { ...track, property: 'background-color' },
+			trackRadius: { ...track, property: 'border-radius' },
+
+			trackWidth: [
+				{ ...track, property: 'width' },
 			],
-			placeholderColor: { ...placeholder$1, property: 'color' },
-			width: host$3,
-			backgroundColor: input$1,
-			borderWidth: input$1,
-			borderStyle: input$1,
-			borderColor: input$1,
-			borderRadius: input$1,
-			outlineWidth: [input$1, { property: 'padding' }],
-			outlineStyle: input$1,
-			outlineColor: input$1,
-			outlineOffset: input$1,
-		}
+			trackHeight: [
+				{ ...knob, property: 'font-size' },
+				{ ...track, property: 'height' }
+			],
+			switchOutlineWidth: { ...track, property: 'outline-width' },
+			switchOutlineOffset: { ...track, property: 'outline-offset' },
+			switchOutlineColor: { ...track, property: 'outline-color' },
+			switchOutlineStyle: { ...track, property: 'outline-style' },
+
+			// Knob
+			knobSize: [
+				{ ...knob, property: 'width' },
+				{ ...knob, property: 'height' },
+			],
+			knobTextColor: { ...knob, property: 'color' },
+			knobRadius: { ...knob, property: 'border-radius' },
+			knobTransition: { ...knob, property: 'transition' },
+			knobColor: { ...knob, property: 'background-color' },
+			knobTopOffset: { ...knob, property: 'top' },
+			knobPosition: { ...knob, property: 'left' },
+
+			// Label
+			labelMargin: [
+				{ ...label$3, property: 'padding-left' },
+				{ ...checkboxHiddenLabel, property: 'padding-left' }
+			],
+			labelLineHeight: [
+				{ ...label$3, property: 'line-height' },
+				{ ...checkboxHiddenLabel, property: 'line-height' }
+			],
+			labelFontWeight: [
+				{ ...label$3, property: 'font-weight' },
+				{ ...checkboxHiddenLabel, property: 'font-weight' }
+			],
+			labelTextColor: [
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$2, property: 'color' },
+			],
+		},
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	booleanFieldMixin
 )(
 	createProxy({
 		slots: [],
-		wrappedEleName: 'vaadin-text-area',
-		style: () => overrides$1,
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+		${commonStyles}
+
+		vaadin-text-field::part(label) {
+			left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
+		}
+
+		vaadin-checkbox[active]::part(checkbox) {
+			transform: none;
+		}
+		vaadin-checkbox[checked]::part(checkbox) {
+			background: none;
+		}
+		vaadin-checkbox::part(checkbox)::after {
+			position: absolute;
+			opacity: 1;
+			content: '';
+		}
+		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$6
+		componentName: componentName$f
+	})
+);
+
+const knobMargin = '2px';
+const checkboxHeight = '1.25em';
+const trackBorderWidth = '2px';
+
+const globalRefs$9 = getThemeRefs(globals);
+const vars$d = SwitchToggleClass.cssVarList;
+
+const switchToggle = {
+    size: {
+        xs: { [vars$d.fontSize]: '8px' },
+        sm: { [vars$d.fontSize]: '12px' },
+        md: { [vars$d.fontSize]: '16px' },
+        lg: { [vars$d.fontSize]: '20px' },
+        xl: { [vars$d.fontSize]: '24px' }
+    },
+
+    [vars$d.cursor]: 'pointer',
+
+    [vars$d.trackBorderStyle]: 'solid',
+    [vars$d.trackBorderWidth]: trackBorderWidth,
+    [vars$d.trackBorderColor]: globalRefs$9.colors.surface.contrast,
+
+    [vars$d.trackBackgroundColor]: 'none',
+    [vars$d.trackRadius]: globalRefs$9.radius.md,
+    [vars$d.trackWidth]: '2.5em',
+    [vars$d.trackHeight]: checkboxHeight,
+
+    [vars$d.knobSize]: `calc(1em - ${knobMargin})`,
+    [vars$d.knobRadius]: '50%',
+    [vars$d.knobTopOffset]: '1px',
+    [vars$d.knobColor]: globalRefs$9.colors.surface.contrast,
+    [vars$d.knobPosition]: knobMargin,
+    [vars$d.knobTransition]: '0.3s',
+
+    [vars$d.labelTextColor]: globalRefs$9.colors.surface.contrast,
+    [vars$d.labelFontWeight]: '400',
+    [vars$d.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
+    [vars$d.labelMargin]: '0.25em',
+
+    _fullWidth: {
+        [vars$d.width]: '100%',
+    },
+
+    _checked: {
+        [vars$d.trackBorderColor]: globalRefs$9.colors.primary.main,
+        [vars$d.knobPosition]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
+        [vars$d.knobColor]: globalRefs$9.colors.primary.main,
+        [vars$d.knobTextColor]: globalRefs$9.colors.primary.contrast,
+    },
+
+    _disabled: {
+        [vars$d.cursor]: 'not-allowed', // todo: fix cursor
+        [vars$d.knobColor]: globalRefs$9.colors.surface.main,
+        [vars$d.trackBorderColor]: globalRefs$9.colors.surface.main,
+        [vars$d.trackBackgroundColor]: globalRefs$9.colors.surface.light,
+    },
+
+    _focused: {
+        [vars$d.switchOutlineWidth]: '2px',
+        [vars$d.switchOutlineOffset]: '1px',
+        [vars$d.switchOutlineColor]: globalRefs$9.colors.primary.main,
+        [vars$d.switchOutlineStyle]: 'solid'
+    },
+
+    _invalid: {
+        [vars$d.switchOutlineColor]: globalRefs$9.colors.error.main,
+        [vars$d.trackBorderColor]: globalRefs$9.colors.error.main,
+        [vars$d.knobColor]: globalRefs$9.colors.error.main,
+        [vars$d.labelTextColor]: globalRefs$9.colors.error.main
+    },
+};
+
+var switchToggle$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: switchToggle,
+	vars: vars$d
+});
+
+const componentName$e = getComponentName('container');
+
+class RawContainer extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host > slot {
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				overflow: hidden;
+			}
+			:host {
+				display: inline-block;
+				overflow: auto;
+			}
+		</style>
+		<slot></slot>
+	`;
+	}
+}
+
+const ContainerClass = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+
+			verticalPadding: [
+				{ property: 'padding-top' },
+				{ property: 'padding-bottom' }
+			],
+			horizontalPadding: [
+				{ property: 'padding-left' },
+				{ property: 'padding-right' }
+			],
+
+			flexDirection: {},
+			justifyContent: {},
+			alignItems: {},
+			gap: {},
+			flexWrap: {},
+
+			backgroundColor: {},
+			color: {},
+			borderRadius: {},
+
+			borderColor: {},
+			borderStyle: {},
+			borderWidth: {},
+
+			boxShadow: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawContainer);
+
+const globalRefs$8 = getThemeRefs(globals);
+
+const compVars$1 = ContainerClass.cssVarList;
+
+const verticalAlignment = {
+	start: { verticalAlignment: 'start' },
+	center: { verticalAlignment: 'center' },
+	end: { verticalAlignment: 'end' },
+};
+
+const horizontalAlignment = {
+	start: { horizontalAlignment: 'start' },
+	center: { horizontalAlignment: 'center' },
+	end: { horizontalAlignment: 'end' },
+};
+
+const [helperTheme$1, helperRefs$1, helperVars$1] =
+	createHelperVars({
+		verticalAlignment,
+		horizontalAlignment,
+		shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
+	}, componentName$e);
+
+const container = {
+	...helperTheme$1,
+	[compVars$1.width]: '100%',
+	[compVars$1.boxShadow]: 'none',
+	[compVars$1.backgroundColor]: globalRefs$8.colors.surface.light,
+	[compVars$1.color]: globalRefs$8.colors.surface.contrast,
+	verticalPadding: {
+		sm: { [compVars$1.verticalPadding]: '5px' },
+		md: { [compVars$1.verticalPadding]: '10px' },
+		lg: { [compVars$1.verticalPadding]: '20px' },
+	},
+	horizontalPadding: {
+		sm: { [compVars$1.horizontalPadding]: '5px' },
+		md: { [compVars$1.horizontalPadding]: '10px' },
+		lg: { [compVars$1.horizontalPadding]: '20px' },
+	},
+	direction: {
+		row: {
+			[compVars$1.flexDirection]: 'row',
+			[compVars$1.alignItems]: helperRefs$1.verticalAlignment,
+			[compVars$1.justifyContent]: helperRefs$1.horizontalAlignment,
+			[compVars$1.flexWrap]: 'wrap',
+			horizontalAlignment: {
+				spaceBetween: { [helperVars$1.horizontalAlignment]: 'space-between' },
+			}
+		},
+
+		column: {
+			[compVars$1.flexDirection]: 'column',
+			[compVars$1.alignItems]: helperRefs$1.horizontalAlignment,
+			[compVars$1.justifyContent]: helperRefs$1.verticalAlignment,
+			verticalAlignment: {
+				spaceBetween: { [helperVars$1.verticalAlignment]: 'space-between' }
+			}
+		},
+	},
+
+	spaceBetween: {
+		sm: {
+			[compVars$1.gap]: '10px'
+		},
+		md: {
+			[compVars$1.gap]: '20px'
+		},
+		lg: {
+			[compVars$1.gap]: '30px'
+		}
+	},
+
+	shadow: {
+		sm: {
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+		},
+		md: {
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+		},
+		lg: {
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+		},
+		xl: {
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+		},
+		'2xl': {
+			[helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+		},
+	},
+
+	borderRadius: {
+		sm: {
+			[compVars$1.borderRadius]: globalRefs$8.radius.sm
+		},
+		md: {
+			[compVars$1.borderRadius]: globalRefs$8.radius.md
+		},
+		lg: {
+			[compVars$1.borderRadius]: globalRefs$8.radius.lg
+		},
+		xl: {
+			[compVars$1.borderRadius]: globalRefs$8.radius.xl
+		},
+		'2xl': {
+			[compVars$1.borderRadius]: globalRefs$8.radius['2xl']
+		},
+		'3xl': {
+			[compVars$1.borderRadius]: globalRefs$8.radius['3xl']
+		},
+	}
+};
+const vars$c = { ...compVars$1, ...helperVars$1 };
+
+var container$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: container,
+	vars: vars$c
+});
+
+const componentName$d = getComponentName('logo');
+
+let style;
+const getStyle = () => style;
+
+class RawLogo extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div></div>`;
+	}
+}
+
+const LogoClass = compose(
+	createStyleMixin({
+		mappings: {
+			height: { selector: () => ':host' },
+			width: { selector: () => ':host' },
+			fallbackUrl: { property: 'content' },
+			url: { property: 'content' },
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLogo);
+
+style = `
+:host {
+	display: inline-flex;
+}
+:host > div {
+	display: inline-block;
+	content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	margin: auto;
+}
+:host([draggable="true"]) > div {
+	pointer-events: none
+}
+`;
+
+const vars$b = LogoClass.cssVarList;
+
+const logo = {
+	[vars$b.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
+};
+
+var logo$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: logo,
+	vars: vars$b
+});
+
+const componentName$c = getComponentName('text');
+
+class RawText extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > slot' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > slot {
+				width: 100%;
+				display: inline-block;
+			}
+		</style>
+		<slot></slot>
+		`;
+	}
+}
+
+const TextClass = compose(
+	createStyleMixin({
+		mappings: {
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
+			width: { selector: () => ':host' },
+			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
+			textAlign: {},
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawText);
+
+const globalRefs$7 = getThemeRefs(globals);
+
+const vars$a = TextClass.cssVarList;
+
+const text$2 = {
+	[vars$a.lineHeight]: '1em',
+	[vars$a.textAlign]: 'left',
+	[vars$a.color]: globalRefs$7.colors.surface.dark,
+	variant: {
+		h1: {
+			[vars$a.fontSize]: globalRefs$7.typography.h1.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.h1.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.h1.font
+		},
+		h2: {
+			[vars$a.fontSize]: globalRefs$7.typography.h2.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.h2.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.h2.font
+		},
+		h3: {
+			[vars$a.fontSize]: globalRefs$7.typography.h3.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.h3.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.h3.font
+		},
+		subtitle1: {
+			[vars$a.fontSize]: globalRefs$7.typography.subtitle1.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.subtitle1.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.subtitle1.font
+		},
+		subtitle2: {
+			[vars$a.fontSize]: globalRefs$7.typography.subtitle2.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.subtitle2.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.subtitle2.font
+		},
+		body1: {
+			[vars$a.fontSize]: globalRefs$7.typography.body1.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.body1.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.body1.font
+		},
+		body2: {
+			[vars$a.fontSize]: globalRefs$7.typography.body2.size,
+			[vars$a.fontWeight]: globalRefs$7.typography.body2.weight,
+			[vars$a.fontFamily]: globalRefs$7.typography.body2.font
+		}
+	},
+	mode: {
+		primary: {
+			[vars$a.color]: globalRefs$7.colors.primary.main
+		},
+		secondary: {
+			[vars$a.color]: globalRefs$7.colors.secondary.main
+		},
+		error: {
+			[vars$a.color]: globalRefs$7.colors.error.main
+		},
+		success: {
+			[vars$a.color]: globalRefs$7.colors.success.main
+		}
+	},
+	textAlign: {
+		right: { [vars$a.textAlign]: 'right' },
+		left: { [vars$a.textAlign]: 'left' },
+		center: { [vars$a.textAlign]: 'center' }
+	},
+	_fullWidth: {
+		[vars$a.width]: '100%',
+	},
+	_italic: {
+		[vars$a.fontStyle]: 'italic'
+	},
+	_uppercase: {
+		[vars$a.textTransform]: 'uppercase'
+	},
+	_lowercase: {
+		[vars$a.textTransform]: 'lowercase'
+	}
+};
+
+var text$3 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: text$2,
+	vars: vars$a
+});
+
+const componentName$b = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName: componentName$b, baseSelector: ':host a' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		:host {
+			display: inline-block;
+		}
+		:host a {
+			display: inline-block;
+		}
+		</style>
+		<div>
+			<a>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</a>
+		</div>
+		`;
+
+		forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+			includeAttrs: ['href', 'target', 'tooltip'],
+			mapAttrs: {
+				tooltip: 'title'
+			}
+		});
+
+		forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+			includeAttrs: ['mode', 'variant'],
+		});
+	}
+}
+
+const selectors$2 = {
+	host: { selector: () => ':host' },
+	anchor: {},
+	wrapper: { selector: () => ':host > div' },
+	text: { selector: () => TextClass.componentName }
+};
+
+const { anchor, text: text$1, host: host$5, wrapper } = selectors$2;
+
+const LinkClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$5,
+			textAlign: wrapper,
+			color: [anchor, { ...text$1, property: TextClass.cssVarList.color }],
+			cursor: anchor,
+			borderBottomWidth: anchor,
+			borderBottomStyle: anchor,
+			borderBottomColor: anchor
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLink);
+
+const globalRefs$6 = getThemeRefs(globals);
+const vars$9 = LinkClass.cssVarList;
+
+const link = {
+	[vars$9.cursor]: 'pointer',
+	[vars$9.borderBottomWidth]: '2px',
+	[vars$9.borderBottomStyle]: 'solid',
+	[vars$9.borderBottomColor]: 'transparent',
+	[vars$9.color]: globalRefs$6.colors.primary.main,
+
+	_hover: {
+		[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
+	},
+
+	textAlign: {
+		right: { [vars$9.textAlign]: 'right' },
+		left: { [vars$9.textAlign]: 'left' },
+		center: { [vars$9.textAlign]: 'center' }
+	},
+
+	_fullWidth: {
+		[vars$9.width]: '100%'
+	},
+
+	mode: {
+		primary: {
+			[vars$9.color]: globalRefs$6.colors.primary.main,
+			_hover: {
+				[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
+			}
+		},
+		secondary: {
+			[vars$9.color]: globalRefs$6.colors.secondary.main,
+			_hover: {
+				[vars$9.borderBottomColor]: globalRefs$6.colors.secondary.main
+			}
+		},
+		error: {
+			[vars$9.color]: globalRefs$6.colors.error.main,
+			_hover: {
+				[vars$9.borderBottomColor]: globalRefs$6.colors.error.main
+			}
+		},
+		success: {
+			[vars$9.color]: globalRefs$6.colors.success.main,
+			_hover: {
+				[vars$9.borderBottomColor]: globalRefs$6.colors.success.main
+			}
+		}
+	}
+};
+
+var link$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: link,
+	vars: vars$9
+});
+
+const componentName$a = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host {
+				display: inline-block;
+			}
+			:host > div {
+				display: flex;
+				height: 100%;
+				width: 100%;
+			}
+			:host > div::before,
+			:host > div::after {
+				content: '';
+				flex-grow: 1;
+			}
+
+			descope-text {
+				flex-grow: 0;
+				flex-shrink: 0;
+				min-width: fit-content;
+			}
+
+			:host(:empty) descope-text {
+				display: none;
+			}
+
+			:host([vertical="true"]) div {
+				width: fit-content;
+			}
+
+		</style>
+		<div>
+			<descope-text>
+				<slot></slot>
+			</descope-text>
+		</div>
+	`;
+
+		this.textComponent = this.shadowRoot.querySelector('descope-text');
+
+		forwardAttrs(this, this.textComponent, {
+			includeAttrs: ['mode', 'variant', 'italic']
+		});
+	}
+}
+
+const selectors$1 = {
+	root: { selector: '' },
+	before: { selector: '::before' },
+	after: { selector: '::after' },
+	text: { selector: 'descope-text' },
+	host: { selector: () => ':host' },
+};
+
+const { root: root$1, before, after: after$1, text, host: host$4 } = selectors$1;
+
+const DividerClass = compose(
+	createStyleMixin({
+		mappings: {
+			maxTextWidth: { ...text, property: 'max-width' },
+			minHeight: root$1,
+			alignItems: root$1,
+			alignSelf: root$1,
+			flexDirection: root$1,
+			textPadding: { ...text, property: 'padding' },
+			width: host$4,
+			padding: host$4,
+			backgroundColor: [before, after$1],
+			opacity: [before, after$1],
+			textWidth: { ...text, property: 'width' },
+			dividerHeight: [{ ...before, property: 'height' }, { ...after$1, property: 'height' }],
+			dividerWidth: [{ ...before, property: 'width' }, { ...after$1, property: 'width' }]
+		},
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawDivider);
+
+const globalRefs$5 = getThemeRefs(globals);
+
+const compVars = DividerClass.cssVarList;
+
+const thickness = '2px';
+const textPaddingSize = '10px';
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, componentName$a);
+
+const divider = {
+	...helperTheme,
+	[compVars.alignItems]: 'center',
+	[compVars.dividerHeight]: helperRefs.thickness,
+	[compVars.backgroundColor]: globalRefs$5.colors.surface.main,
+	[compVars.textPadding]: `0 ${helperRefs.textPaddingSize}`,
+	[compVars.width]: '100%',
+	[compVars.flexDirection]: 'row',
+	[compVars.alignSelf]: 'strech',
+	[compVars.textWidth]: 'fit-content',
+	[compVars.maxTextWidth]: 'calc(100% - 100px)',
+	_vertical: {
+		[compVars.padding]: `0 calc(${thickness} * 3)`,
+		[compVars.width]: 'fit-content',
+		[compVars.textPadding]: `${helperRefs.textPaddingSize} 0`,
+		[compVars.flexDirection]: 'column',
+		[compVars.minHeight]: '200px',
+		[compVars.textWidth]: 'fit-content',
+		[compVars.dividerWidth]: helperRefs.thickness,
+		[compVars.maxTextWidth]: '100%',
+	}
+};
+const vars$8 = { ...compVars, ...helperVars };
+
+var divider$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: divider,
+	vars: vars$8
+});
+
+const componentName$9 = getComponentName('passcode-internal');
+
+createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
+
+const componentName$8 = getComponentName('passcode');
+
+const observedAttributes$1 = [
+	'digits'
+];
+
+const customMixin$2 = (superclass) =>
+	class PasscodeMixinClass extends superclass {
+		static get observedAttributes() {
+			return observedAttributes$1.concat(superclass.observedAttributes || []);
+		}
+
+		constructor() {
+			super();
+		}
+
+		get digits() {
+			return Number.parseInt(this.getAttribute('digits')) || 6;
+		}
+
+		init() {
+			super.init?.();
+			const template = document.createElement('template');
+
+			template.innerHTML = `
+			<${componentName$9} 
+				bordered="true" 
+				name="code" 
+				tabindex="-1"
+				slot="input"
+			></${componentName$9}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+
+			this.inputElement = this.shadowRoot.querySelector(componentName$9);
+
+			forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
+		}
+
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+			if (attrName === 'digits') {
+				this.style.setProperty('--passcode-digits-count', newValue);
+			}
+		}
+	};
+
+const { borderStyle, borderWidth, ...restTextFieldMappings } =
+	textFieldMappings;
+
+const { digitField, label: label$2, requiredIndicator: requiredIndicator$1, internalWrapper, focusedDigitField } = {
+	focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
+	digitField: { selector: () => TextFieldClass.componentName },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+	internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
+};
+
+const textVars$1 = TextFieldClass.cssVarList;
+
+const PasscodeClass = compose(
+	createStyleMixin({
+		mappings: {
+			...restTextFieldMappings,
+			borderColor: { ...digitField, property: textVars$1.borderColor },
+			outlineColor: { ...digitField, property: textVars$1.outlineColor },
+			outlineWidth: [
+				{ ...digitField, property: textVars$1.outlineWidth },
+				// we want to leave enough space to the digits outline, 
+				// ideally, this would be part of the text field
+				{ ...internalWrapper, property: 'padding' }
+			],
+			color: [restTextFieldMappings.color, label$2, requiredIndicator$1],
+			padding: { ...digitField, property: textVars$1.padding },
+			margin: { ...digitField, property: textVars$1.margin },
+			textAlign: { ...digitField, property: textVars$1.textAlign },
+			caretColor: { ...digitField, property: textVars$1.caretColor },
+			digitsGap: { ...internalWrapper, property: 'gap' },
+			focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars$1.outlineColor }
+		},
+	}),
+	draggableMixin,
+	proxyInputMixin,
+	componentNameValidationMixin,
+	customMixin$2
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
+			:host {
+				--vaadin-field-default-width: auto;
+				display: inline-block;
+				max-width: 100%;
+				min-width: calc(var(--passcode-digits-count) * 2em);
+			}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+			descope-passcode-internal {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				min-height: initial;
+			}
+
+			descope-passcode-internal .wrapper {
+				box-sizing: border-box;
+				min-height: initial;
+				height: 100%;
+				justify-content: space-between;
+			}
+
+			descope-passcode-internal descope-text-field {
+				min-width: 2em;
+				max-width: var(${textVars$1.height});
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field::part(input-field):focus {
+				cursor: text;
+			}
+
+			vaadin-text-field[required]::part(required-indicator)::after {
+				content: "*";
+			}
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+    	`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$8
+	})
+);
+
+const vars$7 = PasscodeClass.cssVarList;
+const globalRefs$4 = getThemeRefs(globals);
+
+const passcode = {
+	[vars$7.backgroundColor]: globalRefs$4.colors.surface.light,
+	[vars$7.outlineWidth]: '2px',
+	[vars$7.outlineColor]: 'transparent',
+	[vars$7.padding]: '0',
+	[vars$7.textAlign]: 'center',
+	[vars$7.borderColor]: 'transparent',
+	[vars$7.digitsGap]: '0',
+	[vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
+	[vars$7.color]: globalRefs$4.colors.surface.contrast,
+
+	_hideCursor: {
+		[vars$7.caretColor]: 'transparent',
+	},
+
+	_disabled: {
+		[vars$7.backgroundColor]: globalRefs$4.colors.surface.main
+	},
+
+	_fullWidth: {
+		[vars$7.width]: '100%'
+	},
+
+	_bordered: {
+		[vars$7.borderColor]: globalRefs$4.colors.surface.main
+	},
+
+	_invalid: {
+		[vars$7.borderColor]: globalRefs$4.colors.error.main,
+		[vars$7.color]: globalRefs$4.colors.error.main,
+		[vars$7.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
+	},
+};
+
+var passcode$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: passcode,
+	vars: vars$7
+});
+
+const componentName$7 = getComponentName('loader-linear');
+
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
+	static get componentName() {
+		return componentName$7;
+	}
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes tilt {
+				0% { transform: translateX(0); }
+				50% { transform: translateX(400%); }
+			}
+			:host {
+				position: relative;
+				display: flex;
+			}
+			div::after {
+				content: '';
+				animation-name: tilt;
+				position: absolute;
+				left: 0;
+			}
+
+			:host > div {
+				width: 100%;
+			}
+		</style>
+		<div></div>
+	`;
+	}
+}
+
+const selectors = {
+	root: {},
+	after: { selector: '::after' },
+	host: { selector: () => ':host' }
+};
+
+const { root, after, host: host$3 } = selectors;
+
+const LoaderLinearClass = compose(
+	createStyleMixin({
+		mappings: {
+			display: root,
+			width: host$3,
+			height: [root, after],
+			borderRadius: [root, after],
+			surfaceColor: [{ property: 'background-color' }],
+			barColor: [{ ...after, property: 'background-color' }],
+			barWidth: { ...after, property: 'width' },
+			animationDuration: [root, after],
+			animationTimingFunction: [root, after],
+			animationIterationCount: [root, after]
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderLinear);
+
+const globalRefs$3 = getThemeRefs(globals);
+
+const vars$6 = LoaderLinearClass.cssVarList;
+
+const loaderLinear = {
+	[vars$6.display]: 'inline-block',
+	[vars$6.barColor]: globalRefs$3.colors.surface.contrast,
+	[vars$6.barWidth]: '20%',
+	[vars$6.surfaceColor]: globalRefs$3.colors.surface.main,
+	[vars$6.borderRadius]: '4px',
+	[vars$6.animationDuration]: '2s',
+	[vars$6.animationTimingFunction]: 'linear',
+	[vars$6.animationIterationCount]: 'infinite',
+	[vars$6.width]: '100%',
+	size: {
+		xs: {
+			[vars$6.height]: '6px'
+		},
+		sm: {
+			[vars$6.height]: '8px'
+		},
+		md: {
+			[vars$6.height]: '10px'
+		},
+		lg: {
+			[vars$6.height]: '12px'
+		},
+		xl: {
+			[vars$6.height]: '14px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars$6.barColor]: globalRefs$3.colors.primary.main
+		},
+		secondary: {
+			[vars$6.barColor]: globalRefs$3.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars$6.display]: 'none'
+	}
+};
+
+var loaderLinear$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: loaderLinear,
+	vars: vars$6
+});
+
+const componentName$6 = getComponentName('loader-radial');
+
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$6, baseSelector: ':host > div' }) {
+	constructor() {
+		super();
+
+		this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			@keyframes spin {
+				0% { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+			:host {
+				position: relative;
+				display: inline-flex;
+			}
+			:host > div {
+				animation-name: spin;
+			}
+		</style>
+		<div></div>
+	`;
+	}
+}
+
+const LoaderRadialClass = compose(
+	createStyleMixin({
+		mappings: {
+			display: {},
+			width: {},
+			height: {},
+			spinnerWidth: { property: 'border-width' },
+			spinnerStyle: { property: 'border-style' },
+			spinnerRadius: { property: 'border-radius' },
+			spinnerTopColor: { property: 'border-top-color' },
+			spinnerBottomColor: { property: 'border-bottom-color' },
+			spinnerRightColor: { property: 'border-right-color' },
+			spinnerLeftColor: { property: 'border-left-color' },
+			color: {},
+			animationDuration: {},
+			animationTimingFunction: {},
+			animationIterationCount: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLoaderRadial);
+
+const globalRefs$2 = getThemeRefs(globals);
+
+const vars$5 = LoaderRadialClass.cssVarList;
+
+const loaderRadial = {
+	[vars$5.display]: 'inline-block',
+	[vars$5.color]: globalRefs$2.colors.surface.contrast,
+	[vars$5.animationDuration]: '2s',
+	[vars$5.animationTimingFunction]: 'linear',
+	[vars$5.animationIterationCount]: 'infinite',
+	[vars$5.spinnerStyle]: 'solid',
+	[vars$5.spinnerWidth]: '4px',
+	[vars$5.spinnerRadius]: '50%',
+	[vars$5.spinnerTopColor]: 'currentColor',
+	[vars$5.spinnerBottomColor]: 'transparent',
+	[vars$5.spinnerRightColor]: 'currentColor',
+	[vars$5.spinnerLeftColor]: 'transparent',
+	size: {
+		xs: {
+			[vars$5.width]: '20px',
+			[vars$5.height]: '20px',
+			[vars$5.spinnerWidth]: '2px'
+		},
+		sm: {
+			[vars$5.width]: '30px',
+			[vars$5.height]: '30px',
+			[vars$5.spinnerWidth]: '3px'
+		},
+		md: {
+			[vars$5.width]: '40px',
+			[vars$5.height]: '40px',
+			[vars$5.spinnerWidth]: '4px'
+		},
+		lg: {
+			[vars$5.width]: '60px',
+			[vars$5.height]: '60px',
+			[vars$5.spinnerWidth]: '5px'
+		},
+		xl: {
+			[vars$5.width]: '80px',
+			[vars$5.height]: '80px',
+			[vars$5.spinnerWidth]: '6px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars$5.color]: globalRefs$2.colors.primary.main
+		},
+		secondary: {
+			[vars$5.color]: globalRefs$2.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars$5.display]: 'none'
+	}
+};
+
+var loaderRadial$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: loaderRadial,
+	vars: vars$5
+});
+
+const componentName$5 = getComponentName('combo-box');
+
+
+const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
+	constructor() {
+		super();
+	}
+
+	// vaadin api is to set props on their combo box node, 
+	// in order to avoid it, we are passing the children of this component
+	// to the items & renderer props, so it will be used as the combo box items
+	#onChildrenChange() {
+		const baseElement = this.shadowRoot.querySelector(this.baseSelector);
+		const items = Array.from(this.children);
+
+		// we want the data-name attribute to be accessible as an object attribute
+		if (items.length) {
+			items.forEach((node) => {
+				Object.defineProperty(node, 'data-name', {
+					value: node.getAttribute('data-name'),
+				});
+				Object.defineProperty(node, 'data-id', {
+					value: node.getAttribute('data-id')
+				});
+			});
+
+			baseElement.items = items;
+
+			baseElement.renderer = (root, combo, model) => {
+				root.innerHTML = model.item.outerHTML;
+			};
+		}
+	}
+
+	// the default vaadin behavior is to attach the overlay to the body when opened
+	// we do not want that because it's difficult to style the overlay in this way
+	// so we override it to open inside the shadow DOM
+	#overrideOverlaySettings() {
+		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+
+		overlay._attachOverlay = function () { this.bringToFront(); };
+		overlay._detachOverlay = function () { };
+		overlay._enterModalState = function () { };
+	}
+
+	init() {
+		super.init?.();
+
+		this.#overrideOverlaySettings();
+		observeChildren(this, this.#onChildrenChange.bind(this));
+	}
+};
+
+const {
+	host: host$2,
+	input,
+	placeholder,
+	toggle,
+	label: label$1
+} = {
+	host: { selector: () => ':host' },
+	input: { selector: '::part(input-field)' },
+	placeholder: { selector: '> input:placeholder-shown' },
+	toggle: { selector: '::part(toggle-button)' },
+	label: { selector: '::part(label)' }
+};
+
+// const { slotted, selected } = {
+// 	slotted: { selector: () => '::slotted(*)' },
+// 	selected: { selector: () => '::slotted([selected])' }
+// }
+
+const ComboBoxClass = compose(
+	createStyleMixin({
+		mappings: {
+			width: host$2,
+			height: input,
+			padding: input,
+
+			inputBackgroundColor: { ...input, property: 'background-color' },
+			boxShadow: input,
+
+			borderColor: input,
+			borderWidth: input,
+			borderStyle: input,
+			borderRadius: input,
+
+			color: [label$1, input],
+
+			// we apply font-size also on the host so we can set its width with em
+			fontSize: [{}, host$2],
+
+			placeholderColor: { ...placeholder, property: 'color' },
+
+			toggleCursor: { ...toggle, property: 'cursor' },
+			toggleColor: { ...toggle, property: 'color' },
+
+			// we need to use the variables from the portal mixin
+			// so we need to use an arrow function on the selector
+			// for that to work, because ComboBox is not available
+			// at this time.
+			overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+			overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
+		}
+	}),
+	draggableMixin,
+	portalMixin({
+		name: 'overlay',
+		selector: '',
+		mappings: {
+			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+			// TODO: this mapping doesn't work, needs fixing.
+			cursor: { selector: 'vaadin-combo-box-item' },
+		},
+		forward: {
+			include: false,
+			attributes: ['size']
+		},
+	}),
+	proxyInputMixin,
+	componentNameValidationMixin,
+	ComboBoxMixin
+)(
+	createProxy({
+		slots: ['prefix'],
+		wrappedEleName: 'vaadin-combo-box',
+		style: () => `
+		:host {
+			display: inline-flex;
+			box-sizing: border-box;
+			-webkit-mask-image: none;
+		}
+		vaadin-combo-box {
+			padding: 0;
+		}
+		vaadin-combo-box [slot="input"] {
+			-webkit-mask-image: none;
+			min-height: 0;
+		}
+		vaadin-combo-box::part(input-field) {
+			-webkit-mask-image: none;
+			border-radius: 0;
+			padding: 0;
+		}
+		vaadin-combo-box::part(input-field)::after {
+			opacity: 0;
+		}
+		vaadin-combo-box[readonly]::part(input-field)::after {
+			border: none;
+		}
+		vaadin-combo-box[readonly] > input:placeholder-shown {
+			opacity: 1;
+		}		
+		`,
+		// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
+		// with the same name. Including it will cause Vaadin to calculate NaN size,
+		// and reset items to an empty array, and opening the list box with no items
+		// to display.
+		excludeAttrsSync: ['tabindex', 'size'],
+		componentName: componentName$5,
+		includeForwardProps: ['items', 'renderer', 'selectedItem']
 	})
 );
 
-overrides$1 = `
-	:host {
-		display: inline-block;
-		min-width: 10em;
-		max-width: 100%;
-	}
-	vaadin-text-area {
-		margin: 0;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	vaadin-text-area > label,
-	vaadin-text-area::part(input-field) {
-		padding: 0;
-	}
-	vaadin-text-area[required]::part(required-indicator)::after {
-		content: "*";
-	}
-	vaadin-text-area[disabled] > textarea:placeholder-shown,
-	vaadin-text-area[readonly] > textarea:placeholder-shown {
-		opacity: 1;
-	}
-`;
+const globalRefs$1 = getThemeRefs(globals);
+
+const vars$4 = ComboBoxClass.cssVarList;
+
+const comboBox = {
+	[vars$4.borderColor]: globalRefs$1.colors.surface.main,
+	[vars$4.borderWidth]: '1px',
+	[vars$4.borderStyle]: 'solid',
+	[vars$4.cursor]: 'pointer',
+	[vars$4.padding]: '0',
+	[vars$4.placeholderColor]: globalRefs$1.colors.surface.main,
+	[vars$4.toggleColor]: globalRefs$1.colors.surface.contrast,
+	[vars$4.toggleCursor]: 'pointer',
+	[vars$4.inputBackgroundColor]: globalRefs$1.colors.surface.light,
+	[vars$4.padding]: `0 ${globalRefs$1.spacing.xs}`,
+
+	[vars$4.height]: '2em',
+
+	size: {
+		xs: {
+			[vars$4.fontSize]: '8px',
+		},
+		sm: {
+			[vars$4.fontSize]: '10px',
+		},
+		md: {
+			[vars$4.fontSize]: '14px',
+		},
+		lg: {
+			[vars$4.fontSize]: '20px',
+		},
+		xl: {
+			[vars$4.fontSize]: '25px',
+		}
+	},
+
+	_readonly: {
+		[vars$4.toggleCursor]: 'default',
+	},
+
+	_invalid: {
+		[vars$4.borderColor]: globalRefs$1.colors.error.main,
+		[vars$4.placeholderColor]: globalRefs$1.colors.error.light,
+		[vars$4.toggleColor]: globalRefs$1.colors.error.main,
+	},
+	// [vars.overlayCursor]: 'pointer',
+	// [vars.overlayBackground]: globalRefs.colors.surface.light,
+	// [vars.overlayBorder]: `2px solid red`,
+};
+
+var comboBox$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	comboBox: comboBox,
+	default: comboBox,
+	vars: vars$4
+});
 
 const observedAttributes = ['src', 'alt'];
 
-const componentName$5 = getComponentName('image');
+const componentName$4 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
+const BaseClass = createBaseClass({ componentName: componentName$4, baseSelector: ':host > img' });
 class RawImage extends BaseClass {
 	static get observedAttributes() {
 		return observedAttributes.concat(BaseClass.observedAttributes || []);
@@ -2801,6 +4103,16 @@ const ImageClass = compose(
 	draggableMixin,
 )(RawImage);
 
+const vars$3 = ImageClass.cssVarList;
+
+const image = {};
+
+var image$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: image,
+	vars: vars$3
+});
+
 var CountryCodes = [
 	{
 		name: 'Afghanistan',
@@ -4014,173 +5326,9 @@ var CountryCodes = [
 	}
 ].sort((a, b) => (a.name < b.name ? -1 : 1));
 
-const componentName$4 = getComponentName('phone-field-internal');
-
-createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
-
-const componentName$3 = getComponentName('combo-box');
-
-
-const ComboBoxMixin = (superclass) => class ComboBoxMixinClass extends superclass {
-	constructor() {
-		super();
-	}
-
-	// vaadin api is to set props on their combo box node, 
-	// in order to avoid it, we are passing the children of this component
-	// to the items & renderer props, so it will be used as the combo box items
-	#onChildrenChange() {
-		const baseElement = this.shadowRoot.querySelector(this.baseSelector);
-		const items = Array.from(this.children);
-
-		// we want the data-name attribute to be accessible as an object attribute
-		if (items.length) {
-			items.forEach((node) => {
-				Object.defineProperty(node, 'data-name', {
-					value: node.getAttribute('data-name'),
-				});
-				Object.defineProperty(node, 'data-id', {
-					value: node.getAttribute('data-id')
-				});
-			});
-
-			baseElement.items = items;
-
-			baseElement.renderer = (root, combo, model) => {
-				root.innerHTML = model.item.outerHTML;
-			};
-		}
-	}
-
-	// the default vaadin behavior is to attach the overlay to the body when opened
-	// we do not want that because it's difficult to style the overlay in this way
-	// so we override it to open inside the shadow DOM
-	#overrideOverlaySettings() {
-		const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
-
-		overlay._attachOverlay = function () { this.bringToFront(); };
-		overlay._detachOverlay = function () { };
-		overlay._enterModalState = function () { };
-	}
-
-	init() {
-		super.init?.();
-
-		this.#overrideOverlaySettings();
-		observeChildren(this, this.#onChildrenChange.bind(this));
-	}
-};
-
-const {
-	host: host$2,
-	input,
-	placeholder,
-	toggle,
-	label: label$1
-} = {
-	host: { selector: () => ':host' },
-	input: { selector: '::part(input-field)' },
-	placeholder: { selector: '> input:placeholder-shown' },
-	toggle: { selector: '::part(toggle-button)' },
-	label: { selector: '::part(label)' }
-};
-
-// const { slotted, selected } = {
-// 	slotted: { selector: () => '::slotted(*)' },
-// 	selected: { selector: () => '::slotted([selected])' }
-// }
-
-const ComboBoxClass = compose(
-	createStyleMixin({
-		mappings: {
-			width: host$2,
-			height: input,
-			padding: input,
-
-			inputBackgroundColor: { ...input, property: 'background-color' },
-			boxShadow: input,
-
-			borderColor: input,
-			borderWidth: input,
-			borderStyle: input,
-			borderRadius: input,
-
-			color: [label$1, input],
-
-			// we apply font-size also on the host so we can set its width with em
-			fontSize: [{}, host$2],
-
-			placeholderColor: { ...placeholder, property: 'color' },
-
-			toggleCursor: { ...toggle, property: 'cursor' },
-			toggleColor: { ...toggle, property: 'color' },
+const componentName$3 = getComponentName('phone-field-internal');
 
-			// we need to use the variables from the portal mixin
-			// so we need to use an arrow function on the selector
-			// for that to work, because ComboBox is not available
-			// at this time.
-			overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
-			overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
-		}
-	}),
-	draggableMixin,
-	portalMixin({
-		name: 'overlay',
-		selector: '',
-		mappings: {
-			backgroundColor: { selector: 'vaadin-combo-box-scroller' },
-			// TODO: this mapping doesn't work, needs fixing.
-			cursor: { selector: 'vaadin-combo-box-item' },
-		},
-		forward: {
-			include: false,
-			attributes: ['size']
-		},
-	}),
-	proxyInputMixin,
-	componentNameValidationMixin,
-	ComboBoxMixin
-)(
-	createProxy({
-		slots: ['prefix'],
-		wrappedEleName: 'vaadin-combo-box',
-		style: () => `
-		:host {
-			display: inline-flex;
-			box-sizing: border-box;
-			-webkit-mask-image: none;
-		}
-		vaadin-combo-box {
-			padding: 0;
-		}
-		vaadin-combo-box [slot="input"] {
-			-webkit-mask-image: none;
-			min-height: 0;
-		}
-		vaadin-combo-box::part(input-field) {
-			-webkit-mask-image: none;
-			border-radius: 0;
-			padding: 0;
-		}
-		vaadin-combo-box::part(input-field)::after {
-			opacity: 0;
-		}
-		vaadin-combo-box[readonly]::part(input-field)::after {
-			border: none;
-		}
-		vaadin-combo-box[readonly] > input:placeholder-shown {
-			opacity: 1;
-		}		
-		`,
-		// Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
-		// with the same name. Including it will cause Vaadin to calculate NaN size,
-		// and reset items to an empty array, and opening the list box with no items
-		// to display.
-		excludeAttrsSync: ['tabindex', 'size'],
-		componentName: componentName$3,
-		includeForwardProps: ['items', 'renderer', 'selectedItem']
-	})
-);
+createBaseInputClass({ componentName: componentName$3, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
@@ -4203,15 +5351,15 @@ const customMixin$1 = (superclass) =>
 			const template = document.createElement('template');
 
 			template.innerHTML = `
-				<${componentName$4} 
+				<${componentName$3} 
 					tabindex="-1"
 					slot="input"
-				></${componentName$4}>
+				></${componentName$3}>
       		`;
 
 			this.baseElement.appendChild(template.content.cloneNode(true));
 
-			this.inputElement = this.shadowRoot.querySelector(componentName$4);
+			this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
 			forwardAttrs(this.shadowRoot.host, this.inputElement, {
 				includeAttrs: [
@@ -4386,6 +5534,77 @@ const PhoneFieldClass = compose(
 	})
 );
 
+const globalRefs = getThemeRefs(globals);
+const vars$2 = PhoneFieldClass.cssVarList;
+
+const phoneField = {
+	[vars$2.wrapperBorderStyle]: 'solid',
+	[vars$2.wrapperBorderWidth]: '1px',
+	[vars$2.wrapperBorderColor]: 'transparent',
+	[vars$2.wrapperBorderRadius]: globalRefs.radius.xs,
+	[vars$2.placeholderColor]: globalRefs.colors.surface.main,
+	[vars$2.color]: globalRefs.colors.surface.contrast,
+
+	[vars$2.phoneInputWidth]: '10em',
+	[vars$2.countryCodeInputWidth]: '5em',
+
+	[vars$2.inputHeight]: '2em',
+	[vars$2.countryCodeDropdownWidth]: '12em',
+
+	size: {
+		xs: {
+			[vars$2.fontSize]: '8px',
+		},
+		sm: {
+			[vars$2.fontSize]: '20px',
+		},
+		md: {
+			[vars$2.fontSize]: '14px',
+		},
+		lg: {
+			[vars$2.fontSize]: '20px',
+		},
+		xl: {
+			[vars$2.fontSize]: '25px',
+		}
+	},
+
+	_fullWidth: {
+		[vars$2.componentWidth]: '100%',
+		[vars$2.phoneInputWidth]: '100%',
+		[vars$2.countryCodeDropdownWidth]: '100%',
+	},
+
+	_bordered: {
+		[vars$2.wrapperBorderColor]: globalRefs.colors.surface.main
+	},
+
+	[vars$2.outlineStyle]: 'solid',
+	[vars$2.outlineWidth]: '0.1em',
+	[vars$2.outlineColor]: 'transparent',
+
+	_focused: {
+		[vars$2.outlineColor]: globalRefs.colors.surface.main
+	},
+
+	_invalid: {
+		[vars$2.outlineColor]: globalRefs.colors.error.light,
+		[vars$2.color]: globalRefs.colors.error.main,
+		[vars$2.placeholderColor]: globalRefs.colors.error.light,
+		[vars$2.wrapperBorderColor]: globalRefs.colors.error.main
+	},
+
+	// '@overlay': {
+	// 	overlayItemBackgroundColor: 'red'
+	// }
+};
+
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: phoneField,
+	vars: vars$2
+});
+
 const componentName$1 = getComponentName('new-password-internal');
 
 const componentName = getComponentName('new-password');
@@ -4510,6 +5729,74 @@ const overrides = `
 	}
 `;
 
+const vars$1 = NewPasswordClass.cssVarList;
+
+const newPassword = {
+	[vars$1.inputsGap]: '1em',
+
+	_required: {
+		[vars$1.requiredContent]: "'*'",
+	},
+
+	_fullWidth: {
+		[vars$1.componentWidth]: '100%'
+	},
+
+	size: {
+		xs: {
+			[vars$1.fontSize]: '8px',
+		},
+		sm: {
+			[vars$1.fontSize]: '10px',
+		},
+		md: {
+			[vars$1.fontSize]: '14px',
+		},
+		lg: {
+			[vars$1.fontSize]: '20px',
+		},
+		xl: {
+			[vars$1.fontSize]: '25px',
+		}
+	},
+};
+
+var newPassword$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: newPassword,
+	vars: vars$1
+});
+
+const components = {
+	button: button$1,
+	textField: textField$2,
+	passwordField: passwordField$1,
+	numberField: numberField$1,
+	emailField: emailField$1,
+	textArea: textArea$1,
+	checkbox: checkbox$1,
+	switchToggle: switchToggle$1,
+	container: container$1,
+	logo: logo$1,
+	text: text$3,
+	link: link$1,
+	divider: divider$1,
+	passcode: passcode$1,
+	loaderRadial: loaderRadial$1,
+	loaderLinear: loaderLinear$1,
+	comboBox: comboBox$1,
+	image: image$1,
+	phoneField: phoneField$1,
+	newPassword: newPassword$1,
+};
+
+
+const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
+const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
+
+const defaultTheme = { globals, components: theme };
+const themeVars = { globals: vars$l, components: vars };
+
 exports.ButtonClass = ButtonClass;
 exports.CheckboxClass = CheckboxClass;
 exports.ContainerClass = ContainerClass;
@@ -4532,10 +5819,13 @@ exports.TextFieldClass = TextFieldClass;
 exports.componentsThemeManager = componentsThemeManager;
 exports.createComponentsTheme = createComponentsTheme;
 exports.createHelperVars = createHelperVars;
+exports.defaultTheme = defaultTheme;
 exports.genColor = genColor;
 exports.genColors = genColors;
 exports.getThemeRefs = getThemeRefs;
+exports.getThemeVars = getThemeVars;
 exports.globalsThemeToStyle = globalsThemeToStyle;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;
 exports.themeToStyle = themeToStyle;
+exports.themeVars = themeVars;
 //# sourceMappingURL=index.cjs.js.map