@univerjs/design 0.25.1 → 1.0.0-alpha.1

package/lib/cjs/index.js

@@ -7,10 +7,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let _radix_ui_react_direction = require("@radix-ui/react-direction");
-let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 let react_dom = require("react-dom");
-let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 let _radix_ui_react_hover_card = require("@radix-ui/react-hover-card");
 let sonner = require("sonner");
 let react_transition_group = require("react-transition-group");
@@ -59,10 +59,7 @@ function Accordion(props) {
 
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-const avatarVariants = (0, class_variance_authority.cva)(`
-      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 = (0, class_variance_authority.cva)("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-white", {
 	variants: {
 		/**
 		* The shape of the avatar
@@ -136,55 +133,15 @@ function Badge(props) {
 
 //#endregion
 //#region src/components/button/Button.tsx
-const buttonVariants = (0, class_variance_authority.cva)(`
-      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
-    `, {
+const buttonVariants = (0, class_variance_authority.cva)("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
-                `,
-			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
-                `
+			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",
+			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"
 		},
 		size: {
 			small: "univer-h-6 univer-rounded-md univer-px-1.5 univer-text-xs",
@@ -311,6 +268,243 @@ const borderBottomClassName = clsx$1(borderBasicClassName, "univer-border-l-0 un
 const borderRightClassName = clsx$1(borderBasicClassName, "univer-border-l-0 univer-border-b-0 univer-border-t-0 univer-border-r");
 const divideYClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid";
 const divideXClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid";
+const resetButtonClassName = "univer-m-0 univer-flex univer-appearance-none univer-items-center univer-justify-center univer-border-0 univer-bg-transparent univer-p-0 univer-leading-none univer-outline-none univer-cursor-pointer";
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenuPrimitive.tsx
+function DropdownMenuPrimitive({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: clsx$1("univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[state=open]:univer-bg-gray-100 focus:univer-bg-gray-100 dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: clsx$1("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),
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: clsx$1("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),
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[variant=destructive]:univer-text-red-600 data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 data-[variant=destructive]:focus:univer-bg-red-50 dark:data-[variant=destructive]:!univer-text-red-400 dark:focus:!univer-bg-gray-600 dark:data-[variant=destructive]:focus:!univer-bg-red-900 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		checked,
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
+		className: clsx$1("-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenu.tsx
+function DropdownMenu(props) {
+	const { children, items, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	function renderMenuItem(item, index) {
+		const { className, type } = item;
+		if (type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className }, index);
+		else if (type === "custom") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			children: item.children
+		}, index);
+		else if (type === "radio") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioGroup, {
+			className,
+			value: item.value,
+			onValueChange: item.onSelect,
+			children: item.options.map((option, index) => {
+				if ("type" in option) {
+					if (option.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className: option.className }, index);
+				} else {
+					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioItem, {
+						value: option.value,
+						disabled: option.disabled,
+						hideIndicator: item.hideIndicator,
+						children: option.label
+					}, option.value);
+				}
+				return null;
+			})
+		}, index);
+		else if (type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuCheckboxItem, {
+			className,
+			disabled: item.disabled,
+			checked: item.checked,
+			onSelect: () => {
+				var _item$onSelect;
+				(_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item, item.value);
+			},
+			children: item.label
+		}, index);
+		else if (type === "item") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
+			className,
+			disabled: item.disabled,
+			variant: item.variant,
+			onSelect: () => {
+				var _item$onSelect2;
+				(_item$onSelect2 = item.onSelect) === null || _item$onSelect2 === void 0 || _item$onSelect2.call(item, item);
+			},
+			children: item.children
+		}, index);
+		else if (type === "subItem") {
+			var _item$options;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuSub, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubContent, {
+				sideOffset: 12,
+				children: (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
+			}) })] }, index);
+		}
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuPrimitive, {
+		modal: false,
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuContent, {
+			className: "univer-text-sm",
+			collisionPadding: {
+				top: 12,
+				bottom: 12
+			},
+			onWheel: (e) => e.stopPropagation(),
+			...restProps,
+			children: items.map((item, index) => renderMenuItem(item, index))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/dropdown/PopoverPrimitive.tsx
+function PopoverPrimitive({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: clsx$1("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),
+		...props
+	}) });
+}
+
+//#endregion
+//#region src/components/dropdown/Dropdown.tsx
+function Dropdown(props) {
+	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			...restProps,
+			children: overlay
+		})]
+	});
+}
 
 //#endregion
 //#region src/helper/date.ts
@@ -373,28 +567,89 @@ function TimeInput(props) {
 }
 
 //#endregion
-//#region src/components/calendar/Calendar.tsx
-function getDaysInMonth(year, month) {
-	return new Date(year, month + 1, 0).getDate();
-}
-function getFirstDayOfWeek(year, month) {
-	return new Date(year, month, 1).getDay();
-}
-function DayButton(props) {
-	const { className, ...restProps } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		className: clsx$1("univer-size-7 univer-rounded-md univer-border-none univer-bg-transparent univer-p-1 univer-transition-all hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", className),
-		type: "button",
-		...restProps
-	});
+//#region src/components/virtual-list/VirtualList.tsx
+function VirtualList(props) {
+	const { data, itemKey, children, height, itemHeight, initialScrollIndex = 0, overscan = 2, className, style } = props;
+	const initialScrollTop = height && itemHeight ? initialScrollIndex * itemHeight : 0;
+	const scrollerRef = (0, react.useRef)(null);
+	const [scrollTop, setScrollTop] = (0, react.useState)(initialScrollTop);
+	(0, react.useEffect)(() => {
+		const scroller = scrollerRef.current;
+		if (!scroller || !height || !itemHeight) return;
+		const nextScrollTop = initialScrollIndex * itemHeight;
+		scroller.scrollTop = nextScrollTop;
+		setScrollTop(nextScrollTop);
+	}, [
+		height,
+		initialScrollIndex,
+		itemHeight
+	]);
+	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style,
+		children: data.map((item, index) => {
+			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, index) }, key);
+		})
+	});
+	const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+	const visibleCount = Math.ceil(height / itemHeight) + overscan * 2;
+	const end = Math.min(data.length, start + visibleCount);
+	const offsetY = start * itemHeight;
+	const totalHeight = data.length * itemHeight;
+	const visibleItems = data.slice(start, end);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: scrollerRef,
+		className,
+		style: {
+			...style,
+			height,
+			overflowY: "auto"
+		},
+		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: totalHeight,
+				position: "relative"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { transform: `translateY(${offsetY}px)` },
+				children: visibleItems.map((item, index) => {
+					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, start + index) }, key);
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/calendar/Calendar.tsx
+const DEFAULT_YEAR_RANGE = 100;
+const YEAR_ITEM_HEIGHT = 32;
+const YEAR_LIST_HEIGHT = 224;
+function getDaysInMonth(year, month) {
+	return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+	return new Date(year, month, 1).getDay();
+}
+function DayButton(props) {
+	const { className, ...restProps } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: clsx$1("univer-size-7 univer-rounded-md univer-border-none univer-bg-transparent univer-p-1 univer-transition-all hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", className),
+		type: "button",
+		...restProps
+	});
 }
 function Calendar(props) {
 	const { className, max, min, showTime = false, value, onValueChange } = props;
 	const { locale } = (0, react.useContext)(ConfigContext);
-	const { year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
+	const { ariaLabels, year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
 	const today = /* @__PURE__ */ new Date();
 	const [currentYear, setCurrentYear] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getFullYear());
 	const [currentMonth, setCurrentMonth] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getMonth());
+	const [yearDropdownOpen, setYearDropdownOpen] = (0, react.useState)(false);
 	function prevMonth() {
 		setCurrentMonth((prev) => {
 			if (prev === 0) {
@@ -413,6 +668,34 @@ function Calendar(props) {
 			return prev + 1;
 		});
 	}
+	function handleChangeMonth(month) {
+		setCurrentMonth(Number(month));
+	}
+	function handleChangeYear(year) {
+		setCurrentYear(year);
+		setYearDropdownOpen(false);
+	}
+	const yearOptions = (0, react.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;
+		return Array.from({ length: Math.max(0, endYear - startYear + 1) }, (_, index) => ({ year: startYear + index }));
+	}, [
+		currentYear,
+		max,
+		min
+	]);
+	const currentYearIndex = Math.max(0, yearOptions.findIndex((item) => item.year === currentYear));
+	const monthMenuItems = (0, react.useMemo)(() => [{
+		type: "radio",
+		value: String(currentMonth),
+		hideIndicator: true,
+		options: months.map((month, index) => ({
+			label: month,
+			value: String(index)
+		})),
+		onSelect: handleChangeMonth
+	}], [currentMonth, months]);
 	const daysInMonth = getDaysInMonth(currentYear, currentMonth);
 	const firstDay = getFirstDayOfWeek(currentYear, currentMonth);
 	const days = (0, react.useMemo)(() => {
@@ -464,21 +747,52 @@ function Calendar(props) {
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
-						"aria-label": "Previous Month",
+						"aria-label": ariaLabels.previousMonth,
 						onClick: prevMonth,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-rotate-180" })
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "univer-flex univer-gap-0.5 univer-text-sm univer-font-medium",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: currentYear }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: year }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: months[currentMonth] })
-						]
+						className: "univer-flex univer-items-center univer-gap-0.5 univer-text-sm univer-font-medium",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dropdown, {
+							align: "center",
+							className: "univer-w-24 univer-p-1.5",
+							open: yearDropdownOpen,
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VirtualList, {
+								className: "univer-rounded",
+								data: yearOptions,
+								height: YEAR_LIST_HEIGHT,
+								initialScrollIndex: currentYearIndex,
+								itemHeight: YEAR_ITEM_HEIGHT,
+								itemKey: "year",
+								children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: clsx$1("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 }),
+									type: "button",
+									onClick: () => handleChangeYear(item.year),
+									children: item.year
+								})
+							}),
+							onOpenChange: setYearDropdownOpen,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+								variant: "text",
+								type: "button",
+								"aria-label": ariaLabels.selectYear,
+								children: [currentYear, year]
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, {
+							align: "center",
+							className: "univer-max-h-80 univer-min-w-28 univer-overflow-auto",
+							items: monthMenuItems,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "text",
+								type: "button",
+								"aria-label": ariaLabels.selectMonth,
+								children: months[currentMonth]
+							})
+						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
 						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
-						"aria-label": "Next Month",
+						"aria-label": ariaLabels.nextMonth,
 						onClick: nextMonth,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
 					})
@@ -1765,55 +2079,6 @@ function Confirm(props) {
 	});
 }
 
-//#endregion
-//#region src/components/dropdown/PopoverPrimitive.tsx
-function PopoverPrimitive({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
-		"data-slot": "popover",
-		...props
-	});
-}
-function PopoverTrigger({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
-		"data-slot": "popover-trigger",
-		...props
-	});
-}
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
-		"data-slot": "popover-content",
-		align,
-		sideOffset,
-		className: clsx$1("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),
-		...props
-	}) });
-}
-
-//#endregion
-//#region src/components/dropdown/Dropdown.tsx
-function Dropdown(props) {
-	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
-	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
-	const isControlled = controlledOpen !== void 0;
-	const open = isControlled ? controlledOpen : uncontrolledOpen;
-	function handleChangeOpen(newOpen) {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledOpen(newOpen);
-		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverPrimitive, {
-		open,
-		onOpenChange: handleChangeOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
-			...restProps,
-			children: overlay
-		})]
-	});
-}
-
 //#endregion
 //#region src/components/date-picker/DatePicker.tsx
 /**
@@ -1919,363 +2184,176 @@ function DateRangePicker(props) {
 }
 
 //#endregion
-//#region src/components/draggable-list/DraggableList.tsx
-function moveItemByIndex(list, fromIndex, toIndex) {
-	if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= list.length || toIndex >= list.length) return list;
-	const next = [...list];
-	const [item] = next.splice(fromIndex, 1);
-	next.splice(toIndex, 0, item);
-	return next;
-}
-function DraggableList(props) {
-	const { list, onListChange, idKey, itemRender, className, style, draggableHandle, rowHeight, margin = [0, 0], onDragStart, onDragStop, ...restProps } = props;
-	const [displayList, setDisplayList] = (0, react.useState)(list);
-	const displayListRef = (0, react.useRef)(list);
-	const [draggingId, setDraggingId] = (0, react.useState)(null);
-	const [dragOverId, setDragOverId] = (0, react.useState)(null);
-	const [ghostElement, setGhostElement] = (0, react.useState)(null);
-	const [ghostPosition, setGhostPosition] = (0, react.useState)(null);
-	const [canUsePortal, setCanUsePortal] = (0, react.useState)(false);
-	const pointerIdRef = (0, react.useRef)(null);
-	const dragPointerOffsetRef = (0, react.useRef)({
-		x: 0,
-		y: 0
-	});
-	const dragItemSizeRef = (0, react.useRef)({
-		width: 0,
-		height: 0
-	});
-	const ghostContainerRef = (0, react.useRef)(null);
-	const pressedHandleIdRef = (0, react.useRef)(null);
-	const dragSourceIdRef = (0, react.useRef)(null);
-	const dragStartIndexRef = (0, react.useRef)(-1);
-	const { direction } = (0, react.useContext)(ConfigContext);
-	(0, react.useEffect)(() => {
-		if (!draggingId) {
-			setDisplayList(list);
-			displayListRef.current = list;
-		}
-	}, [draggingId, list]);
-	(0, react.useEffect)(() => {
-		setCanUsePortal(typeof document !== "undefined");
-	}, []);
-	(0, react.useEffect)(() => {
-		const container = ghostContainerRef.current;
-		if (!container) return;
-		container.replaceChildren();
-		if (ghostElement) container.appendChild(ghostElement);
-	}, [ghostElement]);
-	(0, react.useEffect)(() => {
-		if (!draggingId) return;
-		const handlePointerMove = (evt) => {
-			const sourceId = dragSourceIdRef.current;
-			if (!sourceId || pointerIdRef.current !== evt.pointerId) return;
-			setGhostPosition({
-				x: evt.clientX - dragPointerOffsetRef.current.x,
-				y: evt.clientY - dragPointerOffsetRef.current.y
-			});
-			const element = document.elementFromPoint(evt.clientX, evt.clientY);
-			const itemElement = element === null || element === void 0 ? void 0 : element.closest("[data-draggable-list-item-id]");
-			const targetId = itemElement === null || itemElement === void 0 ? void 0 : itemElement.dataset.draggableListItemId;
-			if (!targetId || targetId === sourceId) return;
-			setDragOverId(targetId);
-			setDisplayList((prev) => {
-				const fromIndex = prev.findIndex((it) => getItemId(it) === sourceId);
-				const toIndex = prev.findIndex((it) => getItemId(it) === targetId);
-				if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return prev;
-				const next = moveItemByIndex(prev, fromIndex, toIndex);
-				displayListRef.current = next;
-				return next;
-			});
-		};
-		const handlePointerUp = (evt) => {
-			if (pointerIdRef.current !== evt.pointerId) return;
-			const sourceId = dragSourceIdRef.current;
-			const startIndex = dragStartIndexRef.current;
-			const currentList = displayListRef.current;
-			if (sourceId) {
-				const finalIndex = currentList.findIndex((it) => getItemId(it) === sourceId);
-				onDragStop === null || onDragStop === void 0 || onDragStop(void 0, { y: startIndex }, { y: finalIndex });
-				if (startIndex >= 0) onListChange([...currentList]);
-			}
-			pointerIdRef.current = null;
-			pressedHandleIdRef.current = null;
-			dragSourceIdRef.current = null;
-			dragStartIndexRef.current = -1;
-			setDragOverId(null);
-			setGhostElement(null);
-			setGhostPosition(null);
-			setDraggingId(null);
-		};
-		window.addEventListener("pointermove", handlePointerMove);
-		window.addEventListener("pointerup", handlePointerUp);
-		window.addEventListener("pointercancel", handlePointerUp);
-		return () => {
-			window.removeEventListener("pointermove", handlePointerMove);
-			window.removeEventListener("pointerup", handlePointerUp);
-			window.removeEventListener("pointercancel", handlePointerUp);
-		};
-	}, [
-		draggingId,
-		onDragStop,
-		onListChange
-	]);
-	const gapStyle = (0, react.useMemo)(() => {
-		const [horizontal, vertical] = margin;
-		return {
-			rowGap: `${vertical}px`,
-			paddingLeft: horizontal ? `${horizontal}px` : void 0,
-			paddingRight: horizontal ? `${horizontal}px` : void 0,
-			...style
-		};
-	}, [margin, style]);
-	const getItemId = (item) => String(item[idKey]);
-	const draggingItem = draggingId ? displayList.find((item) => getItemId(item) === draggingId) : null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		...restProps,
-		className: clsx$1("univer-flex univer-flex-col", draggingId && "univer-cursor-grabbing univer-select-none", className),
-		style: gapStyle,
-		children: displayList.map((item, index) => {
-			const itemId = getItemId(item);
-			const isDraggingItem = draggingId === itemId;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-draggable-list-item-id": itemId,
-				className: clsx$1("univer-relative univer-transition-all univer-duration-150", isDraggingItem && "univer-opacity-0", dragOverId === itemId && !isDraggingItem && `
-                                  univer-bg-primary-50/60
-                                  dark:!univer-bg-primary-900/20
-                                  univer-rounded univer-border univer-border-primary-200
-                                  dark:!univer-border-primary-700
-                                `),
-				onPointerDownCapture: (e) => {
-					if (pointerIdRef.current !== null) return;
-					if (!draggableHandle) pressedHandleIdRef.current = itemId;
-					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
-					if (pressedHandleIdRef.current !== itemId) return;
-					const rect = e.currentTarget.getBoundingClientRect();
-					dragPointerOffsetRef.current = {
-						x: e.clientX - rect.left,
-						y: e.clientY - rect.top
-					};
-					dragItemSizeRef.current = {
-						width: rect.width,
-						height: rect.height
-					};
-					setGhostPosition({
-						x: rect.left,
-						y: rect.top
-					});
-					setGhostElement(e.currentTarget.cloneNode(true));
-					pointerIdRef.current = e.pointerId;
-					dragSourceIdRef.current = itemId;
-					dragStartIndexRef.current = index;
-					setDraggingId(itemId);
-					displayListRef.current = displayList;
-					onDragStart === null || onDragStart === void 0 || onDragStart(void 0, { y: index });
-					e.preventDefault();
-					e.currentTarget.setPointerCapture(e.pointerId);
-				},
-				style: {
-					...rowHeight ? { minHeight: `${rowHeight}px` } : void 0,
-					cursor: draggingId ? "grabbing" : void 0
-				},
-				children: [isDraggingItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "\n                                      univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded\n                                      univer-border univer-border-dashed univer-border-primary-300\n                                    " }), itemRender(item, index)]
-			}, itemId);
-		})
-	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		dir: direction,
-		className: clsx$1("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"),
-		style: {
-			zIndex: 2147483647,
-			left: `${ghostPosition.x}px`,
-			top: `${ghostPosition.y}px`,
-			width: `${dragItemSizeRef.current.width}px`,
-			height: `${dragItemSizeRef.current.height}px`,
-			opacity: .95
-		},
-		children: ghostElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: ghostContainerRef }) : itemRender(draggingItem, displayList.findIndex((item) => getItemId(item) === getItemId(draggingItem)))
-	}), document.body)] });
-}
-
-//#endregion
-//#region src/components/dropdown-menu/DropdownMenuPrimitive.tsx
-function DropdownMenuPrimitive({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Root, {
-		"data-slot": "dropdown-menu",
-		...props
-	});
-}
-function DropdownMenuPortal({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, {
-		"data-slot": "dropdown-menu-portal",
-		...props
-	});
-}
-function DropdownMenuTrigger({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Trigger, {
-		"data-slot": "dropdown-menu-trigger",
-		...props
-	});
-}
-function DropdownMenuSub({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Sub, {
-		"data-slot": "dropdown-menu-sub",
-		...props
-	});
-}
-function DropdownMenuRadioGroup({ ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.RadioGroup, {
-		"data-slot": "dropdown-menu-radio-group",
-		...props
-	});
-}
-function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.SubTrigger, {
-		"data-slot": "dropdown-menu-sub-trigger",
-		"data-inset": inset,
-		className: clsx$1("univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[state=open]:univer-bg-gray-100 focus:univer-bg-gray-100 dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", className),
-		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "ml-auto" })]
-	});
-}
-function DropdownMenuSubContent({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
-		"data-slot": "dropdown-menu-sub-content",
-		className: clsx$1("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),
-		...props
-	});
-}
-function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
-		"data-slot": "dropdown-menu-content",
-		sideOffset,
-		className: clsx$1("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),
-		...props
-	}) });
-}
-function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
-		"data-slot": "dropdown-menu-item",
-		"data-inset": inset,
-		"data-variant": variant,
-		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0", className),
-		...props
-	});
-}
-function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
-		"data-slot": "dropdown-menu-checkbox-item",
-		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
-			"univer-pl-8": !hideIndicator,
-			"univer-pl-2": hideIndicator
-		}, className),
-		checked,
-		...props,
-		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
-		}), children]
-	});
-}
-function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.RadioItem, {
-		"data-slot": "dropdown-menu-radio-item",
-		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
-			"univer-pl-8": !hideIndicator,
-			"univer-pl-2": hideIndicator
-		}, className),
-		...props,
-		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
-		}), children]
-	});
-}
-function DropdownMenuSeparator({ className, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
-		className: clsx$1("-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/components/dropdown-menu/DropdownMenu.tsx
-function DropdownMenu(props) {
-	const { children, items, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
-	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
-	const isControlled = controlledOpen !== void 0;
-	const open = isControlled ? controlledOpen : uncontrolledOpen;
-	function handleChangeOpen(newOpen) {
-		if (disabled) return;
-		if (!isControlled) setUncontrolledOpen(newOpen);
-		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
-	}
-	function renderMenuItem(item, index) {
-		const { className, type } = item;
-		if (type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className }, index);
-		else if (type === "radio") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioGroup, {
-			className,
-			value: item.value,
-			onValueChange: item.onSelect,
-			children: item.options.map((option, index) => {
-				if ("type" in option) {
-					if (option.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className: option.className }, index);
-				} else {
-					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioItem, {
-						value: option.value,
-						disabled: option.disabled,
-						hideIndicator: item.hideIndicator,
-						children: option.label
-					}, option.value);
-				}
-				return null;
-			})
-		}, index);
-		else if (type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuCheckboxItem, {
-			className,
-			disabled: item.disabled,
-			checked: item.checked,
-			onSelect: () => {
-				var _item$onSelect;
-				(_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item, item.value);
-			},
-			children: item.label
-		}, index);
-		else if (type === "item") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
-			className,
-			disabled: item.disabled,
-			onSelect: () => {
-				var _item$onSelect2;
-				(_item$onSelect2 = item.onSelect) === null || _item$onSelect2 === void 0 || _item$onSelect2.call(item, item);
-			},
-			children: item.children
-		}, index);
-		else if (type === "subItem") {
-			var _item$options;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuSub, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubContent, {
-				sideOffset: 12,
-				children: (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
-			}) })] }, index);
-		}
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuPrimitive, {
-		modal: false,
-		open,
-		onOpenChange: handleChangeOpen,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuContent, {
-			className: "univer-text-sm",
-			collisionPadding: {
-				top: 12,
-				bottom: 12
-			},
-			onWheel: (e) => e.stopPropagation(),
-			...restProps,
-			children: items.map((item, index) => renderMenuItem(item, index))
-		})]
+//#region src/components/draggable-list/DraggableList.tsx
+function moveItemByIndex(list, fromIndex, toIndex) {
+	if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= list.length || toIndex >= list.length) return list;
+	const next = [...list];
+	const [item] = next.splice(fromIndex, 1);
+	next.splice(toIndex, 0, item);
+	return next;
+}
+function DraggableList(props) {
+	const { list, onListChange, idKey, itemRender, className, style, draggableHandle, rowHeight, margin = [0, 0], onDragStart, onDragStop, ...restProps } = props;
+	const [displayList, setDisplayList] = (0, react.useState)(list);
+	const displayListRef = (0, react.useRef)(list);
+	const [draggingId, setDraggingId] = (0, react.useState)(null);
+	const [dragOverId, setDragOverId] = (0, react.useState)(null);
+	const [ghostElement, setGhostElement] = (0, react.useState)(null);
+	const [ghostPosition, setGhostPosition] = (0, react.useState)(null);
+	const [canUsePortal, setCanUsePortal] = (0, react.useState)(false);
+	const pointerIdRef = (0, react.useRef)(null);
+	const dragPointerOffsetRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const dragItemSizeRef = (0, react.useRef)({
+		width: 0,
+		height: 0
 	});
+	const ghostContainerRef = (0, react.useRef)(null);
+	const pressedHandleIdRef = (0, react.useRef)(null);
+	const dragSourceIdRef = (0, react.useRef)(null);
+	const dragStartIndexRef = (0, react.useRef)(-1);
+	const { direction } = (0, react.useContext)(ConfigContext);
+	(0, react.useEffect)(() => {
+		if (!draggingId) {
+			setDisplayList(list);
+			displayListRef.current = list;
+		}
+	}, [draggingId, list]);
+	(0, react.useEffect)(() => {
+		setCanUsePortal(typeof document !== "undefined");
+	}, []);
+	(0, react.useEffect)(() => {
+		const container = ghostContainerRef.current;
+		if (!container) return;
+		container.replaceChildren();
+		if (ghostElement) container.appendChild(ghostElement);
+	}, [ghostElement]);
+	(0, react.useEffect)(() => {
+		if (!draggingId) return;
+		const handlePointerMove = (evt) => {
+			const sourceId = dragSourceIdRef.current;
+			if (!sourceId || pointerIdRef.current !== evt.pointerId) return;
+			setGhostPosition({
+				x: evt.clientX - dragPointerOffsetRef.current.x,
+				y: evt.clientY - dragPointerOffsetRef.current.y
+			});
+			const element = document.elementFromPoint(evt.clientX, evt.clientY);
+			const itemElement = element === null || element === void 0 ? void 0 : element.closest("[data-draggable-list-item-id]");
+			const targetId = itemElement === null || itemElement === void 0 ? void 0 : itemElement.dataset.draggableListItemId;
+			if (!targetId || targetId === sourceId) return;
+			setDragOverId(targetId);
+			setDisplayList((prev) => {
+				const fromIndex = prev.findIndex((it) => getItemId(it) === sourceId);
+				const toIndex = prev.findIndex((it) => getItemId(it) === targetId);
+				if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return prev;
+				const next = moveItemByIndex(prev, fromIndex, toIndex);
+				displayListRef.current = next;
+				return next;
+			});
+		};
+		const handlePointerUp = (evt) => {
+			if (pointerIdRef.current !== evt.pointerId) return;
+			const sourceId = dragSourceIdRef.current;
+			const startIndex = dragStartIndexRef.current;
+			const currentList = displayListRef.current;
+			if (sourceId) {
+				const finalIndex = currentList.findIndex((it) => getItemId(it) === sourceId);
+				onDragStop === null || onDragStop === void 0 || onDragStop(void 0, { y: startIndex }, { y: finalIndex });
+				if (startIndex >= 0) onListChange([...currentList]);
+			}
+			pointerIdRef.current = null;
+			pressedHandleIdRef.current = null;
+			dragSourceIdRef.current = null;
+			dragStartIndexRef.current = -1;
+			setDragOverId(null);
+			setGhostElement(null);
+			setGhostPosition(null);
+			setDraggingId(null);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [
+		draggingId,
+		onDragStop,
+		onListChange
+	]);
+	const gapStyle = (0, react.useMemo)(() => {
+		const [horizontal, vertical] = margin;
+		return {
+			rowGap: `${vertical}px`,
+			paddingLeft: horizontal ? `${horizontal}px` : void 0,
+			paddingRight: horizontal ? `${horizontal}px` : void 0,
+			...style
+		};
+	}, [margin, style]);
+	const getItemId = (item) => String(item[idKey]);
+	const draggingItem = draggingId ? displayList.find((item) => getItemId(item) === draggingId) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...restProps,
+		className: clsx$1("univer-flex univer-flex-col", draggingId && "univer-cursor-grabbing univer-select-none", className),
+		style: gapStyle,
+		children: displayList.map((item, index) => {
+			const itemId = getItemId(item);
+			const isDraggingItem = draggingId === itemId;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-draggable-list-item-id": itemId,
+				className: clsx$1("univer-relative univer-transition-all univer-duration-150", isDraggingItem && "univer-opacity-0", dragOverId === itemId && !isDraggingItem && "univer-bg-primary-50/60 dark:!univer-bg-primary-900/20 univer-rounded univer-border univer-border-primary-200 dark:!univer-border-primary-700"),
+				onPointerDownCapture: (e) => {
+					if (pointerIdRef.current !== null) return;
+					if (!draggableHandle) pressedHandleIdRef.current = itemId;
+					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
+					if (pressedHandleIdRef.current !== itemId) return;
+					const rect = e.currentTarget.getBoundingClientRect();
+					dragPointerOffsetRef.current = {
+						x: e.clientX - rect.left,
+						y: e.clientY - rect.top
+					};
+					dragItemSizeRef.current = {
+						width: rect.width,
+						height: rect.height
+					};
+					setGhostPosition({
+						x: rect.left,
+						y: rect.top
+					});
+					setGhostElement(e.currentTarget.cloneNode(true));
+					pointerIdRef.current = e.pointerId;
+					dragSourceIdRef.current = itemId;
+					dragStartIndexRef.current = index;
+					setDraggingId(itemId);
+					displayListRef.current = displayList;
+					onDragStart === null || onDragStart === void 0 || onDragStart(void 0, { y: index });
+					e.preventDefault();
+					e.currentTarget.setPointerCapture(e.pointerId);
+				},
+				style: {
+					...rowHeight ? { minHeight: `${rowHeight}px` } : void 0,
+					cursor: draggingId ? "grabbing" : void 0
+				},
+				children: [isDraggingItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded univer-border univer-border-dashed univer-border-primary-300" }), itemRender(item, index)]
+			}, itemId);
+		})
+	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		dir: direction,
+		className: clsx$1("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"),
+		style: {
+			zIndex: 2147483647,
+			left: `${ghostPosition.x}px`,
+			top: `${ghostPosition.y}px`,
+			width: `${dragItemSizeRef.current.width}px`,
+			height: `${dragItemSizeRef.current.height}px`,
+			opacity: .95
+		},
+		children: ghostElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: ghostContainerRef }) : itemRender(draggingItem, displayList.findIndex((item) => getItemId(item) === getItemId(draggingItem)))
+	}), document.body)] });
 }
 
 //#endregion
@@ -2469,7 +2547,7 @@ function Gallery(props) {
 		"aria-label": "Image gallery",
 		tabIndex: -1,
 		ref: dialogRef,
-		className: clsx$1("univer-absolute univer-inset-0 univer-z-[1080] univer-flex univer-size-full univer-select-none univer-items-center univer-justify-center", {
+		className: clsx$1("univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-h-screen univer-w-screen univer-select-none univer-items-center univer-justify-center", {
 			"univer-animate-in univer-fade-in": open,
 			"univer-animate-out univer-fade-out": !open
 		}, className),
@@ -2480,9 +2558,9 @@ function Gallery(props) {
 				onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-relative",
+				className: "univer-relative univer-flex univer-w-fit univer-items-center univer-justify-center",
 				children: activeImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					className: "univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out",
+					className: "univer-h-full univer-w-full univer-object-contain univer-transition-transform univer-duration-300 univer-ease-out",
 					style: { transform: `scale(${zoomLevel})` },
 					src: activeImage,
 					alt: `Image ${activeImageIndex + 1} of ${images.length}`,
@@ -2527,13 +2605,7 @@ function Gallery(props) {
 
 //#endregion
 //#region src/components/input/Input.tsx
-const inputVariants = (0, class_variance_authority.cva)(`
-      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 = (0, class_variance_authority.cva)("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", {
 	variants: { size: {
 		mini: "univer-h-7 univer-px-1.5 univer-text-sm",
 		small: "univer-h-8 univer-px-2 univer-text-sm",
@@ -2584,10 +2656,7 @@ const Input = (0, react.forwardRef)(({ autoFocus = false, className, style, type
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref,
 			type,
-			className: clsx$1(inputVariants({ size }), borderClassName, disabled && `
-                          univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400
-                          dark:!univer-text-gray-500
-                        `, allowClear && !slot && "univer-pr-8", inputClass),
+			className: clsx$1(inputVariants({ size }), borderClassName, disabled && "univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400 dark:!univer-text-gray-500", allowClear && !slot && "univer-pr-8", inputClass),
 			placeholder,
 			value,
 			disabled,
@@ -2652,7 +2721,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 		if (formatter) return formatter(formattedValue);
 		return String(formattedValue);
 	}
-	function parseValue(val) {
+	function parseNumberValue(val) {
 		if (!val) return null;
 		let parsedValue = val;
 		if (parser) parsedValue = parser(val);
@@ -2671,21 +2740,27 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 				else result = roundedNum;
 			} else if (num.toString().includes("e")) result = Number.parseFloat(num.toFixed(16).replace(/\.?0+$/, ""));
 			else result = num;
-			if (max !== void 0 && result > max) result = max;
-			if (min !== void 0 && result < min) result = min;
 			return result;
 		} catch (e) {
 			return null;
 		}
 	}
+	function clampValue(val) {
+		if (val === null) return null;
+		if (max !== void 0 && val > max) return max;
+		if (min !== void 0 && val < min) return min;
+		return val;
+	}
 	function handleInputChange(value) {
-		setInputValue(value);
 		if (allowEmpty && value === "") {
+			setInputValue(value);
 			setInternalValue(null);
 			onChange === null || onChange === void 0 || onChange(null);
 			return;
 		}
-		const parsedValue = parseValue(value);
+		const parsedNumber = parseNumberValue(value);
+		const parsedValue = clampValue(parsedNumber);
+		setInputValue(parsedNumber !== null && parsedValue !== parsedNumber ? formatValue(parsedValue) : value);
 		setInternalValue(parsedValue);
 		onChange === null || onChange === void 0 || onChange(parsedValue);
 	}
@@ -2834,7 +2909,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "segmented",
 		ref: containerRef,
-		className: clsx$1("univer-relative univer-box-border univer-flex univer-gap-4 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
+		className: clsx$1("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__ */ (0, react_jsx_runtime.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",
 			style: slideStyle
@@ -2842,7 +2917,7 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 			ref: (el) => {
 				if (el) itemRefs.current.set(item.value, el);
 			},
-			className: clsx$1("univer-relative univer-box-border univer-flex-1 univer-cursor-pointer univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
+			className: clsx$1("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
 			}),
@@ -2988,7 +3063,7 @@ function Tooltip(props) {
 	};
 	const triggerElement = asChild ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		...commonProps,
-		className: "univer-inline-block univer-max-w-full univer-truncate",
+		className: "univer-inline-flex univer-max-w-full univer-items-center univer-truncate",
 		children
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -3069,21 +3144,68 @@ const DEFAULT_VALUE = {
 		color: "#000000",
 		offset: 100
 	}],
-	angle: 90
+	angle: 0
 };
+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);
+}
+function getColorWithOpacity(color, opacity) {
+	if (opacity >= 1) return color;
+	const value = color.trim();
+	if (/^#[0-9a-f]{3}$/i.test(value)) {
+		const [, r, g, b] = value;
+		return `rgba(${Number.parseInt(r + r, 16)}, ${Number.parseInt(g + g, 16)}, ${Number.parseInt(b + b, 16)}, ${opacity})`;
+	}
+	if (/^#[0-9a-f]{6}$/i.test(value)) return `rgba(${Number.parseInt(value.slice(1, 3), 16)}, ${Number.parseInt(value.slice(3, 5), 16)}, ${Number.parseInt(value.slice(5, 7), 16)}, ${opacity})`;
+	const rgba = /^rgba?\(([^)]+)\)$/i.exec(value);
+	if (rgba) {
+		const parts = rgba[1].split(",").map((part) => part.trim());
+		const baseAlpha = parts[3] === void 0 ? 1 : Number.parseFloat(parts[3]);
+		const alpha = Number.isFinite(baseAlpha) ? clamp(baseAlpha * opacity, 0, 1) : opacity;
+		return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+	}
+	return color;
+}
+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;
+}
+function getCssLinearGradientAngle(value) {
+	return (getGradientAngle(value) + 90) % 360;
+}
 function GradientColorPicker(props) {
-	var _value$stops$selected, _value$stops$selected2;
-	const { className, value = DEFAULT_VALUE, onChange } = props;
+	var _draftValue$stops$sel, _locale$GradientColor, _draftValue$stops$sel2;
+	const { className, compact = false, value = DEFAULT_VALUE, onChange } = props;
 	const { locale } = (0, react.useContext)(ConfigContext);
+	const [draftValue, setDraftValue] = (0, react.useState)(value);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
 	const barRef = (0, react.useRef)(null);
+	const valueRef = (0, react.useRef)(value);
 	const cleanupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		valueRef.current = draftValue;
+	}, [draftValue]);
+	(0, react.useEffect)(() => {
+		setDraftValue(value);
+	}, [value]);
+	const emitChange = (nextValue) => {
+		valueRef.current = nextValue;
+		setDraftValue(nextValue);
+		onChange === null || onChange === void 0 || onChange(nextValue);
+	};
 	(0, react.useEffect)(() => {
 		setSelectedIndex((prev) => {
-			if (prev >= value.stops.length) return Math.max(0, value.stops.length - 1);
+			if (prev >= draftValue.stops.length) return Math.max(0, draftValue.stops.length - 1);
 			return prev;
 		});
-	}, [value.stops.length]);
+	}, [draftValue.stops.length]);
 	(0, react.useEffect)(() => {
 		return () => {
 			var _cleanupRef$current;
@@ -3091,40 +3213,52 @@ function GradientColorPicker(props) {
 		};
 	}, []);
 	const stops = (0, react.useMemo)(() => {
-		return [...value.stops].sort((a, b) => a.offset - b.offset);
-	}, [value.stops]);
+		return [...draftValue.stops].sort((a, b) => a.offset - b.offset);
+	}, [draftValue.stops]);
 	const handleTypeChange = (type) => {
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			type
 		});
 	};
 	const handleAngleChange = (angle) => {
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			angle: angle !== null && angle !== void 0 ? angle : 0
 		});
 	};
 	const handleStopColorChange = (color) => {
-		const newStops = [...value.stops];
+		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
 			color
 		};
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 	};
 	const handleStopOffsetChange = (offset) => {
 		if (offset === null) return;
-		const newStops = [...value.stops];
+		const newStops = [...valueRef.current.stops];
 		newStops[selectedIndex] = {
 			...newStops[selectedIndex],
 			offset
 		};
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		emitChange({
+			...valueRef.current,
+			stops: newStops
+		});
+	};
+	const handleStopTransparencyChange = (transparency) => {
+		const nextTransparency = clamp(transparency !== null && transparency !== void 0 ? transparency : 0, 0, 100);
+		const newStops = [...valueRef.current.stops];
+		newStops[selectedIndex] = {
+			...newStops[selectedIndex],
+			opacity: (100 - nextTransparency) / 100
+		};
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 	};
@@ -3132,43 +3266,77 @@ function GradientColorPicker(props) {
 		if (!barRef.current) return;
 		const rect = barRef.current.getBoundingClientRect();
 		const offset = Math.round((e.clientX - rect.left) / rect.width * 100);
+		const leftStop = [...stops].reverse().find((s) => s.offset <= offset) || stops[0];
 		const newStop = {
-			color: ([...stops].reverse().find((s) => s.offset <= offset) || stops[0]).color,
-			offset
+			color: leftStop.color,
+			offset,
+			opacity: getStopOpacity(leftStop)
 		};
-		const newStops = [...value.stops, newStop];
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		const newStops = [...valueRef.current.stops, newStop];
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 		setSelectedIndex(newStops.length - 1);
 	};
 	const handleRemoveStop = () => {
-		if (value.stops.length <= 2) return;
-		const newStops = value.stops.filter((_, i) => i !== selectedIndex);
-		onChange === null || onChange === void 0 || onChange({
-			...value,
+		if (draftValue.stops.length <= 2) return;
+		const newStops = valueRef.current.stops.filter((_, i) => i !== selectedIndex);
+		emitChange({
+			...valueRef.current,
 			stops: newStops
 		});
 		setSelectedIndex(0);
 	};
 	const gradientPreview = (0, react.useMemo)(() => {
-		return `linear-gradient(to right, ${stops.map((s) => `${s.color} ${s.offset}%`).join(", ")})`;
+		return `linear-gradient(to right, ${stops.map((s) => `${getStopColor(s)} ${s.offset}%`).join(", ")})`;
 	}, [stops]);
 	const mainPreview = (0, react.useMemo)(() => {
-		const stopsStr = stops.map((s) => `${s.color} ${s.offset}%`).join(", ");
-		switch (value.type) {
-			case "linear": return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+		const stopsStr = stops.map((s) => `${getStopColor(s)} ${s.offset}%`).join(", ");
+		switch (draftValue.type) {
+			case "linear": return `linear-gradient(${getCssLinearGradientAngle(draftValue)}deg, ${stopsStr})`;
 			case "radial": return `radial-gradient(circle, ${stopsStr})`;
-			case "angular": return `conic-gradient(from ${value.angle}deg, ${stopsStr})`;
+			case "angular": return `conic-gradient(from ${getGradientAngle(draftValue)}deg, ${stopsStr})`;
 			case "diamond": return `radial-gradient(circle, ${stopsStr})`;
-			default: return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+			default: return `linear-gradient(${getCssLinearGradientAngle(draftValue)}deg, ${stopsStr})`;
 		}
-	}, [value, stops]);
+	}, [draftValue, stops]);
+	const showAngleEditor = draftValue.type === "linear" || draftValue.type === "angular";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: clsx$1("univer-flex univer-w-64 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$1(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),
+		onClick: (e) => e.stopPropagation(),
+		onPointerDown: (e) => e.stopPropagation(),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segmented, {
+			compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-min-w-0 univer-items-center univer-gap-4 univer-border-b univer-border-gray-100 dark:!univer-border-gray-700",
+				children: [
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.linear,
+						value: "linear"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.radial,
+						value: "radial"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angular,
+						value: "angular"
+					},
+					{
+						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.diamond,
+						value: "diamond"
+					}
+				].map((item) => {
+					const selected = draftValue.type === item.value;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: clsx$1("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"),
+						onClick: () => handleTypeChange(item.value),
+						children: [item.label, selected && /* @__PURE__ */ (0, react_jsx_runtime.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);
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Segmented, {
+				className: "univer-w-full univer-min-w-0 univer-gap-1 univer-overflow-hidden",
 				items: [
 					{
 						label: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.linear,
@@ -3187,49 +3355,67 @@ function GradientColorPicker(props) {
 						value: "diamond"
 					}
 				],
-				value: value.type,
+				value: draftValue.type,
 				onChange: (v) => handleTypeChange(v)
 			}),
+			showAngleEditor && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "gradient-color-picker-angle",
+				className: "univer-flex univer-items-center univer-justify-between univer-gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-text-xs univer-text-gray-500",
+					children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+					className: "univer-w-24",
+					value: getGradientAngle(draftValue),
+					min: 0,
+					max: 360,
+					onChange: handleAngleChange
+				})]
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"data-u-comp": "gradient-color-picker-preview",
-				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
+				className: clsx$1("univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600", compact ? "univer-h-20" : "univer-h-32"),
 				style: { background: mainPreview }
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-relative univer-mt-4 univer-h-6",
+				className: clsx$1("univer-relative univer-h-6", compact ? "univer-mt-1" : "univer-mt-4"),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: barRef,
 					"data-u-comp": "gradient-color-picker-bar",
 					className: "univer-absolute univer-inset-x-0 univer-top-1/2 univer-h-2 -univer-translate-y-1/2 univer-cursor-crosshair univer-rounded-full",
 					style: { background: gradientPreview },
 					onClick: handleAddStop
-				}), value.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), draftValue.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-u-comp": "gradient-color-picker-stop",
 					"data-selected": selectedIndex === index,
 					className: clsx$1("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"),
 					style: {
 						left: `${stop.offset}%`,
-						backgroundColor: stop.color
+						backgroundColor: getStopColor(stop)
 					},
 					onClick: (e) => {
 						e.stopPropagation();
 						setSelectedIndex(index);
 					},
 					onPointerDown: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
 						const startX = e.clientX;
 						const startOffset = stop.offset;
