@descope/web-components-ui 1.0.80 → 1.0.81

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import '@vaadin/button';
 import '@vaadin/checkbox';
+import '@vaadin/text-field';
 import '@vaadin/date-picker';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
-import '@vaadin/text-field';
 import '@vaadin/password-field';
 import '@vaadin/text-area';
 import '@vaadin/combo-box';
@@ -118,15 +118,15 @@ const forwardProps = (src, target, props = []) => {
 	const config = props.reduce((acc, prop) => Object.assign(acc, {
 		[prop]: {
 			get() {
-				return target[prop]
+				return src[prop]
 			},
 			set(v) {
-				target[prop] = v;
+				src[prop] = v;
 			}
 		}
 	}), {});
 
-	Object.defineProperties(src, config);
+	Object.defineProperties(target, config);
 };
 
 class ComponentsThemeManager {
@@ -580,9 +580,8 @@ const createProxy = ({
 				this.#dispatchFocus();
 			});
 
-
 			// this is needed for components that uses props, such as combo box
-			forwardProps(this, this.baseElement, includeForwardProps);
+			forwardProps(this.baseElement, this, includeForwardProps);
 
 			syncAttrs(this.baseElement, this, {
 				excludeAttrs: excludeAttrsSync,
@@ -1029,7 +1028,7 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
   }
 };
 
-const componentName$n = getComponentName('button');
+const componentName$o = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
 const resetStyles = `
@@ -1052,7 +1051,7 @@ const iconStyles = `
 	}
 `;
 
-const { label: label$3, host: host$7 } = {
+const { label: label$4, host: host$8 } = {
 	label: { selector: '::part(label)' },
 	host: { selector: () => ':host' }
 };
@@ -1062,16 +1061,16 @@ const Button = compose(
 		mappings: {
 			backgroundColor: {},
 			borderRadius: {},
-			color: label$3,
+			color: label$4,
 			borderColor: {},
 			borderStyle: {},
 			borderWidth: {},
 			fontSize: {},
 			height: {},
-			width: host$7,
+			width: host$8,
 			cursor: {},
-			padding: label$3,
-			textDecoration: label$3
+			padding: label$4,
+			textDecoration: label$4
 		}
 	}),
 	draggableMixin,
@@ -1083,7 +1082,7 @@ const Button = compose(
 		style: () =>
 			`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
 		excludeAttrsSync: ['tabindex'],
-		componentName: componentName$n
+		componentName: componentName$o
 	})
 );
 
@@ -1120,31 +1119,245 @@ const loadingIndicatorStyles = `
 	}
 `;
 
-customElements.define(componentName$n, Button);
+customElements.define(componentName$o, Button);
+
+const createBaseInputClass = (...args) => compose(
+  inputValidationMixin,
+  changeMixin,
+  readOnlyMixin,
+  normalizeBooleanAttributesMixin,
+  inputEventsDispatchingMixin
+)(createBaseClass(...args));
+
+const componentName$n = getComponentName('checkbox-internal');
+
+const forwardAttributes$1 = [
+	'disabled',
+	'label',
+	'invalid',
+	'readonly'
+];
+
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$n, baseSelector: 'div' });
+
+class CheckboxInternal extends BaseInputClass$3 {
+	constructor() {
+		super();
+		this.innerHTML = `
+			<div class="wrapper">
+				<vaadin-checkbox></vaadin-checkbox>
+			</div>
+		`;
+		this.wrapperEle = this.querySelector('div');
+		this.checkbox = this.querySelector('vaadin-checkbox');
+	}
+
+	get value() {
+		return this.checkbox?.checked;
+	}
+
+	set value(val) {
+		this.checkbox.checked = val;
+	}
+
+	get checked() {
+		return this.value;
+	}
+
+	set checked(val) {
+		this.value = val;
+	}
+
+	init() {
+		this.addEventListener('focus', (e) => {
+			if (e.isTrusted) {
+				this.checkbox.focus();
+			}
+		});
+		super.init?.();
+
+		forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes$1 });
+		syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
+	}
+
+	getValidity() {
+		if (this.isRequired && !this.value) {
+			return { valueMissing: true };
+		}
+		return {}
+	};
+}
 
 const componentName$m = getComponentName('checkbox');
 
