@descope/web-components-ui 1.0.55 → 1.0.57

package/dist/index.esm.js

@@ -32,7 +32,11 @@ const createCssSelector = (
 ) =>
 	typeof relativeSelectorOrSelectorFn === 'function'
 		? relativeSelectorOrSelectorFn(baseSelector)
-		: `${baseSelector}${relativeSelectorOrSelectorFn}`;
+		: `${baseSelector}${
+				/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+					? ` ${relativeSelectorOrSelectorFn}`
+					: relativeSelectorOrSelectorFn
+		  }`;
 
 class StyleBuilder {
 	constructor() {
@@ -110,110 +114,115 @@ const matchHostStyle = (mappingObj = {}) => [
 
 const createStyleMixin =
 	({ mappings = {}, nestedMappings = {} }) =>
-		(superclass) => {
-			const styleAttributes = Object.keys(mappings).map((key) =>
-				kebabCaseJoin('st', key)
-			);
-			return class CustomStyleMixinClass extends superclass {
-				static get observedAttributes() {
-					const superAttrs = superclass.observedAttributes || [];
-					return [...superAttrs, ...styleAttributes];
-				}
+	(superclass) => {
+		const styleAttributes = Object.keys(mappings).map((key) =>
+			kebabCaseJoin('st', key)
+		);
+		return class CustomStyleMixinClass extends superclass {
+			static get observedAttributes() {
+				const superAttrs = superclass.observedAttributes || [];
+				return [...superAttrs, ...styleAttributes];
+			}
 
-				static get cssVarList() {
-					return createCssVarsList(superclass.componentName, mappings);
-				}
+			static get cssVarList() {
+				return createCssVarsList(superclass.componentName, {
+					...mappings,
+					...nestedMappings
+				});
+			}
 
-				#styleEle = null;
+			#styleEle = null;
 
-				constructor() {
-					super();
+			constructor() {
+				super();
 
-					this.#createComponentStyle();
-					this.#createAttrOverrideStyle();
-				}
+				this.#createComponentStyle();
+				this.#createAttrOverrideStyle();
+			}
 
-				#createAttrOverrideStyle() {
-					this.#styleEle = document.createElement('style');
-					this.#styleEle.id = 'style-mixin-overrides';
+			#createAttrOverrideStyle() {
+				this.#styleEle = document.createElement('style');
+				this.#styleEle.id = 'style-mixin-overrides';
 
-					this.#styleEle.innerText = '* {}';
-					this.shadowRoot.prepend(this.#styleEle);
-				}
+				this.#styleEle.innerText = '* {}';
+				this.shadowRoot.prepend(this.#styleEle);
+			}
 
-				#updateAttrOverrideStyle(attrName, value) {
-					const style = this.#styleEle.sheet?.cssRules[0].style;
-					const varName = getCssVarName(
-						superclass.componentName,
-						attrName.replace(/^st-/, '')
-					);
+			#updateAttrOverrideStyle(attrName, value) {
+				const style = this.#styleEle.sheet?.cssRules[0].style;
+				const varName = getCssVarName(
+					superclass.componentName,
+					attrName.replace(/^st-/, '')
+				);
 
-					if (value) style?.setProperty(varName, value);
-					else style?.removeProperty(varName);
-				}
+				if (value) style?.setProperty(varName, value);
+				else style?.removeProperty(varName);
+			}
 
-				#createComponentStyle() {
-					const themeStyle = document.createElement('style');
-					themeStyle.id = 'style-mixin-component';
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						this.baseSelector,
-						mappings
-					);
-					this.shadowRoot.prepend(themeStyle);
-				}
+			#createComponentStyle() {
+				const themeStyle = document.createElement('style');
+				themeStyle.id = 'style-mixin-component';
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					this.baseSelector,
+					mappings
+				);
+				this.shadowRoot.prepend(themeStyle);
+			}
 
-				#createComponentNestingStyle() {
-					// we need these selectors to be more specific from the theme selectors
-					// in order to do it, we are repeating the class name for specificity
-					const numOfClassNameSpecifier = 3;
+			#createComponentNestingStyle() {
+				// we need these selectors to be more specific from the theme selectors
+				// in order to do it, we are repeating the class name for specificity
+				const numOfClassNameSpecifier = 3;
 
-					const rootNode = this.shadowRoot.host.getRootNode();
-					const styleId = `${superclass.componentName}-style-mixin-component`;
+				const rootNode = this.shadowRoot.host.getRootNode();
+				const styleId = `${superclass.componentName}-style-mixin-component`;
 
-					const className = superclass.componentName;
-					this.shadowRoot.host.classList.add(className);
+				const className = superclass.componentName;
+				this.shadowRoot.host.classList.add(className);
 
-					if(rootNode.querySelector(`style#${styleId}`)) return;
+				if (rootNode.querySelector(`style#${styleId}`)) return;
 
-					const themeStyle = document.createElement('style');
-					themeStyle.id = styleId;
-					themeStyle.innerHTML = createStyle(
-						superclass.componentName,
-						`${superclass.componentName}${Array(numOfClassNameSpecifier).fill(`.${className}`).join('')}`,
-						nestedMappings
-					);
+				const themeStyle = document.createElement('style');
+				themeStyle.id = styleId;
+				themeStyle.innerHTML = createStyle(
+					superclass.componentName,
+					`${superclass.componentName}${Array(numOfClassNameSpecifier)
+						.fill(`.${className}`)
+						.join('')}`,
+					nestedMappings
+				);
 
-					// rootNode can be either a shadow DOM or a light DOM
-					if (rootNode.nodeName === '#document') {
-						rootNode.head.append(themeStyle);
-					} else {
-						rootNode.append(themeStyle);
-					}
+				// rootNode can be either a shadow DOM or a light DOM
+				if (rootNode.nodeName === '#document') {
+					rootNode.head.append(themeStyle);
+				} else {
+					rootNode.append(themeStyle);
 				}
+			}
 