+						setSelectedIndex(index);
 						const handlePointerMove = (moveEvent) => {
 							if (!barRef.current) return;
+							moveEvent.preventDefault();
 							const rect = barRef.current.getBoundingClientRect();
 							const deltaOffset = (moveEvent.clientX - startX) / rect.width * 100;
 							const newOffset = Math.max(0, Math.min(100, Math.round(startOffset + deltaOffset)));
-							const newStops = [...value.stops];
+							const newStops = [...valueRef.current.stops];
 							newStops[index] = {
 								...newStops[index],
 								offset: newOffset
 							};
-							onChange === null || onChange === void 0 || onChange({
-								...value,
+							emitChange({
+								...valueRef.current,
 								stops: newStops
 							});
 						};
@@ -3250,25 +3436,28 @@ function GradientColorPicker(props) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							className: "univer-mb-0.5 univer-text-xs univer-text-gray-500",
 							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
-							value: (_value$stops$selected = value.stops[selectedIndex]) === null || _value$stops$selected === void 0 ? void 0 : _value$stops$selected.offset,
+							value: (_draftValue$stops$sel = draftValue.stops[selectedIndex]) === null || _draftValue$stops$sel === void 0 ? void 0 : _draftValue$stops$sel.offset,
 							min: 0,
 							max: 100,
 							onChange: handleStopOffsetChange
 						})]
 					}),