+const customMixin$4 = (superclass) =>
+	class CheckboxMixinClass extends superclass {
+		constructor() {
+			super();
+		}
+
+		init() {
+			super.init?.();
+
+			const template = document.createElement('template');
+			template.innerHTML = `
+				<${componentName$n} 
+					tabindex="-1"
+					slot="input"
+				></${componentName$n}>
+			`;
+
+			this.baseElement.appendChild(template.content.cloneNode(true));
+			this.inputElement = this.shadowRoot.querySelector(componentName$n);
+			this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+			forwardAttrs(this, this.inputElement, {
+				includeAttrs: [
+					'required',
+					'full-width',
+					'size',
+					'label',
+					'invalid',
+				]
+			});
+
+			forwardProps(this.inputElement, this, ['checked']);
+			syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+		}
+	};
+
+const {
+	host: host$7,
+	component,
+	checkboxElement,
+	checkboxSurface,
+	checkboxHiddenLabel,
+	label: label$3,
+	requiredIndicator: requiredIndicator$3
+} = {
+	host: { selector: () => ':host' },
+	label: { selector: '::part(label)' },
+	requiredIndicator: { selector: '::part(required-indicator)::after' },
+	component: { selector: 'vaadin-checkbox' },
+	checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+	checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+	checkboxHiddenLabel: { selector: 'vaadin-checkbox [slot="label"]' },
+};
+
 const Checkbox = compose(
 	createStyleMixin({
 		mappings: {
-			width: { selector: () => ':host' },
-			cursor: [{}, { selector: '> label' }]
-		}
+			width: host$7,
+			cursor: component,
+
+			// Checkbox
+			checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
+			checkboxRadius: { ...checkboxElement, property: 'border-radius' },
+			checkboxWidth: [
+				{ ...checkboxElement, property: 'width' },
+				{ ...label$3, property: 'margin-left' }
+			],
+			checkboxHeight: { ...checkboxElement, property: 'height' },
+
+			checkboxOutlineWidth: { ...checkboxElement },
+			checkboxOutlineOffset: { ...checkboxElement },
+			checkboxOutlineColor: { ...checkboxElement },
+			checkboxOutlineStyle: { ...checkboxElement },
+
+			// Checkmark
+			checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
+			checkmarkTextColor: { ...checkboxSurface, property: 'color' },
+
+			// Label
+			labelFontSize: [
+				{ ...label$3, property: 'font-size' },
+				{ ...checkboxHiddenLabel, property: 'font-size' }
+			],
+			labelLineHeight: [
+				{ ...label$3, property: 'line-height' },
+				{ ...checkboxHiddenLabel, property: 'line-height' }
+			],
+			labelFontWeight: [
+				{ ...label$3, property: 'font-weight' },
+				{ ...checkboxHiddenLabel, property: 'font-weight' }
+			],
+			labelMargin: [
+				{ ...label$3, property: 'left' },
+				{ ...checkboxHiddenLabel, property: 'padding-left' }
+			],
+			labelTextColor: [
+				{ ...label$3, property: 'color' },
+				{ ...requiredIndicator$3, property: 'color' },
+			],
+		},
 	}),
 	draggableMixin,
 	proxyInputMixin,
