@veracity/vui 5.3.0 → 5.3.1-alpha.417090.2608130838

package/dist/core/vuiProvider/useBodyScrollLock.js

@@ -20,5 +20,5 @@ const useBodyScrollLock = () => {
 
 //#endregion
 export { useBodyScrollLock };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=useBodyScrollLock.js.map

package/dist/core/vuiProvider/useOfflineMode.js

@@ -18,5 +18,5 @@ const useOfflineMode = () => {
 
 //#endregion
 export { useOfflineMode };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=useOfflineMode.js.map

package/dist/core/vuiProvider/vuiProvider.js

@@ -45,5 +45,5 @@ const VuiProvider = ({ children, globalStyle = true, resetCSS = true, theme = de
 
 //#endregion
 export { VuiProvider as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=vuiProvider.js.map

package/dist/datePicker/dateInput.js

@@ -2,65 +2,80 @@ import { parseIsoDate, validateDateFormat } from "../utils/dates.js";
 import { formatDate } from "../utils/formatDate.js";
 import { T } from "../t/t.js";
 import { Input } from "../input/input.js";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/datePicker/dateInput.tsx
-const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }) => {
-	const formattedInitialDate = initialDate ? formatDate(initialDate, "YYYY-MM-DD", { timeZone: "UTC" }) : "";
-	const [dateInput, setDateInput] = useState(formattedInitialDate);
+const isValidDate = (dateString) => !!validateDateFormat(dateString) && !!parseIsoDate(dateString);
+const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, autoFocus, ...rest }) => {
+	const inputRef = useRef(null);
+	const [dateInput, setDateInput] = useState(initialDate ? formatDate(initialDate, "YYYY-MM-DD", { timeZone: "UTC" }) : "");
 	const [dateInputValidated, setDateInputValidated] = useState(true);
 	const [errorMessage, setErrorMessage] = useState("");
-	const isValidDate = (dateString) => {
-		if (!validateDateFormat(dateString)) return false;
-		if (!parseIsoDate(dateString)) return false;
-		return true;
-	};
-	const handleOnBlur = () => {
+	const handleOnBlur = useCallback(() => {
 		setDateInputValidated(!dateInput);
 		const parsedDate = parseIsoDate(dateInput);
 		if (parsedDate) {
 			setDateInput(formatDate(parsedDate, "YYYY-MM-DD", { timeZone: "UTC" }));
 			const validateMessage = onValidate(parsedDate);
-			!validateMessage && onChange(parsedDate);
+			if (!validateMessage) onChange(parsedDate);
 			setDateInputValidated(!validateMessage);
 			setErrorMessage(validateMessage);
 		}
-	};
+	}, [
+		dateInput,
+		onValidate,
+		onChange
+	]);
 	useEffect(() => {
-		setDateInput(formattedInitialDate);
+		const formatted = initialDate ? formatDate(initialDate, "YYYY-MM-DD", { timeZone: "UTC" }) : "";
+		setDateInput(formatted);
 		const validation = onValidate(initialDate);
 		setDateInputValidated(!validation);
 		setValidateStatus(!validation);
 		setErrorMessage(validation);
-	}, [initialDate]);
+	}, [
+		initialDate,
+		onValidate,
+		setValidateStatus
+	]);
 	useEffect(() => {
 		if (dateInput) {
 			setValidateStatus(isValidDate(dateInput));
 			if (!validateDateFormat(dateInput)) setErrorMessage("Supported format is YYYY-MM-DD");
-			else if (!parseIsoDate(dateInput)) setErrorMessage("Invalid date");
 			else {
 				const parsedDate = parseIsoDate(dateInput);
-				const validateMessage = onValidate(parsedDate);
-				!validateMessage && onChange(parsedDate);
-				setDateInputValidated(!validateMessage);
-				setErrorMessage(validateMessage);
+				if (!parsedDate) setErrorMessage("Invalid date");
+				else {
+					const validateMessage = onValidate(parsedDate);
+					if (!validateMessage) onChange(parsedDate);
+					setDateInputValidated(!validateMessage);
+					setErrorMessage(validateMessage);
+				}
 			}
 		}
-	}, [dateInput]);
+	}, [
+		dateInput,
+		onValidate,
+		onChange,
+		setValidateStatus
+	]);
+	useEffect(() => {
+		if (autoFocus) inputRef.current?.focus({ preventScroll: true });
+	}, []);
 	return /* @__PURE__ */ jsx(Input, {
-		borderColor: dateInputValidated ? "sandstone.main" : "energyRed.main",
 		className: "dateInput",
 		"data-testid": "test-date-input",
 		errorText: !dateInputValidated && /* @__PURE__ */ jsx(T, {
 			size: "md",
 			children: errorMessage
 		}),
+		inputRef,
 		onBlur: handleOnBlur,
 		onChange: (e) => setDateInput(e.target.value),
 		placeholder: "YYYY-MM-DD",
 		size: "md",
-		state: !dateInputValidated && !errorMessage ? "error" : "default",
+		state: !dateInputValidated ? "error" : "default",
 		value: dateInput,
 		...rest
 	});