-					(value.type === "linear" || value.type === "angular") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
-							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+							className: "univer-mb-0.5 univer-text-xs univer-text-gray-500",
+							children: (_locale$GradientColor = locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.transparency) !== null && _locale$GradientColor !== void 0 ? _locale$GradientColor : "Transparency"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
-							value: value.angle,
+							value: Math.round((1 - getStopOpacity(draftValue.stops[selectedIndex])) * 100),
 							min: 0,
-							max: 360,
-							onChange: handleAngleChange
+							max: 100,
+							step: 10,
+							formatter: (v) => `${v}%`,
+							parser: (v) => (v === null || v === void 0 ? void 0 : v.replace(/%/g, "")) || "",
+							onChange: handleStopTransparencyChange
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3279,7 +3468,7 @@ function GradientColorPicker(props) {
 								"data-u-comp": "gradient-color-picker-delete",
 								variant: "danger",
 								onClick: handleRemoveStop,
-								disabled: value.stops.length <= 2,
+								disabled: draftValue.stops.length <= 2,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
 							})
 						})
@@ -3287,9 +3476,9 @@ function GradientColorPicker(props) {
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700",
+				className: clsx$1("univer-border-t univer-border-gray-100 dark:!univer-border-gray-700", compact ? "univer-pt-3" : "univer-pt-4"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
-					value: (_value$stops$selected2 = value.stops[selectedIndex]) === null || _value$stops$selected2 === void 0 ? void 0 : _value$stops$selected2.color,
+					value: (_draftValue$stops$sel2 = draftValue.stops[selectedIndex]) === null || _draftValue$stops$sel2 === void 0 ? void 0 : _draftValue$stops$sel2.color,
 					onChange: handleStopColorChange
 				})
 			})
