@descope/web-components-ui 1.0.60 → 1.0.62

package/dist/index.esm.js

@@ -256,6 +256,10 @@ const draggableMixin = (superclass) =>
 		}
 	};
 
+var compose = (...fns) =>
+(val) =>
+  fns.reduceRight((res, fn) => fn(res), val);
+
 class DescopeBaseClass extends HTMLElement {}
 
 const hoverableMixin =
@@ -438,9 +442,177 @@ const createProxy = ({
 	return compose(hoverableMixin())(ProxyElement);
 };
 
-const attrs = {
-	valueMissing: 'data-errormessage-value-missing',
-	patternMismatch: 'data-errormessage-pattern-mismatch'
+const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+const events = [
+  'change',
+  'input',
+  'blur',
+  'focus',
+  'invalid',
+  'valid',
+];
+
+const observedAttributes = [
+  'required',
+  'pattern',
+];
+
+const errorAttributes = {
+  valueMissing: 'data-errormessage-value-missing',
+  patternMismatch: 'data-errormessage-pattern-mismatch'
+};
+const inputMixin = (superclass) => class InputMixinClass extends superclass {
+  static get observedAttributes() {
+    return [
+      ...superclass.observedAttributes || [],
+      ...observedAttributes
+    ];
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  #internals
+
+  constructor() {
+    super();
+
+    this.#internals = this.attachInternals();
+
+    for (const event of events) {
+      this[`dispatch${upperFirst(event)}`] = function () {
+        this.dispatchInputEvent(event);
+      };
+    }
+  }
+
+  get defaultErrorMsgValueMissing() {
+    return 'Please fill out this field.'
+  }
+
+  get defaultErrorMsgPatternMismatch() {
+    return 'Please match the requested format.'
+  }
+
+  getErrorMessage(flags) {
+    switch (true) {
+      case flags.valueMissing:
+        return this.getAttribute(errorAttributes.valueMissing) ||
+          this.defaultErrorMsgValueMissing
+      case flags.patternMismatch || flags.typeMismatch:
+        return this.getAttribute(errorAttributes.patternMismatch) ||
+          this.defaultErrorMsgPatternMismatch
+      case flags.customError:
+        return this.validationMessage
+      default:
+        return ''
+    }
+  }
+
+  setValidity() {
+    const validity = this.getValidity();
+    this.#internals.setValidity(validity, this.getErrorMessage(validity));
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage;
+  }
+
+  getValidity() {
+    throw Error('getValidity', 'is not implemented')
+  }
+
+  checkValidity() {
+    return this.#internals.validity.valid
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  setCustomValidity(errorMessage) {
+    if(errorMessage){
+      this.#internals.setValidity({customError: true}, errorMessage);
+    } else {
+      this.#internals.setValidity({});
+      this.setValidity();
+    }
+  }
+
+  get isRequired() {
+    return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+  }
+
+  get pattern() {
+    return this.getAttribute('pattern')
+  }
+
+  get value() {
+    throw Error('get value', 'is not implemented')
+  }
+
+  set value(value) {
+    throw Error('set value', 'is not implemented')
+  }
+
+  handleFocus() {
+    throw Error('handleFocus', 'is not implemented')
+  }
+
+  handleInput() {
+    this.setValidity();
+    this.handleDispatchValidationEvents();
+  }
+
+  handleBlur() {
+    throw Error('handleBlur', 'is not implemented')
+  }
+
+  handleChange() {
+    throw Error('handleChange', 'is not implemented')
+  }
+
+  dispatchInputEvent(eventName) {
+    this[`on${eventName}`]?.(); // in case we got an event callback as property
+    this.dispatchEvent(new InputEvent(eventName));
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (observedAttributes.includes(attrName)) {
+      this.setValidity();
+    }
+  }
+
+  handleDispatchValidationEvents(){
+    if(this.checkValidity()) {
+      this.dispatchValid(); 
+    } else {
+      this.dispatchInvalid();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.setValidity();
+    this.handleDispatchValidationEvents();
+
+    // create proxy replace the addEventListener fn 
+    // and we want to be able to access the focus events 
+    // of this element and not the nested element's events
+    this.onfocus = this.handleFocus.bind(this);
+    this.addEventListener('input', this.handleInput.bind(this));
+    this.addEventListener('blur', this.handleBlur.bind(this));
+    this.addEventListener('change', this.handleBlur.bind(this));
+  }
 };
 
 const errorAttrs = ['invalid', 'has-error-message'];
@@ -457,79 +629,140 @@ const propertyObserver = (src, target, property) => {
 	});
 };
 
-const inputMixin = (superclass) =>
-	class InputMixinClass extends superclass {
-		static get formAssociated() {
-			return true;
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+	if (!ele) return;
+
+	const nestingLevel = 10;
+
+	let nonSlotEle = ele;
+	for (let i = 0; i < nestingLevel; i++) {
+		nonSlotEle = nonSlotEle.assignedElements()[0];
+		if (nonSlotEle.localName !== 'slot') return nonSlotEle
+	}
+};
+
+const proxyInputMixin = (superclass) =>
+	class proxyInputMixinClass extends inputMixin(superclass) {
+		static get observedAttributes() {
+			return [...superclass.observedAttributes || [], ...errorAttrs];
 		}
 
-		#internals;
+		#inputElement
 
 		constructor() {
 			super();
 
-			this.#internals = this.attachInternals();
+			this.#inputElement = super.inputElement;
+
+			// this is our way to identify that the form was submitted
+			// in this case, we want the input to be in error state if it's not valid
+			this.addEventListener('focus', (e) => {
+				if (e.relatedTarget?.form) {
+					if (!this.checkValidity()) {
+						this.setAttribute('invalid', 'true');
+					}
+
+					if (this.hasAttribute('invalid')) {
+						this.reportValidityOnInternalInput();
+					}
+				}
+			});
+
+			this.addEventListener('invalid', () => {
+				this.setInternalInputErrorMessage();
+				this.setAttribute('error-message', this.validationMessage);
+			});
+
+			this.addEventListener('valid', () => {
+				this.removeAttribute('invalid');
+			});
+		}
+
+		get inputElement() {
+			const inputSlot = this.baseEle.shadowRoot.querySelector('slot[name="input"]');
+			const textAreaSlot = this.baseEle.shadowRoot.querySelector('slot[name="textarea"]');
+
+			this.#inputElement ??= getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+		
+			if (!this.#inputElement) throw Error('no input was found');
+
+			return this.#inputElement
+		}
+
+		set inputElement(ele) {
+			this.#inputElement = ele;
+		}
+
+		getValidity() {
+			return this.inputElement.validity
 		}
 
-		formAssociatedCallback() {
-			this.setValidity?.();
+		reportValidityOnInternalInput() {
+			setTimeout(() => {
+				this.inputElement.reportValidity();
+			}, 0);
 		}
 
-		setValidationAttribute(attr) {
-			const validationAttr = this.getAttribute(attr);
-			if (validationAttr) {
-				this.proxyElement.setAttribute('error-message', validationAttr);
+		handleBlur() { }
+
+		handleFocus() {
+			this.inputElement.focus();
+			if (this.hasAttribute('invalid')) {
+				this.reportValidityOnInternalInput();
 			}
-			// normalize vaadin error attributes to have a boolean value
-			errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
 		}
 
-		validate() {
-			const { valueMissing, patternMismatch, typeMismatch } = this.validity;
-			if (valueMissing) {
-				this.setValidationAttribute(attrs.valueMissing);
-			} else if (typeMismatch || patternMismatch) {
-				this.setValidationAttribute(attrs.patternMismatch);
+		// we want reportValidity to behave like form submission
+		reportValidity() {
+			const isValid = super.reportValidity();
+			if (!isValid) {
+				this.setAttribute('invalid', 'true');
+				this.inputElement.focus();
+			}
+			this.reportValidityOnInternalInput();
+		}
+
+		setInternalInputErrorMessage() {
+			if (!this.checkValidity()) {
+				this.inputElement.setCustomValidity(this.validationMessage);
 			}
 		}
 
 		connectedCallback() {
+			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+
 			super.connectedCallback?.();
 
-			this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
+			this.inputElement.addEventListener('input', () => {
+				this.inputElement.setCustomValidity('');
+				if (!this.inputElement.checkValidity())
+					this.setInternalInputErrorMessage();
+			});
+
+			this.inputElement.addEventListener('invalid', () => {
+				this.setValidity();
+				this.setInternalInputErrorMessage();
+				this.setAttribute('error-message', this.validationMessage);
+			});
 
 			// this is needed in order to make sure the form input validation is working
 			if (!this.hasAttribute('tabindex')) {
 				this.setAttribute('tabindex', 0);
 			}
 
-			this.inputElement ??= this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0] ||
-				this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0];
-			if (!this.inputElement) throw Error('no input was found');
-
 			// sync properties
 			propertyObserver(this, this.inputElement, 'value');
 			this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+		}
 
-			this.validity = this.inputElement.validity;
-
-			this.setValidity = () => {
-				this.#internals.setValidity(this.inputElement.validity, this.inputElement.validationMessage);
-			};
-
-			this.inputElement.oninput = () => {
-				this.value = this.inputElement.value;
-				this.setValidity();
-			};
-
-			this.onfocus = () => {
-				setTimeout(() => this.inputElement.reportValidity(), 0);
-				this.validate();
-			};
+		attributeChangedCallback(attrName, oldValue, newValue) {
+			super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-			this.inputElement.oninvalid = () => {
-				this.validate();
-			};
+			if (attrName === 'invalid' && newValue === '') {
+				this.setAttribute('invalid', 'true');
+			}
 		}
 	};
 
@@ -561,11 +794,6 @@ const componentNameValidationMixin = (superclass) =>
 
 const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 
-const compose =
-	(...fns) =>
-	(val) =>
-		fns.reduceRight((res, fn) => fn(res), val);
-
 const componentName$i = getComponentName('button');
 
 const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
@@ -664,7 +892,7 @@ const Checkbox = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -846,7 +1074,7 @@ const TextField = compose(
 		mappings: textFieldMappings
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1019,65 +1247,65 @@ const insertNestingLevel = (srcEle, nestingEle) => {
 // to be under the nesting element
 const enforceNestingElementsStylesMixin =
 	({ nestingElementTagName, nestingElementDestSlotName, forwardAttrOptions }) =>
-	(superclass) => {
-		const getChildNodeEle = () =>
-			Object.assign(document.createElement(nestingElementTagName), {
-				slot: nestingElementDestSlotName
-			});
+		(superclass) => {
+			const getChildNodeEle = () =>
+				document.createElement(nestingElementTagName, {
+					slot: nestingElementDestSlotName
+				});
 
-		let childObserver;
-		
-		const getObserver = () => childObserver;
+			let childObserver;
 
-		return class EnforceNestingElementsStylesMixinClass extends superclass {
-			constructor() {
-				super();
+			const getObserver = () => childObserver;
 
-				const childObserverCallback = () => {
-					// we are going to change the DOM, so we need to disconnect the observer before
-					// and reconnect it after the child component is added
-					getObserver().disconnect(this.shadowRoot.host);
-
-					const isNestingElementExist = this.shadowRoot.host.querySelector(nestingElementTagName);
-					const hasNewChildren = this.shadowRoot.host.childNodes.length > 0;
-
-					if (!isNestingElementExist && hasNewChildren) {
-						// if before there were no children and now there are children - insert
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					} else if (isNestingElementExist && hasNewChildren) {
-						// if children existed, and they changed -
-						// we need to update (move) the new children into
-						// descope-text and remove previous children
-						this.shadowRoot.host.querySelector(child).remove();
-						insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
-					}
-					else if (isNestingElementExist && !hasNewChildren) {
-						// if children existed and now there are none -
-						// we need to remove descope-text completely
-						this.shadowRoot.host.querySelector(child).remove();
-					}
+			let isMutating = false;
 
-					// we need a new observer, because we remove the nesting element
-					this.shadowRoot.host.querySelector(nestingElementTagName) &&
-						forwardAttrs(
-							this.shadowRoot.host,
-							this.shadowRoot.host.querySelector(nestingElementTagName),
-							forwardAttrOptions
-						);
+			const filterNestingElement = (node) => node.localName !== nestingElementTagName;
+			return class EnforceNestingElementsStylesMixinClass extends superclass {
+				constructor() {
+					super();
 
-						getObserver().observe(this.shadowRoot.host, {
-						childList: true
-					});
-				};
+					const childObserverCallback = (mutation, observer) => {
 
-				childObserver = getChildObserver(childObserverCallback);
-			}
+						// we are going to change the DOM, so we need to skip the upcoming mutations
+						if (isMutating) return;
 
-			connectedCallback() {
-				super.connectedCallback?.();
+						isMutating = true;
+
+						const { addedNodes, removedNodes } = mutation;
+
+						const nestingElement = this.shadowRoot.host.querySelector(nestingElementTagName);
+						const hasNewChildren = Array.from(addedNodes)
+							.filter(filterNestingElement)
+							.length > 0;
+						const hasRemovedChildren = Array.from(removedNodes)
+							.filter(filterNestingElement)
+							.length > 0;
+
+						if (!nestingElement && hasNewChildren) {
+							// if before there were no children and now there are children - insert
+							this.handleNestingLevelInsertion();
+
+						} else if (nestingElement && hasNewChildren) {
+							// if children existed, and they changed -
+							// we need to update (move) the new children into
+							// descope-text and remove previous children
+							nestingElement.replaceChildren(...addedNodes);
+						}
+						else if (nestingElement && !hasNewChildren && hasRemovedChildren) {
+							// 	// if children existed and now there are none -
+							// 	// we need to remove descope-text completely
+							nestingElement.remove();
+						}
 
-				if (this.shadowRoot.host.childNodes.length > 0) {
-					// on the first render - we want to move all component's children to be under descope-text
+						setTimeout(() => {
+							isMutating = false;
+						});
+					};
+
+					childObserver = getChildObserver(childObserverCallback);
+				}
+
+				handleNestingLevelInsertion() {
 					insertNestingLevel(this.shadowRoot.host, getChildNodeEle());
 
 					forwardAttrs(
@@ -1087,12 +1315,20 @@ const enforceNestingElementsStylesMixin =
 					);
 				}
 
-				getObserver().observe(this.shadowRoot.host, {
-					childList: true
-				});
-			}
+				connectedCallback() {
+					super.connectedCallback?.();
+
+					if (this.shadowRoot.host.childNodes.length > 0) {
+						// on the first render - we want to move all component's children to be under descope-text
+						this.handleNestingLevelInsertion();
+					}
+
+					getObserver().observe(this.shadowRoot.host, {
+						childList: true
+					});
+				}
+			};
 		};
-	};
 
 const componentName$a = getComponentName('text');
 
@@ -1230,7 +1466,7 @@ const EmailField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1422,7 +1658,7 @@ const NumberField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1476,6 +1712,8 @@ overrides$4 = `
 
 customElements.define(componentName$5, NumberField);
 
+var BaseInputClass = inputMixin(HTMLElement); //todo: maybe we should use base class?
+
 const focusElement = (ele) => {
 	ele?.focus();
 	ele?.setSelectionRange(1, 1);
@@ -1492,14 +1730,13 @@ const getSanitizedCharacters = (str) => {
 
 const componentName$4 = getComponentName('passcode-internal');
 
-class PasscodeInternal extends HTMLElement {
+class PasscodeInternal extends BaseInputClass {
 	static get observedAttributes() {
 		return [
+			...BaseInputClass.observedAttributes,
 			'disabled',
 			'bordered',
-			'size',
-			'required',
-			'pattern'
+			'size'
 		];
 	}
 
@@ -1507,12 +1744,6 @@ class PasscodeInternal extends HTMLElement {
 		return componentName$4;
 	}
 
-	static get formAssociated() {
-		return true;
-	}
-
-	#internals
-
 	constructor() {
 		super();
 		const template = document.createElement('template');
@@ -1536,23 +1767,9 @@ class PasscodeInternal extends HTMLElement {
 
 		this.baseSelector = ':host > div';
 
-		this.#internals = this.attachInternals();
-
 		this.inputs = Array.from(this.querySelectorAll('descope-text-field'));
 	}
 
-	checkValidity() {
-		// we need to toggle the has-error-message so the text inside the digits will become red when there is an error
-		if (this.#internals.validity.valid) {
-			this.inputs.forEach(input => input.removeAttribute('has-error-message'));
-		} else {
-			this.inputs.forEach(input => input.setAttribute('has-error-message', 'true'));
-			// we need to call it so the has-error-message with have the correct format (="true")
-			this.oninvalid?.();
-		}
-		return this.#internals.validity.valid
-	}
-
 	get digits() {
 		return Number.parseInt(this.getAttribute('digits')) || 6
 	}
@@ -1561,59 +1778,54 @@ class PasscodeInternal extends HTMLElement {
 		return this.inputs.map(({ value }) => value).join('')
 	}
 
-	set value(val) { }
+	set value(val) {
+		if(val === this.value) return;
+
+		const charArr = getSanitizedCharacters(val);
 
-	get isRequired() {
-		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+		if (charArr.length) {
+			this.fillDigits(charArr, this.inputs[0]);
+		}
 	}
 
 	get pattern() {
 		return `^$|^\\d{${this.digits},}$`
 	}
 
-	get valueMissingErrMsg() {
-		return 'Please fill out this field.'
-	}
-
-	get patternMismatchErrMsg() {
-		return `Must be a ${this.digits} digits number.`
-	}
-
-	get validity() {
-		return this.#internals.validity;
-	}
-
-	get validationMessage() {
-		return this.#internals.validationMessage;
-	}
-
-	reportValidity() {
-		this.#internals.reportValidity();
+	handleInputsInvalid() {
+		setTimeout(() => {
+			if (this.hasAttribute('invalid')) {
+				this.inputs.forEach(input => input.setAttribute('invalid', 'true'));
+			}
+		});
 	}
 
-	formAssociatedCallback() {
-		this.setValidity?.();
+	handleInputsValid() {
+		this.inputs.forEach(input => input.removeAttribute('invalid'));
 	}
 
-	setValidity = () => {
+	getValidity() {
 		if (this.isRequired && !this.value) {
-			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+			return { valueMissing: true };
 		}
 		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
-			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+			return { patternMismatch: true };
 		}
 		else {
-			this.#internals.setValidity({});
+			return {}
 		}
 	};
 
+	handleFocus() {
+		this.inputs[0].focus();
+	}
+
 	async connectedCallback() {
-		this.setValidity();
+		super.connectedCallback();
 		this.initInputs();
 
-		this.onfocus = () => {
-			this.inputs[0].focus();
-		};
+		this.addEventListener('invalid', this.handleInputsInvalid);
+		this.addEventListener('valid', this.handleInputsValid);
 	}
 
 	getInputIdx(inputEle) {
@@ -1644,6 +1856,10 @@ class PasscodeInternal extends HTMLElement {
 		!currentInput.hasAttribute('focused') && focusElement(currentInput);
 	};
 
+	handleBlur() {
+		this.handleInputsInvalid();
+	}
+
 	initInputs() {
 		this.inputs.forEach((input) => {
 
@@ -1652,7 +1868,7 @@ class PasscodeInternal extends HTMLElement {
 			// if not, the component is no longer focused and we should simulate blur
 			input.addEventListener('blur', () => {
 				const timerId = setTimeout(() => {
-					this.dispatchEvent(new Event('blur'));
+					this.dispatchBlur();
 				});
 
 				this.inputs.forEach((ele) =>
@@ -1660,13 +1876,13 @@ class PasscodeInternal extends HTMLElement {
 				);
 			});
 
-			input.oninput = (e) => {
+			input.oninput = () => {
 				const charArr = getSanitizedCharacters(input.value);
 
 				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
 				else this.fillDigits(charArr, input);
 
-				this.setValidity();
+				this.dispatchInput();
 			};
 
 			input.onkeydown = ({ key }) => {
@@ -1679,27 +1895,21 @@ class PasscodeInternal extends HTMLElement {
 					!prevInput.hasAttribute('focused') && setTimeout(() => {
 						focusElement(prevInput);
 					});
+					
+					this.dispatchInput();
 				} else if (key.match(/^(\d)$/g)) { // if input is a digit
 					input.value = ''; // we are clearing the previous value so we can override it with the new value
 				}
 
-				this.setValidity();
 			};
 		});
 	}
 
-	attributeChangedCallback(
-		attrName,
-		oldValue,
-		newValue
-	) {
-		const validationRelatedAttributes = ['required', 'pattern'];
+	attributeChangedCallback(attrName, oldValue, newValue) {
+		super.attributeChangedCallback(attrName, oldValue, newValue);
 
 		if (oldValue !== newValue) {
-			if (validationRelatedAttributes.includes(attrName)) {
-				this.setValidity();
-			}
-			else if (PasscodeInternal.observedAttributes.includes(attrName)) {
+			if (PasscodeInternal.observedAttributes.includes(attrName) && !BaseInputClass.observedAttributes.includes(attrName)) {
 				this.inputs.forEach((input) => input.setAttribute(attrName, newValue));
 			}
 		}
@@ -1771,7 +1981,7 @@ const Passcode = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin,
 	customMixin
 )(
@@ -1858,7 +2068,7 @@ const PasswordField = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -1924,7 +2134,7 @@ const SwitchToggle = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -2015,7 +2225,7 @@ const TextArea = compose(
 		}
 	}),
 	draggableMixin,
-	inputMixin,
+	proxyInputMixin,
 	componentNameValidationMixin
 )(
 	createProxy({
@@ -2442,7 +2652,7 @@ const textField = (vars) => ({
 		[vars.borderColor]: globalRefs$6.colors.surface.main
 	},
 
-	_hasErrorMessage: {
+	_invalid: {
 		[vars.borderColor]: globalRefs$6.colors.error.main,
 		[vars.color]: globalRefs$6.colors.error.main,
 		[vars.placeholderColor]: globalRefs$6.colors.error.light