@@ -68,5 +83,5 @@ const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...re
 
 //#endregion
 export { DateInput };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dateInput.js.map

package/dist/datePicker/dateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport type { InputProps } from '../input'\n\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = InputProps & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {\n  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const isValidDate = (dateString: string) => {\n    if (!validateDateFormat(dateString)) return false\n    if (!parseIsoDate(dateString)) return false\n    return true\n  }\n\n  const handleOnBlur = () => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      !validateMessage && onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }\n\n  useEffect(() => {\n    setDateInput(formattedInitialDate)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate])\n\n  useEffect(() => {\n    if (dateInput) {\n      const isValidDateString = isValidDate(dateInput)\n      setValidateStatus(isValidDateString)\n      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')\n      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')\n      else {\n        const parsedDate = parseIsoDate(dateInput)\n        const validateMessage = onValidate(parsedDate)\n        !validateMessage && onChange(parsedDate)\n        setDateInputValidated(!validateMessage)\n        setErrorMessage(validateMessage)\n      }\n    }\n  }, [dateInput])\n\n  return (\n    <Input\n      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,aAAa,EAAE,aAAa,UAAU,YAAY,mBAAmB,GAAG,WAAkB;CACrG,MAAM,uBAAuB,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,MAAM,CAAC,IAAI;CACxG,MAAM,CAAC,WAAW,gBAAgB,SAAiB,oBAAoB;CACvE,MAAM,CAAC,oBAAoB,yBAAyB,SAAkB,IAAI;CAC1E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,EAAE;CAE3D,MAAM,eAAe,eAAuB;EAC1C,IAAI,CAAC,mBAAmB,UAAU,GAAG,OAAO;EAC5C,IAAI,CAAC,aAAa,UAAU,GAAG,OAAO;EACtC,OAAO;CACT;CAEA,MAAM,qBAAqB;EACzB,sBAAsB,CAAC,SAAS;EAChC,MAAM,aAAa,aAAa,SAAS;EACzC,IAAI,YAAY;GACd,aAAa,WAAW,YAAY,cAAc,EAAE,UAAU,MAAM,CAAC,CAAC;GACtE,MAAM,kBAAkB,WAAW,UAAU;GAC7C,CAAC,mBAAmB,SAAS,UAAU;GACvC,sBAAsB,CAAC,eAAe;GACtC,gBAAgB,eAAe;EACjC;CACF;CAEA,gBAAgB;EACd,aAAa,oBAAoB;EACjC,MAAM,aAAa,WAAW,WAAW;EACzC,sBAAsB,CAAC,UAAU;EACjC,kBAAkB,CAAC,UAAU;EAC7B,gBAAgB,UAAU;CAC5B,GAAG,CAAC,WAAW,CAAC;CAEhB,gBAAgB;EACd,IAAI,WAAW;GAEb,kBAD0B,YAAY,SACJ,CAAC;GACnC,IAAI,CAAC,mBAAmB,SAAS,GAAG,gBAAgB,gCAAgC;QAC/E,IAAI,CAAC,aAAa,SAAS,GAAG,gBAAgB,cAAc;QAC5D;IACH,MAAM,aAAa,aAAa,SAAS;IACzC,MAAM,kBAAkB,WAAW,UAAU;IAC7C,CAAC,mBAAmB,SAAS,UAAU;IACvC,sBAAsB,CAAC,eAAe;IACtC,gBAAgB,eAAe;GACjC;EACF;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,aAAa,qBAAqB,mBAAmB;EACrD,WAAU;EACV,eAAY;EACZ,WAAW,CAAC,sBAAsB,oBAAC,GAAD;GAAG,MAAK;aAAM;EAAgB;EAChE,QAAQ;EACR,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;EAC1C,aAAY;EACZ,MAAK;EACL,OAAO,CAAC,sBAAsB,CAAC,eAAe,UAAU;EACxD,OAAO;EACP,GAAI;CACL;AAEL"}
+{"version":3,"file":"dateInput.js","names":[],"sources":["../../src/datePicker/dateInput.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { InputProps } from '../input'\n\nimport { Input } from '../input'\nimport { T } from '../t'\nimport { formatDate, parseIsoDate, validateDateFormat } from '../utils'\n\ntype Props = Omit<InputProps, 'onChange'> & {\n  initialDate?: Date\n  onChange: (date?: Date) => void\n  onValidate: (date?: Date) => string\n  setValidateStatus: (inValid: boolean) => void\n}\n\nconst isValidDate = (dateString: string) => !!validateDateFormat(dateString) && !!parseIsoDate(dateString)\n\nexport const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, autoFocus, ...rest }: Props) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const [dateInput, setDateInput] = useState<string>(\n    initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : '',\n  )\n  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)\n  const [errorMessage, setErrorMessage] = useState<string>('')\n\n  const handleOnBlur = useCallback(() => {\n    setDateInputValidated(!dateInput)\n    const parsedDate = parseIsoDate(dateInput)\n    if (parsedDate) {\n      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))\n      const validateMessage = onValidate(parsedDate)\n      if (!validateMessage) onChange(parsedDate)\n      setDateInputValidated(!validateMessage)\n      setErrorMessage(validateMessage)\n    }\n  }, [dateInput, onValidate, onChange])\n\n  useEffect(() => {\n    const formatted = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''\n    setDateInput(formatted)\n    const validation = onValidate(initialDate)\n    setDateInputValidated(!validation)\n    setValidateStatus(!validation)\n    setErrorMessage(validation)\n  }, [initialDate, onValidate, setValidateStatus])\n\n  useEffect(() => {\n    if (dateInput) {\n      setValidateStatus(isValidDate(dateInput))\n      if (!validateDateFormat(dateInput)) {\n        setErrorMessage('Supported format is YYYY-MM-DD')\n      } else {\n        const parsedDate = parseIsoDate(dateInput)\n        if (!parsedDate) {\n          setErrorMessage('Invalid date')\n        } else {\n          const validateMessage = onValidate(parsedDate)\n          if (!validateMessage) onChange(parsedDate)\n          setDateInputValidated(!validateMessage)\n          setErrorMessage(validateMessage)\n        }\n      }\n    }\n  }, [dateInput, onValidate, onChange, setValidateStatus])\n\n  // native autoFocus scrolls the page when inside a FloatingPortal; use preventScroll instead\n  useEffect(() => {\n    if (autoFocus) inputRef.current?.focus({ preventScroll: true })\n  }, [])\n\n  return (\n    <Input\n      className=\"dateInput\"\n      data-testid=\"test-date-input\"\n      errorText={!dateInputValidated && <T size=\"md\">{errorMessage}</T>}\n      inputRef={inputRef}\n      onBlur={handleOnBlur}\n      onChange={e => setDateInput(e.target.value)}\n      placeholder=\"YYYY-MM-DD\"\n      size=\"md\"\n      state={!dateInputValidated ? 'error' : 'default'}\n      value={dateInput}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAeA,MAAM,eAAe,eAAuB,CAAC,CAAC,mBAAmB,UAAU,KAAK,CAAC,CAAC,aAAa,UAAU;AAEzG,MAAa,aAAa,EAAE,aAAa,UAAU,YAAY,mBAAmB,WAAW,GAAG,WAAkB;CAChH,MAAM,WAAW,OAAgC,IAAI;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAChC,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,MAAM,CAAC,IAAI,EAC7E;CACA,MAAM,CAAC,oBAAoB,yBAAyB,SAAkB,IAAI;CAC1E,MAAM,CAAC,cAAc,mBAAmB,SAAiB,EAAE;CAE3D,MAAM,eAAe,kBAAkB;EACrC,sBAAsB,CAAC,SAAS;EAChC,MAAM,aAAa,aAAa,SAAS;EACzC,IAAI,YAAY;GACd,aAAa,WAAW,YAAY,cAAc,EAAE,UAAU,MAAM,CAAC,CAAC;GACtE,MAAM,kBAAkB,WAAW,UAAU;GAC7C,IAAI,CAAC,iBAAiB,SAAS,UAAU;GACzC,sBAAsB,CAAC,eAAe;GACtC,gBAAgB,eAAe;EACjC;CACF,GAAG;EAAC;EAAW;EAAY;CAAQ,CAAC;CAEpC,gBAAgB;EACd,MAAM,YAAY,cAAc,WAAW,aAAa,cAAc,EAAE,UAAU,MAAM,CAAC,IAAI;EAC7F,aAAa,SAAS;EACtB,MAAM,aAAa,WAAW,WAAW;EACzC,sBAAsB,CAAC,UAAU;EACjC,kBAAkB,CAAC,UAAU;EAC7B,gBAAgB,UAAU;CAC5B,GAAG;EAAC;EAAa;EAAY;CAAiB,CAAC;CAE/C,gBAAgB;EACd,IAAI,WAAW;GACb,kBAAkB,YAAY,SAAS,CAAC;GACxC,IAAI,CAAC,mBAAmB,SAAS,GAC/B,gBAAgB,gCAAgC;QAC3C;IACL,MAAM,aAAa,aAAa,SAAS;IACzC,IAAI,CAAC,YACH,gBAAgB,cAAc;SACzB;KACL,MAAM,kBAAkB,WAAW,UAAU;KAC7C,IAAI,CAAC,iBAAiB,SAAS,UAAU;KACzC,sBAAsB,CAAC,eAAe;KACtC,gBAAgB,eAAe;IACjC;GACF;EACF;CACF,GAAG;EAAC;EAAW;EAAY;EAAU;CAAiB,CAAC;CAGvD,gBAAgB;EACd,IAAI,WAAW,SAAS,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CAChE,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,OAAD;EACE,WAAU;EACV,eAAY;EACZ,WAAW,CAAC,sBAAsB,oBAAC,GAAD;GAAG,MAAK;aAAM;EAAgB;EACtD;EACV,QAAQ;EACR,WAAU,MAAK,aAAa,EAAE,OAAO,KAAK;EAC1C,aAAY;EACZ,MAAK;EACL,OAAO,CAAC,qBAAqB,UAAU;EACvC,OAAO;EACP,GAAI;CACL;AAEL"}

package/dist/datePicker/datePicker.js

@@ -8,8 +8,8 @@ import { maxDateTimestamp, minDateTimestamp } from "../calendar/consts.js";
 import { Calendar } from "../calendar/calendar.js";
 import Popover from "../popover/popover.js";
 import { DateInput } from "./dateInput.js";
-import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/datePicker/datePicker.tsx
 /** Select or input a date. */
@@ -17,46 +17,47 @@ const DatePicker = vui((props, ref) => {
 	const { autoOpened, boundaries, popupPosition, placement, selectedDate: selectedDateProps, showClearButton, slotBottom, slotTop, onSelected, children, className, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("DatePicker", props);
 	const [selectedDate, setSelectedDate] = useState(selectedDateProps);
-	const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened);
+	const [isOpen, setIsOpen] = useState(!selectedDateProps && !!autoOpened);
 	const [isInvalidInputDate, setIsInvalidInputDate] = useState(true);
 	const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate);
+	const [isClearButtonVisible, setIsClearButtonVisible] = useState(!!(showClearButton && selectedDateProps));
 	const initialDateRef = useRef(selectedDateProps);
-	const isClearButtonVisible = showClearButton && initialDateRef.current;
 	const isStartDateInRange = (date) => !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true;
 	const isEndDateInRange = (date) => !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true;
 	const isValidDateRange = (date) => {
 		const minDateTime = new Date(minDateTimestamp);
 		const maxDateTime = new Date(maxDateTimestamp);
-		return date >= minDateTime || date <= maxDateTime;
+		return date >= minDateTime && date <= maxDateTime;
 	};
 	useEffect(() => {
 		if (!isOpen) {
 			setSelectedDate(selectedDateProps);
+			setIsClearButtonVisible(!!(showClearButton && selectedDateProps));
 			initialDateRef.current = selectedDateProps;
 		}
-	}, [isOpen, selectedDateProps]);
+	}, [
+		isOpen,
+		selectedDateProps,
+		showClearButton
+	]);
 	useEffect(() => {
 		setIsInvalidSelectedDate(selectedDate && !isStartDateInRange(selectedDate) || selectedDate && !isEndDateInRange(selectedDate) || selectedDate && !isValidDateRange(selectedDate) || !selectedDate);
 	}, [selectedDate]);
-	const onApplyDates = (date) => {
+	const onApplyDates = useCallback((date, close) => {
 		onSelected?.(date);
 		initialDateRef.current = date;
-		setIsOpen(false);
-	};
-	const onClear = () => {
-		onClose();
-		onSelected?.(void 0);
-	};
-	const onClose = () => {
+		setIsClearButtonVisible(!!(showClearButton && date));
+		close?.();
+	}, [onSelected, showClearButton]);
+	const onClear = useCallback((close) => {
 		setSelectedDate(void 0);
-		setIsOpen(false);
-	};
-	const onToggle = () => {
-		if (isOpen) onClose();
-		setIsOpen(!isOpen);
-	};
+		onSelected?.(void 0);
+		close?.();
+	}, [onSelected]);
+	const handlePopoverOpen = useCallback(() => setIsOpen(true), []);
+	const handlePopoverClose = useCallback(() => setIsOpen(false), []);
 	const selectDate = (range) => setSelectedDate(range?.startDate);
-	const onDateInputValidate = (date) => {
+	const onDateInputValidate = useCallback((date) => {
 		const minDateTime = new Date(minDateTimestamp);
 		const maxDateTime = new Date(maxDateTimestamp);
 		if (date) {
@@ -64,8 +65,8 @@ const DatePicker = vui((props, ref) => {
 				[isNaN(date.getTime()), "Supported format is YYYY-MM-DD"],
 				[date < minDateTime, "Invalid date, the minimum date time is 1753-01-02"],
 				[date > maxDateTime, "Invalid date, the maximum date time is 9000-12-31"],
-				[!!boundaries?.startDate && !isStartDateInRange(date), "Invalid date"],
-				[!!boundaries?.endDate && !isEndDateInRange(date), "Invalid date"]
+				[!!boundaries?.startDate && date.getTime() - boundaries.startDate.getTime() < 0, "Invalid date"],
+				[!!boundaries?.endDate && date.getTime() - boundaries.endDate.getTime() > 0, "Invalid date"]
 			].filter(([result]) => result);
 			if (validateErrorPair) {
 				const [_, message] = validateErrorPair;
@@ -74,20 +75,22 @@ const DatePicker = vui((props, ref) => {
 			}
 		}
 		return "";
-	};
+	}, [boundaries]);
+	const onDateInputChange = useCallback((date) => setSelectedDate(date), []);
+	const onDateInputValidateStatus = useCallback((inValid) => setIsInvalidInputDate(!inValid), []);
 	return /* @__PURE__ */ jsx(Box, {
 		className: cs("vui-datePicker", className),
 		position: "relative",
 		ref,
 		...styles,
 		...rest,
-		children: /* @__PURE__ */ jsxs(Popover, {
-			isOpen,
-			onClose: () => setIsOpen(false),
+		children: /* @__PURE__ */ jsx(Popover, {
+			defaultIsOpen: !selectedDateProps && autoOpened,
+			onClose: handlePopoverClose,
+			onOpen: handlePopoverOpen,
 			placement: placement ? placement : popupPosition === "right" ? "bottom-end" : void 0,
-			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			children: ({ close }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 				as: Box,
-				onClick: onToggle,
 				children
 			}), /* @__PURE__ */ jsxs(Popover.Content, {
 				column: true,
@@ -98,15 +101,14 @@ const DatePicker = vui((props, ref) => {
 					}),
 					/* @__PURE__ */ jsx(Box, {
 						display: "block",
-						mb: 0,
 						mt: 2,
 						mx: 2,
 						children: /* @__PURE__ */ jsx(DateInput, {
 							autoFocus: true,
 							initialDate: selectedDate,
-							onChange: (newDate) => setSelectedDate(newDate),
+							onChange: onDateInputChange,
 							onValidate: onDateInputValidate,
-							setValidateStatus: (inValid) => setIsInvalidInputDate(!inValid)
+							setValidateStatus: onDateInputValidateStatus
 						})
 					}),
 					/* @__PURE__ */ jsx(Box, {
@@ -129,35 +131,32 @@ const DatePicker = vui((props, ref) => {
 							w: "100%"
 						})
 					}),
-					/* @__PURE__ */ jsx(Box, {
-						overflow: "unset",
-						children: /* @__PURE__ */ jsxs(Box, {
-							alignItems: "center",
+					/* @__PURE__ */ jsxs(Box, {
+						alignItems: "center",
+						flex: 1,
+						ml: "auto",
+						pb: 2,
+						px: 2,
+						children: [isClearButtonVisible && /* @__PURE__ */ jsx(LineButton, {
 							flex: 1,
-							ml: "auto",
-							pb: 2,
-							px: 2,
-							children: [isClearButtonVisible && /* @__PURE__ */ jsx(LineButton, {
-								flex: 1,
-								onClick: onClear,
-								size: "md",
-								children: "Clear"
-							}), /* @__PURE__ */ jsx(Button, {
-								disabled: isInvalidSelectedDate || isInvalidInputDate,
-								flex: 1,
-								ml: isClearButtonVisible ? 1 : 0,
-								onClick: () => onApplyDates(selectedDate),
-								size: "md",
-								children: "Apply"
-							})]
-						})
+							onClick: () => onClear(close),
+							size: "md",
+							children: "Clear"
+						}), /* @__PURE__ */ jsx(Button, {
+							disabled: isInvalidSelectedDate || isInvalidInputDate,
+							flex: 1,
+							ml: isClearButtonVisible ? 1 : 0,
+							onClick: () => onApplyDates(selectedDate, close),
+							size: "md",
+							children: "Apply"
+						})]
 					}),
 					!!slotBottom && /* @__PURE__ */ jsx(Box, {
 						px: 2,
 						children: slotBottom
 					})
 				]
-			})]
+			})] })
 		})
 	});
 });
