@descope/web-components-ui 1.0.52 → 1.0.53

package/dist/index.esm.js

@@ -5,6 +5,7 @@ import '@vaadin/email-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
 import '@vaadin/date-picker';
+import '@vaadin/checkbox';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
@@ -246,17 +247,32 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
-const observeAttributes = (ele, callback, excludeAttrs) => {
+class DescopeBaseClass extends HTMLElement {}
+
+const observeAttributes = (
+	ele,
+	callback,
+	{ excludeAttrs = [], includeAttrs = [] }
+) => {
 	// sync all attrs on init
-	callback(...Array.from(ele.attributes).map((attr) => attr.name));
+	callback(
+		...Array.from(ele.attributes)
+			.filter(
+				(attr) =>
+					!excludeAttrs.includes(attr.name) &&
+					(!includeAttrs.length || includeAttrs.includes(attr.name))
+			)
+			.map((attr) => attr.name)
+	);
 
 	const observer = new MutationObserver((mutationsList) => {
 		for (const mutation of mutationsList) {
 			if (
 				mutation.type === 'attributes' &&
-				!excludeAttrs.includes(mutation.attributeName)
+				!excludeAttrs.includes(mutation.attributeName) &&
+				(!includeAttrs.length || includeAttrs.includes(attr.name))
 			) {
-				callback(mutation.attributeName);
+				callback([mutation.attributeName]);
 			}
 		}
 	});
@@ -279,9 +295,13 @@ const createSyncAttrsCb =
 		});
 	};
 