-				attributeChangedCallback(attrName, oldValue, newValue) {
-					super.attributeChangedCallback?.(attrName, oldValue, newValue);
+			attributeChangedCallback(attrName, oldValue, newValue) {
+				super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-					if (styleAttributes.includes(attrName)) {
-						this.#updateAttrOverrideStyle(attrName, newValue);
-					}
+				if (styleAttributes.includes(attrName)) {
+					this.#updateAttrOverrideStyle(attrName, newValue);
 				}
+			}
 
-				connectedCallback() {
-					super.connectedCallback?.();
-					if (this.shadowRoot.isConnected) {
-						this.#createComponentNestingStyle();
+			connectedCallback() {
+				super.connectedCallback?.();
+				if (this.shadowRoot.isConnected) {
+					this.#createComponentNestingStyle();
 
-						Array.from(this.attributes).forEach(attr => {
-							if (styleAttributes.includes(attr.nodeName)) {
-								this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
-							}
-						});
-					}
+					Array.from(this.attributes).forEach((attr) => {
+						if (styleAttributes.includes(attr.nodeName)) {
+							this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
+						}
+					});
 				}
-			};
+			}
 		};
+	};
 
 const draggableMixin = (superclass) =>
 	class DraggableMixinClass extends superclass {
@@ -535,7 +544,7 @@ const compose =
 	(val) =>
 		fns.reduceRight((res, fn) => fn(res), val);
 
-const componentName$g = getComponentName('button');
+const componentName$i = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -558,7 +567,7 @@ const iconStyles = `
 	}
 `;
 
-const selectors$4 = {
+const selectors$5 = {
 	label: '::part(label)'
 };
 
@@ -567,7 +576,7 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: { selector: selectors$4.label },
+			color: { selector: selectors$5.label },
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
@@ -575,8 +584,8 @@ const Button = compose(
 			height: {},
 			width: matchHostStyle(),
 			cursor: {},
-			padding: [{ selector: selectors$4.label }],
-			textDecoration: { selector: selectors$4.label }
+			padding: [{ selector: selectors$5.label }],
+			textDecoration: { selector: selectors$5.label }
 		}
 	}),
 	draggableMixin,
@@ -588,7 +597,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$g
+		componentName: componentName$i
 	})
 );
 
@@ -621,9 +630,9 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$g, Button);
+customElements.define(componentName$i, Button);
 