@@ -165,5 +164,5 @@ DatePicker.displayName = "DatePicker";
 
 //#endregion
 export { DatePicker, DatePicker as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=datePicker.js.map

package/dist/datePicker/datePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport type { DateRange } from '../calendar'\nimport type { DatePickerProps } from './datePicker.types'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n  const isClearButtonVisible = showClearButton && initialDateRef.current\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime || date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = (date?: Date) => {\n    onSelected?.(date)\n    initialDateRef.current = date\n    setIsOpen(false)\n  }\n\n  const onClear = () => {\n    onClose()\n    onSelected?.(undefined)\n  }\n\n  const onClose = () => {\n    setSelectedDate(undefined)\n    setIsOpen(false)\n  }\n\n  const onToggle = () => {\n    if (isOpen) onClose()\n    setIsOpen(!isOpen)\n  }\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = (date?: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n\n    if (date) {\n      const conditions: [boolean, string][] = [\n        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],\n        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date'],\n      ]\n      const [validateErrorPair] = conditions.filter(([result]) => result)\n\n      if (validateErrorPair) {\n        const [_, message] = validateErrorPair\n        setIsInvalidInputDate(true)\n        return message\n      }\n    }\n    return ''\n  }\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        <Popover.Trigger as={Box} onClick={onToggle}>\n          {children}\n        </Popover.Trigger>\n        <Popover.Content column>\n          {!!slotTop && <Box px={2}>{slotTop}</Box>}\n          <Box display=\"block\" mb={0} mt={2} mx={2}>\n            <DateInput\n              autoFocus\n              initialDate={selectedDate}\n              onChange={newDate => setSelectedDate(newDate)}\n              onValidate={onDateInputValidate}\n              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}\n            />\n          </Box>\n          <Box mx={2} my={1}>\n            <Calendar\n              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n              fixedNumberOfWeeks\n              fontWeight={500}\n              minH={200}\n              mode=\"exact\"\n              onSelectDates={range => selectDate(range)}\n              selectedDates={{ startDate: selectedDate, endDate: undefined }}\n              w=\"100%\"\n            />\n          </Box>\n          <Box overflow=\"unset\">\n            <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n              {isClearButtonVisible && (\n                <LineButton flex={1} onClick={onClear} size=\"md\">\n                  Clear\n                </LineButton>\n              )}\n              <Button\n                disabled={isInvalidSelectedDate || isInvalidInputDate}\n                flex={1}\n                ml={isClearButtonVisible ? 1 : 0}\n                onClick={() => onApplyDates(selectedDate)}\n                size=\"md\"\n              >\n                Apply\n              </Button>\n            </Box>\n          </Box>\n          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n        </Popover.Content>\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":"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"}
+{"version":3,"file":"datePicker.js","names":[],"sources":["../../src/datePicker/datePicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { DateRange } from '../calendar'\nimport type { DatePickerProps } from './datePicker.types'\n\nimport Box from '../box'\nimport Button, { LineButton } from '../button'\nimport Calendar, { maxDateTimestamp, minDateTimestamp } from '../calendar'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport Popover from '../popover'\nimport { cs } from '../utils'\nimport { DateInput } from './dateInput'\n\n/** Select or input a date. */\nexport const DatePicker = vui<'span', DatePickerProps>((props, ref) => {\n  const {\n    autoOpened,\n    boundaries,\n    popupPosition,\n    placement,\n    selectedDate: selectedDateProps,\n    showClearButton,\n    slotBottom,\n    slotTop,\n    onSelected,\n    children,\n    className,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('DatePicker', props)\n\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(selectedDateProps)\n  const [isOpen, setIsOpen] = useState(!selectedDateProps && !!autoOpened)\n  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)\n  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)\n  const [isClearButtonVisible, setIsClearButtonVisible] = useState(!!(showClearButton && selectedDateProps))\n  const initialDateRef = useRef<Date | undefined>(selectedDateProps)\n\n  const isStartDateInRange = (date: Date) =>\n    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true\n\n  const isEndDateInRange = (date: Date) =>\n    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true\n\n  const isValidDateRange = (date: Date) => {\n    const minDateTime = new Date(minDateTimestamp)\n    const maxDateTime = new Date(maxDateTimestamp)\n    return date >= minDateTime && date <= maxDateTime\n  }\n\n  useEffect(() => {\n    if (!isOpen) {\n      setSelectedDate(selectedDateProps)\n      setIsClearButtonVisible(!!(showClearButton && selectedDateProps))\n      initialDateRef.current = selectedDateProps\n    }\n  }, [isOpen, selectedDateProps, showClearButton])\n\n  useEffect(() => {\n    setIsInvalidSelectedDate(\n      (selectedDate && !isStartDateInRange(selectedDate)) ||\n        (selectedDate && !isEndDateInRange(selectedDate)) ||\n        (selectedDate && !isValidDateRange(selectedDate)) ||\n        !selectedDate,\n    )\n  }, [selectedDate])\n\n  const onApplyDates = useCallback(\n    (date?: Date, close?: () => void) => {\n      onSelected?.(date)\n      initialDateRef.current = date\n      setIsClearButtonVisible(!!(showClearButton && date))\n      close?.()\n    },\n    [onSelected, showClearButton],\n  )\n\n  const onClear = useCallback(\n    (close?: () => void) => {\n      setSelectedDate(undefined)\n      onSelected?.(undefined)\n      close?.()\n    },\n    [onSelected],\n  )\n\n  const handlePopoverOpen = useCallback(() => setIsOpen(true), [])\n  const handlePopoverClose = useCallback(() => setIsOpen(false), [])\n\n  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)\n\n  const onDateInputValidate = useCallback(\n    (date?: Date): string => {\n      const minDateTime = new Date(minDateTimestamp)\n      const maxDateTime = new Date(maxDateTimestamp)\n\n      if (date) {\n        const conditions: [boolean, string][] = [\n          [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],\n          [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],\n          [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],\n          [!!boundaries?.startDate && date.getTime() - boundaries.startDate.getTime() < 0, 'Invalid date'],\n          [!!boundaries?.endDate && date.getTime() - boundaries.endDate.getTime() > 0, 'Invalid date'],\n        ]\n        const [validateErrorPair] = conditions.filter(([result]) => result)\n\n        if (validateErrorPair) {\n          const [_, message] = validateErrorPair\n          setIsInvalidInputDate(true)\n          return message\n        }\n      }\n      return ''\n    },\n    [boundaries],\n  )\n\n  const onDateInputChange = useCallback((date?: Date) => setSelectedDate(date), [])\n  const onDateInputValidateStatus = useCallback((inValid: boolean) => setIsInvalidInputDate(!inValid), [])\n\n  return (\n    <Box className={cs('vui-datePicker', className)} position=\"relative\" ref={ref} {...styles} {...rest}>\n      <Popover\n        defaultIsOpen={!selectedDateProps && autoOpened}\n        onClose={handlePopoverClose}\n        onOpen={handlePopoverOpen}\n        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}\n      >\n        {({ close }) => (\n          <>\n            <Popover.Trigger as={Box}>{children}</Popover.Trigger>\n            <Popover.Content column>\n              {!!slotTop && <Box px={2}>{slotTop}</Box>}\n              <Box display=\"block\" mt={2} mx={2}>\n                <DateInput\n                  autoFocus\n                  initialDate={selectedDate}\n                  onChange={onDateInputChange}\n                  onValidate={onDateInputValidate}\n                  setValidateStatus={onDateInputValidateStatus}\n                />\n              </Box>\n              <Box mx={2} my={1}>\n                <Calendar\n                  boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}\n                  fixedNumberOfWeeks\n                  fontWeight={500}\n                  minH={200}\n                  mode=\"exact\"\n                  onSelectDates={range => selectDate(range)}\n                  selectedDates={{ startDate: selectedDate, endDate: undefined }}\n                  w=\"100%\"\n                />\n              </Box>\n              <Box alignItems=\"center\" flex={1} ml=\"auto\" pb={2} px={2}>\n                {isClearButtonVisible && (\n                  <LineButton flex={1} onClick={() => onClear(close)} size=\"md\">\n                    Clear\n                  </LineButton>\n                )}\n                <Button\n                  disabled={isInvalidSelectedDate || isInvalidInputDate}\n                  flex={1}\n                  ml={isClearButtonVisible ? 1 : 0}\n                  onClick={() => onApplyDates(selectedDate, close)}\n                  size=\"md\"\n                >\n                  Apply\n                </Button>\n              </Box>\n              {!!slotBottom && <Box px={2}>{slotBottom}</Box>}\n            </Popover.Content>\n          </>\n        )}\n      </Popover>\n    </Box>\n  )\n})\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"mappings":"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"}

package/dist/datePicker/theme.js

@@ -12,5 +12,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/definition/definition.js

@@ -90,5 +90,5 @@ Definition.displayName = "Definition";
 
 //#endregion
 export { Definition, Definition as default, DefinitionHorizontalBase, DefinitionVerticalBase };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=definition.js.map

package/dist/definition/definitionContent.js

@@ -83,5 +83,5 @@ DefinitionContent.displayName = "DefinitionContent";
 
 //#endregion
 export { DefinitionContent, DefinitionContent as default, DefinitionItemKey, DefinitionItemValue };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=definitionContent.js.map

package/dist/definition/theme.js

@@ -67,5 +67,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/dialog/consts.js

@@ -33,5 +33,5 @@ const modalClass = "vui-modal";
 
 //#endregion
 export { containerId, dialogStatusMapping, modalAnimation, modalClass, modalJustifyContent };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=consts.js.map

package/dist/dialog/context.js

@@ -5,5 +5,5 @@ const [DialogProvider, useDialogContext] = createContext({ isOptional: true });
 
 //#endregion
 export { DialogProvider, useDialogContext };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=context.js.map

package/dist/dialog/dialog.js

@@ -128,5 +128,5 @@ Dialog.displayName = "Dialog";
 
 //#endregion
 export { Dialog, Dialog as default, DialogBase };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialog.js.map

package/dist/dialog/dialogBody.js

@@ -51,5 +51,5 @@ DialogBody.displayName = "DialogBody";
 
 //#endregion
 export { DialogBody, DialogBody as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogBody.js.map

package/dist/dialog/dialogCancelButton.js

@@ -23,5 +23,5 @@ DialogCancelButton.displayName = "DialogCancelButton";
 
 //#endregion
 export { DialogCancelButton, DialogCancelButton as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogCancelButton.js.map

package/dist/dialog/dialogCloseButton.js

@@ -32,5 +32,5 @@ DialogCloseButton.displayName = "DialogCloseButton";
 
 //#endregion
 export { DialogCloseButton, DialogCloseButton as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogCloseButton.js.map

package/dist/dialog/dialogFooter.js

@@ -28,5 +28,5 @@ DialogFooter.displayName = "DialogFooter";
 
 //#endregion
 export { DialogFooter, DialogFooter as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogFooter.js.map

package/dist/dialog/dialogHeader.js

@@ -41,5 +41,5 @@ DialogHeader.displayName = "DialogHeader";
 
 //#endregion
 export { DialogHeader, DialogHeader as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogHeader.js.map

package/dist/dialog/dialogIcon.js

@@ -26,5 +26,5 @@ DialogIcon.displayName = "DialogIcon";
 
 //#endregion
 export { DialogIcon, DialogIcon as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogIcon.js.map

package/dist/dialog/dialogSubmitButton.js

@@ -23,5 +23,5 @@ DialogSubmitButton.displayName = "DialogSubmitButton";
 
 //#endregion
 export { DialogSubmitButton, DialogSubmitButton as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogSubmitButton.js.map

package/dist/dialog/dialogTitle.js

@@ -23,5 +23,5 @@ DialogTitle.displayName = "DialogTitle";
 
 //#endregion
 export { DialogTitle, DialogTitle as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dialogTitle.js.map

package/dist/dialog/theme.js

@@ -28,5 +28,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/dialog/useDialog.js

@@ -65,5 +65,5 @@ const useDialog = () => {
 
 //#endregion
 export { useDialog };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=useDialog.js.map

package/dist/dismissButton/DismissButton.js

@@ -66,5 +66,5 @@ DismissButton.displayName = "DismissButton";
 
 //#endregion
 export { DismissButton };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=DismissButton.js.map

package/dist/dismissButton/theme.js

@@ -29,5 +29,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/display/display.js

@@ -21,5 +21,5 @@ Display.displayName = "Display";
 
 //#endregion
 export { Display, Display as default, DisplayBase };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=display.js.map

package/dist/display/theme.js

@@ -25,5 +25,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/divider/divider.js

@@ -29,5 +29,5 @@ Divider.displayName = "Divider";
 
 //#endregion
 export { Divider, Divider as default, DividerBase };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=divider.js.map

package/dist/divider/theme.js

@@ -12,5 +12,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/dragAndDrop/dragAndDrop.js

@@ -106,5 +106,5 @@ DragAndDrop.displayName = "DragAndDrop";
 
 //#endregion
 export { DragAndDrop, DragAndDrop as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=dragAndDrop.js.map

package/dist/dragAndDrop/theme.js

@@ -30,5 +30,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=theme.js.map

package/dist/drawer/drawer.js

@@ -32,5 +32,5 @@ Drawer.displayName = "Drawer";
 
 //#endregion
 export { Drawer, Drawer as default };
-globalThis.__vuiVersion__ = "5.3.0"
+globalThis.__vuiVersion__ = "5.3.1"
 //# sourceMappingURL=drawer.js.map