@@ -3793,7 +3982,7 @@ function Select(props) {
 		return label || value;
 	}, [options, value]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, {
-		className: "max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		className: "univer-max-h-80 univer-w-[--radix-popper-anchor-width] univer-min-w-36 univer-overflow-auto",
 		align: "start",
 		open,
 		items,
@@ -3995,49 +4184,6 @@ function Toaster({ visibleToasts, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/virtual-list/VirtualList.tsx
-function VirtualList(props) {
-	const { data, itemKey, children, height, itemHeight, overscan = 2, className, style } = props;
-	const [scrollTop, setScrollTop] = (0, react.useState)(0);
-	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		style,
-		children: data.map((item, index) => {
-			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, index) }, key);
-		})
-	});
-	const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-	const visibleCount = Math.ceil(height / itemHeight) + overscan * 2;
-	const end = Math.min(data.length, start + visibleCount);
-	const offsetY = start * itemHeight;
-	const totalHeight = data.length * itemHeight;
-	const visibleItems = data.slice(start, end);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className,
-		style: {
-			...style,
-			height,
-			overflowY: "auto"
-		},
-		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: {
-				height: totalHeight,
-				position: "relative"
-			},
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: { transform: `translateY(${offsetY}px)` },
-				children: visibleItems.map((item, index) => {
-					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, start + index) }, key);
-				})
-			})
-		})
-	});
-}
-
 //#endregion
 //#region src/components/tree/util.ts
 const findNodePathFromTree = (tree, key) => {
@@ -4238,7 +4384,7 @@ function Tree(props) {
 						}
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "\n                          univer-mx-1 univer-flex univer-h-full univer-shrink univer-items-center univer-overflow-hidden\n                          univer-text-ellipsis univer-whitespace-nowrap\n                        ",
+						className: "univer-mx-1 univer-flex univer-h-full univer-shrink univer-items-center univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap",
 						onClick: (e) => {
 							e.stopPropagation();
 							handleExpendItem(treeItem);
@@ -4260,7 +4406,7 @@ function Tree(props) {
 		}, key);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-		className: "\n              univer-relative univer-select-none univer-text-gray-900\n              dark:!univer-text-white\n            ",
+		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-white",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
 			style,
@@ -4344,6 +4490,7 @@ exports.CascaderList = CascaderList;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ColorPicker = ColorPicker;
+exports.ColorPresets = ColorPresets;
 exports.ConfigContext = ConfigContext;
 exports.ConfigProvider = ConfigProvider;
 exports.Confirm = Confirm;
@@ -4389,6 +4536,12 @@ exports.borderLeftClassName = borderLeftClassName;
 exports.borderRightClassName = borderRightClassName;
 exports.borderTopClassName = borderTopClassName;
 exports.clsx = clsx$1;
+Object.defineProperty(exports, 'cva', {
+  enumerable: true,
+  get: function () {
+    return class_variance_authority.cva;
+  }
+});
 exports.divideXClassName = divideXClassName;
 exports.divideYClassName = divideYClassName;
 exports.filterLeafNode = filterLeafNode;
@@ -4399,6 +4552,7 @@ exports.mergeTreeSelected = mergeTreeSelected;
 exports.message = message;
 exports.removeMessage = removeMessage;
 exports.render = render;
+exports.resetButtonClassName = resetButtonClassName;
 exports.resizeObserverCtor = resizeObserverCtor;
 exports.scrollbarClassName = scrollbarClassName;
 exports.toast = sonner.toast;