-const syncAttrs = (ele1, ele2, excludeAttrs) => {
-	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), excludeAttrs);
-	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), excludeAttrs);
+const syncAttrs = (ele1, ele2, options) => {
+	observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+	observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+const forwardAttrs = (source, dest, options) => {
+	observeAttributes(source, createSyncAttrsCb(source, dest), options);
 };
 
 const createProxy = ({
@@ -299,7 +319,7 @@ const createProxy = ({
 		</${wrappedEleName}>
 	`;
 
-	class ProxyElement extends HTMLElement {
+	class ProxyElement extends DescopeBaseClass {
 		static get componentName() {
 			return componentName;
 		}
@@ -307,7 +327,6 @@ const createProxy = ({
 		constructor() {
 			super().attachShadow({ mode: 'open' }).innerHTML = template;
 			this.hostElement = this.shadowRoot.host;
-			this.componentName = this.hostElement.tagName.toLowerCase();
 			this.baseSelector = wrappedEleName;
 			this.shadowRoot.getElementById('create-proxy').innerHTML =
 				typeof style === 'function' ? style() : style;
@@ -348,7 +367,10 @@ const createProxy = ({
 
 				// sync events
 				this.addEventListener = (...args) => this.proxyElement.addEventListener(...args);
-				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
+
+				syncAttrs(this.proxyElement, this.hostElement, {
+					excludeAttrs: excludeAttrsSync
+				});
 			}
 		}
 
@@ -494,7 +516,7 @@ const compose =
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const componentName$e = getComponentName('button');
+const componentName$f = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -517,17 +539,16 @@ const iconStyles = `
 	}
 `;
 
-const selectors$2 = {
+const selectors$3 = {
 	label: '::part(label)'
 };
 
 const Button = compose(
 	createStyleMixin({
-		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: { selector: selectors$2.label },
+			color: { selector: selectors$3.label },
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
@@ -535,8 +556,8 @@ const Button = compose(
 			height: {},
 			width: matchHostStyle(),
 			cursor: {},
-			padding: [{ selector: selectors$2.label }],
-			textDecoration: { selector: selectors$2.label }
+			padding: [{ selector: selectors$3.label }],
+			textDecoration: { selector: selectors$3.label }
 		}
 	}),
 	draggableMixin,
@@ -548,7 +569,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$e
+		componentName: componentName$f
 	})
 );
 
@@ -581,9 +602,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$e, Button);
+customElements.define(componentName$f, Button);
 
-const selectors$1 = {
+const selectors$2 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	readOnlyInput: '[readonly]::part(input-field)::after',
@@ -591,34 +612,34 @@ const selectors$1 = {
 };
 
 var textFieldMappings = {
-	color: { selector: selectors$1.input },
-	backgroundColor: { selector: selectors$1.input },
-	color: { selector: selectors$1.input },
+	color: { selector: selectors$2.input },
+	backgroundColor: { selector: selectors$2.input },
+	color: { selector: selectors$2.input },
 	width: matchHostStyle({}),
 	borderColor: [
-		{ selector: selectors$1.input },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
 	borderWidth: [
-		{ selector: selectors$1.input },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
 	borderStyle: [
-		{ selector: selectors$1.input },
-		{ selector: selectors$1.readOnlyInput }
+		{ selector: selectors$2.input },
+		{ selector: selectors$2.readOnlyInput }
 	],
-	borderRadius: { selector: selectors$1.input },
-	boxShadow: { selector: selectors$1.input },
+	borderRadius: { selector: selectors$2.input },
+	boxShadow: { selector: selectors$2.input },
 	fontSize: {},
-	height: { selector: selectors$1.input },
-	padding: { selector: selectors$1.input },
-	outline: { selector: selectors$1.input },
-	outlineOffset: { selector: selectors$1.input },
+	height: { selector: selectors$2.input },
+	padding: { selector: selectors$2.input },
+	outline: { selector: selectors$2.input },
+	outlineOffset: { selector: selectors$2.input },
 
-	placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
+	placeholderColor: { selector: selectors$2.placeholder, property: 'color' }
 };
 
-const componentName$d = getComponentName('text-field');
+const componentName$e = getComponentName('text-field');
 
 let overrides$6 = ``;
 
@@ -635,7 +656,7 @@ const TextField = compose(
 		wrappedEleName: 'vaadin-text-field',
 		style: () => overrides$6,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$d
+		componentName: componentName$e
 	})
 );
 
@@ -680,18 +701,18 @@ overrides$6 = `
 	}
 `;
 
-customElements.define(componentName$d, TextField);
+customElements.define(componentName$e, TextField);
 
 const template = document.createElement('template');
 
-const componentName$c = getComponentName('combo');
+const componentName$d = getComponentName('combo');
 
 template.innerHTML = `
   <descope-button></descope-button>
   <descope-text-field></descope-text-field>
 `;
 
-class Combo extends HTMLElement {
+class Combo extends DescopeBaseClass {
 	constructor() {
 		super();
 
@@ -701,9 +722,9 @@ class Combo extends HTMLElement {
 	}
 }
 
-customElements.define(componentName$c, Combo);
+customElements.define(componentName$d, Combo);
 
-const componentName$b = getComponentName('number-field');
+const componentName$c = getComponentName('number-field');
 
 let overrides$5 = ``;
 
@@ -722,7 +743,7 @@ const NumberField = compose(
 		wrappedEleName: 'vaadin-number-field',
 		style: () => overrides$5,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$b
+		componentName: componentName$c
 	})
 );
 
@@ -766,9 +787,9 @@ overrides$5 = `
 	}
 `;
 
-customElements.define(componentName$b, NumberField);
+customElements.define(componentName$c, NumberField);
 
-const componentName$a = getComponentName('email-field');
+const componentName$b = getComponentName('email-field');
 
 let overrides$4 = ``;
 
@@ -787,7 +808,7 @@ const EmailField = compose(
 		wrappedEleName: 'vaadin-email-field',
 		style: () => overrides$4,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$a
+		componentName: componentName$b
 	})
 );
 
@@ -831,9 +852,9 @@ overrides$4 = `
 	}
 `;
 
-customElements.define(componentName$a, EmailField);
+customElements.define(componentName$b, EmailField);
 
-const componentName$9 = getComponentName('password-field');
+const componentName$a = getComponentName('password-field');
 
 let overrides$3 = ``;
 
@@ -841,7 +862,6 @@ const PasswordField = compose(
 	createStyleMixin({
 		mappings: {
 			...textFieldMappings,
-			// todo: override cursor from lumo
 			revealCursor: [
 				{
 					selector: '::part(reveal-button)::before',
@@ -859,7 +879,7 @@ const PasswordField = compose(
 		wrappedEleName: 'vaadin-password-field',
 		style: () => overrides$3,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$9
+		componentName: componentName$a
 	})
 );
 
@@ -903,11 +923,11 @@ overrides$3 = `
 	}
 `;
 
-customElements.define(componentName$9, PasswordField);
+customElements.define(componentName$a, PasswordField);
 
-const componentName$8 = getComponentName('text-area');
+const componentName$9 = getComponentName('text-area');
 
-const selectors = {
+const selectors$1 = {
 	label: '::part(label)',
 	input: '::part(input-field)',
 	required: '::part(required-indicator)::after'
@@ -919,16 +939,16 @@ const TextArea = compose(
 	createStyleMixin({
 		mappings: {
 			resize: { selector: '> textarea' },
-			color: { selector: selectors.label },
+			color: { selector: selectors$1.label },
 			cursor: {},
 			width: matchHostStyle(),
-			backgroundColor: { selector: selectors.input },
-			borderWidth: { selector: selectors.input },
-			borderStyle: { selector: selectors.input },
-			borderColor: { selector: selectors.input },
-			borderRadius: { selector: selectors.input },
-			outline: { selector: selectors.input },
-			outlineOffset: { selector: selectors.input }
+			backgroundColor: { selector: selectors$1.input },
+			borderWidth: { selector: selectors$1.input },
+			borderStyle: { selector: selectors$1.input },
+			borderColor: { selector: selectors$1.input },
+			borderRadius: { selector: selectors$1.input },
+			outline: { selector: selectors$1.input },
+			outlineOffset: { selector: selectors$1.input }
 		}
 	}),
 	draggableMixin,
@@ -940,7 +960,7 @@ const TextArea = compose(
 		wrappedEleName: 'vaadin-text-area',
 		style: () => overrides$2,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$8
+		componentName: componentName$9
 	})
 );
 
@@ -965,34 +985,41 @@ overrides$2 = `
 	}	
 `;
 
-customElements.define(componentName$8, TextArea);
+customElements.define(componentName$9, TextArea);
 
-const componentName$7 = getComponentName('date-picker');
+const componentName$8 = getComponentName('date-picker');
 
 const DatePicker = compose(
 	draggableMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
-		componentName: componentName$7,
+		componentName: componentName$8,
 		slots: ['prefix', 'suffix'],
 		wrappedEleName: 'vaadin-date-picker',
 		style: ``
 	})
 );
 
-customElements.define(componentName$7, DatePicker);
+customElements.define(componentName$8, DatePicker);
 
-const componentName$6 = getComponentName('container');
+const componentName$7 = getComponentName('container');
 
-class RawContainer extends HTMLElement {
+class RawContainer extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$6;
+		return componentName$7;
 	}
 	constructor() {
 		super();
 		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
+		template.innerHTML = `
+			<style>
+				:host > slot {
+					box-sizing: border-box;
+				}
+			</style>
+			<slot></slot>
+		`;
 
 		this.attachShadow({ mode: 'open' });
 		this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -1003,10 +1030,9 @@ class RawContainer extends HTMLElement {
 
 const Container = compose(
 	createStyleMixin({
-		// todo: do we want to change the mapping structure to this? ['aa', 'aaa', {'color': [{ selector: '::part(label)' }]}],
 		mappings: {
-			height: {},
-			width: {},
+			height: matchHostStyle(),
+			width: matchHostStyle(),
 
 			verticalPadding: [
 				{ property: 'padding-top' },
@@ -1037,13 +1063,13 @@ const Container = compose(
 	componentNameValidationMixin
 )(RawContainer);
 
-customElements.define(componentName$6, Container);
+customElements.define(componentName$7, Container);
 
-const componentName$5 = getComponentName('text');
+const componentName$6 = getComponentName('text');
 
-class RawText extends HTMLElement {
+class RawText extends DescopeBaseClass {
 	static get componentName() {
-		return componentName$5;
+		return componentName$6;
 	}
 	constructor() {
 		super();
@@ -1067,6 +1093,12 @@ const Text = compose(
 			fontWeight: {},
 			width: {},
 			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
 			textAlign: matchHostStyle(),
 			display: matchHostStyle()
 		}
@@ -1075,7 +1107,254 @@ const Text = compose(
 	componentNameValidationMixin
 )(RawText);
 
-customElements.define(componentName$5, Text);
+customElements.define(componentName$6, Text);
+
+const getChildObserver = (callback) => {
+	return new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback(mutation);
+			}
+		}
+	});
+};
+
+const insertNestingLevel = (srcEle, nestingEle) => {
+	nestingEle.append(...srcEle.childNodes);
+	srcEle.appendChild(nestingEle);
+};
+
+// adds a nesting element to the component, and move all existing children
+// to be under the nesting element
+const enforceNestingElementsStylesMixin =
+	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
+	(superclass) => {
+		const getChildNodeEle = () =>
+			Object.assign(document.createElement(nestingElementTagName), {
+				slot: nestingElementDestSlotName
+			});
+
+		let childObserver;
+		
+		const getObserver = () => childObserver;
+
+		return class EnforceNestingElementsStylesMixinClass extends superclass {
+			constructor() {
+				super();
+
+				const childObserverCallback = () => {
+					// we are going to change the DOM, so we need to disconnect the observer before
+					// and reconnect it after the child component is added
+					getObserver().disconnect(this.shadowRoot.host);
+
+					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
+					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
+
+					if (!isNestingElementExist && hasNewChildren) {
+						// if before there were no children and now there are children - insert
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					} else if (isNestingElementExist && hasNewChildren) {
+						// if children existed, and they changed -
+						// we need to update (move) the new children into
+						// descope-text and remove previous children
+						this.shadowRoot.host.querySelector(child).remove();
+						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+					}
+					else if (isNestingElementExist && !hasNewChildren) {
+						// if children existed and now there are none -
+						// we need to remove descope-text completely
+						this.shadowRoot.host.querySelector(child).remove();
+					}
+
+					// we need a new observer, because we remove the nesting element
+					this.shadowRoot.host.querySelector(nestingElementTagName) &&
+						forwardAttrs(
+							this.shadowRoot.host,
+							this.shadowRoot.host.querySelector(nestingElementTagName),
+							forwardAttrOptions
+						);
+
+						getObserver().observe(this.shadowRoot.host, {
+						childList: true
+					});
+				};
+
+				childObserver = getChildObserver(childObserverCallback);
+			}
+
+			connectedCallback() {
+				super.connectedCallback?.();
+
+				if (this.shadowRoot.host.childNodes.length > 0) {
+					// on the first render - we want to move all component's children to be under descope-text
+					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
+
+					forwardAttrs(
+						this.shadowRoot.host,
+						this.shadowRoot.host.querySelector(nestingElementTagName),
+						forwardAttrOptions
+					);
+				}
+
+				getObserver().observe(this.shadowRoot.host, {
+					childList: true
+				});
+			}
+		};
+	};
+
+const componentName$5 = getComponentName('divider');
+class RawDivider extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$5;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				:host > div {
+					display: flex;
+					height: 100%;
+				}
+				:host > div::before,
+				:host > div::after {
+					content: '';
+					flex-grow: 1;
+					width: 100%;
+				}
+				::slotted(*) {
+					flex-grow: 0;
+					flex-shrink: 0;
+				}
+			</style>
+			<div>
+				<slot></slot>
+				<slot name="text"></slot>
+			</div>
+		`;
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const selectors = {
+	root: { selector: '' },
+	before: { selector: '::before' },
+	after: { selector: '::after' },
+	slotted: { selector: () => '::slotted(*)' }
+};
+
+const { root, before, after, slotted } = selectors;
+
+const Divider = compose(
+	enforceNestingElementsStylesMixin({
+		nestingElementTagName: 'descope-text',
+		nestingElementDestSlotName: 'text',
+		forwardAttrOptions: {
+			includeAttrs: ['mode', 'variant'],
+			excludeAttrs: []
+		}
+	}),
+	createStyleMixin({
+		mappings: {
+			minHeight: root,
+			alignItems: root,
+			alignSelf: root,
+			flexDirection: root,
+			padding: slotted,
+			width: matchHostStyle(),
+			height: [before, after],
+			backgroundColor: [before, after],
+			opacity: [before, after],
+			textWidth: { ...slotted, property: 'width' }
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawDivider);
+
+customElements.define(componentName$5, Divider);
+
+const componentName$4 = getComponentName('logo');
+
+let style;
+const getStyle = () => style;
+
+class RawLogo extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$4;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+		<style>
+			${getStyle()}
+		</style>
+		<div></div>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const Logo = compose(
+	createStyleMixin({
+		mappings: {
+			height: {},
+			width: {},
+			url: {},
+			fallbackUrl: {}
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawLogo);
+
+style = `
+:host {
+	display: inline-block;
+}
+:host > div {
+	display: inline-block;
+	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
+}
+`;
+
+customElements.define(componentName$4, Logo);
+
+const componentName$3 = getComponentName('checkbox');
+
+const Checkbox = compose(
+	createStyleMixin({
+		mappings: {
+			width: matchHostStyle(),
+			cursor: [{}, { selector: '> label' }]
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin
+)(
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-checkbox',
+		style: `
+		:host {
+			display: inline-block;
+		}
+		`,
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$3
+	})
+);
+
+customElements.define(componentName$3, Checkbox);
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
@@ -1316,7 +1595,7 @@ var globals = {
 };
 
 const globalRefs$4 = getThemeRefs(globals);
-const vars$8 = Button.cssVarList;
+const vars$9 = Button.cssVarList;
 
 const mode = {
 	primary: globalRefs$4.colors.primary,
@@ -1326,83 +1605,83 @@ const mode = {
 	surface: globalRefs$4.colors.surface
 };
 
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$e);
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$f);
 
 const button = {
 	...helperTheme$1,
 
 	size: {
 		xs: {
-			[vars$8.height]: '10px',
-			[vars$8.fontSize]: '10px',
-			[vars$8.padding]: `0 ${globalRefs$4.spacing.xs}`
+			[vars$9.height]: '10px',
+			[vars$9.fontSize]: '10px',
+			[vars$9.padding]: `0 ${globalRefs$4.spacing.xs}`
 		},
 		sm: {
-			[vars$8.height]: '20px',
-			[vars$8.fontSize]: '10px',
-			[vars$8.padding]: `0 ${globalRefs$4.spacing.sm}`
+			[vars$9.height]: '20px',
+			[vars$9.fontSize]: '10px',
+			[vars$9.padding]: `0 ${globalRefs$4.spacing.sm}`
 		},
 		md: {
-			[vars$8.height]: '30px',
-			[vars$8.fontSize]: '14px',
-			[vars$8.padding]: `0 ${globalRefs$4.spacing.md}`
+			[vars$9.height]: '30px',
+			[vars$9.fontSize]: '14px',
+			[vars$9.padding]: `0 ${globalRefs$4.spacing.md}`
 		},
 		lg: {
-			[vars$8.height]: '40px',
-			[vars$8.fontSize]: '20px',
-			[vars$8.padding]: `0 ${globalRefs$4.spacing.lg}`
+			[vars$9.height]: '40px',
+			[vars$9.fontSize]: '20px',
+			[vars$9.padding]: `0 ${globalRefs$4.spacing.lg}`
 		},
 		xl: {
-			[vars$8.height]: '50px',
-			[vars$8.fontSize]: '25px',
-			[vars$8.padding]: `0 ${globalRefs$4.spacing.xl}`
+			[vars$9.height]: '50px',
+			[vars$9.fontSize]: '25px',
+			[vars$9.padding]: `0 ${globalRefs$4.spacing.xl}`
 		}
 	},
 
-	[vars$8.borderRadius]: globalRefs$4.radius.lg,
-	[vars$8.cursor]: 'pointer',
-	[vars$8.borderWidth]: '2px',
-	[vars$8.borderStyle]: 'solid',
-	[vars$8.borderColor]: 'transparent',
+	[vars$9.borderRadius]: globalRefs$4.radius.lg,
+	[vars$9.cursor]: 'pointer',
+	[vars$9.borderWidth]: '2px',
+	[vars$9.borderStyle]: 'solid',
+	[vars$9.borderColor]: 'transparent',
 
 	_fullWidth: {
-		[vars$8.width]: '100%'
+		[vars$9.width]: '100%'
 	},
 	_loading: {
-		[vars$8.cursor]: 'wait'
+		[vars$9.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$8.color]: helperRefs$1.contrast,
-			[vars$8.backgroundColor]: helperRefs$1.main,
+			[vars$9.color]: helperRefs$1.contrast,
+			[vars$9.backgroundColor]: helperRefs$1.main,
 			_hover: {
-				[vars$8.backgroundColor]: helperRefs$1.dark
+				[vars$9.backgroundColor]: helperRefs$1.dark
 			},
 			_loading: {
-				[vars$8.backgroundColor]: helperRefs$1.main
+				[vars$9.backgroundColor]: helperRefs$1.main
 			}
 		},
 		outline: {
-			[vars$8.color]: helperRefs$1.main,
-			[vars$8.borderColor]: helperRefs$1.main,
+			[vars$9.color]: helperRefs$1.main,
+			[vars$9.borderColor]: helperRefs$1.main,
 			_hover: {
-				[vars$8.color]: helperRefs$1.dark,
-				[vars$8.borderColor]: helperRefs$1.dark,
+				[vars$9.color]: helperRefs$1.dark,
+				[vars$9.borderColor]: helperRefs$1.dark,
 				_error: {
-					[vars$8.color]: helperRefs$1.error
+					[vars$9.color]: helperRefs$1.error
 				}
 			}
 		},
 		link: {
-			[vars$8.color]: helperRefs$1.main,
-			[vars$8.padding]: 0,
-			[vars$8.margin]: 0,
-			[vars$8.lineHeight]: helperRefs$1.height,
-			[vars$8.borderRadius]: 0,
+			[vars$9.color]: helperRefs$1.main,
+			[vars$9.padding]: 0,
+			[vars$9.margin]: 0,
+			[vars$9.lineHeight]: helperRefs$1.height,
+			[vars$9.borderRadius]: 0,
 			_hover: {
-				[vars$8.color]: helperRefs$1.main,
-				[vars$8.textDecoration]: 'underline'
+				[vars$9.color]: helperRefs$1.main,
+				[vars$9.textDecoration]: 'underline'
 			}
 		}
 	}
@@ -1410,7 +1689,7 @@ const button = {
 
 const globalRefs$3 = getThemeRefs(globals);
 
-const vars$7 = TextField.cssVarList;
+const vars$8 = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
@@ -1480,13 +1759,13 @@ const textField = (vars) => ({
 	}
 });
 
-var textField$1 = textField(vars$7);
+var textField$1 = textField(vars$8);
 
-const vars$6 = PasswordField.cssVarList;
+const vars$7 = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$6),
-	[vars$6.revealCursor]: 'pointer'
+	...textField(vars$7),
+	[vars$7.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -1498,76 +1777,50 @@ const emailField = {
 };
 
 const globalRefs$2 = getThemeRefs(globals);
-const vars$5 = TextArea.cssVarList;
+const vars$6 = TextArea.cssVarList;
 
 const textArea = {
-	[vars$5.color]: globalRefs$2.colors.primary.main,
-	[vars$5.backgroundColor]: globalRefs$2.colors.surface.light,
-	[vars$5.resize]: 'vertical',
+	[vars$6.color]: globalRefs$2.colors.primary.main,
+	[vars$6.backgroundColor]: globalRefs$2.colors.surface.light,
+	[vars$6.resize]: 'vertical',
 
-	[vars$5.borderRadius]: globalRefs$2.radius.sm,
-	[vars$5.borderWidth]: '1px',
-	[vars$5.borderStyle]: 'solid',
-	[vars$5.borderColor]: 'transparent',
+	[vars$6.borderRadius]: globalRefs$2.radius.sm,
+	[vars$6.borderWidth]: '1px',
+	[vars$6.borderStyle]: 'solid',
+	[vars$6.borderColor]: 'transparent',
 
 	_borderOffset: {
-		[vars$5.outlineOffset]: '2px'
+		[vars$6.outlineOffset]: '2px'
 	},
 
 	_bordered: {
-		[vars$5.borderColor]: globalRefs$2.colors.surface.main
+		[vars$6.borderColor]: globalRefs$2.colors.surface.main
 	},
 
 	_focused: {
-		[vars$5.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
+		[vars$6.outline]: `2px solid ${globalRefs$2.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$5.width]: '100%'
+		[vars$6.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$5.cursor]: 'not-allowed'
+		[vars$6.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$5.outline]: `2px solid ${globalRefs$2.colors.error.main}`
+		[vars$6.outline]: `2px solid ${globalRefs$2.colors.error.main}`
 	}
 };
 
-const componentName$4 = getComponentName('checkbox');
-
-const Checkbox = compose(
-	createStyleMixin({
-		mappings: {
-			width: matchHostStyle(),
-			cursor: [{}, { selector: '> label' }]
-		}
-	}),
-	draggableMixin,
-	inputMixin,
-	componentNameValidationMixin
-)(
-	createProxy({
-		slots: [],
-		wrappedEleName: 'vaadin-checkbox',
-		style: `
-		:host {
-			display: inline-block;
-		}
-		`,
-		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$4
-	})
-);
-
-const vars$4 = Checkbox.cssVarList;
+const vars$5 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$4.cursor]: 'pointer'
+	[vars$5.cursor]: 'pointer'
 };
 
-const componentName$3 = getComponentName('switch-toggle');
+const componentName$2 = getComponentName('switch-toggle');
 
 let overrides$1 = ``;
 
@@ -1587,7 +1840,7 @@ const SwitchToggle = compose(
 		wrappedEleName: 'vaadin-checkbox',
 		style: () => overrides$1,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$3
+		componentName: componentName$2
 	})
 );
 
@@ -1641,16 +1894,16 @@ overrides$1 = `
 	}
 `;
 
-const vars$3 = SwitchToggle.cssVarList;
+const vars$4 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$3.width]: '70px',
-	[vars$3.cursor]: [{}, { selector: '> label' }]
+	[vars$4.width]: '70px',
+	[vars$4.cursor]: [{}, { selector: '> label' }]
 };
 
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = Container.cssVarList;
+const vars$3 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -1673,31 +1926,31 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars$2.display]: 'flex',
+	[vars$3.display]: 'flex',
 	verticalPadding: {
-		sm: { [vars$2.verticalPadding]: '5px' },
-		md: { [vars$2.verticalPadding]: '10px' },
-		lg: { [vars$2.verticalPadding]: '20px' },
+		sm: { [vars$3.verticalPadding]: '5px' },
+		md: { [vars$3.verticalPadding]: '10px' },
+		lg: { [vars$3.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$2.horizontalPadding]: '5px' },
-		md: { [vars$2.horizontalPadding]: '10px' },
-		lg: { [vars$2.horizontalPadding]: '20px' },
+		sm: { [vars$3.horizontalPadding]: '5px' },
+		md: { [vars$3.horizontalPadding]: '10px' },
+		lg: { [vars$3.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$2.flexDirection]: 'row',
-			[vars$2.alignItems]: helperRefs.verticalAlignment,
-			[vars$2.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$3.flexDirection]: 'row',
+			[vars$3.alignItems]: helperRefs.verticalAlignment,
+			[vars$3.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$2.flexDirection]: 'column',
-			[vars$2.alignItems]: helperRefs.horizontalAlignment,
-			[vars$2.justifyContent]: helperRefs.verticalAlignment,
+			[vars$3.flexDirection]: 'column',
+			[vars$3.alignItems]: helperRefs.horizontalAlignment,
+			[vars$3.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -1706,173 +1959,152 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$2.gap]: '10px'
+			[vars$3.gap]: '10px'
 		},
 		md: {
-			[vars$2.gap]: '20px'
+			[vars$3.gap]: '20px'
 		},
 		lg: {
-			[vars$2.gap]: '30px'
+			[vars$3.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.sm} ${helperRefs.shadowColor}`
 		},
 		md: {
-			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.md} ${helperRefs.shadowColor}`
 		},
 		lg: {
-			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.lg} ${helperRefs.shadowColor}`
 		},
 		xl: {
-			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$1.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$2.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[vars$3.boxShadow]: `${globalRefs$1.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$2.borderRadius]: globalRefs$1.radius.sm
+			[vars$3.borderRadius]: globalRefs$1.radius.sm
 		},
 		md: {
-			[vars$2.borderRadius]: globalRefs$1.radius.md
+			[vars$3.borderRadius]: globalRefs$1.radius.md
 		},
 		lg: {
-			[vars$2.borderRadius]: globalRefs$1.radius.lg
+			[vars$3.borderRadius]: globalRefs$1.radius.lg
 		},
 	}
 };
 
-const componentName$2 = getComponentName('logo');
-
-let style;
-const getStyle = () => style;
-
-class RawLogo extends HTMLElement {
-	static get componentName() {
-		return componentName$2;
-	}
-	constructor() {
-		super();
-		const template = document.createElement('template');
-		template.innerHTML = `
-		<style>
-			${getStyle()}
-		</style>
-		<div></div>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-		this.baseSelector = ':host > div';
-	}
-}
-
-const Logo = compose(
-	createStyleMixin({
-		mappings: {
-			height: {},
-			width: {},
-			url: {},
-			fallbackUrl: {},
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawLogo);
-
-style = `
-:host {
-	display: inline-block;
-}
-:host > div {
-	display: inline-block;
-	content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
-}
-`;
-
-const vars$1 = Logo.cssVarList;
+const vars$2 = Logo.cssVarList;
 
 const logo = {
-	[vars$1.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$2.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
 const globalRefs = getThemeRefs(globals);
 
-const vars = Text.cssVarList;
+const vars$1 = Text.cssVarList;
 
 const text = {
-	[vars.lineHeight]: '1em',
-	[vars.display]: 'inline-block',
-	[vars.textAlign]: 'left',
-	[vars.color]: globalRefs.colors.surface.dark,
+	[vars$1.lineHeight]: '1em',
+	[vars$1.display]: 'inline-block',
+	[vars$1.textAlign]: 'left',
+	[vars$1.color]: globalRefs.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars.fontSize]: globalRefs.typography.h1.size,
-			[vars.fontWeight]: globalRefs.typography.h1.weight,
-			[vars.fontFamily]: globalRefs.typography.h1.font
+			[vars$1.fontSize]: globalRefs.typography.h1.size,
+			[vars$1.fontWeight]: globalRefs.typography.h1.weight,
+			[vars$1.fontFamily]: globalRefs.typography.h1.font
 		},
 		h2: {
-			[vars.fontSize]: globalRefs.typography.h2.size,
-			[vars.fontWeight]: globalRefs.typography.h2.weight,
-			[vars.fontFamily]: globalRefs.typography.h2.font
+			[vars$1.fontSize]: globalRefs.typography.h2.size,
+			[vars$1.fontWeight]: globalRefs.typography.h2.weight,
+			[vars$1.fontFamily]: globalRefs.typography.h2.font
 		},
 		h3: {
-			[vars.fontSize]: globalRefs.typography.h3.size,
-			[vars.fontWeight]: globalRefs.typography.h3.weight,
-			[vars.fontFamily]: globalRefs.typography.h3.font
+			[vars$1.fontSize]: globalRefs.typography.h3.size,
+			[vars$1.fontWeight]: globalRefs.typography.h3.weight,
+			[vars$1.fontFamily]: globalRefs.typography.h3.font
 		},
 		subtitle1: {
-			[vars.fontSize]: globalRefs.typography.subtitle1.size,
-			[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
-			[vars.fontFamily]: globalRefs.typography.subtitle1.font
+			[vars$1.fontSize]: globalRefs.typography.subtitle1.size,
+			[vars$1.fontWeight]: globalRefs.typography.subtitle1.weight,
+			[vars$1.fontFamily]: globalRefs.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars.fontSize]: globalRefs.typography.subtitle2.size,
-			[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
-			[vars.fontFamily]: globalRefs.typography.subtitle2.font
+			[vars$1.fontSize]: globalRefs.typography.subtitle2.size,
+			[vars$1.fontWeight]: globalRefs.typography.subtitle2.weight,
+			[vars$1.fontFamily]: globalRefs.typography.subtitle2.font
 		},
 		body1: {
-			[vars.fontSize]: globalRefs.typography.body1.size,
-			[vars.fontWeight]: globalRefs.typography.body1.weight,
-			[vars.fontFamily]: globalRefs.typography.body1.font
+			[vars$1.fontSize]: globalRefs.typography.body1.size,
+			[vars$1.fontWeight]: globalRefs.typography.body1.weight,
+			[vars$1.fontFamily]: globalRefs.typography.body1.font
 		},
 		body2: {
-			[vars.fontSize]: globalRefs.typography.body2.size,
-			[vars.fontWeight]: globalRefs.typography.body2.weight,
-			[vars.fontFamily]: globalRefs.typography.body2.font
+			[vars$1.fontSize]: globalRefs.typography.body2.size,
+			[vars$1.fontWeight]: globalRefs.typography.body2.weight,
+			[vars$1.fontFamily]: globalRefs.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars.color]: globalRefs.colors.primary.main
+			[vars$1.color]: globalRefs.colors.primary.main
 		},
 		secondary: {
-			[vars.color]: globalRefs.colors.secondary.main
+			[vars$1.color]: globalRefs.colors.secondary.main
 		},
 		error: {
-			[vars.color]: globalRefs.colors.error.main
+			[vars$1.color]: globalRefs.colors.error.main
 		},
 		success: {
-			[vars.color]: globalRefs.colors.success.main
+			[vars$1.color]: globalRefs.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars.textAlign]: 'right' },
-		left: { [vars.textAlign]: 'left' },
-		center: { [vars.textAlign]: 'center' }
+		right: { [vars$1.textAlign]: 'right' },
+		left: { [vars$1.textAlign]: 'left' },
+		center: { [vars$1.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars.width]: '100%',
-		[vars.display]: 'block'
+		[vars$1.width]: '100%',
+		[vars$1.display]: 'block'
 	},
 	_italic: {
-		[vars.fontStyle]: 'italic'
+		[vars$1.fontStyle]: 'italic'
+	},
+	_uppercase: {
+		[vars$1.textTransform]: 'uppercase'
+	},
+	_lowercase: {
+		[vars$1.textTransform]: 'lowercase'
+	}
+};
+
+const vars = Divider.cssVarList;
+
+const divider = {
+	[vars.alignItems]: 'center',
+	[vars.height]: '2px',
+	[vars.backgroundColor]: 'currentColor',
+	[vars.opacity]: '0.2',
+	[vars.padding]: '0 10px',
+	[vars.width]: '100%',
+	[vars.flexDirection]: 'row',
+	[vars.alignSelf]: 'strech',
+	[vars.textWidth]: 'fit-content',
+	_vertical: {
+		[vars.width]: '2px',
+		[vars.padding]: '10px 0',
+		[vars.flexDirection]: 'column',
+		[vars.minHeight]: '200px',
+		[vars.textWidth]: 'max-content'
 	}
 };
 
@@ -2021,6 +2253,7 @@ var components = {
 	container,
 	logo,
 	text,
+	divider,
 	passcode
 };