@descope/web-components-ui 1.0.92 → 1.0.94

package/dist/index.esm.js

@@ -1679,6 +1679,7 @@ const Container = compose(
 			flexWrap: {},
 
 			backgroundColor: {},
+			color: {},
 			borderRadius: {},
 
 			borderColor: {},
@@ -1913,6 +1914,7 @@ overrides$4 = `
 	vaadin-email-field {
 		margin: 0;
 		padding: 0;
+		width: 100%;
 	}
 	vaadin-email-field::part(input-field) {
 		overflow: hidden;
@@ -2536,7 +2538,7 @@ const Passcode = compose(
 	}
 
 	vaadin-text-field::before {
-		height: initial;
+		height: 0;
 	}
 
 	vaadin-text-field[readonly] > input:placeholder-shown {
@@ -4998,44 +5000,82 @@ const colors = genColors({
 });
 
 const fonts = {
-	font1: ['Roboto', 'sans-serif'],
-	font2: ['Oswald', 'serif']
+	font1: {
+		family: [
+			"Roboto",
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Roboto",
+		url: "https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900"
+	},
+	font2: {
+		family: [
+			"ui-sans-serif",
+			"system-ui",
+			"-apple-system",
+			"BlinkMacSystemFont",
+			"Segoe UI",
+			"Roboto",
+			"Helvetica Neue",
+			"Arial",
+			"Noto Sans",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		label: "Sans Serif"
+	}
 };
+
 const fontsRef = getThemeRefs({ fonts }).fonts;
 
 const typography = {
 	h1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '600',
 		size: '28px'
 	},
 	subtitle1: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '500',
 		size: '22px'
 	},
 	subtitle2: {
-		font: fontsRef.font2,
+		font: fontsRef.font2.family,
 		weight: '400',
 		size: '20px'
 	},
 	body1: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '300',
 		size: '16px'
 	},
 	body2: {
-		font: fontsRef.font1,
+		font: fontsRef.font1.family,
 		weight: '200',
 		size: '14px'
 	}
@@ -5050,15 +5090,19 @@ const spacing = {
 };
 
 const border = {
-	sm: '1px',
-	md: '2px',
-	lg: '3px'
+	xs: '1px',
+	sm: '2px',
+	md: '3px',
+	lg: '4px',
+	xl: '5px'
 };
 
 const radius = {
-	sm: '5px',
-	md: '25px',
-	lg: '50px'
+	xs: '5px',
+	sm: '10px',
+	md: '15px',
+	lg: '20px',
+	xl: '25px'
 };
 
 const shadow = {
@@ -5088,15 +5132,15 @@ var globals = {
 	fonts
 };
 
-const globalRefs$e = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const vars$g = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$e.colors.primary,
-	secondary: globalRefs$e.colors.secondary,
-	success: globalRefs$e.colors.success,
-	error: globalRefs$e.colors.error,
-	surface: globalRefs$e.colors.surface
+	primary: globalRefs$f.colors.primary,
+	secondary: globalRefs$f.colors.secondary,
+	success: globalRefs$f.colors.success,
+	error: globalRefs$f.colors.error,
+	surface: globalRefs$f.colors.surface
 };
 
 const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
@@ -5109,7 +5153,7 @@ const button = {
 
 	[vars$g.cursor]: 'pointer',
 
-	[vars$g.borderRadius]: globalRefs$e.radius.sm,
+	[vars$g.borderRadius]: globalRefs$f.radius.sm,
 	[vars$g.borderWidth]: '2px',
 	[vars$g.borderStyle]: 'solid',
 	[vars$g.borderColor]: 'transparent',
@@ -5172,7 +5216,7 @@ const button = {
 	}
 };
 
-const globalRefs$d = getThemeRefs(globals);
+const globalRefs$e = getThemeRefs(globals);
 
 const vars$f = TextField.cssVarList;
 
@@ -5181,44 +5225,44 @@ const textField = (vars) => ({
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$d.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$d.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$d.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$e.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$d.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$d.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$d.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$d.colors.surface.main,
+	[vars.color]: globalRefs$e.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$e.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$d.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$e.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$d.radius.sm,
+	[vars.borderRadius]: globalRefs$e.radius.xs,
 
 	_disabled: {
-		[vars.color]: globalRefs$d.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$d.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$d.colors.surface.main
+		[vars.color]: globalRefs$e.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$e.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$e.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5228,24 +5272,24 @@ const textField = (vars) => ({
 	_focused: {
 		[vars.outlineWidth]: '2px',
 		[vars.outlineStyle]: 'solid',
-		[vars.outlineColor]: globalRefs$d.colors.surface.main
+		[vars.outlineColor]: globalRefs$e.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$d.colors.surface.main
+		[vars.borderColor]: globalRefs$e.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$d.colors.error.main,
-		[vars.color]: globalRefs$d.colors.error.main,
-		[vars.outlineColor]: globalRefs$d.colors.error.light,
-		[vars.placeholderColor]: globalRefs$d.colors.error.light
+		[vars.borderColor]: globalRefs$e.colors.error.main,
+		[vars.color]: globalRefs$e.colors.error.main,
+		[vars.outlineColor]: globalRefs$e.colors.error.light,
+		[vars.placeholderColor]: globalRefs$e.colors.error.light
 	}
 });
 
 var textField$1 = textField(vars$f);
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 
 const vars$e = PasswordField.cssVarList;
 
@@ -5253,11 +5297,11 @@ const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$c.radius.sm,
+	[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
 
-	[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$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
+	[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
+	[vars$e.placeholderTextColor]: globalRefs$d.colors.surface.main,
 
 	[vars$e.pointerCursor]: 'pointer',
 
@@ -5288,7 +5332,7 @@ const passwordField = {
 
 	_bordered: {
 		[vars$e.padding]: `0 0.5em`,
-		[vars$e.wrapperBorderColor]: globalRefs$c.colors.surface.main
+		[vars$e.wrapperBorderColor]: globalRefs$d.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5296,10 +5340,10 @@ const passwordField = {
 	},
 
 	_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.labelTextColor]: globalRefs$d.colors.error.main,
+		[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
+		[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
+		[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
 	},
 };
 
@@ -5311,15 +5355,15 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
-	[vars$d.color]: globalRefs$b.colors.primary.main,
-	[vars$d.backgroundColor]: globalRefs$b.colors.surface.light,
+	[vars$d.color]: globalRefs$c.colors.primary.main,
+	[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
-	[vars$d.borderRadius]: globalRefs$b.radius.sm,
+	[vars$d.borderRadius]: globalRefs$c.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
 	[vars$d.borderColor]: 'transparent',
@@ -5329,11 +5373,11 @@ const textArea = {
 
 
 	_bordered: {
-		[vars$d.borderColor]: globalRefs$b.colors.surface.main
+		[vars$d.borderColor]: globalRefs$c.colors.surface.main
 	},
 
 	_focused: {
-		[vars$d.outlineColor]: globalRefs$b.colors.surface.main
+		[vars$d.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5345,26 +5389,26 @@ const textArea = {
 	},
 
 	_invalid: {
-		[vars$d.outlineColor]: globalRefs$b.colors.error.main
+		[vars$d.outlineColor]: globalRefs$c.colors.error.main
 	}
 };
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
-	[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+	[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
 
 	[vars$c.labelFontSize]: '12px',
 	[vars$c.labelFontWeight]: '400',
-	[vars$c.labelTextColor]: globalRefs$a.colors.surface.contrast,
+	[vars$c.labelTextColor]: globalRefs$b.colors.surface.contrast,
 	[vars$c.cursor]: 'pointer',
 
 	[vars$c.checkboxWidth]: 'calc(1em - 2px)',
 	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
 	[vars$c.labelMargin]: 'calc(1em + 5px)',
 
-	[vars$c.checkboxRadius]: globalRefs$a.radius.sm,
+	[vars$c.checkboxRadius]: globalRefs$b.radius.sm,
 
 	size: {
 		xs: {
@@ -5399,24 +5443,24 @@ const checkbox = {
 	},
 
 	_checked: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.primary.main,
-		[vars$c.checkmarkTextColor]: globalRefs$a.colors.primary.contrast,
+		[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.primary.main,
+		[vars$c.checkmarkTextColor]: globalRefs$b.colors.primary.contrast,
 	},
 
 	_disabled: {
-		[vars$c.checkboxBackgroundColor]: globalRefs$a.colors.surface.main,
+		[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
 	},
 
 	_focused: {
 		[vars$c.checkboxOutlineWidth]: '2px',
 		[vars$c.checkboxOutlineOffset]: '1px',
-		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.primary.main,
+		[vars$c.checkboxOutlineColor]: globalRefs$b.colors.primary.main,
 		[vars$c.checkboxOutlineStyle]: 'solid'
 	},
 
 	_invalid: {
-		[vars$c.checkboxOutlineColor]: globalRefs$a.colors.error.main,
-		[vars$c.labelTextColor]: globalRefs$a.colors.error.main
+		[vars$c.checkboxOutlineColor]: globalRefs$b.colors.error.main,
+		[vars$c.labelTextColor]: globalRefs$b.colors.error.main
 	},
 
 };
@@ -5425,7 +5469,7 @@ const knobMargin = '2px';
 const checkboxHeight = '1.25em';
 const trackBorderWidth = '2px';
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$b = SwitchToggle.cssVarList;
 
 const switchToggle = {
@@ -5441,21 +5485,21 @@ const switchToggle = {
 
     [vars$b.trackBorderStyle]: 'solid',
     [vars$b.trackBorderWidth]: trackBorderWidth,
-    [vars$b.trackBorderColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.trackBorderColor]: globalRefs$a.colors.surface.contrast,
 
     [vars$b.trackBackgroundColor]: 'none',
-    [vars$b.trackRadius]: globalRefs$9.radius.md,
+    [vars$b.trackRadius]: globalRefs$a.radius.md,
     [vars$b.trackWidth]: '2.5em',
     [vars$b.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.knobColor]: globalRefs$a.colors.surface.contrast,
     [vars$b.knobPosition]: knobMargin,
     [vars$b.knobTransition]: '0.3s',
 
-    [vars$b.labelTextColor]: globalRefs$9.colors.surface.contrast,
+    [vars$b.labelTextColor]: globalRefs$a.colors.surface.contrast,
     [vars$b.labelFontWeight]: '400',
     [vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
     [vars$b.labelMargin]: '0.25em',
@@ -5465,35 +5509,35 @@ const switchToggle = {
     },
 
     _checked: {
-        [vars$b.trackBorderColor]: globalRefs$9.colors.primary.main,
+        [vars$b.trackBorderColor]: globalRefs$a.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$b.knobColor]: globalRefs$a.colors.primary.main,
+        [vars$b.knobTextColor]: globalRefs$a.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$b.knobColor]: globalRefs$a.colors.surface.main,
+        [vars$b.trackBorderColor]: globalRefs$a.colors.surface.main,
+        [vars$b.trackBackgroundColor]: globalRefs$a.colors.surface.light,
     },
 
     _focused: {
         [vars$b.switchOutlineWidth]: '2px',
         [vars$b.switchOutlineOffset]: '1px',
-        [vars$b.switchOutlineColor]: globalRefs$9.colors.primary.main,
+        [vars$b.switchOutlineColor]: globalRefs$a.colors.primary.main,
         [vars$b.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$b.switchOutlineColor]: globalRefs$a.colors.error.main,
+        [vars$b.trackBorderColor]: globalRefs$a.colors.error.main,
+        [vars$b.knobColor]: globalRefs$a.colors.error.main,
+        [vars$b.labelTextColor]: globalRefs$a.colors.error.main
     },
 };
 
-const globalRefs$8 = getThemeRefs(globals);
+const globalRefs$9 = getThemeRefs(globals);
 
 const vars$a = Container.cssVarList;
 
@@ -5519,6 +5563,9 @@ const [helperTheme$1, helperRefs$1, helperVars] =
 const container = {
 	...helperTheme$1,
 	[vars$a.width]: '100%',
+	[vars$a.boxShadow]: 'none',
+	[vars$a.backgroundColor]: globalRefs$9.colors.surface.light,
+	[vars$a.color]: globalRefs$9.colors.surface.contrast,
 	verticalPadding: {
 		sm: { [vars$a.verticalPadding]: '5px' },
 		md: { [vars$a.verticalPadding]: '10px' },
@@ -5564,32 +5611,32 @@ const container = {
 
 	shadow: {
 		sm: {
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$8.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$9.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}`
+			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$9.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}`
+			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$9.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}`
+			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
 		},
 		'2xl': {
 			[helperVars.shadowColor]: '#00000050',
-			[vars$a.boxShadow]: `${globalRefs$8.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
+			[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
 		},
 	},
 
 	borderRadius: {
 		sm: {
-			[vars$a.borderRadius]: globalRefs$8.radius.sm
+			[vars$a.borderRadius]: globalRefs$9.radius.sm
 		},
 		md: {
-			[vars$a.borderRadius]: globalRefs$8.radius.md
+			[vars$a.borderRadius]: globalRefs$9.radius.md
 		},
 		lg: {
-			[vars$a.borderRadius]: globalRefs$8.radius.lg
+			[vars$a.borderRadius]: globalRefs$9.radius.lg
 		},
 	}
 };
@@ -5600,7 +5647,7 @@ const logo = {
 	[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
 };
 
-const globalRefs$7 = getThemeRefs(globals);
+const globalRefs$8 = getThemeRefs(globals);
 
 const vars$8 = Text.cssVarList;
 
@@ -5608,56 +5655,56 @@ const text = {
 	[vars$8.lineHeight]: '1em',
 	[vars$8.display]: 'inline-block',
 	[vars$8.textAlign]: 'left',
-	[vars$8.color]: globalRefs$7.colors.surface.dark,
+	[vars$8.color]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.h1.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.h1.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.h2.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.h2.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.h3.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.h3.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.subtitle1.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.subtitle1.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.subtitle2.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.subtitle2.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.body1.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.body1.weight,
+			[vars$8.fontFamily]: globalRefs$8.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$8.fontSize]: globalRefs$8.typography.body2.size,
+			[vars$8.fontWeight]: globalRefs$8.typography.body2.weight,
+			[vars$8.fontFamily]: globalRefs$8.typography.body2.font
 		}
 	},
 	mode: {
 		primary: {
-			[vars$8.color]: globalRefs$7.colors.primary.main
+			[vars$8.color]: globalRefs$8.colors.primary.main
 		},
 		secondary: {
-			[vars$8.color]: globalRefs$7.colors.secondary.main
+			[vars$8.color]: globalRefs$8.colors.secondary.main
 		},
 		error: {
-			[vars$8.color]: globalRefs$7.colors.error.main
+			[vars$8.color]: globalRefs$8.colors.error.main
 		},
 		success: {
-			[vars$8.color]: globalRefs$7.colors.success.main
+			[vars$8.color]: globalRefs$8.colors.success.main
 		}
 	},
 	textAlign: {
@@ -5680,7 +5727,7 @@ const text = {
 	}
 };
 
-const globalRefs$6 = getThemeRefs(globals);
+const globalRefs$7 = getThemeRefs(globals);
 const vars$7 = Link.cssVarList;
 
 const link = {
@@ -5688,10 +5735,10 @@ const link = {
 	[vars$7.borderBottomWidth]: '2px',
 	[vars$7.borderBottomStyle]: 'solid',
 	[vars$7.borderBottomColor]: 'transparent',
-	[vars$7.color]: globalRefs$6.colors.primary.main,
+	[vars$7.color]: globalRefs$7.colors.primary.main,
 
 	_hover: {
-		[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
+		[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
 	},
 
 	textAlign: {
@@ -5706,45 +5753,45 @@ const link = {
 
 	mode: {
 		primary: {
-			[vars$7.color]: globalRefs$6.colors.primary.main,
+			[vars$7.color]: globalRefs$7.colors.primary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.primary.main
+				[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
 			}
 		},
 		secondary: {
-			[vars$7.color]: globalRefs$6.colors.secondary.main,
+			[vars$7.color]: globalRefs$7.colors.secondary.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.secondary.main
+				[vars$7.borderBottomColor]: globalRefs$7.colors.secondary.main
 			}
 		},
 		error: {
-			[vars$7.color]: globalRefs$6.colors.error.main,
+			[vars$7.color]: globalRefs$7.colors.error.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.error.main
+				[vars$7.borderBottomColor]: globalRefs$7.colors.error.main
 			}
 		},
 		success: {
-			[vars$7.color]: globalRefs$6.colors.success.main,
+			[vars$7.color]: globalRefs$7.colors.success.main,
 			_hover: {
-				[vars$7.borderBottomColor]: globalRefs$6.colors.success.main
+				[vars$7.borderBottomColor]: globalRefs$7.colors.success.main
 			}
 		}
 	}
 };
 
+const globalRefs$6 = getThemeRefs(globals);
+
 const vars$6 = Divider.cssVarList;
 
 const thickness = '2px';
 const textPaddingSize = '10px';
 const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
 
-
 const divider = {
 	...helperTheme,
 	[vars$6.alignItems]: 'center',
 	[vars$6.dividerHeight]: helperRefs.thickness,
-	[vars$6.backgroundColor]: 'currentColor',
-	[vars$6.opacity]: '0.2',
+	[vars$6.backgroundColor]: globalRefs$6.colors.surface.main,
 	[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
 	[vars$6.width]: '100%',
 	[vars$6.flexDirection]: 'row',