@descope/web-components-ui 1.0.113 → 1.0.114

package/dist/index.esm.js

@@ -1816,22 +1816,22 @@ const selectors$2 = {
 	host: { selector: () => ':host' },
 };
 
-const { root, before, after, text: text$2, host: host$6 } = selectors$2;
+const { root, before, after, text: text$3, host: host$6 } = selectors$2;
 
 const DividerClass = compose(
 	createStyleMixin({
 		mappings: {
-			maxTextWidth: { ...text$2, property: 'max-width' },
+			maxTextWidth: { ...text$3, property: 'max-width' },
 			minHeight: root,
 			alignItems: root,
 			alignSelf: root,
 			flexDirection: root,
-			textPadding: { ...text$2, property: 'padding' },
+			textPadding: { ...text$3, property: 'padding' },
 			width: host$6,
 			padding: host$6,
 			backgroundColor: [before, after],
 			opacity: [before, after],
-			textWidth: { ...text$2, property: 'width' },
+			textWidth: { ...text$3, property: 'width' },
 			dividerHeight: [{ ...before, property: 'height' }, { ...after, property: 'height' }],
 			dividerWidth: [{ ...before, property: 'width' }, { ...after, property: 'width' }]
 		},
@@ -2046,14 +2046,14 @@ const selectors = {
 	text: { selector: () => TextClass.componentName }
 };
 
-const { anchor, text: text$1, host: host$5, wrapper } = selectors;
+const { anchor, text: text$2, host: host$5, wrapper } = selectors;
 
 const LinkClass = compose(
 	createStyleMixin({
 		mappings: {
 			width: host$5,
 			textAlign: wrapper,
-			color: [anchor, { ...text$1, property: TextClass.cssVarList.color }],
+			color: [anchor, { ...text$2, property: TextClass.cssVarList.color }],
 			cursor: anchor,
 			borderBottomWidth: anchor,
 			borderBottomStyle: anchor,
@@ -2792,7 +2792,7 @@ const {
 	host: host$3,
 	placeholder: placeholder$1,
 	input: input$1,
-	textArea: textArea$1,
+	textArea: textArea$2,
 	label: label$2,
 	requiredIndicator: requiredIndicator$1
 } = {
@@ -2809,9 +2809,9 @@ let overrides$1 = ``;
 const TextAreaClass = compose(
 	createStyleMixin({
 		mappings: {
-			fontSize: [host$3, textArea$1],
-			resize: textArea$1,
-			color: textArea$1,
+			fontSize: [host$3, textArea$2],
+			resize: textArea$2,
+			color: textArea$2,
 			cursor: {},
 			labelColor: [
 				{ ...label$2, property: 'color' },
@@ -5066,6 +5066,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(
@@ -5081,7 +5086,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`);
 		}
 
@@ -5350,7 +5355,7 @@ const shadow = {
 	}
 };
 
-var globals = {
+const globals = {
 	colors,
 	typography,
 	spacing,
@@ -5359,9 +5364,10 @@ var globals = {
 	shadow,
 	fonts
 };
+const vars$l = getThemeVars(globals);
 
 const globalRefs$e = getThemeRefs(globals);
-const vars$g = ButtonClass.cssVarList;
+const compVars$2 = ButtonClass.cssVarList;
 
 const mode = {
 	primary: globalRefs$e.colors.primary,
@@ -5371,7 +5377,7 @@ const mode = {
 	surface: globalRefs$e.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars({ mode }, componentName$n);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -5379,73 +5385,80 @@ const horizontalPaddingRatio = 2;
 const button = {
 	...helperTheme$2,
 
-	[vars$g.cursor]: 'pointer',
+	[compVars$2.cursor]: 'pointer',
 
-	[vars$g.borderRadius]: globalRefs$e.radius.sm,
-	[vars$g.borderWidth]: '2px',
-	[vars$g.borderStyle]: 'solid',
-	[vars$g.borderColor]: 'transparent',
+	[compVars$2.borderRadius]: globalRefs$e.radius.sm,
+	[compVars$2.borderWidth]: '2px',
+	[compVars$2.borderStyle]: 'solid',
+	[compVars$2.borderColor]: 'transparent',
 
-	[vars$g.gap]: '0.25em',
+	[compVars$2.gap]: '0.25em',
 
-	[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
-	[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
+	[compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
+	[compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
 
 	size: {
-		xs: { [vars$g.fontSize]: '12px' },
-		sm: { [vars$g.fontSize]: '14px' },
-		md: { [vars$g.fontSize]: '18px' },
-		lg: { [vars$g.fontSize]: '22px' },
-		xl: { [vars$g.fontSize]: '26px' }
+		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: {
-		[vars$g.width]: '100%'
+		[compVars$2.width]: '100%'
 	},
 
 	_loading: {
-		[vars$g.cursor]: 'wait'
+		[compVars$2.cursor]: 'wait'
 	},
 
 	variant: {
 		contained: {
-			[vars$g.color]: helperRefs$2.contrast,
-			[vars$g.backgroundColor]: helperRefs$2.main,
+			[compVars$2.color]: helperRefs$2.contrast,
+			[compVars$2.backgroundColor]: helperRefs$2.main,
 			_hover: {
-				[vars$g.backgroundColor]: helperRefs$2.dark
+				[compVars$2.backgroundColor]: helperRefs$2.dark
 			},
 			_active: {
-				[vars$g.backgroundColor]: helperRefs$2.dark
+				[compVars$2.backgroundColor]: helperRefs$2.dark
 			}
 		},
 
 		outline: {
-			[vars$g.color]: helperRefs$2.main,
-			[vars$g.borderColor]: 'currentColor',
+			[compVars$2.color]: helperRefs$2.main,
+			[compVars$2.borderColor]: 'currentColor',
 			_hover: {
-				[vars$g.color]: helperRefs$2.dark,
+				[compVars$2.color]: helperRefs$2.dark,
 			},
 			_active: {
-				[vars$g.color]: helperRefs$2.light,
+				[compVars$2.color]: helperRefs$2.light,
 			}
 		},
 
 		link: {
-			[vars$g.color]: helperRefs$2.main,
+			[compVars$2.color]: helperRefs$2.main,
 			_hover: {
-				[vars$g.color]: helperRefs$2.main,
-				[vars$g.textDecoration]: 'underline'
+				[compVars$2.color]: helperRefs$2.main,
+				[compVars$2.textDecoration]: 'underline'
 			},
 			_active: {
-				[vars$g.color]: helperRefs$2.dark
+				[compVars$2.color]: helperRefs$2.dark
 			}
 		}
 	}
 };
+const vars$k = { ...compVars$2, ...helperVars$2 };
+
+var button$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: button,
+	vars: vars$k
+});
 
 const globalRefs$d = getThemeRefs(globals);
 
-const vars$f = TextFieldClass.cssVarList;
+const vars$j = TextFieldClass.cssVarList;
 
 const textField = (vars) => ({
 	[vars.padding]: '0 1em',
@@ -5511,266 +5524,311 @@ const textField = (vars) => ({
 	}
 });
 
-var textField$1 = textField(vars$f);
+var textField$1 = textField(vars$j);
+
+var textField$2 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: textField$1,
+	textField: textField,
+	vars: vars$j
+});
 
 const globalRefs$c = getThemeRefs(globals);
 
-const vars$e = PasswordFieldClass.cssVarList;
+const vars$i = PasswordFieldClass.cssVarList;
 
 const passwordField = {
-	[vars$e.wrapperBorderStyle]: 'solid',
-	[vars$e.wrapperBorderWidth]: '1px',
-	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$c.radius.xs,
-	[vars$e.backgroundColor]: globalRefs$c.colors.surface.light,
+	[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,
 
-	[vars$e.outlineWidth]: '2px',
-	[vars$e.outlineStyle]: 'solid',
-	[vars$e.outlineColor]: 'transparent',
+	[vars$i.outlineWidth]: '2px',
+	[vars$i.outlineStyle]: 'solid',
+	[vars$i.outlineColor]: 'transparent',
 
-	[vars$e.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
+	[vars$i.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs$c.colors.surface.main}`,
 
 
-	[vars$e.labelTextColor]: globalRefs$c.colors.surface.contrast,
-	[vars$e.inputTextColor]: globalRefs$c.colors.surface.contrast,
-	[vars$e.placeholderTextColor]: 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$e.pointerCursor]: 'pointer',
+	[vars$i.pointerCursor]: 'pointer',
 
-	[vars$e.padding]: '0',
-	[vars$e.height]: '2em',
+	[vars$i.padding]: '0',
+	[vars$i.height]: '2em',
 
 	size: {
 		xs: {
-			[vars$e.fontSize]: '8px',
+			[vars$i.fontSize]: '8px',
 		},
 		sm: {
-			[vars$e.fontSize]: '10px',
+			[vars$i.fontSize]: '10px',
 		},
 		md: {
-			[vars$e.fontSize]: '14px',
+			[vars$i.fontSize]: '14px',
 		},
 		lg: {
-			[vars$e.fontSize]: '20px',
+			[vars$i.fontSize]: '20px',
 		},
 		xl: {
-			[vars$e.fontSize]: '25px',
+			[vars$i.fontSize]: '25px',
 		}
 	},
 
 	_bordered: {
-		[vars$e.padding]: '0 0.5em',
-		[vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
+		[vars$i.padding]: '0 0.5em',
+		[vars$i.wrapperBorderColor]: globalRefs$c.colors.surface.main
 	},
 
 	_fullWidth: {
-		[vars$e.width]: '100%'
+		[vars$i.width]: '100%'
 	},
 
 	_focused: {
-		[vars$e.outlineColor]: globalRefs$c.colors.surface.main
+		[vars$i.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$e.labelTextColor]: globalRefs$c.colors.error.main,
-		[vars$e.inputTextColor]: globalRefs$c.colors.error.main,
-		[vars$e.placeholderTextColor]: globalRefs$c.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$c.colors.error.main,
-		[vars$e.outlineColor]: globalRefs$c.colors.error.light,
+		[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,
 	},
 };
 
+var passwordField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: passwordField,
+	vars: vars$i
+});
+
 const numberField = {
 	...textField(NumberFieldClass.cssVarList)
 };
+const vars$h = NumberFieldClass.cssVarList;
+
+var numberField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: numberField,
+	vars: vars$h
+});
 
 const emailField = {
 	...textField(EmailFieldClass.cssVarList)
 };
+const vars$g = EmailFieldClass.cssVarList;
+
+var emailField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: emailField,
+	vars: vars$g
+});
 
 const globalRefs$b = getThemeRefs(globals);
-const vars$d = TextAreaClass.cssVarList;
+const vars$f = TextAreaClass.cssVarList;
 
 const textArea = {
-	[vars$d.labelColor]: globalRefs$b.colors.surface.contrast,
-	[vars$d.placeholderColor]: globalRefs$b.colors.surface.main,
-	[vars$d.color]: globalRefs$b.colors.surface.contrast,
-	[vars$d.fontSize]: '14px',
-
-	[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
-	[vars$d.resize]: 'vertical',
-
-	[vars$d.borderRadius]: globalRefs$b.radius.sm,
-	[vars$d.borderWidth]: '1px',
-	[vars$d.borderStyle]: 'solid',
-	[vars$d.borderColor]: 'transparent',
-	[vars$d.outlineWidth]: '2px',
-	[vars$d.outlineStyle]: 'solid',
-	[vars$d.outlineColor]: 'transparent',
-	[vars$d.outlineOffset]: '0',
+	[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',
+
+	[vars$f.backgroundColor]: globalRefs$b.colors.surface.light,
+	[vars$f.resize]: 'vertical',
+
+	[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',
 
 	_fullWidth: {
-		[vars$d.width]: '100%'
+		[vars$f.width]: '100%'
 	},
 
 	_focused: {
-		[vars$d.outlineColor]: globalRefs$b.colors.surface.main
+		[vars$f.outlineColor]: globalRefs$b.colors.surface.main
 	},
 
 	_disabled: {
-		[vars$d.cursor]: 'not-allowed'
+		[vars$f.cursor]: 'not-allowed'
 	},
 
 	_bordered: {
-		[vars$d.borderColor]: globalRefs$b.colors.surface.main,
+		[vars$f.borderColor]: globalRefs$b.colors.surface.main,
 	},
 
 	_invalid: {
-		[vars$d.labelColor]: globalRefs$b.colors.error.main,
-		[vars$d.borderColor]: globalRefs$b.colors.error.main,
-		[vars$d.outlineColor]: globalRefs$b.colors.error.light,
-		[vars$d.placeholderColor]: globalRefs$b.colors.error.light,
+		[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$d.resize]: 'none',
+		[vars$f.resize]: 'none',
 	}
 };
 
+var textArea$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: textArea,
+	vars: vars$f
+});
+
 const globalRefs$a = getThemeRefs(globals);
-const vars$c = CheckboxClass.cssVarList;
+const vars$e = CheckboxClass.cssVarList;
 
 const checkbox = {
-	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
-	[vars$c.cursor]: 'pointer',
+	[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+	[vars$e.cursor]: 'pointer',
 
-	[vars$c.checkboxRadius]: globalRefs$a.radius.xs,
-	[vars$c.checkboxSize]: '2em',
+	[vars$e.checkboxRadius]: globalRefs$a.radius.xs,
+	[vars$e.checkboxSize]: '2em',
 
-	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
-	[vars$c.labelMargin]: '0.5em',
-	[vars$c.labelFontWeight]: '400',
+	[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$e.labelMargin]: '0.5em',
+	[vars$e.labelFontWeight]: '400',
 
 	size: {
 		xs: {
-			[vars$c.labelFontSize]: '8px',
+			[vars$e.labelFontSize]: '8px',
 		},
 		sm: {
-			[vars$c.labelFontSize]: '10px',
+			[vars$e.labelFontSize]: '10px',
 		},
 		md: {
-			[vars$c.labelFontSize]: '14px',
+			[vars$e.labelFontSize]: '14px',
 		},
 		lg: {
-			[vars$c.labelFontSize]: '20px',
+			[vars$e.labelFontSize]: '20px',
 		},
 		xl: {
-			[vars$c.labelFontSize]: '25px',
+			[vars$e.labelFontSize]: '25px',
 		}
 	},
 
 	_fullWidth: {
-		[vars$c.width]: '100%',
+		[vars$e.width]: '100%',
 	},
 
 	_checked: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
-		[vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
+		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
+		[vars$e.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+		[vars$e.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
 	},
 
 	_focused: {
-		[vars$c.checkboxOutlineWidth]: '2px',
-		[vars$c.checkboxOutlineOffset]: '1px',
-		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
-		[vars$c.checkboxOutlineStyle]: 'solid'
+		[vars$e.checkboxOutlineWidth]: '2px',
+		[vars$e.checkboxOutlineOffset]: '1px',
+		[vars$e.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
+		[vars$e.checkboxOutlineStyle]: 'solid'
 	},
 
 	_invalid: {
-		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
-		[vars$c.labelTextColor]: globalRefs$a.colors.error.main
+		[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 knobMargin = '2px';
 const checkboxHeight = '1.25em';
 const trackBorderWidth = '2px';
 
 const globalRefs$9 = getThemeRefs(globals);
-const vars$b = SwitchToggleClass.cssVarList;
+const vars$d = SwitchToggleClass.cssVarList;
 
 const switchToggle = {
     size: {
-        xs: { [vars$b.fontSize]: '8px' },
-        sm: { [vars$b.fontSize]: '12px' },
-        md: { [vars$b.fontSize]: '16px' },
-        lg: { [vars$b.fontSize]: '20px' },
-        xl: { [vars$b.fontSize]: '24px' }
+        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$b.cursor]: 'pointer',
+    [vars$d.cursor]: 'pointer',
 
-    [vars$b.trackBorderStyle]: 'solid',
-    [vars$b.trackBorderWidth]: trackBorderWidth,
-    [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
+    [vars$d.trackBorderStyle]: 'solid',
+    [vars$d.trackBorderWidth]: trackBorderWidth,
+    [vars$d.trackBorderColor]: globalRefs$9.colors.surface.contrast,
 
-    [vars$b.trackBackgroundColor]: 'none',
-    [vars$b.trackRadius]: globalRefs$9.radius.md,
-    [vars$b.trackWidth]: '2.5em',
-    [vars$b.trackHeight]: checkboxHeight,
+    [vars$d.trackBackgroundColor]: 'none',
+    [vars$d.trackRadius]: globalRefs$9.radius.md,
+    [vars$d.trackWidth]: '2.5em',
+    [vars$d.trackHeight]: checkboxHeight,
 
-    [vars$b.knobSize]: `calc(1em - ${knobMargin})`,
-    [vars$b.knobRadius]: '50%',
-    [vars$b.knobTopOffset]: '1px',
-    [vars$b.knobColor]: globalRefs$9.colors.surface.contrast,
-    [vars$b.knobPosition]: knobMargin,
-    [vars$b.knobTransition]: '0.3s',
+    [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$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
-    [vars$b.labelFontWeight]: '400',
-    [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
-    [vars$b.labelMargin]: '0.25em',
+    [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$b.width]: '100%',
+        [vars$d.width]: '100%',
     },
 
     _checked: {
-        [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
-        [vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
-        [vars$b.knobColor]: globalRefs$9.colors.primary.main,
-        [vars$b.knobTextColor]: globalRefs$9.colors.primary.contrast,
+        [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$b.cursor]: 'not-allowed', // todo: fix cursor
-        [vars$b.knobColor]: globalRefs$9.colors.surface.main,
-        [vars$b.trackBorderColor]: globalRefs$9.colors.surface.main,
-        [vars$b.trackBackgroundColor]: globalRefs$9.colors.surface.light,
+        [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$b.switchOutlineWidth]: '2px',
-        [vars$b.switchOutlineOffset]: '1px',
-        [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
-        [vars$b.switchOutlineStyle]: 'solid'
+        [vars$d.switchOutlineWidth]: '2px',
+        [vars$d.switchOutlineOffset]: '1px',
+        [vars$d.switchOutlineColor]: globalRefs$9.colors.primary.main,
+        [vars$d.switchOutlineStyle]: 'solid'
     },
 
     _invalid: {
-        [vars$b.switchOutlineColor]: globalRefs$9.colors.error.main,
-        [vars$b.trackBorderColor]: globalRefs$9.colors.error.main,
-        [vars$b.knobColor]: globalRefs$9.colors.error.main,
-        [vars$b.labelTextColor]: globalRefs$9.colors.error.main
+        [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 globalRefs$8 = getThemeRefs(globals);
 
-const vars$a = ContainerClass.cssVarList;
+const compVars$1 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
 	start: { verticalAlignment: 'start' },
@@ -5784,7 +5842,7 @@ const horizontalAlignment = {
 	end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$1, helperRefs$1, helperVars] =
+const [helperTheme$1, helperRefs$1, helperVars$1] =
 	createHelperVars({
 		verticalAlignment,
 		horizontalAlignment,
@@ -5793,511 +5851,574 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 
 const container = {
 	...helperTheme$1,
-	[vars$a.width]: '100%',
-	[vars$a.boxShadow]: 'none',
-	[vars$a.backgroundColor]: globalRefs$8.colors.surface.light,
-	[vars$a.color]: globalRefs$8.colors.surface.contrast,
+	[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: { [vars$a.verticalPadding]: '5px' },
-		md: { [vars$a.verticalPadding]: '10px' },
-		lg: { [vars$a.verticalPadding]: '20px' },
+		sm: { [compVars$1.verticalPadding]: '5px' },
+		md: { [compVars$1.verticalPadding]: '10px' },
+		lg: { [compVars$1.verticalPadding]: '20px' },
 	},
 	horizontalPadding: {
-		sm: { [vars$a.horizontalPadding]: '5px' },
-		md: { [vars$a.horizontalPadding]: '10px' },
-		lg: { [vars$a.horizontalPadding]: '20px' },
+		sm: { [compVars$1.horizontalPadding]: '5px' },
+		md: { [compVars$1.horizontalPadding]: '10px' },
+		lg: { [compVars$1.horizontalPadding]: '20px' },
 	},
 	direction: {
 		row: {
-			[vars$a.flexDirection]: 'row',
-			[vars$a.alignItems]: helperRefs$1.verticalAlignment,
-			[vars$a.justifyContent]: helperRefs$1.horizontalAlignment,
-			[vars$a.flexWrap]: 'wrap',
+			[compVars$1.flexDirection]: 'row',
+			[compVars$1.alignItems]: helperRefs$1.verticalAlignment,
+			[compVars$1.justifyContent]: helperRefs$1.horizontalAlignment,
+			[compVars$1.flexWrap]: 'wrap',
 			horizontalAlignment: {
-				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+				spaceBetween: { [helperVars$1.horizontalAlignment]: 'space-between' },
 			}
 		},
 
 		column: {
-			[vars$a.flexDirection]: 'column',
-			[vars$a.alignItems]: helperRefs$1.horizontalAlignment,
-			[vars$a.justifyContent]: helperRefs$1.verticalAlignment,
+			[compVars$1.flexDirection]: 'column',
+			[compVars$1.alignItems]: helperRefs$1.horizontalAlignment,
+			[compVars$1.justifyContent]: helperRefs$1.verticalAlignment,
 			verticalAlignment: {
-				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+				spaceBetween: { [helperVars$1.verticalAlignment]: 'space-between' }
 			}
 		},
 	},
 
 	spaceBetween: {
 		sm: {
-			[vars$a.gap]: '10px'
+			[compVars$1.gap]: '10px'
 		},
 		md: {
-			[vars$a.gap]: '20px'
+			[compVars$1.gap]: '20px'
 		},
 		lg: {
-			[vars$a.gap]: '30px'
+			[compVars$1.gap]: '30px'
 		}
 	},
 
 	shadow: {
 		sm: {
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
 		},
 		md: {
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.md} ${helperRefs$1.shadowColor}`
 		},
 		lg: {
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
 		},
 		xl: {
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
-			[helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings 
+			[compVars$1.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$a.borderRadius]: globalRefs$8.radius.sm
+			[compVars$1.borderRadius]: globalRefs$8.radius.sm
 		},
 		md: {
-			[vars$a.borderRadius]: globalRefs$8.radius.md
+			[compVars$1.borderRadius]: globalRefs$8.radius.md
 		},
 		lg: {
-			[vars$a.borderRadius]: globalRefs$8.radius.lg
+			[compVars$1.borderRadius]: globalRefs$8.radius.lg
 		},
 		xl: {
-			[vars$a.borderRadius]: globalRefs$8.radius.xl
+			[compVars$1.borderRadius]: globalRefs$8.radius.xl
 		},
 		'2xl': {
-			[vars$a.borderRadius]: globalRefs$8.radius['2xl']
+			[compVars$1.borderRadius]: globalRefs$8.radius['2xl']
 		},
 		'3xl': {
-			[vars$a.borderRadius]: globalRefs$8.radius['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 vars$9 = LogoClass.cssVarList;
+const vars$b = LogoClass.cssVarList;
 
 const logo = {
-	[vars$9.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
+	[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 globalRefs$7 = getThemeRefs(globals);
 
-const vars$8 = TextClass.cssVarList;
+const vars$a = TextClass.cssVarList;
 
 const text = {
-	[vars$8.lineHeight]: '1em',
-	[vars$8.textAlign]: 'left',
-	[vars$8.color]: globalRefs$7.colors.surface.dark,
+	[vars$a.lineHeight]: '1em',
+	[vars$a.textAlign]: 'left',
+	[vars$a.color]: globalRefs$7.colors.surface.dark,
 	variant: {
 		h1: {
-			[vars$8.fontSize]: globalRefs$7.typography.h1.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.h1.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.h1.font
+			[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$8.fontSize]: globalRefs$7.typography.h2.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.h2.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.h2.font
+			[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$8.fontSize]: globalRefs$7.typography.h3.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.h3.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.h3.font
+			[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$8.fontSize]: globalRefs$7.typography.subtitle1.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.subtitle1.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.subtitle1.font
+			[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$8.fontSize]: globalRefs$7.typography.subtitle2.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.subtitle2.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.subtitle2.font
+			[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$8.fontSize]: globalRefs$7.typography.body1.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.body1.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.body1.font
+			[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$8.fontSize]: globalRefs$7.typography.body2.size,
-			[vars$8.fontWeight]: globalRefs$7.typography.body2.weight,
-			[vars$8.fontFamily]: globalRefs$7.typography.body2.font
+			[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$8.color]: globalRefs$7.colors.primary.main
+			[vars$a.color]: globalRefs$7.colors.primary.main
 		},
 		secondary: {
-			[vars$8.color]: globalRefs$7.colors.secondary.main
+			[vars$a.color]: globalRefs$7.colors.secondary.main
 		},
 		error: {
-			[vars$8.color]: globalRefs$7.colors.error.main
+			[vars$a.color]: globalRefs$7.colors.error.main
 		},
 		success: {
-			[vars$8.color]: globalRefs$7.colors.success.main
+			[vars$a.color]: globalRefs$7.colors.success.main
 		}
 	},
 	textAlign: {
-		right: { [vars$8.textAlign]: 'right' },
-		left: { [vars$8.textAlign]: 'left' },
-		center: { [vars$8.textAlign]: 'center' }
+		right: { [vars$a.textAlign]: 'right' },
+		left: { [vars$a.textAlign]: 'left' },
+		center: { [vars$a.textAlign]: 'center' }
 	},
 	_fullWidth: {
-		[vars$8.width]: '100%',
+		[vars$a.width]: '100%',
 	},
 	_italic: {
-		[vars$8.fontStyle]: 'italic'
+		[vars$a.fontStyle]: 'italic'
 	},
 	_uppercase: {
-		[vars$8.textTransform]: 'uppercase'
+		[vars$a.textTransform]: 'uppercase'
 	},
 	_lowercase: {
-		[vars$8.textTransform]: 'lowercase'
+		[vars$a.textTransform]: 'lowercase'
 	}
 };
 
+var text$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: text,
+	vars: vars$a
+});
+
 const globalRefs$6 = getThemeRefs(globals);
-const vars$7 = LinkClass.cssVarList;
+const vars$9 = LinkClass.cssVarList;
 
 const link = {
-	[vars$7.cursor]: 'pointer',
-	[vars$7.borderBottomWidth]: '2px',
-	[vars$7.borderBottomStyle]: 'solid',
-	[vars$7.borderBottomColor]: 'transparent',
-	[vars$7.color]: globalRefs$6.colors.primary.main,
+	[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$7.borderBottomColor]: globalRefs$6.colors.primary.main
+		[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
 	},
 
 	textAlign: {
-		right: { [vars$7.textAlign]: 'right' },
-		left: { [vars$7.textAlign]: 'left' },
-		center: { [vars$7.textAlign]: 'center' }
+		right: { [vars$9.textAlign]: 'right' },
+		left: { [vars$9.textAlign]: 'left' },
+		center: { [vars$9.textAlign]: 'center' }
 	},
 
 	_fullWidth: {
-		[vars$7.width]: '100%'
+		[vars$9.width]: '100%'
 	},
 
 	mode: {
 		primary: {
-			[vars$7.color]: globalRefs$6.colors.primary.main,
+			[vars$9.color]: globalRefs$6.colors.primary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
+				[vars$9.borderBottomColor]: globalRefs$6.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$7.color]: globalRefs$6.colors.secondary.main,
+			[vars$9.color]: globalRefs$6.colors.secondary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
+				[vars$9.borderBottomColor]: globalRefs$6.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$7.color]: globalRefs$6.colors.error.main,
+			[vars$9.color]: globalRefs$6.colors.error.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
+				[vars$9.borderBottomColor]: globalRefs$6.colors.error.main
 			}
 		},
 		success: {
-			[vars$7.color]: globalRefs$6.colors.success.main,
+			[vars$9.color]: globalRefs$6.colors.success.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
+				[vars$9.borderBottomColor]: globalRefs$6.colors.success.main
 			}
 		}
 	}
 };
 
+var link$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: link,
+	vars: vars$9
+});
+
 const globalRefs$5 = getThemeRefs(globals);
 
-const vars$6 = DividerClass.cssVarList;
+const compVars = DividerClass.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
-const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
+const [helperTheme, helperRefs, helperVars] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
 
 const divider = {
 	...helperTheme,
-	[vars$6.alignItems]: 'center',
-	[vars$6.dividerHeight]: helperRefs.thickness,
-	[vars$6.backgroundColor]: globalRefs$5.colors.surface.main,
-	[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
-	[vars$6.width]: '100%',
-	[vars$6.flexDirection]: 'row',
-	[vars$6.alignSelf]: 'strech',
-	[vars$6.textWidth]: 'fit-content',
-	[vars$6.maxTextWidth]: 'calc(100% - 100px)',
+	[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: {
-		[vars$6.padding]: `0 calc(${thickness} * 3)`,
-		[vars$6.width]: 'fit-content',
-		[vars$6.textPadding]: `${helperRefs.textPaddingSize} 0`,
-		[vars$6.flexDirection]: 'column',
-		[vars$6.minHeight]: '200px',
-		[vars$6.textWidth]: 'fit-content',
-		[vars$6.dividerWidth]: helperRefs.thickness,
-		[vars$6.maxTextWidth]: '100%',
+		[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 };
 
-const vars$5 = PasscodeClass.cssVarList;
+var divider$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: divider,
+	vars: vars$8
+});
+
+const vars$7 = PasscodeClass.cssVarList;
 const globalRefs$4 = getThemeRefs(globals);
 
 const passcode = {
-	[vars$5.backgroundColor]: globalRefs$4.colors.surface.light,
-	[vars$5.outlineWidth]: '2px',
-	[vars$5.outlineColor]: 'transparent',
-	[vars$5.padding]: '0',
-	[vars$5.textAlign]: 'center',
-	[vars$5.borderColor]: 'transparent',
-	[vars$5.digitsGap]: '0',
-	[vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.surface.main,
-	[vars$5.color]: globalRefs$4.colors.surface.contrast,
+	[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$5.caretColor]: 'transparent',
+		[vars$7.caretColor]: 'transparent',
 	},
 
 	_disabled: {
-		[vars$5.backgroundColor]: globalRefs$4.colors.surface.main
+		[vars$7.backgroundColor]: globalRefs$4.colors.surface.main
 	},
 
 	_fullWidth: {
-		[vars$5.width]: '100%'
+		[vars$7.width]: '100%'
 	},
 
 	_bordered: {
-		[vars$5.borderColor]: globalRefs$4.colors.surface.main
+		[vars$7.borderColor]: globalRefs$4.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$5.borderColor]: globalRefs$4.colors.error.main,
-		[vars$5.color]: globalRefs$4.colors.error.main,
-		[vars$5.focusedDigitFieldOutlineColor]: globalRefs$4.colors.error.light,
+		[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 globalRefs$3 = getThemeRefs(globals);
 
-const vars$4 = LoaderLinearClass.cssVarList;
+const vars$6 = LoaderLinearClass.cssVarList;
 
 const loaderLinear = {
-	[vars$4.display]: 'inline-block',
-	[vars$4.barColor]: globalRefs$3.colors.surface.contrast,
-	[vars$4.barWidth]: '20%',
-	[vars$4.surfaceColor]: globalRefs$3.colors.surface.main,
-	[vars$4.borderRadius]: '4px',
-	[vars$4.animationDuration]: '2s',
-	[vars$4.animationTimingFunction]: 'linear',
-	[vars$4.animationIterationCount]: 'infinite',
-	[vars$4.width]: '100%',
+	[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$4.height]: '6px'
+			[vars$6.height]: '6px'
 		},
 		sm: {
-			[vars$4.height]: '8px'
+			[vars$6.height]: '8px'
 		},
 		md: {
-			[vars$4.height]: '10px'
+			[vars$6.height]: '10px'
 		},
 		lg: {
-			[vars$4.height]: '12px'
+			[vars$6.height]: '12px'
 		},
 		xl: {
-			[vars$4.height]: '14px'
+			[vars$6.height]: '14px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$4.barColor]: globalRefs$3.colors.primary.main
+			[vars$6.barColor]: globalRefs$3.colors.primary.main
 		},
 		secondary: {
-			[vars$4.barColor]: globalRefs$3.colors.secondary.main
+			[vars$6.barColor]: globalRefs$3.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$4.display]: 'none'
+		[vars$6.display]: 'none'
 	}
 };
 
+var loaderLinear$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: loaderLinear,
+	vars: vars$6
+});
+
 const globalRefs$2 = getThemeRefs(globals);
 
-const vars$3 = LoaderRadialClass.cssVarList;
+const vars$5 = LoaderRadialClass.cssVarList;
 
 const loaderRadial = {
-	[vars$3.display]: 'inline-block',
-	[vars$3.color]: globalRefs$2.colors.surface.contrast,
-	[vars$3.animationDuration]: '2s',
-	[vars$3.animationTimingFunction]: 'linear',
-	[vars$3.animationIterationCount]: 'infinite',
-	[vars$3.spinnerStyle]: 'solid',
-	[vars$3.spinnerWidth]: '4px',
-	[vars$3.spinnerRadius]: '50%',
-	[vars$3.spinnerTopColor]: 'currentColor',
-	[vars$3.spinnerBottomColor]: 'transparent',
-	[vars$3.spinnerRightColor]: 'currentColor',
-	[vars$3.spinnerLeftColor]: 'transparent',
+	[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$3.width]: '20px',
-			[vars$3.height]: '20px',
-			[vars$3.spinnerWidth]: '2px'
+			[vars$5.width]: '20px',
+			[vars$5.height]: '20px',
+			[vars$5.spinnerWidth]: '2px'
 		},
 		sm: {
-			[vars$3.width]: '30px',
-			[vars$3.height]: '30px',
-			[vars$3.spinnerWidth]: '3px'
+			[vars$5.width]: '30px',
+			[vars$5.height]: '30px',
+			[vars$5.spinnerWidth]: '3px'
 		},
 		md: {
-			[vars$3.width]: '40px',
-			[vars$3.height]: '40px',
-			[vars$3.spinnerWidth]: '4px'
+			[vars$5.width]: '40px',
+			[vars$5.height]: '40px',
+			[vars$5.spinnerWidth]: '4px'
 		},
 		lg: {
-			[vars$3.width]: '60px',
-			[vars$3.height]: '60px',
-			[vars$3.spinnerWidth]: '5px'
+			[vars$5.width]: '60px',
+			[vars$5.height]: '60px',
+			[vars$5.spinnerWidth]: '5px'
 		},
 		xl: {
-			[vars$3.width]: '80px',
-			[vars$3.height]: '80px',
-			[vars$3.spinnerWidth]: '6px'
+			[vars$5.width]: '80px',
+			[vars$5.height]: '80px',
+			[vars$5.spinnerWidth]: '6px'
 		}
 	},
 	mode: {
 		primary: {
-			[vars$3.color]: globalRefs$2.colors.primary.main
+			[vars$5.color]: globalRefs$2.colors.primary.main
 		},
 		secondary: {
-			[vars$3.color]: globalRefs$2.colors.secondary.main
+			[vars$5.color]: globalRefs$2.colors.secondary.main
 		}
 	},
 	_hidden: {
-		[vars$3.display]: 'none'
+		[vars$5.display]: 'none'
 	}
 };
 
+var loaderRadial$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: loaderRadial,
+	vars: vars$5
+});
+
 const globalRefs$1 = getThemeRefs(globals);
 
-const vars$2 = ComboBoxClass.cssVarList;
+const vars$4 = ComboBoxClass.cssVarList;
 
 const comboBox = {
-	[vars$2.borderColor]: globalRefs$1.colors.surface.main,
-	[vars$2.borderWidth]: '1px',
-	[vars$2.borderStyle]: 'solid',
-	[vars$2.cursor]: 'pointer',
-	[vars$2.padding]: '0',
-	[vars$2.placeholderColor]: globalRefs$1.colors.surface.main,
-	[vars$2.toggleColor]: globalRefs$1.colors.surface.contrast,
-	[vars$2.toggleCursor]: 'pointer',
-	[vars$2.inputBackgroundColor]: globalRefs$1.colors.surface.light,
-	[vars$2.padding]: `0 ${globalRefs$1.spacing.xs}`,
-
-	[vars$2.height]: '2em',
+	[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$2.fontSize]: '8px',
+			[vars$4.fontSize]: '8px',
 		},
 		sm: {
-			[vars$2.fontSize]: '10px',
+			[vars$4.fontSize]: '10px',
 		},
 		md: {
-			[vars$2.fontSize]: '14px',
+			[vars$4.fontSize]: '14px',
 		},
 		lg: {
-			[vars$2.fontSize]: '20px',
+			[vars$4.fontSize]: '20px',
 		},
 		xl: {
-			[vars$2.fontSize]: '25px',
+			[vars$4.fontSize]: '25px',
 		}
 	},
 
 	_readonly: {
-		[vars$2.toggleCursor]: 'default',
+		[vars$4.toggleCursor]: 'default',
 	},
 
 	_invalid: {
-		[vars$2.borderColor]: globalRefs$1.colors.error.main,
-		[vars$2.placeholderColor]: globalRefs$1.colors.error.light,
-		[vars$2.toggleColor]: globalRefs$1.colors.error.main,
+		[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`,
 };
 
-ImageClass.cssVarList;
+var comboBox$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	comboBox: comboBox,
+	default: comboBox,
+	vars: vars$4
+});
+
+const vars$3 = ImageClass.cssVarList;
 
 const image = {};
 
+var image$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: image,
+	vars: vars$3
+});
+
 const globalRefs = getThemeRefs(globals);
-const vars$1 = PhoneFieldClass.cssVarList;
+const vars$2 = PhoneFieldClass.cssVarList;
 
 const phoneField = {
-	[vars$1.wrapperBorderStyle]: 'solid',
-	[vars$1.wrapperBorderWidth]: '1px',
-	[vars$1.wrapperBorderColor]: 'transparent',
-	[vars$1.wrapperBorderRadius]: globalRefs.radius.xs,
-	[vars$1.placeholderColor]: globalRefs.colors.surface.main,
-	[vars$1.color]: globalRefs.colors.surface.contrast,
+	[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$1.phoneInputWidth]: '10em',
-	[vars$1.countryCodeInputWidth]: '5em',
+	[vars$2.phoneInputWidth]: '10em',
+	[vars$2.countryCodeInputWidth]: '5em',
 
-	[vars$1.inputHeight]: '2em',
-	[vars$1.countryCodeDropdownWidth]: '12em',
+	[vars$2.inputHeight]: '2em',
+	[vars$2.countryCodeDropdownWidth]: '12em',
 
 	size: {
 		xs: {
-			[vars$1.fontSize]: '8px',
+			[vars$2.fontSize]: '8px',
 		},
 		sm: {
-			[vars$1.fontSize]: '20px',
+			[vars$2.fontSize]: '20px',
 		},
 		md: {
-			[vars$1.fontSize]: '14px',
+			[vars$2.fontSize]: '14px',
 		},
 		lg: {
-			[vars$1.fontSize]: '20px',
+			[vars$2.fontSize]: '20px',
 		},
 		xl: {
-			[vars$1.fontSize]: '25px',
+			[vars$2.fontSize]: '25px',
 		}
 	},
 
 	_fullWidth: {
-		[vars$1.componentWidth]: '100%',
-		[vars$1.phoneInputWidth]: '100%',
-		[vars$1.countryCodeDropdownWidth]: '100%',
+		[vars$2.componentWidth]: '100%',
+		[vars$2.phoneInputWidth]: '100%',
+		[vars$2.countryCodeDropdownWidth]: '100%',
 	},
 
 	_bordered: {
-		[vars$1.wrapperBorderColor]: globalRefs.colors.surface.main
+		[vars$2.wrapperBorderColor]: globalRefs.colors.surface.main
 	},
 
-	[vars$1.outlineStyle]: 'solid',
-	[vars$1.outlineWidth]: '0.1em',
-	[vars$1.outlineColor]: 'transparent',
+	[vars$2.outlineStyle]: 'solid',
+	[vars$2.outlineWidth]: '0.1em',
+	[vars$2.outlineColor]: 'transparent',
 
 	_focused: {
-		[vars$1.outlineColor]: globalRefs.colors.surface.main
+		[vars$2.outlineColor]: globalRefs.colors.surface.main
 	},
 
 	_invalid: {
-		[vars$1.outlineColor]: globalRefs.colors.error.light,
-		[vars$1.color]: globalRefs.colors.error.main,
-		[vars$1.placeholderColor]: globalRefs.colors.error.light,
-		[vars$1.wrapperBorderColor]: globalRefs.colors.error.main
+		[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': {
@@ -6305,62 +6426,79 @@ const phoneField = {
 	// }
 };
 
-const vars = NewPasswordClass.cssVarList;
+var phoneField$1 = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	default: phoneField,
+	vars: vars$2
+});
+
+const vars$1 = NewPasswordClass.cssVarList;
 
 const newPassword = {
-	[vars.inputsGap]: '1em',
+	[vars$1.inputsGap]: '1em',
 
 	_required: {
-		[vars.requiredContent]: "'*'",
+		[vars$1.requiredContent]: "'*'",
 	},
 
 	_fullWidth: {
-		[vars.componentWidth]: '100%'
+		[vars$1.componentWidth]: '100%'
 	},
 
 	size: {
 		xs: {
-			[vars.fontSize]: '8px',
+			[vars$1.fontSize]: '8px',
 		},
 		sm: {
-			[vars.fontSize]: '10px',
+			[vars$1.fontSize]: '10px',
 		},
 		md: {
-			[vars.fontSize]: '14px',
+			[vars$1.fontSize]: '14px',
 		},
 		lg: {
-			[vars.fontSize]: '20px',
+			[vars$1.fontSize]: '20px',
 		},
 		xl: {
-			[vars.fontSize]: '25px',
+			[vars$1.fontSize]: '25px',
 		}
 	},
 };
 
-var components = {
-	button,
-	textField: textField$1,
-	passwordField,
-	numberField,
-	emailField,
-	textArea,
-	checkbox,
-	switchToggle,
-	container,
-	logo,
-	text,
-	link,
-	divider,
-	passcode,
-	loaderRadial,
-	loaderLinear,
-	comboBox,
-	image,
-	phoneField,
-	newPassword,
+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$1,
+	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,
 };
 
-var index = { globals, components };
 
-export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, index as defaultTheme, genColor, globalsThemeToStyle, themeToStyle };
+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 };
+
+export { ButtonClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordFieldClass, PhoneFieldClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map