-	componentNameValidationMixin
+	componentNameValidationMixin,
+	customMixin$4
 )(
 	createProxy({
 		slots: [],
-		wrappedEleName: 'vaadin-checkbox',
+		wrappedEleName: 'vaadin-text-field',
 		style: `
 		:host {
-			display: inline-block;
+			--vaadin-field-default-width: auto;
+			display: inline-flex;
 		}
-		
-		vaadin-checkbox {
-			width: 100%;
+		.wrapper {
+			display: flex;
+		}
+
+		vaadin-text-field {
+			position: relative;
+			padding: 0;
+			display: inline-flex;
+			align-items: flex-start;
+		}
+		vaadin-text-field[focus-ring]::part(input-field) {
+			box-shadow: none;
+		}
+		vaadin-text-field::before {
+			height: auto;
+			margin: 0;
+		}
+		vaadin-text-field::part(input-field) {
+			padding: 0;
+			background: none;
+			min-height: 0;
+		}
+		vaadin-text-field::part(input-field)::after {
+			background: none;
+		}		
+		vaadin-text-field::part(label) {
+			position: absolute;
+			top: 0;
+		}		
+		vaadin-text-field[required]::part(required-indicator)::after {
+			content: "*";
+		}
+
+		vaadin-checkbox [slot="label"] {
+			opacity: 0;
+			height: 100%;
+			align-self: flex-start;
+			padding: 0;
+			cursor: pointer;
+		}
+		[required] vaadin-checkbox [slot="label"] {
+			padding-right: 1em;
+		}
+		vaadin-checkbox::part(checkbox) {
+			margin: 0;
+		}
+		vaadin-checkbox[focus-ring]::part(checkbox) {
+			box-shadow: none;
+		}
+
+		descope-checkbox-internal {
+			-webkit-mask-image: none;
+			min-height: 0;
+			padding: 0;
 		}
 		`,
 		excludeAttrsSync: ['tabindex'],
@@ -1152,6 +1365,8 @@ const Checkbox = compose(
 	})
 );
 
+customElements.define(componentName$n, CheckboxInternal);
+
 customElements.define(componentName$m, Checkbox);
 
 const componentName$l = getComponentName('loader-linear');
@@ -1753,14 +1968,6 @@ overrides$5 = `
 
 customElements.define(componentName$c, NumberField);
 
-const createBaseInputClass = (...args) => compose(
-  inputValidationMixin,
-  changeMixin,
-  readOnlyMixin,
-  normalizeBooleanAttributesMixin,
-  inputEventsDispatchingMixin
-)(createBaseClass(...args));
-
 const focusElement = (ele) => {
 	ele?.focus();
 	ele?.setSelectionRange(1, 1);
@@ -2259,7 +2466,9 @@ overrides$3 = `
 	}
 	vaadin-password-field {
 		width: 100%;
-		padding: 0;
+	}
+	vaadin-password-field > input {
+		min-height: 0;
 	}
 	vaadin-password-field::part(input-field) {
 		background: transparent;
@@ -2281,7 +2490,7 @@ let overrides$2 = ``;
 const SwitchToggle = compose(
 	createStyleMixin({
 		mappings: {
-			width: {selector: () => ':host'},
+			width: { selector: () => ':host' },
 			cursor: [{}, { selector: '> label' }]
 		}
 	}),
@@ -4787,18 +4996,18 @@ var globals = {
 	fonts
 };
 
-const globalRefs$c = getThemeRefs(globals);
+const globalRefs$d = getThemeRefs(globals);
 const vars$g = Button.cssVarList;
 
 const mode = {
-	primary: globalRefs$c.colors.primary,
-	secondary: globalRefs$c.colors.secondary,
-	success: globalRefs$c.colors.success,
-	error: globalRefs$c.colors.error,
-	surface: globalRefs$c.colors.surface
+	primary: globalRefs$d.colors.primary,
+	secondary: globalRefs$d.colors.secondary,
+	success: globalRefs$d.colors.success,
+	error: globalRefs$d.colors.error,
+	surface: globalRefs$d.colors.surface
 };
 
-const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$n);
+const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
 
 const button = {
 	...helperTheme$2,
@@ -4807,31 +5016,31 @@ const button = {
 		xs: {
 			[vars$g.height]: '10px',
 			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$c.spacing.xs}`
+			[vars$g.padding]: `0 ${globalRefs$d.spacing.xs}`
 		},
 		sm: {
 			[vars$g.height]: '20px',
 			[vars$g.fontSize]: '10px',
-			[vars$g.padding]: `0 ${globalRefs$c.spacing.sm}`
+			[vars$g.padding]: `0 ${globalRefs$d.spacing.sm}`
 		},
 		md: {
 			[vars$g.height]: '30px',
 			[vars$g.fontSize]: '14px',
-			[vars$g.padding]: `0 ${globalRefs$c.spacing.md}`
+			[vars$g.padding]: `0 ${globalRefs$d.spacing.md}`
 		},
 		lg: {
 			[vars$g.height]: '40px',
 			[vars$g.fontSize]: '20px',
-			[vars$g.padding]: `0 ${globalRefs$c.spacing.lg}`
+			[vars$g.padding]: `0 ${globalRefs$d.spacing.lg}`
 		},
 		xl: {
 			[vars$g.height]: '50px',
 			[vars$g.fontSize]: '25px',
-			[vars$g.padding]: `0 ${globalRefs$c.spacing.xl}`
+			[vars$g.padding]: `0 ${globalRefs$d.spacing.xl}`
 		}
 	},
 
-	[vars$g.borderRadius]: globalRefs$c.radius.lg,
+	[vars$g.borderRadius]: globalRefs$d.radius.lg,
 	[vars$g.cursor]: 'pointer',
 	[vars$g.borderWidth]: '2px',
 	[vars$g.borderStyle]: 'solid',
@@ -4877,7 +5086,7 @@ const button = {
 	}
 };
 
-const globalRefs$b = getThemeRefs(globals);
+const globalRefs$c = getThemeRefs(globals);
 
 const vars$f = TextField.cssVarList;
 
@@ -4886,44 +5095,44 @@ const textField = (vars) => ({
 		xs: {
 			[vars.height]: '14px',
 			[vars.fontSize]: '8px',
-			[vars.padding]: `0 ${globalRefs$b.spacing.xs}`
+			[vars.padding]: `0 ${globalRefs$c.spacing.xs}`
 		},
 		sm: {
 			[vars.height]: '20px',
 			[vars.fontSize]: '10px',
-			[vars.padding]: `0 ${globalRefs$b.spacing.sm}`
+			[vars.padding]: `0 ${globalRefs$c.spacing.sm}`
 		},
 		md: {
 			[vars.height]: '30px',
 			[vars.fontSize]: '14px',
-			[vars.padding]: `0 ${globalRefs$b.spacing.md}`
+			[vars.padding]: `0 ${globalRefs$c.spacing.md}`
 		},
 		lg: {
 			[vars.height]: '40px',
 			[vars.fontSize]: '20px',
-			[vars.padding]: `0 ${globalRefs$b.spacing.lg}`
+			[vars.padding]: `0 ${globalRefs$c.spacing.lg}`
 		},
 		xl: {
 			[vars.height]: '50px',
 			[vars.fontSize]: '25px',
-			[vars.padding]: `0 ${globalRefs$b.spacing.xl}`
+			[vars.padding]: `0 ${globalRefs$c.spacing.xl}`
 		}
 	},
 
-	[vars.color]: globalRefs$b.colors.surface.contrast,
-	[vars.placeholderColor]: globalRefs$b.colors.surface.main,
+	[vars.color]: globalRefs$c.colors.surface.contrast,
+	[vars.placeholderColor]: globalRefs$c.colors.surface.main,
 
-	[vars.backgroundColor]: globalRefs$b.colors.surface.light,
+	[vars.backgroundColor]: globalRefs$c.colors.surface.light,
 
 	[vars.borderWidth]: '1px',
 	[vars.borderStyle]: 'solid',
 	[vars.borderColor]: 'transparent',
-	[vars.borderRadius]: globalRefs$b.radius.sm,
+	[vars.borderRadius]: globalRefs$c.radius.sm,
 
 	_disabled: {
-		[vars.color]: globalRefs$b.colors.surface.dark,
-		[vars.placeholderColor]: globalRefs$b.colors.surface.light,
-		[vars.backgroundColor]: globalRefs$b.colors.surface.main
+		[vars.color]: globalRefs$c.colors.surface.dark,
+		[vars.placeholderColor]: globalRefs$c.colors.surface.light,
+		[vars.backgroundColor]: globalRefs$c.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -4933,24 +5142,24 @@ const textField = (vars) => ({
 	_focused: {
 		[vars.outlineWidth]: '2px',
 		[vars.outlineStyle]: 'solid',
-		[vars.outlineColor]: globalRefs$b.colors.surface.main
+		[vars.outlineColor]: globalRefs$c.colors.surface.main
 	},
 
 	_bordered: {
-		[vars.borderColor]: globalRefs$b.colors.surface.main
+		[vars.borderColor]: globalRefs$c.colors.surface.main
 	},
 
 	_invalid: {
-		[vars.borderColor]: globalRefs$b.colors.error.main,
-		[vars.color]: globalRefs$b.colors.error.main,
-		[vars.outlineColor]: globalRefs$b.colors.error.light,
-		[vars.placeholderColor]: globalRefs$b.colors.error.light
+		[vars.borderColor]: globalRefs$c.colors.error.main,
+		[vars.color]: globalRefs$c.colors.error.main,
+		[vars.outlineColor]: globalRefs$c.colors.error.light,
+		[vars.placeholderColor]: globalRefs$c.colors.error.light
 	}
 });
 
 var textField$1 = textField(vars$f);
 
-const globalRefs$a = getThemeRefs(globals);
+const globalRefs$b = getThemeRefs(globals);
 
 const vars$e = PasswordField.cssVarList;
 
@@ -4958,11 +5167,11 @@ const passwordField = {
 	[vars$e.wrapperBorderStyle]: 'solid',
 	[vars$e.wrapperBorderWidth]: '1px',
 	[vars$e.wrapperBorderColor]: 'transparent',
-	[vars$e.wrapperBorderRadius]: globalRefs$a.radius.sm,
+	[vars$e.wrapperBorderRadius]: globalRefs$b.radius.sm,
 
-	[vars$e.labelTextColor]: globalRefs$a.colors.surface.contrast,
-	[vars$e.inputTextColor]: globalRefs$a.colors.surface.contrast,
-	[vars$e.placeholderTextColor]: globalRefs$a.colors.surface.main,
+	[vars$e.labelTextColor]: globalRefs$b.colors.surface.contrast,
+	[vars$e.inputTextColor]: globalRefs$b.colors.surface.contrast,
+	[vars$e.placeholderTextColor]: globalRefs$b.colors.surface.main,
 
 	[vars$e.pointerCursor]: 'pointer',
 
@@ -4993,7 +5202,7 @@ const passwordField = {
 
 	_bordered: {
 		[vars$e.padding]: `0 0.5em`,
-		[vars$e.wrapperBorderColor]: globalRefs$a.colors.surface.main
+		[vars$e.wrapperBorderColor]: globalRefs$b.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5001,10 +5210,10 @@ const passwordField = {
 	},
 
 	_invalid: {
-		[vars$e.labelTextColor]: globalRefs$a.colors.error.main,
-		[vars$e.inputTextColor]: globalRefs$a.colors.error.main,
-		[vars$e.placeholderTextColor]: globalRefs$a.colors.error.light,
-		[vars$e.wrapperBorderColor]: globalRefs$a.colors.error.main
+		[vars$e.labelTextColor]: globalRefs$b.colors.error.main,
+		[vars$e.inputTextColor]: globalRefs$b.colors.error.main,
+		[vars$e.placeholderTextColor]: globalRefs$b.colors.error.light,
+		[vars$e.wrapperBorderColor]: globalRefs$b.colors.error.main
 	},
 };
 
@@ -5016,16 +5225,16 @@ const emailField = {
 	...textField(EmailField.cssVarList)
 };
 
-const globalRefs$9 = getThemeRefs(globals);
+const globalRefs$a = getThemeRefs(globals);
 const vars$d = TextArea.cssVarList;
 
 const textArea = {
 	[vars$d.width]: '100%',
-	[vars$d.color]: globalRefs$9.colors.primary.main,
-	[vars$d.backgroundColor]: globalRefs$9.colors.surface.light,
+	[vars$d.color]: globalRefs$a.colors.primary.main,
+	[vars$d.backgroundColor]: globalRefs$a.colors.surface.light,
 	[vars$d.resize]: 'vertical',
 
-	[vars$d.borderRadius]: globalRefs$9.radius.sm,
+	[vars$d.borderRadius]: globalRefs$a.radius.sm,
 	[vars$d.borderWidth]: '1px',
 	[vars$d.borderStyle]: 'solid',
 	[vars$d.borderColor]: 'transparent',
@@ -5034,11 +5243,11 @@ const textArea = {
 
 
 	_bordered: {
-		[vars$d.borderColor]: globalRefs$9.colors.surface.main
+		[vars$d.borderColor]: globalRefs$a.colors.surface.main
 	},
 
 	_focused: {
-		[vars$d.outlineColor]: globalRefs$9.colors.surface.main
+		[vars$d.outlineColor]: globalRefs$a.colors.surface.main
 	},
 
 	_fullWidth: {
@@ -5050,22 +5259,90 @@ const textArea = {
 	},
 
 	_invalid: {
-		[vars$d.outlineColor]: globalRefs$9.colors.error.main
+		[vars$d.outlineColor]: globalRefs$a.colors.error.main
 	}
 };
 
+const globalRefs$9 = getThemeRefs(globals);
 const vars$c = Checkbox.cssVarList;
 
 const checkbox = {
+	[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
+
+	[vars$c.labelFontSize]: '12px',
+	[vars$c.labelFontWeight]: '400',
+	[vars$c.labelTextColor]: globalRefs$9.colors.surface.contrast,
 	[vars$c.cursor]: 'pointer',
-	[vars$c.width]: 'fit-content'
+
+	[vars$c.checkboxWidth]: 'calc(1em - 2px)',
+	[vars$c.checkboxHeight]: 'calc(1em - 2px)',
+	[vars$c.labelMargin]: 'calc(1em + 5px)',
+
+	size: {
+		xs: {
+			[vars$c.labelFontSize]: '12px',
+			[vars$c.labelLineHeight]: '1.1em',
+			[vars$c.checkmarkSize]: '18px',
+			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
+		},
+		sm: {
+			[vars$c.labelFontSize]: '14px',
+			[vars$c.labelLineHeight]: '1.2em',
+			[vars$c.checkmarkSize]: '22px',
+			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
+		},
+		md: {
+			[vars$c.labelFontSize]: '16px',
+			[vars$c.labelLineHeight]: '1.35em',
+			[vars$c.checkmarkSize]: '26px',
+			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
+		},
+		lg: {
+			[vars$c.labelFontSize]: '20px',
+			[vars$c.labelLineHeight]: '1.5em',
+			[vars$c.checkmarkSize]: '34px',
+			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
+		},
+		xl: {
+			[vars$c.labelFontSize]: '20px',
+			[vars$c.labelLineHeight]: '1.75em',
+			[vars$c.checkmarkSize]: '38px',
+			[vars$c.checkboxRadius]: globalRefs$9.radius.sm,
+		}
+	},
+
+	_fullWidth: {
+		[vars$c.width]: '100%',
+	},
+
+	_checked: {
+		[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.primary.main,
+		[vars$c.checkmarkTextColor]: globalRefs$9.colors.primary.contrast,
+	},
+
+	_disabled: {
+		[vars$c.checkboxBackgroundColor]: globalRefs$9.colors.surface.main,
+	},
+
+	_focusRing: {
+		[vars$c.checkboxOutlineWidth]: '2px',
+		[vars$c.checkboxOutlineOffset]: '1px',
+		[vars$c.checkboxOutlineColor]: globalRefs$9.colors.primary.main,
+		[vars$c.checkboxOutlineStyle]: 'solid'
+	},
+
+	_invalid: {
+		[vars$c.checkboxOutlineColor]: globalRefs$9.colors.error.main,
+		[vars$c.labelTextColor]: globalRefs$9.colors.error.main
+	},
+
 };
 
 const vars$b = SwitchToggle.cssVarList;
 
-const swtichToggle = {
-	[vars$b.width]: '70px',
-	[vars$b.cursor]: [{}, { selector: '> label' }]
+const switchToggle = {
+    [vars$b.width]: '70px',
+    [vars$b.cursor]: [{}, { selector: '> label' }]
 };
 
 const globalRefs$8 = getThemeRefs(globals);
@@ -5648,7 +5925,7 @@ var components = {
 	emailField,
 	textArea,
 	checkbox,
-	switchToggle: swtichToggle,
+	switchToggle,
 	container,
 	logo,
 	text,