-const componentName$f = getComponentName('checkbox');
+const componentName$h = getComponentName('checkbox');
 
 const Checkbox = compose(
 	createStyleMixin({
@@ -645,11 +654,131 @@ const Checkbox = compose(
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$f
+		componentName: componentName$h
 	})
 );
 
-customElements.define(componentName$f, Checkbox);
+customElements.define(componentName$h, Checkbox);
+
+const componentName$g = getComponentName('loader-linear');
+
+class RawLoaderLinear extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$g;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				@keyframes tilt {
+					0% { transform: translateX(0); }
+					50% { transform: translateX(400%); }
+				}
+				:host {
+					position: relative;
+				}
+				div::after {
+					content: '';
+					animation-name: tilt;
+					position: absolute;
+					left: 0;
+				}
+			</style>
+			<div></div>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const selectors$4 = {
+	root: {},
+	after: { selector: '::after' }
+};
+
+const { root: root$1, after: after$1 } = selectors$4;
+
+const LoaderLinear = compose(
+	createStyleMixin({
+		mappings: {
+			display: root$1,
+			width: matchHostStyle(root$1),
+			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);
+
+customElements.define(componentName$g, LoaderLinear);
+
+const componentName$f = getComponentName('loader-radial');
+
+class RawLoaderRadial extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$f;
+	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `
+			<style>
+				@keyframes spin {
+					0% { transform: rotate(0deg); }
+					100% { transform: rotate(360deg); }
+				}
+				:host {
+					position: relative;
+				}
+				:host > div {
+					animation-name: spin;
+				}
+			</style>
+			<div></div>
+		`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+	}
+}
+
+const LoaderRadial = compose(
+	createStyleMixin({
+		mappings: {
+			display: {},
+			width: matchHostStyle({}),
+			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);
+
+customElements.define(componentName$f, LoaderRadial);
 
 const selectors$3 = {
 	label: '::part(label)',
@@ -943,11 +1072,53 @@ const enforceNestingElementsStylesMixin =
 		};
 	};
 
-const componentName$a = getComponentName('divider');
-class RawDivider extends DescopeBaseClass {
+const componentName$a = getComponentName('text');
+
+class RawText extends DescopeBaseClass {
 	static get componentName() {
 		return componentName$a;
 	}
+	constructor() {
+		super();
+		const template = document.createElement('template');
+		template.innerHTML = `<slot></slot>`;
+
+		this.attachShadow({ mode: 'open' });
+		this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > slot';
+	}
+}
+
+const Text = compose(
+	createStyleMixin({
+		mappings: {
+			fontFamily: {},
+			lineHeight: {},
+			fontStyle: {},
+			fontSize: {},
+			fontWeight: {},
+			width: {},
+			color: {},
+			letterSpacing: {},
+			textShadow: {},
+			borderWidth: {},
+			borderStyle: {},
+			borderColor: {},
+			textTransform: {},
+			textAlign: matchHostStyle(),
+			display: matchHostStyle()
+		}
+	}),
+	draggableMixin,
+	componentNameValidationMixin
+)(RawText);
+
+const componentName$9 = getComponentName('divider');
+class RawDivider extends DescopeBaseClass {
+	static get componentName() {
+		return componentName$9;
+	}
 	constructor() {
 		super();
 		const template = document.createElement('template');
@@ -1010,57 +1181,21 @@ const Divider = compose(
 			backgroundColor: [before, after],
 			opacity: [before, after],
 			textWidth: { ...slotted, property: 'width' }
+		},
+		nestedMappings: {
+			fontStyle: {
+				selector: Text.componentName,
+				property: Text.cssVarList.fontStyle
+			}
 		}
 	}),
 	draggableMixin,
 	componentNameValidationMixin
 )(RawDivider);
 
-const componentName$9 = getComponentName('text');
-
-class RawText extends DescopeBaseClass {
-	static get componentName() {
-		return componentName$9;
-	}
-	constructor() {
-		super();
-		const template = document.createElement('template');
-		template.innerHTML = `<slot></slot>`;
-
-		this.attachShadow({ mode: 'open' });
-		this.shadowRoot.appendChild(template.content.cloneNode(true));
+customElements.define(componentName$a, Text);
 
-		this.baseSelector = ':host > slot';
-	}
-}
-
-const Text = compose(
-	createStyleMixin({
-		mappings: {
-			fontFamily: {},
-			lineHeight: {},
-			fontStyle: {},
-			fontSize: {},
-			fontWeight: {},
-			width: {},
-			color: {},
-			letterSpacing: {},
-			textShadow: {},
-			borderWidth: {},
-			borderStyle: {},
-			borderColor: {},
-			textTransform: {},
-			textAlign: matchHostStyle(),
-			display: matchHostStyle()
-		}
-	}),
-	draggableMixin,
-	componentNameValidationMixin
-)(RawText);
-
-customElements.define(componentName$9, Text);
-
-customElements.define(componentName$a, Divider);
+customElements.define(componentName$9, Divider);
 
 const componentName$8 = getComponentName('email-field');
 
@@ -1192,7 +1327,7 @@ const Link = compose(
 		},
 		nestedMappings: {
 			color: {
-				selector: ` ${Text.componentName}`,
+				selector: Text.componentName,
 				property: Text.cssVarList.color
 			}
 		}
@@ -1544,21 +1679,21 @@ class PasscodeInternal extends HTMLElement {
 const componentName$3 = getComponentName('passcode');
 
 const customMixin = (superclass) =>
-  class DraggableMixinClass extends superclass {
-    constructor() {
-      super();
-    }
+	class DraggableMixinClass extends superclass {
+		constructor() {
+			super();
+		}
 
-    get digits() {
-      return Number.parseInt(this.getAttribute('digits')) || 6
-    }
+		get digits() {
+			return Number.parseInt(this.getAttribute('digits')) || 6;
+		}
 
-    connectedCallback() {
-      super.connectedCallback?.();
-      const template = document.createElement('template');
+		connectedCallback() {
+			super.connectedCallback?.();
+			const template = document.createElement('template');
 
-      //forward required & pattern TODO use forwardAttrs
-      template.innerHTML = `
+			//forward required & pattern TODO use forwardAttrs
+			template.innerHTML = `
       <${componentName$4} 
         bordered="true" 
         name="code" 
@@ -1569,47 +1704,52 @@ const customMixin = (superclass) =>
       ></${componentName$4}>
       `;
 
-      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
-      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' });
-      this.proxyElement.appendChild(slotEle);
+			// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
+			const slotEle = Object.assign(document.createElement('slot'), {
+				name: 'input',
+				slot: 'input',
+				part: 'input'
+			});
+			this.proxyElement.appendChild(slotEle);
 
-      // we want to control when the element is out of focus 
-      // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
-      this.proxyElement._setFocused = () => { };
+			// we want to control when the element is out of focus
+			// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
+			this.proxyElement._setFocused = () => {};
 
-      this.shadowRoot.host.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.querySelector(componentName$4);
+			this.shadowRoot.host.appendChild(template.content.cloneNode(true));
+			this.inputElement = this.querySelector(componentName$4);
 
-      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
-      this.inputElement.addEventListener('blur', () => {
-        this.proxyElement.validate();
-      });
-    }
-  };
+			// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
+			this.inputElement.addEventListener('blur', () => {
+				this.proxyElement.validate();
+			});
+		}
+	};
 
-const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
+const { borderStyle, borderWidth, ...restTextFieldMappings } =
+	textFieldMappings;
 
 const Passcode = compose(
-  createStyleMixin({
-    mappings: {
-      ...restTextFieldMappings,
-    },
-    nestedMappings: {
-      borderColor: {
-        selector: ` ${TextField.componentName}`,
-        property: TextField.cssVarList.borderColor
-      }
-    }
-  }),
-  draggableMixin,
-  inputMixin,
-  componentNameValidationMixin,
-  customMixin
+	createStyleMixin({
+		mappings: {
+			...restTextFieldMappings
+		},
+		nestedMappings: {
+			borderColor: {
+				selector: TextField.componentName,
+				property: TextField.cssVarList.borderColor
+			}
+		}
+	}),
+	draggableMixin,
+	inputMixin,
+	componentNameValidationMixin,
+	customMixin
 )(
-  createProxy({
-    slots: [],
-    wrappedEleName: 'vaadin-text-field',
-    style: () => `
+	createProxy({
+		slots: [],
+		wrappedEleName: 'vaadin-text-field',
+		style: () => `
     :host {
       --vaadin-field-default-width: auto;
     }
@@ -1629,9 +1769,9 @@ const Passcode = compose(
 
     ${overrides$3}
     `,
-    excludeAttrsSync: ['tabindex'],
-    componentName: componentName$3
-  })
+		excludeAttrsSync: ['tabindex'],
+		componentName: componentName$3
+	})
 );
 
 const overrides$3 = `
@@ -2016,6 +2156,99 @@ const genColors = (colors) => {
 	}, {});
 };
 
+const globalRefs$7 = getThemeRefs(globals);
+const vars$c = Button.cssVarList;
+
+const mode = {
+	primary: globalRefs$7.colors.primary,
+	secondary: globalRefs$7.colors.secondary,
+	success: globalRefs$7.colors.success,
+	error: globalRefs$7.colors.error,
+	surface: globalRefs$7.colors.surface
+};
+
+const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
+
+const button = {
+	...helperTheme$1,
+
+	size: {
+		xs: {
+			[vars$c.height]: '10px',
+			[vars$c.fontSize]: '10px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
+		},
+		sm: {
+			[vars$c.height]: '20px',
+			[vars$c.fontSize]: '10px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
+		},
+		md: {
+			[vars$c.height]: '30px',
+			[vars$c.fontSize]: '14px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
+		},
+		lg: {
+			[vars$c.height]: '40px',
+			[vars$c.fontSize]: '20px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
+		},
+		xl: {
+			[vars$c.height]: '50px',
+			[vars$c.fontSize]: '25px',
+			[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
+		}
+	},
+
+	[vars$c.borderRadius]: globalRefs$7.radius.lg,
+	[vars$c.cursor]: 'pointer',
+	[vars$c.borderWidth]: '2px',
+	[vars$c.borderStyle]: 'solid',
+	[vars$c.borderColor]: 'transparent',
+
+	_fullWidth: {
+		[vars$c.width]: '100%'
+	},
+	_loading: {
+		[vars$c.cursor]: 'wait'
+	},
+
+	variant: {
+		contained: {
+			[vars$c.color]: helperRefs$1.contrast,
+			[vars$c.backgroundColor]: helperRefs$1.main,
+			_hover: {
+				[vars$c.backgroundColor]: helperRefs$1.dark
+			},
+			_loading: {
+				[vars$c.backgroundColor]: helperRefs$1.main
+			}
+		},
+		outline: {
+			[vars$c.color]: helperRefs$1.main,
+			[vars$c.borderColor]: helperRefs$1.main,
+			_hover: {
+				[vars$c.color]: helperRefs$1.dark,
+				[vars$c.borderColor]: helperRefs$1.dark,
+				_error: {
+					[vars$c.color]: helperRefs$1.error
+				}
+			}
+		},
+		link: {
+			[vars$c.color]: helperRefs$1.main,
+			[vars$c.padding]: 0,
+			[vars$c.margin]: 0,
+			[vars$c.lineHeight]: helperRefs$1.height,
+			[vars$c.borderRadius]: 0,
+			_hover: {
+				[vars$c.color]: helperRefs$1.main,
+				[vars$c.textDecoration]: 'underline'
+			}
+		}
+	}
+};
+
 const colors = genColors({
 	surface: {
 		main: 'lightgray',
@@ -2119,150 +2352,53 @@ var globals = {
 	fonts
 };
 
-const globalRefs$5 = getThemeRefs(globals);
-const vars$a = Button.cssVarList;
-
-const mode = {
-	primary: globalRefs$5.colors.primary,
-	secondary: globalRefs$5.colors.secondary,
-	success: globalRefs$5.colors.success,
-	error: globalRefs$5.colors.error,
-	surface: globalRefs$5.colors.surface
-};
-
-const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$g);
-
-const button = {
-	...helperTheme$1,
+const globalRefs$6 = getThemeRefs(globals);
 
-	size: {
-		xs: {
-			[vars$a.height]: '10px',
-			[vars$a.fontSize]: '10px',
-			[vars$a.padding]: `0 ${globalRefs$5.spacing.xs}`
-		},
-		sm: {
-			[vars$a.height]: '20px',
-			[vars$a.fontSize]: '10px',
-			[vars$a.padding]: `0 ${globalRefs$5.spacing.sm}`
-		},
-		md: {
-			[vars$a.height]: '30px',
-			[vars$a.fontSize]: '14px',
-			[vars$a.padding]: `0 ${globalRefs$5.spacing.md}`
-		},
-		lg: {
-			[vars$a.height]: '40px',
-			[vars$a.fontSize]: '20px',
-			[vars$a.padding]: `0 ${globalRefs$5.spacing.lg}`
-		},
-		xl: {
-			[vars$a.height]: '50px',
-			[vars$a.fontSize]: '25px',
-			[vars$a.padding]: `0 ${globalRefs$5.spacing.xl}`
-		}
-	},
-
-	[vars$a.borderRadius]: globalRefs$5.radius.lg,
-	[vars$a.cursor]: 'pointer',
-	[vars$a.borderWidth]: '2px',
-	[vars$a.borderStyle]: 'solid',
-	[vars$a.borderColor]: 'transparent',
-
-	_fullWidth: {
-		[vars$a.width]: '100%'
-	},
-	_loading: {
-		[vars$a.cursor]: 'wait'
-	},
-
-	variant: {
-		contained: {
-			[vars$a.color]: helperRefs$1.contrast,
-			[vars$a.backgroundColor]: helperRefs$1.main,
-			_hover: {
-				[vars$a.backgroundColor]: helperRefs$1.dark
-			},
-			_loading: {
-				[vars$a.backgroundColor]: helperRefs$1.main
-			}
-		},
-		outline: {
-			[vars$a.color]: helperRefs$1.main,
-			[vars$a.borderColor]: helperRefs$1.main,
-			_hover: {
-				[vars$a.color]: helperRefs$1.dark,
-				[vars$a.borderColor]: helperRefs$1.dark,
-				_error: {
-					[vars$a.color]: helperRefs$1.error
-				}
-			}
-		},
-		link: {
-			[vars$a.color]: helperRefs$1.main,
-			[vars$a.padding]: 0,
-			[vars$a.margin]: 0,
-			[vars$a.lineHeight]: helperRefs$1.height,
-			[vars$a.borderRadius]: 0,
-			_hover: {
-				[vars$a.color]: helperRefs$1.main,
-				[vars$a.textDecoration]: 'underline'
-			}
-		}
-	}
-};
-
-const globalRefs$4 = getThemeRefs(globals);
-
-const vars$9 = TextField.cssVarList;
+const vars$b = TextField.cssVarList;
 
 const textField = (vars) => ({
 	size: {
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$4.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$6.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$4.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$6.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$4.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$6.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '16px',
-			[vars.padding]: `0 ${globalRefs$4.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$6.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$4.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$6.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$4.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$4.colors.surface.contrast,
+	[vars.color]: globalRefs$6.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$6.colors.surface.contrast,
 
-	[vars.backgroundColor]: globalRefs$4.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$6.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$4.radius.sm,
-
-	_borderOffset: {
-		[vars.outlineOffset]: '2px'
-	},
+	[vars.borderRadius]: globalRefs$6.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$4.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$4.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$4.colors.surface.main
+		[vars.color]: globalRefs$6.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$6.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$6.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -2270,27 +2406,27 @@ const textField = (vars) => ({
 	},
 
 	_focused: {
-		[vars.outline]: `2px solid ${globalRefs$4.colors.surface.main}`
+		[vars.outline]: `2px solid ${globalRefs$6.colors.surface.main}`
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$4.colors.surface.main
+		[vars.borderColor]: globalRefs$6.colors.surface.main
 	},
 
 	_hasErrorMessage: {
-		[vars.borderColor]: globalRefs$4.colors.error.main,
-		[vars.color]: globalRefs$4.colors.error.main,
-		[vars.placeholderColor]: globalRefs$4.colors.error.light
+		[vars.borderColor]: globalRefs$6.colors.error.main,
+		[vars.color]: globalRefs$6.colors.error.main,
+		[vars.placeholderColor]: globalRefs$6.colors.error.light
 	}
 });
 
-var textField$1 = textField(vars$9);
+var textField$1 = textField(vars$b);
 
-const vars$8 = PasswordField.cssVarList;
+const vars$a = PasswordField.cssVarList;
 
 const passwordField = {
-	...textField(vars$8),
-	[vars$8.revealCursor]: 'pointer'
+	...textField(vars$a),
+	[vars$a.revealCursor]: 'pointer'
 };
 
 const numberField = {
@@ -2301,60 +2437,56 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$3 = getThemeRefs(globals);
-const vars$7 = TextArea.cssVarList;
+const globalRefs$5 = getThemeRefs(globals);
+const vars$9 = TextArea.cssVarList;
 
 const textArea = {
-	[vars$7.color]: globalRefs$3.colors.primary.main,
-	[vars$7.backgroundColor]: globalRefs$3.colors.surface.light,
-	[vars$7.resize]: 'vertical',
+	[vars$9.color]: globalRefs$5.colors.primary.main,
+	[vars$9.backgroundColor]: globalRefs$5.colors.surface.light,
+	[vars$9.resize]: 'vertical',
 
-	[vars$7.borderRadius]: globalRefs$3.radius.sm,
-	[vars$7.borderWidth]: '1px',
-	[vars$7.borderStyle]: 'solid',
-	[vars$7.borderColor]: 'transparent',
-
-	_borderOffset: {
-		[vars$7.outlineOffset]: '2px'
-	},
+	[vars$9.borderRadius]: globalRefs$5.radius.sm,
+	[vars$9.borderWidth]: '1px',
+	[vars$9.borderStyle]: 'solid',
+	[vars$9.borderColor]: 'transparent',
 
 	_bordered: {
-		[vars$7.borderColor]: globalRefs$3.colors.surface.main
+		[vars$9.borderColor]: globalRefs$5.colors.surface.main
 	},
 
 	_focused: {
-		[vars$7.outline]: `2px solid ${globalRefs$3.colors.surface.main}`
+		[vars$9.outline]: `2px solid ${globalRefs$5.colors.surface.main}`
 	},
 
 	_fullWidth: {
-		[vars$7.width]: '100%'
+		[vars$9.width]: '100%'
 	},
 
 	_disabled: {
-		[vars$7.cursor]: 'not-allowed'
+		[vars$9.cursor]: 'not-allowed'
 	},
 
 	_invalid: {
-		[vars$7.outline]: `2px solid ${globalRefs$3.colors.error.main}`
+		[vars$9.outline]: `2px solid ${globalRefs$5.colors.error.main}`
 	}
 };
 
-const vars$6 = Checkbox.cssVarList;
+const vars$8 = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$6.cursor]: 'pointer'
+	[vars$8.cursor]: 'pointer'
 };
 
-const vars$5 = SwitchToggle.cssVarList;
+const vars$7 = SwitchToggle.cssVarList;
 
 const swtichToggle = {
-	[vars$5.width]: '70px',
-	[vars$5.cursor]: [{}, { selector: '> label' }]
+	[vars$7.width]: '70px',
+	[vars$7.cursor]: [{}, { selector: '> label' }]
 };
 
-const globalRefs$2 = getThemeRefs(globals);
+const globalRefs$4 = getThemeRefs(globals);
 
-const vars$4 = Container.cssVarList;
+const vars$6 = Container.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -2377,31 +2509,31 @@ const [helperTheme, helperRefs, helperVars] =
 
 const container = {
 	...helperTheme,
-	[vars$4.display]: 'flex',
+	[vars$6.display]: 'flex',
 	verticalPadding: {
-		sm: { [vars$4.verticalPadding]: '5px' },
-		md: { [vars$4.verticalPadding]: '10px' },
-		lg: { [vars$4.verticalPadding]: '20px' },
+		sm: { [vars$6.verticalPadding]: '5px' },
+		md: { [vars$6.verticalPadding]: '10px' },
+		lg: { [vars$6.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$4.horizontalPadding]: '5px' },
-		md: { [vars$4.horizontalPadding]: '10px' },
-		lg: { [vars$4.horizontalPadding]: '20px' },
+		sm: { [vars$6.horizontalPadding]: '5px' },
+		md: { [vars$6.horizontalPadding]: '10px' },
+		lg: { [vars$6.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$4.flexDirection]: 'row',
-			[vars$4.alignItems]: helperRefs.verticalAlignment,
-			[vars$4.justifyContent]: helperRefs.horizontalAlignment,
+			[vars$6.flexDirection]: 'row',
+			[vars$6.alignItems]: helperRefs.verticalAlignment,
+			[vars$6.justifyContent]: helperRefs.horizontalAlignment,
 			horizontalAlignment: {
 				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$4.flexDirection]: 'column',
-			[vars$4.alignItems]: helperRefs.horizontalAlignment,
-			[vars$4.justifyContent]: helperRefs.verticalAlignment,
+			[vars$6.flexDirection]: 'column',
+			[vars$6.alignItems]: helperRefs.horizontalAlignment,
+			[vars$6.justifyContent]: helperRefs.verticalAlignment,
 			verticalAlignment: {
 				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
 			}
@@ -2410,204 +2542,207 @@ const container = {
 
 	spaceBetween: {
 		sm: {
-			[vars$4.gap]: '10px'
+			[vars$6.gap]: '10px'
 		},
 		md: {
-			[vars$4.gap]: '20px'
+			[vars$6.gap]: '20px'
 		},
 		lg: {
-			[vars$4.gap]: '30px'
+			[vars$6.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.sm} ${helperRefs.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.sm} ${helperRefs.shadowColor}`
 		},
 		md: {
-			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.md} ${helperRefs.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.md} ${helperRefs.shadowColor}`
 		},
 		lg: {
-			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.lg} ${helperRefs.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.lg} ${helperRefs.shadowColor}`
 		},
 		xl: {
-			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$2.shadow.narrow.xl} ${helperRefs.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs$4.shadow.narrow.xl} ${helperRefs.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$4.boxShadow]: `${globalRefs$2.shadow.wide['2xl']} ${helperRefs.shadowColor}`
+			[vars$6.boxShadow]: `${globalRefs$4.shadow.wide['2xl']} ${helperRefs.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$4.borderRadius]: globalRefs$2.radius.sm
+			[vars$6.borderRadius]: globalRefs$4.radius.sm
 		},
 		md: {
-			[vars$4.borderRadius]: globalRefs$2.radius.md
+			[vars$6.borderRadius]: globalRefs$4.radius.md
 		},
 		lg: {
-			[vars$4.borderRadius]: globalRefs$2.radius.lg
+			[vars$6.borderRadius]: globalRefs$4.radius.lg
 		},
 	}
 };
 
-const vars$3 = Logo.cssVarList;
+const vars$5 = Logo.cssVarList;
 
 const logo = {
-	[vars$3.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
+	[vars$5.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$1 = getThemeRefs(globals);
+const globalRefs$3 = getThemeRefs(globals);
 
-const vars$2 = Text.cssVarList;
+const vars$4 = Text.cssVarList;
 
 const text = {
-	[vars$2.lineHeight]: '1em',
-	[vars$2.display]: 'inline-block',
-	[vars$2.textAlign]: 'left',
-	[vars$2.color]: globalRefs$1.colors.surface.dark,
+	[vars$4.lineHeight]: '1em',
+	[vars$4.display]: 'inline-block',
+	[vars$4.textAlign]: 'left',
+	[vars$4.color]: globalRefs$3.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$2.fontSize]: globalRefs$1.typography.h1.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.h1.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.h1.font
+			[vars$4.fontSize]: globalRefs$3.typography.h1.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.h1.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.h1.font
 		},
 		h2: {
-			[vars$2.fontSize]: globalRefs$1.typography.h2.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.h2.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.h2.font
+			[vars$4.fontSize]: globalRefs$3.typography.h2.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.h2.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.h2.font
 		},
 		h3: {
-			[vars$2.fontSize]: globalRefs$1.typography.h3.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.h3.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.h3.font
+			[vars$4.fontSize]: globalRefs$3.typography.h3.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.h3.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.h3.font
 		},
 		subtitle1: {
-			[vars$2.fontSize]: globalRefs$1.typography.subtitle1.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.subtitle1.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.subtitle1.font
+			[vars$4.fontSize]: globalRefs$3.typography.subtitle1.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.subtitle1.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.subtitle1.font
 		},
 		subtitle2: {
-			[vars$2.fontSize]: globalRefs$1.typography.subtitle2.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.subtitle2.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.subtitle2.font
+			[vars$4.fontSize]: globalRefs$3.typography.subtitle2.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.subtitle2.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.subtitle2.font
 		},
 		body1: {
-			[vars$2.fontSize]: globalRefs$1.typography.body1.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.body1.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.body1.font
+			[vars$4.fontSize]: globalRefs$3.typography.body1.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.body1.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.body1.font
 		},
 		body2: {
-			[vars$2.fontSize]: globalRefs$1.typography.body2.size,
-			[vars$2.fontWeight]: globalRefs$1.typography.body2.weight,
-			[vars$2.fontFamily]: globalRefs$1.typography.body2.font
+			[vars$4.fontSize]: globalRefs$3.typography.body2.size,
+			[vars$4.fontWeight]: globalRefs$3.typography.body2.weight,
+			[vars$4.fontFamily]: globalRefs$3.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$2.color]: globalRefs$1.colors.primary.main
+			[vars$4.color]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$2.color]: globalRefs$1.colors.secondary.main
+			[vars$4.color]: globalRefs$3.colors.secondary.main
 		},
 		error: {
-			[vars$2.color]: globalRefs$1.colors.error.main
+			[vars$4.color]: globalRefs$3.colors.error.main
 		},
 		success: {
-			[vars$2.color]: globalRefs$1.colors.success.main
+			[vars$4.color]: globalRefs$3.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$2.textAlign]: 'right' },
-		left: { [vars$2.textAlign]: 'left' },
-		center: { [vars$2.textAlign]: 'center' }
+		right: { [vars$4.textAlign]: 'right' },
+		left: { [vars$4.textAlign]: 'left' },
+		center: { [vars$4.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$2.width]: '100%',
-		[vars$2.display]: 'block'
+		[vars$4.width]: '100%',
+		[vars$4.display]: 'block'
 	},
 	_italic: {
-		[vars$2.fontStyle]: 'italic'
+		[vars$4.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$2.textTransform]: 'uppercase'
+		[vars$4.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$2.textTransform]: 'lowercase'
+		[vars$4.textTransform]: 'lowercase'
 	}
 };
 
-const globalRefs = getThemeRefs(globals);
-const vars$1 = Link.cssVarList;
+const globalRefs$2 = getThemeRefs(globals);
+const vars$3 = Link.cssVarList;
 
 const link = {
-	[vars$1.cursor]: 'pointer',
-	[vars$1.borderBottomWidth]: '2px',
-	[vars$1.borderBottomStyle]: 'solid',
-	[vars$1.borderBottomColor]: 'transparent',
-	[vars$1.color]: globalRefs.colors.primary.main,
+	[vars$3.cursor]: 'pointer',
+	[vars$3.borderBottomWidth]: '2px',
+	[vars$3.borderBottomStyle]: 'solid',
+	[vars$3.borderBottomColor]: 'transparent',
+	[vars$3.color]: globalRefs$2.colors.primary.main,
 
 	_hover: {
-		[vars$1.borderBottomColor]: globalRefs.colors.primary.main
+		[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$1.textAlign]: 'right' },
-		left: { [vars$1.textAlign]: 'left' },
-		center: { [vars$1.textAlign]: 'center' }
+		right: { [vars$3.textAlign]: 'right' },
+		left: { [vars$3.textAlign]: 'left' },
+		center: { [vars$3.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$1.width]: '100%'
+		[vars$3.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$1.color]: globalRefs.colors.primary.main,
+			[vars$3.color]: globalRefs$2.colors.primary.main,
 			_hover: {
-				[vars$1.borderBottomColor]: globalRefs.colors.primary.main
+				[vars$3.borderBottomColor]: globalRefs$2.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$1.color]: globalRefs.colors.secondary.main,
+			[vars$3.color]: globalRefs$2.colors.secondary.main,
 			_hover: {
-				[vars$1.borderBottomColor]: globalRefs.colors.secondary.main
+				[vars$3.borderBottomColor]: globalRefs$2.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$1.color]: globalRefs.colors.error.main,
+			[vars$3.color]: globalRefs$2.colors.error.main,
 			_hover: {
-				[vars$1.borderBottomColor]: globalRefs.colors.error.main
+				[vars$3.borderBottomColor]: globalRefs$2.colors.error.main
 			}
 		},
 		success: {
-			[vars$1.color]: globalRefs.colors.success.main,
+			[vars$3.color]: globalRefs$2.colors.success.main,
 			_hover: {
-				[vars$1.borderBottomColor]: globalRefs.colors.success.main
+				[vars$3.borderBottomColor]: globalRefs$2.colors.success.main
 			}
 		}
 	}
 };
 
-const vars = Divider.cssVarList;
+const vars$2 = 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',
+	[vars$2.alignItems]: 'center',
+	[vars$2.height]: '2px',
+	[vars$2.backgroundColor]: 'currentColor',
+	[vars$2.opacity]: '0.2',
+	[vars$2.padding]: '0 10px',
+	[vars$2.width]: '100%',
+	[vars$2.flexDirection]: 'row',
+	[vars$2.alignSelf]: 'strech',
+	[vars$2.textWidth]: 'fit-content',
 	_vertical: {
-		[vars.width]: '2px',
-		[vars.padding]: '10px 0',
-		[vars.flexDirection]: 'column',
-		[vars.minHeight]: '200px',
-		[vars.textWidth]: 'max-content'
+		[vars$2.width]: '2px',
+		[vars$2.padding]: '10px 0',
+		[vars$2.flexDirection]: 'column',
+		[vars$2.minHeight]: '200px',
+		[vars$2.textWidth]: 'max-content'
+	},
+	_italic: {
+		[vars$2.fontStyle]: 'italic'
 	}
 };
 
@@ -2615,6 +2750,107 @@ const passcode = {
 	...textField(Passcode.cssVarList),
 };
 
+const globalRefs$1 = getThemeRefs(globals);
+
+const vars$1 = LoaderLinear.cssVarList;
+
+const loaderLinear = {
+	[vars$1.display]: 'inline-block',
+	[vars$1.barColor]: globalRefs$1.colors.surface.contrast,
+	[vars$1.barWidth]: '20%',
+	[vars$1.surfaceColor]: globalRefs$1.colors.surface.main,
+	[vars$1.borderRadius]: '4px',
+	[vars$1.animationDuration]: '2s',
+	[vars$1.animationTimingFunction]: 'linear',
+	[vars$1.animationIterationCount]: 'infinite',
+	[vars$1.width]: '100%',
+	size: {
+		xs: {
+			[vars$1.height]: '6px'
+		},
+		sm: {
+			[vars$1.height]: '8px'
+		},
+		md: {
+			[vars$1.height]: '10px'
+		},
+		lg: {
+			[vars$1.height]: '12px'
+		},
+		xl: {
+			[vars$1.height]: '14px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars$1.barColor]: globalRefs$1.colors.primary.main
+		},
+		secondary: {
+			[vars$1.barColor]: globalRefs$1.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars$1.display]: 'none'
+	}
+};
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = LoaderRadial.cssVarList;
+
+const loaderRadial = {
+	[vars.display]: 'inline-block',
+	[vars.color]: globalRefs.colors.surface.contrast,
+	[vars.animationDuration]: '2s',
+	[vars.animationTimingFunction]: 'linear',
+	[vars.animationIterationCount]: 'infinite',
+	[vars.spinnerStyle]: 'solid',
+	[vars.spinnerWidth]: '4px',
+	[vars.spinnerRadius]: '50%',
+	[vars.spinnerTopColor]: 'currentColor',
+	[vars.spinnerBottomColor]: 'transparent',
+	[vars.spinnerRightColor]: 'currentColor',
+	[vars.spinnerLeftColor]: 'transparent',
+	size: {
+		xs: {
+			[vars.width]: '20px',
+			[vars.height]: '20px',
+			[vars.spinnerWidth]: '2px'
+		},
+		sm: {
+			[vars.width]: '30px',
+			[vars.height]: '30px',
+			[vars.spinnerWidth]: '3px'
+		},
+		md: {
+			[vars.width]: '40px',
+			[vars.height]: '40px',
+			[vars.spinnerWidth]: '4px'
+		},
+		lg: {
+			[vars.width]: '60px',
+			[vars.height]: '60px',
+			[vars.spinnerWidth]: '5px'
+		},
+		xl: {
+			[vars.width]: '80px',
+			[vars.height]: '80px',
+			[vars.spinnerWidth]: '6px'
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		}
+	},
+	_hidden: {
+		[vars.display]: 'none'
+	}
+};
+
 var components = {
 	button,
 	textField: textField$1,
@@ -2629,7 +2865,9 @@ var components = {
 	text,
 	link,
 	divider,
-	passcode
+	passcode,
+	loaderRadial,
+	loaderLinear
 };
 
 var index = { globals, components };