@univerjs/design 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/index.js

@@ -25,10 +25,9 @@ function clsx(...inputs) {
 //#endregion
 //#region src/components/accordion/Accordion.tsx
 function Accordion(props) {
-	var _props$openIndex;
 	const { className, defaultOpenIndex = null, items, onOpenIndexChange } = props;
 	const [innerOpenIndex, setInnerOpenIndex] = useState(defaultOpenIndex);
-	const openIndex = (_props$openIndex = props.openIndex) !== null && _props$openIndex !== void 0 ? _props$openIndex : innerOpenIndex;
+	const openIndex = props.openIndex ?? innerOpenIndex;
 	const toggleItem = (index) => {
 		const nextOpenIndex = openIndex === index ? null : index;
 		if (props.openIndex === void 0) setInnerOpenIndex(nextOpenIndex);
@@ -37,36 +36,36 @@ function Accordion(props) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-u-comp": "accordion",
 		className: clsx("univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600", className),
-		children: items.map((item, index) => {
-			var _item$id;
-			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
-				className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
-				type: "button",
-				onClick: () => toggleItem(index),
-				children: [/* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
-					"-univer-rotate-90": openIndex !== index,
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+			className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-gray-0",
+			type: "button",
+			onClick: () => toggleItem(index),
+			children: [/* @__PURE__ */ jsx(DownIcon, {
+				"aria-hidden": "true",
+				className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+					"-univer-rotate-90 rtl:univer-rotate-90": openIndex !== index,
 					"univer-rotate-0": openIndex === index
-				}) }), /* @__PURE__ */ jsx("span", {
-					className: "univer-font-medium",
-					children: item.label
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
-					"univer-max-h-screen": openIndex === index,
-					"univer-max-h-0": openIndex !== index
-				}),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "univer-box-border univer-px-4 univer-py-1.5",
-					children: item.children
 				})
-			})] }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
-		})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "univer-font-medium",
+				children: item.label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out", {
+				"univer-max-h-screen": openIndex === index,
+				"univer-max-h-0": openIndex !== index
+			}),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-box-border univer-px-4 univer-py-1.5",
+				children: item.children
+			})
+		})] }, item.id ?? index))
 	});
 }
 
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-const avatarVariants = cva$1("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-white", {
+const avatarVariants = cva$1("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-gray-0", {
 	variants: {
 		/**
 		* The shape of the avatar
@@ -158,7 +157,7 @@ function ConfigProvider(props) {
 	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx(DirectionProvider, {
-			dir: direction !== null && direction !== void 0 ? direction : "ltr",
+			dir: direction ?? "ltr",
 			children
 		})
 	});
@@ -190,12 +189,12 @@ function Badge(props) {
 const buttonVariants = cva$1("univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid univer-text-sm univer-font-medium univer-transition-colors disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", {
 	variants: {
 		variant: {
-			default: "univer-border-gray-200 univer-bg-white univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-white dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700",
-			primary: "univer-border-primary-600 univer-bg-primary-600 univer-text-white hover:univer-bg-primary-500 active:univer-bg-primary-700",
-			danger: "univer-border-red-500 univer-bg-red-500 univer-text-white hover:univer-border-red-400 hover:univer-bg-red-400 active:univer-border-red-600 active:univer-bg-red-600",
-			text: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600",
+			default: "univer-border-gray-200 univer-bg-gray-0 univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700",
+			primary: "univer-border-primary-600 univer-bg-primary-600 univer-text-gray-0 hover:univer-bg-primary-500 active:univer-bg-primary-700",
+			danger: "univer-border-red-500 univer-bg-red-500 univer-text-gray-0 hover:univer-border-red-400 hover:univer-bg-red-400 active:univer-border-red-600 active:univer-bg-red-600",
+			text: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600",
 			link: "univer-underline-current univer-border-transparent univer-bg-transparent univer-text-primary-600 univer-underline-offset-4 hover:univer-text-primary-500 hover:univer-underline active:univer-text-primary-700",
-			ghost: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600"
+			ghost: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600"
 		},
 		size: {
 			icon: "univer-size-8 !univer-p-0",
@@ -326,7 +325,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(SubContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		...props
 	});
 }
@@ -334,7 +333,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		...props
 	}) });
 }
@@ -488,7 +487,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
 		"data-slot": "popover-content",
 		align,
 		sideOffset,
-		className: clsx("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-white dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
+		className: clsx("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-gray-0 dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
 		...props
 	}) });
 }
@@ -539,7 +538,7 @@ function pad(value, length = 2) {
 	return String(value).padStart(length, "0");
 }
 function formatDateWithPattern(value, pattern) {
-	const date = value !== null && value !== void 0 ? value : /* @__PURE__ */ new Date();
+	const date = value ?? /* @__PURE__ */ new Date();
 	if (Number.isNaN(date.getTime())) return "Invalid Date";
 	const tokenMap = {
 		YYYY: String(date.getFullYear()),
@@ -549,10 +548,7 @@ function formatDateWithPattern(value, pattern) {
 		mm: pad(date.getMinutes()),
 		ss: pad(date.getSeconds())
 	};
-	return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => {
-		var _tokenMap$token;
-		return (_tokenMap$token = tokenMap[token]) !== null && _tokenMap$token !== void 0 ? _tokenMap$token : token;
-	});
+	return pattern.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => tokenMap[token] ?? token);
 }
 
 //#endregion
@@ -561,7 +557,7 @@ function TimeInput(props) {
 	const { className, value, onValueChange } = props;
 	function handleChangeTime(event) {
 		const [hours, minutes, seconds] = event.target.value.split(":").map(Number);
-		const newValue = new Date(value !== null && value !== void 0 ? value : Date.now());
+		const newValue = new Date(value ?? Date.now());
 		newValue.setHours(hours, minutes, seconds, 0);
 		onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
 	}
@@ -569,7 +565,7 @@ function TimeInput(props) {
 		"data-u-comp": "time-input",
 		className: "univer-relative univer-mx-auto univer-mt-1 univer-w-fit",
 		children: [/* @__PURE__ */ jsx(ClockIcon, { className: "univer-absolute univer-left-2 univer-top-1/2 -univer-translate-y-1/2 univer-text-gray-600 dark:!univer-text-gray-400" }), /* @__PURE__ */ jsx("input", {
-			className: clsx("univer-block univer-h-7 univer-w-fit univer-appearance-none univer-rounded-md univer-bg-transparent univer-pl-6 univer-pr-2 univer-text-center univer-text-gray-800 univer-shadow univer-outline-none univer-transition-all univer-duration-200 focus:univer-border-primary-600 dark:!univer-text-white dark:focus:!univer-border-primary-500 [&::-webkit-calendar-picker-indicator]:univer-hidden [&::-webkit-calendar-picker-indicator]:univer-appearance-none", borderClassName, className),
+			className: clsx("univer-block univer-h-7 univer-w-fit univer-appearance-none univer-rounded-md univer-bg-transparent univer-pl-6 univer-pr-2 univer-text-center univer-text-gray-800 univer-shadow univer-outline-none univer-transition-all univer-duration-200 focus:univer-border-primary-600 dark:!univer-text-gray-0 dark:focus:!univer-border-primary-500 [&::-webkit-calendar-picker-indicator]:univer-hidden [&::-webkit-calendar-picker-indicator]:univer-appearance-none", borderClassName, className),
 			type: "time",
 			step: "1",
 			value: formatDateWithPattern(value, "HH:mm:ss"),
@@ -659,8 +655,8 @@ function Calendar(props) {
 	const { direction = "ltr", locale } = useContext(ConfigContext);
 	const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
 	const today = /* @__PURE__ */ new Date();
-	const [currentYear, setCurrentYear] = useState((value !== null && value !== void 0 ? value : today).getFullYear());
-	const [currentMonth, setCurrentMonth] = useState((value !== null && value !== void 0 ? value : today).getMonth());
+	const [currentYear, setCurrentYear] = useState((value ?? today).getFullYear());
+	const [currentMonth, setCurrentMonth] = useState((value ?? today).getMonth());
 	const [yearDropdownOpen, setYearDropdownOpen] = useState(false);
 	function prevMonth() {
 		setCurrentMonth((prev) => {
@@ -688,9 +684,8 @@ function Calendar(props) {
 		setYearDropdownOpen(false);
 	}
 	const yearOptions = useMemo(() => {
-		var _min$getFullYear, _max$getFullYear;
-		const startYear = (_min$getFullYear = min === null || min === void 0 ? void 0 : min.getFullYear()) !== null && _min$getFullYear !== void 0 ? _min$getFullYear : currentYear - DEFAULT_YEAR_RANGE;
-		const endYear = (_max$getFullYear = max === null || max === void 0 ? void 0 : max.getFullYear()) !== null && _max$getFullYear !== void 0 ? _max$getFullYear : currentYear + DEFAULT_YEAR_RANGE;
+		const startYear = (min === null || min === void 0 ? void 0 : min.getFullYear()) ?? currentYear - DEFAULT_YEAR_RANGE;
+		const endYear = (max === null || max === void 0 ? void 0 : max.getFullYear()) ?? currentYear + DEFAULT_YEAR_RANGE;
 		return Array.from({ length: Math.max(0, endYear - startYear + 1) }, (_, index) => ({ year: startYear + index }));
 	}, [
 		currentYear,
@@ -723,37 +718,34 @@ function Calendar(props) {
 		return day && currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate();
 	}
 	function isDisabled(day) {
-		var _value$getHours, _value$getMinutes, _value$getSeconds;
 		if (!day) return false;
-		const hours = (_value$getHours = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours !== void 0 ? _value$getHours : today.getHours();
-		const minutes = (_value$getMinutes = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes !== void 0 ? _value$getMinutes : today.getMinutes();
-		const seconds = (_value$getSeconds = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds !== void 0 ? _value$getSeconds : today.getSeconds();
+		const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
+		const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
+		const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
 		const d = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
 		if (min && d < min) return true;
 		if (max && d > max) return true;
 		return false;
 	}
 	function handleChangeDate(day) {
-		var _value$getHours2, _value$getMinutes2, _value$getSeconds2;
 		if (isDisabled(day)) return;
-		const hours = (_value$getHours2 = value === null || value === void 0 ? void 0 : value.getHours()) !== null && _value$getHours2 !== void 0 ? _value$getHours2 : today.getHours();
-		const minutes = (_value$getMinutes2 = value === null || value === void 0 ? void 0 : value.getMinutes()) !== null && _value$getMinutes2 !== void 0 ? _value$getMinutes2 : today.getMinutes();
-		const seconds = (_value$getSeconds2 = value === null || value === void 0 ? void 0 : value.getSeconds()) !== null && _value$getSeconds2 !== void 0 ? _value$getSeconds2 : today.getSeconds();
+		const hours = (value === null || value === void 0 ? void 0 : value.getHours()) ?? today.getHours();
+		const minutes = (value === null || value === void 0 ? void 0 : value.getMinutes()) ?? today.getMinutes();
+		const seconds = (value === null || value === void 0 ? void 0 : value.getSeconds()) ?? today.getSeconds();
 		const selectedDate = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
 		onValueChange === null || onValueChange === void 0 || onValueChange(selectedDate);
 	}
 	function handleChangeTime(time) {
-		var _value$getDate;
 		const hours = time.getHours();
 		const minutes = time.getMinutes();
 		const seconds = time.getSeconds();
-		const updatedDate = new Date(currentYear, currentMonth, (_value$getDate = value === null || value === void 0 ? void 0 : value.getDate()) !== null && _value$getDate !== void 0 ? _value$getDate : today.getDate(), hours, minutes, seconds);
+		const updatedDate = new Date(currentYear, currentMonth, (value === null || value === void 0 ? void 0 : value.getDate()) ?? today.getDate(), hours, minutes, seconds);
 		onValueChange === null || onValueChange === void 0 || onValueChange(updatedDate);
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "calendar",
 		dir: direction,
-		className: clsx("univer-mx-auto univer-max-w-xs univer-select-none univer-rounded univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", className),
+		className: clsx("univer-mx-auto univer-max-w-xs univer-select-none univer-rounded univer-bg-gray-0 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-0", className),
 		children: [
 			/* @__PURE__ */ jsxs("nav", {
 				className: "univer-mb-4 univer-flex univer-items-center univer-justify-between",
@@ -778,7 +770,7 @@ function Calendar(props) {
 								itemHeight: YEAR_ITEM_HEIGHT,
 								itemKey: "year",
 								children: (item) => /* @__PURE__ */ jsx("button", {
-									className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", { "univer-bg-gray-200 dark:!univer-bg-gray-500": item.year === currentYear }),
+									className: clsx("univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", { "univer-bg-gray-200 dark:!univer-bg-gray-500": item.year === currentYear }),
 									type: "button",
 									onClick: () => handleChangeYear(item.year),
 									children: item.year
@@ -819,9 +811,9 @@ function Calendar(props) {
 				className: "univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center",
 				children: days.map((day, idx) => day ? /* @__PURE__ */ jsx(DayButton, {
 					className: clsx({
-						"!univer-bg-primary-600 univer-font-bold univer-text-white": !isToday(day) && isSelected(day),
-						"dark:!univer-text-white": !isToday(day) && !isSelected(day),
-						"!univer-bg-primary-600 univer-text-white": isToday(day) && isSelected(day),
+						"!univer-bg-primary-600 univer-font-bold univer-text-gray-0": !isToday(day) && isSelected(day),
+						"dark:!univer-text-gray-0": !isToday(day) && !isSelected(day),
+						"!univer-bg-primary-600 univer-text-gray-0": isToday(day) && isSelected(day),
 						"univer-font-semibold univer-text-primary-600 dark:!univer-text-primary-500": isToday(day) && !isSelected(day),
 						"univer-cursor-not-allowed univer-opacity-40": isDisabled(day),
 						"univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800": !isSelected(day) && !isDisabled(day)
@@ -887,7 +879,7 @@ function CascaderList(props) {
 	}
 	return /* @__PURE__ */ jsxs("section", {
 		"data-u-comp": "cascader-list",
-		className: clsx("univer-overflow-auto-y univer-grid univer-h-full univer-max-h-80 univer-grid-flow-col univer-rounded univer-py-2 univer-text-gray-900 dark:!univer-text-white [&>ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r [&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200", borderClassName, scrollbarClassName, wrapperClassName),
+		className: clsx("univer-overflow-auto-y univer-grid univer-h-full univer-max-h-80 univer-grid-flow-col univer-rounded univer-py-2 univer-text-gray-900 dark:!univer-text-gray-0 [&>ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r [&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200", borderClassName, scrollbarClassName, wrapperClassName),
 		children: [activeOptions.map((options, index) => options.length ? /* @__PURE__ */ jsx("ul", {
 			className: clsx("univer-m-0 univer-h-full univer-max-h-full univer-list-none univer-overflow-auto univer-px-2", scrollbarClassName, contentClassName),
 			children: options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
@@ -925,7 +917,7 @@ function CheckboxGroup(props) {
 				key: index,
 				children: child.props.children,
 				checked: child.props.value ? value.includes(child.props.value) : false,
-				disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+				disabled: disabled ?? child.props.disabled,
 				onChange: handleChange
 			});
 			return child;
@@ -946,15 +938,15 @@ function Checkbox(props) {
 		if (!onChange || disabled) return;
 		if (typeof value !== "undefined") onChange === null || onChange === void 0 || onChange(value);
 		else {
-			var _inputRef$current$che, _inputRef$current;
-			const checked = (_inputRef$current$che = inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) !== null && _inputRef$current$che !== void 0 ? _inputRef$current$che : false;
+			var _inputRef$current;
+			const checked = (inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.checked) ?? false;
 			onChange === null || onChange === void 0 || onChange(checked);
 		}
 	}
 	return /* @__PURE__ */ jsxs("label", {
 		"data-u-comp": "checkbox",
 		className: clsx("univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-text-sm", {
-			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-white": !disabled,
+			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-gray-0": !disabled,
 			"univer-text-gray-400": disabled
 		}, className),
 		style,
@@ -973,7 +965,7 @@ function Checkbox(props) {
 					"univer-border-primary-600 univer-bg-primary-600": checked || indeterminate,
 					"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600": !checked && !indeterminate
 				}),
-				children: [checked && /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-3 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-text-white" }), indeterminate && !checked && /* @__PURE__ */ jsx("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-h-0.5 univer-w-2.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded univer-bg-white" })]
+				children: [checked && /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-3 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-text-gray-0" }), indeterminate && !checked && /* @__PURE__ */ jsx("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-h-0.5 univer-w-2.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded univer-bg-gray-0" })]
 			})]
 		}), /* @__PURE__ */ jsx("span", {
 			className: clsx("univer-select-none", contentClassName),
@@ -992,11 +984,11 @@ const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 	...props
 }));
 DialogOverlay.displayName = Overlay.displayName;
-const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, {
-	container: mountContainer !== null && mountContainer !== void 0 ? mountContainer : void 0,
-	children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content$2, {
+const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, mountContainer, overlayClassName, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, {
+	container: mountContainer ?? void 0,
+	children: [/* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }), /* @__PURE__ */ jsxs(Content$2, {
 		ref,
-		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
+		className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-gray-0 univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
 		...props,
 		children: [children, closable && /* @__PURE__ */ jsxs(Close, {
 			"data-slot": "close",
@@ -1023,7 +1015,7 @@ const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Title, {
 	ref,
-	className: clsx("univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight univer-text-gray-900 dark:!univer-text-white", className),
+	className: clsx("univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight univer-text-gray-900 dark:!univer-text-gray-0", className),
 	...props
 }));
 DialogTitle.displayName = Title.displayName;
@@ -1154,13 +1146,13 @@ function useDraggable(options = {}) {
 	};
 }
 function Dialog(props) {
-	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
+	const { className, overlayClassName, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
 	const { locale, mountContainer, direction } = useContext(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
 		defaultPosition,
 		enabled: draggable
 	});
-	const footer = propFooter !== null && propFooter !== void 0 ? propFooter : showOk || showCancel ? /* @__PURE__ */ jsxs("div", {
+	const footer = propFooter ?? (showOk || showCancel ? /* @__PURE__ */ jsxs("div", {
 		className: "univer-flex univer-justify-end univer-gap-2",
 		children: [showCancel && /* @__PURE__ */ jsx(Button, {
 			onClick: onCancel,
@@ -1170,7 +1162,7 @@ function Dialog(props) {
 			onClick: onOk,
 			children: locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
 		})]
-	}) : null;
+	}) : null);
 	const handleContentRef = useCallback((node) => {
 		if (node && draggable) setElementRef(node);
 	}, [draggable, setElementRef]);
@@ -1206,6 +1198,7 @@ function Dialog(props) {
 			},
 			closable,
 			mountContainer,
+			overlayClassName,
 			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
@@ -1366,10 +1359,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 	const thumbRef = useRef(null);
 	const alphaRef = useRef(alpha);
 	const calculateAlpha = useCallback((clientX) => {
-		var _thumbRef$current$cli, _thumbRef$current;
+		var _thumbRef$current;
 		const slider = sliderRef.current;
 		if (!slider) return;
-		const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
+		const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
 		const rect = slider.getBoundingClientRect();
 		const maxX = rect.width - thumbSize;
 		if (maxX <= 0) {
@@ -1407,10 +1400,10 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 		handlePointerUp
 	]);
 	const getThumbPosition = () => {
-		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
+		var _thumbRef$current2, _sliderRef$current;
 		const safeAlpha = Math.min(Math.max(alpha * 100, 0), 100);
-		const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
-		const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
+		const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
+		const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
 		const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
 		return `${safeAlpha / 100 * (100 - thumbOffsetPercent)}%`;
 	};
@@ -1437,7 +1430,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
 				"data-u-comp": "color-picker-alpha-slider-thumb",
-				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
+				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
 					transform: "translateY(-50%)",
@@ -1473,7 +1466,7 @@ function HexInput({ hsv, onChange }) {
 		if (!isValidHex(inputValue)) setInputValue(hexValue.replace(/^#/, ""));
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-white", borderClassName),
+		className: clsx("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-gray-0", borderClassName),
 		value: inputValue,
 		onChange: handleChange,
 		onBlur: handleBlur,
@@ -1497,7 +1490,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 			r: Math.round(r),
 			g: Math.round(g),
 			b: Math.round(b),
-			a: alpha !== null && alpha !== void 0 ? alpha : 1
+			a: alpha ?? 1
 		});
 	}, [hsv, alpha]);
 	const handleChange = (color, value) => {
@@ -1529,11 +1522,11 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 			r: Math.round(r),
 			g: Math.round(g),
 			b: Math.round(b),
-			a: alpha !== null && alpha !== void 0 ? alpha : 1
+			a: alpha ?? 1
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",
+		className: "univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-gray-0",
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				value: localValues.r,
@@ -1564,7 +1557,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 }
 function ColorInput({ hsv, alpha, format, onChange }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",
+		className: "dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-gray-0 univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "univer-relative univer-flex univer-flex-1 univer-gap-2",
 			children: [/* @__PURE__ */ jsx(HexInput, {
@@ -1686,7 +1679,7 @@ function ColorPresets({ hsv, onChange }) {
 			children: row.map((color, j) => /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: clsx("univer-box-border univer-size-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow", {
-					"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600": color.toUpperCase() === currentColor.toUpperCase(),
+					"univer-ring-2 univer-ring-offset-2 univer-ring-offset-gray-0 dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600": color.toUpperCase() === currentColor.toUpperCase(),
 					"!univer-border-gray-200": i === 0 && j === 0
 				}),
 				style: { backgroundColor: color },
@@ -1748,10 +1741,10 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 		};
 	}, [hsv]);
 	const getIndicatorStyles = () => {
-		var _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
+		var _containerRef$current3, _containerRef$current4;
 		const halfIndicatorSize = 16 / 2;
-		const w = (_containerRef$current3 = (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) !== null && _containerRef$current3 !== void 0 ? _containerRef$current3 : 0;
-		const h = (_containerRef$current5 = (_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.clientHeight) !== null && _containerRef$current5 !== void 0 ? _containerRef$current5 : 0;
+		const w = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientWidth) ?? 0;
+		const h = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientHeight) ?? 0;
 		return {
 			transform: `translate(${hsv[1] / 100 * w - halfIndicatorSize}px, ${(100 - hsv[2]) / 100 * h - halfIndicatorSize}px)`,
 			transition: isDragging ? "none" : "transform 0.1s ease-out"
@@ -1782,7 +1775,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 			},
 			onPointerMove: (e) => isDragging && handlePointerEvent(e)
 		}), /* @__PURE__ */ jsx("div", {
-			className: "univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",
+			className: "univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-gray-0 univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-will-change-transform",
 			style: getIndicatorStyles()
 		})]
 	});
@@ -1811,10 +1804,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
 	const thumbRef = useRef(null);
 	const hsvRef = useRef(hsv);
 	const calculateHue = useCallback((clientX) => {
-		var _thumbRef$current$cli, _thumbRef$current;
+		var _thumbRef$current;
 		const slider = sliderRef.current;
 		if (!slider) return;
-		const thumbSize = (_thumbRef$current$cli = (_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) !== null && _thumbRef$current$cli !== void 0 ? _thumbRef$current$cli : 0;
+		const thumbSize = ((_thumbRef$current = thumbRef.current) === null || _thumbRef$current === void 0 ? void 0 : _thumbRef$current.clientWidth) ?? 0;
 		const rect = slider.getBoundingClientRect();
 		const maxX = rect.width - thumbSize;
 		if (maxX <= 0) {
@@ -1854,10 +1847,10 @@ function HueSlider({ hsv, onChange, onChanged }) {
 		handlePointerUp
 	]);
 	const getThumbPosition = () => {
-		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _sliderRef$current;
+		var _thumbRef$current2, _sliderRef$current;
 		const safeHue = Math.min(Math.max(hsv[0], 0), 360);
-		const thumbSize = (_thumbRef$current$cli2 = (_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) !== null && _thumbRef$current$cli2 !== void 0 ? _thumbRef$current$cli2 : 0;
-		const sliderWidth = (_sliderRef$current$cl = (_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) !== null && _sliderRef$current$cl !== void 0 ? _sliderRef$current$cl : 0;
+		const thumbSize = ((_thumbRef$current2 = thumbRef.current) === null || _thumbRef$current2 === void 0 ? void 0 : _thumbRef$current2.clientWidth) ?? 0;
+		const sliderWidth = ((_sliderRef$current = sliderRef.current) === null || _sliderRef$current === void 0 ? void 0 : _sliderRef$current.clientWidth) ?? 0;
 		const thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
 		return `${safeHue / 360 * (100 - thumbOffsetPercent)}%`;
 	};
@@ -1882,7 +1875,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			children: /* @__PURE__ */ jsx("div", {
 				ref: thumbRef,
 				"data-u-comp": "color-picker-hue-slider-thumb",
-				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
+				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
 					transform: "translateY(-50%)",
@@ -2001,13 +1994,14 @@ function ColorPicker({ format = "hex", value, onChange }) {
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-flex univer-h-7 univer-items-center",
 				children: /* @__PURE__ */ jsx("a", {
-					className: "univer-cursor-pointer univer-gap-2 univer-text-sm univer-text-gray-900 univer-transition-opacity hover:univer-opacity-80 dark:!univer-text-white",
+					className: "univer-cursor-pointer univer-gap-2 univer-text-sm univer-text-gray-900 univer-transition-opacity hover:univer-opacity-80 dark:!univer-text-gray-0",
 					onClick: () => setVisible(true),
 					children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.more
 				})
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
 				className: "!univer-z-[1090] !univer-w-fit !univer-p-2.5",
+				overlayClassName: "!univer-z-[1090]",
 				closable: false,
 				maskClosable: false,
 				open: visible,
@@ -2068,7 +2062,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 function Command({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1, {
 		"data-slot": "command",
-		className: clsx("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		className: clsx("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-gray-0 univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", className),
 		...props
 	});
 }
@@ -2134,11 +2128,11 @@ function Footer(props) {
 		className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
 		children: [closable && /* @__PURE__ */ jsx(Button, {
 			onClick: onClose,
-			children: cancelText !== null && cancelText !== void 0 ? cancelText : locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
+			children: cancelText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel)
 		}), /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: onConfirm,
-			children: confirmText !== null && confirmText !== void 0 ? confirmText : locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
+			children: confirmText ?? (locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm)
 		})]
 	});
 }
@@ -2200,7 +2194,7 @@ function DatePicker(props) {
 		open,
 		onOpenChange: setOpen,
 		children: /* @__PURE__ */ jsxs("button", {
-			className: clsx("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-white", borderClassName, className),
+			className: clsx("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-gray-0", borderClassName, className),
 			type: "button",
 			children: [formatDateWithPattern(value, "YYYY-MM-DD"), /* @__PURE__ */ jsx(CalendarIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-400" })]
 		})
@@ -2254,7 +2248,7 @@ function DateRangePicker(props) {
 		open,
 		onOpenChange: setOpen,
 		children: /* @__PURE__ */ jsxs("button", {
-			className: clsx("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-white", borderClassName, className),
+			className: clsx("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-gray-0", borderClassName, className),
 			type: "button",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "univer-flex univer-gap-1",
@@ -2431,7 +2425,7 @@ function DraggableList(props) {
 		})
 	}), canUsePortal && draggingItem && ghostPosition && createPortal(/* @__PURE__ */ jsx("div", {
 		dir: direction,
-		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
+		className: clsx("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-gray-0 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
 			left: `${ghostPosition.x}px`,
@@ -2457,7 +2451,7 @@ const FormLayout = (props) => {
 			className: clsx("univer-mb-3 univer-flex univer-flex-col", className),
 			style,
 			children: [label && /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-mb-2 univer-flex univer-min-h-3.5 univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-white", { "univer-cursor-pointer": collapsable }),
+				className: clsx("univer-mb-2 univer-flex univer-min-h-3.5 univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0", { "univer-cursor-pointer": collapsable }),
 				onClick: () => setCollapsed(!collapsed),
 				children: [label, collapsable && /* @__PURE__ */ jsx(MoreUpIcon, { className: clsx("univer-ml-1 univer-transition-transform", { "univer-rotate-180": collapsed }) })]
 			}), collapsed && collapsable ? null : /* @__PURE__ */ jsxs(Fragment, { children: [desc && /* @__PURE__ */ jsx("div", {
@@ -2507,7 +2501,7 @@ const FormDualColumnLayout = (props) => {
 */
 function Pager(props) {
 	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
-	const text = propText !== null && propText !== void 0 ? propText : `${current}/${count}`;
+	const text = propText ?? `${current}/${count}`;
 	const hasValue = count > 0;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
@@ -2570,7 +2564,7 @@ function Pager(props) {
 const buttonClassName = `
     univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none
     univer-bg-transparent univer-p-0 univer-text-current
-    hover:univer-text-white
+    hover:univer-text-gray-0
 `;
 function Gallery(props) {
 	const { className, images, open, onOpenChange } = props;
@@ -2653,7 +2647,7 @@ function Gallery(props) {
 				})
 			}),
 			/* @__PURE__ */ jsxs("footer", {
-				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400",
+				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400 rtl:univer-flex-row-reverse",
 				children: [
 					hasPagination && /* @__PURE__ */ jsx(Pager, {
 						className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
@@ -2690,7 +2684,7 @@ function Gallery(props) {
 
 //#endregion
 //#region src/components/input/Input.tsx
-const inputVariants = cva$1("univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-white dark:focus:!univer-ring-primary-900", {
+const inputVariants = cva$1("univer-box-border univer-w-full univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 dark:focus:!univer-ring-primary-900", {
 	variants: { size: {
 		mini: "univer-h-7 univer-px-1.5 univer-text-sm",
 		small: "univer-h-8 univer-px-2 univer-text-sm",
@@ -2931,7 +2925,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 			}), controls && /* @__PURE__ */ jsxs("div", {
 				className: clsx("univer-absolute univer-right-px univer-top-px univer-flex univer-h-[calc(100%-2px)] univer-flex-col univer-overflow-hidden univer-rounded-r-md before:univer-absolute before:univer-top-1/2 before:univer-block before:univer-h-px before:univer-w-full before:-univer-translate-y-1/2 before:univer-bg-gray-200 before:univer-content-[\"\"] rtl:univer-left-px rtl:univer-right-auto rtl:univer-rounded-l-md rtl:univer-rounded-r-none dark:before:!univer-bg-gray-600", borderLeftClassName, borderLeftRTLClassName, controlsClassName),
 				children: [/* @__PURE__ */ jsx("span", {
-					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
+					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
 					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
 					"aria-disabled": incrementDisabled,
@@ -2943,7 +2937,7 @@ const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Num
 					},
 					children: "+"
 				}), /* @__PURE__ */ jsx("span", {
-					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
+					className: clsx("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
 					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.decrement,
 					"aria-disabled": decrementDisabled,
@@ -3010,15 +3004,15 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 		ref: containerRef,
 		className: clsx("univer-relative univer-box-border univer-flex univer-min-w-0 univer-gap-1 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-white univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
+			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-gray-0 univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
 			style: slideStyle
 		}), items.map((item) => /* @__PURE__ */ jsx("button", {
 			ref: (el) => {
 				if (el) itemRefs.current.set(item.value, el);
 			},
 			className: clsx("univer-relative univer-box-border univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
-				"univer-text-gray-900 dark:!univer-text-white": selectedItem === item.value,
-				"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white": selectedItem !== item.value
+				"univer-text-gray-900 dark:!univer-text-gray-0": selectedItem === item.value,
+				"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-gray-0": selectedItem !== item.value
 			}),
 			type: "button",
 			onClick: () => handleClick(item.value),
@@ -3170,50 +3164,47 @@ function Tooltip(props) {
 		children
 	});
 	let tooltipNode = null;
-	if (typeof document !== "undefined" && visible && title && document.body) {
-		var _coords$top, _coords$left;
-		tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
-			ref: tooltipRef,
-			dir: direction,
-			role: "tooltip",
-			className: clsx("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
+	if (typeof document !== "undefined" && visible && title && document.body) tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
+		ref: tooltipRef,
+		dir: direction,
+		role: "tooltip",
+		className: clsx("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-gray-0 univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
+		style: {
+			top: (coords === null || coords === void 0 ? void 0 : coords.top) ?? -9999,
+			left: (coords === null || coords === void 0 ? void 0 : coords.left) ?? -9999
+		},
+		onMouseEnter: () => showTooltip(),
+		onMouseLeave: () => hideTooltip(),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "univer-break-words",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			ref: arrowRef,
+			className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
 			style: {
-				top: (_coords$top = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _coords$top !== void 0 ? _coords$top : -9999,
-				left: (_coords$left = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _coords$left !== void 0 ? _coords$left : -9999
-			},
-			onMouseEnter: () => showTooltip(),
-			onMouseLeave: () => hideTooltip(),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "univer-break-words",
-				children: title
-			}), /* @__PURE__ */ jsx("div", {
-				ref: arrowRef,
-				className: "univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100",
-				style: {
-					...currentPlacement === "bottom" && {
-						top: -5,
-						left: "50%",
-						transform: "translateX(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "top" && {
-						bottom: -5,
-						left: "50%",
-						transform: "translateX(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "left" && {
-						right: -5,
-						top: "50%",
-						transform: "translateY(-50%) rotate(45deg)"
-					},
-					...currentPlacement === "right" && {
-						left: -5,
-						top: "50%",
-						transform: "translateY(-50%) rotate(45deg)"
-					}
+				...currentPlacement === "bottom" && {
+					top: -5,
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "top" && {
+					bottom: -5,
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "left" && {
+					right: -5,
+					top: "50%",
+					transform: "translateY(-50%) rotate(45deg)"
+				},
+				...currentPlacement === "right" && {
+					left: -5,
+					top: "50%",
+					transform: "translateY(-50%) rotate(45deg)"
 				}
-			})]
-		}), document.body);
-	}
+			}
+		})]
+	}), document.body);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [triggerElement, tooltipNode] });
 }
 
@@ -3249,8 +3240,7 @@ function clamp(value, min, max) {
 	return Math.max(min, Math.min(max, value));
 }
 function getStopOpacity(stop) {
-	var _stop$opacity;
-	return clamp((_stop$opacity = stop === null || stop === void 0 ? void 0 : stop.opacity) !== null && _stop$opacity !== void 0 ? _stop$opacity : 1, 0, 1);
+	return clamp((stop === null || stop === void 0 ? void 0 : stop.opacity) ?? 1, 0, 1);
 }
 function getColorWithOpacity(color, opacity) {
 	if (opacity >= 1) return color;
@@ -3273,8 +3263,7 @@ function getStopColor(stop) {
 	return getColorWithOpacity(stop.color, getStopOpacity(stop));
 }
 function getGradientAngle(value) {
-	var _ref, _value$angle;
-	return (_ref = (_value$angle = value.angle) !== null && _value$angle !== void 0 ? _value$angle : DEFAULT_VALUE.angle) !== null && _ref !== void 0 ? _ref : 0;
+	return value.angle ?? DEFAULT_VALUE.angle ?? 0;
 }
 function getCssLinearGradientAngle(value) {
 	return (getGradientAngle(value) + 90) % 360;
@@ -3323,7 +3312,7 @@ function GradientColorPicker(props) {
 	const handleAngleChange = (angle) => {
 		emitChange({
 			...valueRef.current,
-			angle: angle !== null && angle !== void 0 ? angle : 0
+			angle: angle ?? 0
 		});
 	};
 	const handleStopColorChange = (color) => {
@@ -3350,7 +3339,7 @@ function GradientColorPicker(props) {
 		});
 	};
 	const handleStopTransparencyChange = (transparency) => {
-		const nextTransparency = clamp(transparency !== null && transparency !== void 0 ? transparency : 0, 0, 100);
+		const nextTransparency = clamp(transparency ?? 0, 0, 100);
 		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
@@ -3402,7 +3391,7 @@ function GradientColorPicker(props) {
 	}, [draftValue, stops]);
 	const showAngleEditor = draftValue.type === "linear" || draftValue.type === "angular";
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(compact ? "univer-flex univer-w-full univer-min-w-0 univer-flex-col univer-gap-3 univer-rounded-md univer-bg-transparent univer-p-0 dark:!univer-bg-transparent" : "univer-flex univer-w-full univer-min-w-0 univer-max-w-80 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
+		className: clsx(compact ? "univer-flex univer-w-full univer-min-w-0 univer-flex-col univer-gap-3 univer-rounded-md univer-bg-transparent univer-p-0 dark:!univer-bg-transparent" : "univer-flex univer-w-full univer-min-w-0 univer-max-w-80 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-gray-0 univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
 		onClick: (e) => e.stopPropagation(),
 		onPointerDown: (e) => e.stopPropagation(),
 		children: [
@@ -3429,7 +3418,7 @@ function GradientColorPicker(props) {
 					const selected = draftValue.type === item.value;
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						className: clsx("univer-relative univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-0 univer-pb-2 univer-pt-0 univer-text-xs univer-transition-colors", selected ? "univer-font-medium univer-text-primary-600 dark:!univer-text-primary-300" : "univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white"),
+						className: clsx("univer-relative univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-0 univer-pb-2 univer-pt-0 univer-text-xs univer-transition-colors", selected ? "univer-font-medium univer-text-primary-600 dark:!univer-text-primary-300" : "univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-gray-0"),
 						onClick: () => handleTypeChange(item.value),
 						children: [item.label, selected && /* @__PURE__ */ jsx("span", { className: "univer-absolute univer-inset-x-2 -univer-bottom-px univer-h-0.5 univer-rounded-full univer-bg-primary-600 dark:!univer-bg-primary-300" })]
 					}, item.value);
@@ -3487,7 +3476,7 @@ function GradientColorPicker(props) {
 				}), draftValue.stops.map((stop, index) => /* @__PURE__ */ jsx("div", {
 					"data-u-comp": "gradient-color-picker-stop",
 					"data-selected": selectedIndex === index,
-					className: clsx("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
+					className: clsx("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-gray-0 univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
 						backgroundColor: getStopColor(stop)
@@ -3594,7 +3583,7 @@ const HoverCardContent = forwardRef(({ className, align = "center", sideOffset =
 	ref,
 	align,
 	sideOffset,
-	className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-w-64 univer-origin-[--radix-hover-card-content-transform-origin] univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900 dark:!univer-text-white", borderClassName, className),
+	className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-w-64 univer-origin-[--radix-hover-card-content-transform-origin] univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900 dark:!univer-text-gray-0", borderClassName, className),
 	...props
 }));
 HoverCardContent.displayName = Content$3.displayName;
@@ -3646,7 +3635,7 @@ function KBD(props) {
 	const { keyboard, className } = props;
 	const keys = keyboard.split("+");
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("univer-inline-block univer-h-6 univer-select-none univer-whitespace-nowrap univer-rounded-md univer-bg-gray-50 univer-px-2 univer-font-mono univer-text-xs/6 univer-font-medium univer-text-gray-700 dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, className),
+		className: clsx("univer-inline-block univer-h-6 univer-select-none univer-whitespace-nowrap univer-rounded-md univer-bg-gray-50 univer-px-2 univer-font-mono univer-text-xs/6 univer-font-medium univer-text-gray-700 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, className),
 		children: keys.map((text, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("kbd", {
 			className: "univer-inline-block univer-h-full",
 			children: text
@@ -3708,7 +3697,7 @@ const Messager = ({ className, ...props }) => /* @__PURE__ */ jsx(Toaster$1, {
 	expand: false,
 	icons: { loading: loadingIcon },
 	offset: { top: 16 },
-	className: clsx("[&_[data-sonner-toast]]:univer-bg-white/95 dark:[&_[data-sonner-toast]]:!univer-bg-gray-800/95 [&_[data-sonner-toast]]:univer-rounded-2xl [&_[data-sonner-toast]]:univer-border [&_[data-sonner-toast]]:univer-border-solid [&_[data-sonner-toast]]:univer-border-gray-200 [&_[data-sonner-toast]]:univer-shadow-[0_16px_40px_-20px_rgba(15,23,42,0.55)] [&_[data-sonner-toast]]:univer-backdrop-blur-sm dark:[&_[data-sonner-toast]]:!univer-border-gray-600", className),
+	className: clsx("[&_[data-sonner-toast]]:univer-bg-gray-0/95 dark:[&_[data-sonner-toast]]:!univer-bg-gray-800/95 [&_[data-sonner-toast]]:univer-rounded-2xl [&_[data-sonner-toast]]:univer-border [&_[data-sonner-toast]]:univer-border-solid [&_[data-sonner-toast]]:univer-border-gray-200 [&_[data-sonner-toast]]:univer-shadow-[0_16px_40px_-20px_rgba(15,23,42,0.55)] [&_[data-sonner-toast]]:univer-backdrop-blur-sm dark:[&_[data-sonner-toast]]:!univer-border-gray-600", className),
 	toastOptions: {
 		duration: DEFAULT_MESSAGE_DURATION,
 		classNames: {
@@ -3732,7 +3721,7 @@ const Messager = ({ className, ...props }) => /* @__PURE__ */ jsx(Toaster$1, {
 	...props
 });
 const message = ({ content, duration, id, onClose, type = "info" }) => {
-	const messageId = id !== null && id !== void 0 ? id : createMessageId();
+	const messageId = id ?? createMessageId();
 	const method = resolveToastMethod(type);
 	let closed = false;
 	const handleClose = () => {
@@ -3744,7 +3733,7 @@ const message = ({ content, duration, id, onClose, type = "info" }) => {
 	method(content, {
 		id: messageId,
 		toasterId: MESSAGE_TOASTER_ID,
-		duration: duration !== null && duration !== void 0 ? duration : DEFAULT_MESSAGE_DURATION,
+		duration: duration ?? DEFAULT_MESSAGE_DURATION,
 		icon: type === "loading" ? void 0 : iconMap[type],
 		onDismiss: handleClose,
 		onAutoClose: handleClose
@@ -3794,10 +3783,13 @@ function PanelSection(props) {
 				"univer-cursor-default": !collapsible
 			}),
 			onClick: () => collapsible && setExpanded((v) => !v),
-			children: [collapsible && /* @__PURE__ */ jsx(DownIcon, { className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
-				"-univer-rotate-90": !expanded,
-				"univer-rotate-0": expanded
-			}) }), /* @__PURE__ */ jsx("span", { children: title })]
+			children: [collapsible && /* @__PURE__ */ jsx(DownIcon, {
+				"aria-hidden": "true",
+				className: clsx("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+					"-univer-rotate-90 rtl:univer-rotate-90": !expanded,
+					"univer-rotate-0": expanded
+				})
+			}), /* @__PURE__ */ jsx("span", { children: title })]
 		}), /* @__PURE__ */ jsx("div", {
 			id: contentId,
 			role: "region",
@@ -3926,7 +3918,7 @@ function RadioGroup(props) {
 				children: child.props.children,
 				value: child.props.value,
 				checked: value === child.props.value,
-				disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+				disabled: disabled ?? child.props.disabled,
 				onChange: handleChange
 			});
 			return child;
@@ -3954,7 +3946,7 @@ function Radio(props) {
 	return /* @__PURE__ */ jsxs("label", {
 		"data-u-comp": "radio",
 		className: clsx("univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-text-sm", {
-			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-white": !disabled,
+			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-gray-0": !disabled,
 			"univer-text-gray-400": disabled
 		}),
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -3972,7 +3964,7 @@ function Radio(props) {
 					"univer-border-primary-600 univer-bg-primary-600 dark:!univer-bg-primary-600": checked,
 					"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600": !checked
 				}),
-				children: checked && /* @__PURE__ */ jsx("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-2 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-white" })
+				children: checked && /* @__PURE__ */ jsx("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-2 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0" })
 			})]
 		}), /* @__PURE__ */ jsx("span", { children })]
 	});
@@ -4010,7 +4002,7 @@ function SelectList(props) {
 		children: options.map((option, index) => {
 			const checked = value.indexOf(option.value) > -1;
 			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
-				className: clsx("univer-relative univer-block univer-cursor-pointer univer-select-none univer-rounded univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", optionClassName, { "univer-bg-gray-200 dark:!univer-bg-gray-500": checked }),
+				className: clsx("univer-relative univer-block univer-cursor-pointer univer-select-none univer-rounded univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", optionClassName, { "univer-bg-gray-200 dark:!univer-bg-gray-500": checked }),
 				onClick: () => handleSelect(option.value),
 				children: [!hideCheckMark && checked && /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-absolute univer-left-0 univer-top-1/2 -univer-translate-y-1/2 univer-pl-2 univer-text-primary-600" }), /* @__PURE__ */ jsx("span", {
 					style: { color: option.color },
@@ -4023,9 +4015,9 @@ function SelectList(props) {
 
 //#endregion
 //#region src/components/select/Select.tsx
-const selectClassName = clsx("univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName);
+const selectClassName = clsx("univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-gray-0 univer-px-2.5 univer-transition-colors univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName);
 function Select(props) {
-	const { className, value, disabled = false, options = [], borderless = false, onChange } = props;
+	const { className, value, disabled = false, options = [], borderless = false, side, avoidCollisions, onChange } = props;
 	const [open, setOpen] = useState(false);
 	function handleOpenChange(open) {
 		setOpen(open);
@@ -4075,6 +4067,8 @@ function Select(props) {
 		open,
 		items,
 		disabled,
+		side,
+		avoidCollisions,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-u-comp": "select",
@@ -4086,9 +4080,9 @@ function Select(props) {
 				"univer-cursor-pointer": !disabled && !open
 			}, className),
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-white",
+				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-gray-0",
 				children: displayValue
-			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-white" })]
+			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
 	});
 }
@@ -4115,7 +4109,11 @@ function MultipleSelect(props) {
 				}
 			};
 		});
-	}, [options]);
+	}, [
+		onChange,
+		options,
+		value
+	]);
 	function handleClose(item) {
 		const newValue = value.filter((v) => v !== item);
 		onChange(newValue);
@@ -4147,7 +4145,7 @@ function MultipleSelect(props) {
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2",
 				children: displayValue
-			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-white" })]
+			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
 	});
 }
@@ -4206,7 +4204,7 @@ const Switch = (props) => {
 					"univer-bg-primary-600": checked,
 					"univer-bg-gray-200 dark:!univer-bg-gray-600": !checked
 				}),
-				children: /* @__PURE__ */ jsx("span", { className: clsx("univer-absolute univer-bottom-0.5 univer-left-0.5 univer-size-3 univer-rounded-full univer-bg-white univer-transition-transform univer-duration-200", { "univer-translate-x-3": checked }) })
+				children: /* @__PURE__ */ jsx("span", { className: clsx("univer-absolute univer-bottom-0.5 univer-left-0.5 univer-size-3 univer-rounded-full univer-bg-gray-0 univer-transition-transform univer-duration-200", { "univer-translate-x-3": checked }) })
 			})]
 		})
 	});
@@ -4251,7 +4249,7 @@ const Textarea = forwardRef((props, ref) => {
 		ref: textareaRef,
 		"data-u-comp": "textarea",
 		"data-slot": "textarea",
-		className: clsx("univer-box-border univer-flex univer-w-full univer-resize univer-rounded-md univer-bg-transparent univer-p-2 univer-text-base univer-text-gray-900 univer-outline-none univer-transition-[color,box-shadow] placeholder:univer-text-gray-200 disabled:univer-cursor-not-allowed disabled:univer-opacity-50 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx("univer-box-border univer-flex univer-w-full univer-resize univer-rounded-md univer-bg-transparent univer-p-2 univer-text-base univer-text-gray-900 univer-outline-none univer-transition-[color,box-shadow] placeholder:univer-text-gray-200 disabled:univer-cursor-not-allowed disabled:univer-opacity-50 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		onChange: handleChange,
 		...restProps
 	});
@@ -4269,7 +4267,7 @@ function Toaster({ visibleToasts, ...props }) {
 			error: "[&_[data-icon]]:univer-text-red-500",
 			warning: "[&_[data-icon]]:univer-text-yellow-500"
 		} },
-		visibleToasts: visibleToasts !== null && visibleToasts !== void 0 ? visibleToasts : 5,
+		visibleToasts: visibleToasts ?? 5,
 		...props
 	});
 }
@@ -4291,7 +4289,7 @@ const findNodePathFromTree = (tree, key) => {
 	return result;
 };
 const createCacheWithFindNodePathFromTree = (tree, defaultCache) => {
-	const cache = defaultCache !== null && defaultCache !== void 0 ? defaultCache : /* @__PURE__ */ new Map();
+	const cache = defaultCache ?? /* @__PURE__ */ new Map();
 	let cacheTree = tree;
 	return {
 		findNodePathFromTreeWithCache: (key) => {
@@ -4497,7 +4495,7 @@ function Tree(props) {
 		}, key);
 	}
 	return /* @__PURE__ */ jsx("section", {
-		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-white",
+		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-gray-0",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
 			style,