@univerjs/design 0.20.1 → 0.21.0

package/lib/es/index.js

@@ -1,84 +1,4205 @@
-import{CalendarIcon as e,CheckMarkIcon as t,ClockIcon as n,CloseIcon as r,DeleteIcon as i,DownIcon as a,DropdownIcon as o,ErrorIcon as s,InfoIcon as c,LoadingMultiIcon as l,MoreDownIcon as u,MoreLeftIcon as d,MoreRightIcon as f,MoreUpIcon as p,OneToOneIcon as m,SuccessIcon as h,WarningIcon as g,ZoomInIcon as _,ZoomOutIcon as v}from"@univerjs/icons";import{Children as y,cloneElement as b,createContext as x,forwardRef as S,isValidElement as C,memo as w,useCallback as T,useContext as E,useEffect as D,useImperativeHandle as O,useLayoutEffect as k,useMemo as A,useRef as j,useState as M}from"react";import{clsx as N}from"clsx";import{twMerge as P}from"tailwind-merge";import{Fragment as F,jsx as I,jsxs as L}from"react/jsx-runtime";import{cva as R}from"class-variance-authority";import{Slot as z}from"@radix-ui/react-slot";import{Close as ee,Content as B,Description as V,Overlay as H,Portal as te,Root as ne,Title as re}from"@radix-ui/react-dialog";import{Content as ie,Portal as ae,Root as oe,Trigger as se}from"@radix-ui/react-popover";import{createPortal as ce}from"react-dom";import{CheckboxItem as le,Content as ue,Item as de,ItemIndicator as fe,Portal as pe,RadioGroup as me,RadioItem as he,Root as ge,Separator as _e,Sub as ve,SubContent as ye,SubTrigger as be,Trigger as xe}from"@radix-ui/react-dropdown-menu";import{Content as Se,Portal as Ce,Root as we,Trigger as Te}from"@radix-ui/react-hover-card";import{Toaster as Ee,toast as De,toast as U}from"sonner";import{CSSTransition as Oe}from"react-transition-group";import{Root as ke}from"@radix-ui/react-separator";import{createRoot as Ae}from"react-dom/client";function W(...e){return P(N(e))}function je(e){let{className:t,items:n}=e,[r,i]=M(null),o=e=>{i(r===e?null:e)};return I(`div`,{"data-u-comp":`accordion`,className:W(`univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600`,t),children:n.map((e,t)=>L(`div`,{children:[L(`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:()=>o(t),children:[I(a,{className:W(`univer-size-2.5 univer-flex-shrink-0 univer-transition-transform`,{"-univer-rotate-90":r!==t,"univer-rotate-0":r===t})}),I(`span`,{className:`univer-font-medium`,children:e.label})]}),I(`div`,{className:W(`univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out`,{"univer-max-h-screen":r===t,"univer-max-h-0":r!==t}),children:I(`div`,{className:`univer-box-border univer-px-4 univer-py-1.5`,children:e.children})})]},t))})}const Me=R(`
+import { CalendarIcon, CheckMarkIcon, ClockIcon, CloseIcon, DeleteIcon, DownIcon, DropdownIcon, ErrorIcon, InfoIcon, LoadingMultiIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreUpIcon, OneToOneIcon, SuccessIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "@univerjs/icons";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { clsx as clsx$1 } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { Close, Content, Description, Overlay, Portal, Root, Title } from "@radix-ui/react-dialog";
+import { Content as Content$1, Portal as Portal$1, Root as Root$1, Trigger } from "@radix-ui/react-popover";
+import { createPortal } from "react-dom";
+import { CheckboxItem, Content as Content$2, Item, ItemIndicator, Portal as Portal$2, RadioGroup as RadioGroup$1, RadioItem, Root as Root$2, Separator as Separator$1, Sub, SubContent, SubTrigger, Trigger as Trigger$1 } from "@radix-ui/react-dropdown-menu";
+import { Content as Content$3, Portal as Portal$3, Root as Root$3, Trigger as Trigger$2 } from "@radix-ui/react-hover-card";
+import { Toaster as Toaster$1, toast, toast as toast$1 } from "sonner";
+import { CSSTransition } from "react-transition-group";
+import { Root as Root$4 } from "@radix-ui/react-separator";
+import { createRoot } from "react-dom/client";
+
+//#region src/helper/clsx.ts
+function clsx(...inputs) {
+	return twMerge(clsx$1(inputs));
+}
+
+//#endregion
+//#region src/components/accordion/Accordion.tsx
+function Accordion(props) {
+	const { className, items } = props;
+	const [openIndex, setOpenIndex] = useState(null);
+	const toggleItem = (index) => {
+		setOpenIndex(openIndex === index ? null : index);
+	};
+	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) => /* @__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,
+				"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
+			})
+		})] }, index))
+	});
+}
+
+//#endregion
+//#region src/components/avatar/Avatar.tsx
+const avatarVariants = 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:{shape:{circle:`univer-rounded-full`,square:`univer-rounded`},size:{middle:`univer-size-9 univer-leading-9`,small:`univer-size-7 univer-leading-7`}},defaultVariants:{shape:`circle`,size:`middle`}});function Ne(e){let{children:t,className:n,style:r,title:i,alt:a,shape:o=`circle`,size:s=`middle`,src:c,fit:l=`fill`,onError:u,onLoad:d}=e,f=typeof s==`number`?{width:`${s}px`,height:`${s}px`,lineHeight:`${s}px`}:{},p={objectFit:l};return L(`span`,{className:W(Me({shape:o,size:typeof s==`number`?`middle`:s}),{"univer-bg-transparent":c},n),style:{...f,...r,...c&&p},children:[c&&I(`img`,{className:`univer-block univer-size-full`,src:c,title:i,alt:a,onError:u,onLoad:d}),t]})}function Pe(e){let{className:t,children:n,closable:i=!1,onClose:a}=e;return L(`span`,{"data-u-comp":`badge`,className:W(`univer-box-border univer-inline-flex univer-items-center univer-gap-1 univer-truncate univer-rounded-md univer-border univer-border-solid univer-border-gray-100 univer-bg-gray-100 univer-px-2.5 univer-py-0.5 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-border-gray-500 dark:!univer-bg-gray-700 dark:!univer-text-gray-300`,t),children:[I(`span`,{className:`univer-flex-1 univer-truncate`,children:n}),i&&I(`button`,{className:`univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-p-0 univer-outline-none univer-transition-opacity hover:univer-opacity-70`,type:`button`,"aria-label":`Close badge`,onClick:a,children:I(r,{className:`univer-text-current`})})]})}const Fe=R(`
+    `, {
+	variants: {
+		shape: {
+			circle: "univer-rounded-full",
+			square: "univer-rounded"
+		},
+		size: {
+			middle: "univer-size-9 univer-leading-9",
+			small: "univer-size-7 univer-leading-7"
+		}
+	},
+	defaultVariants: {
+		shape: "circle",
+		size: "middle"
+	}
+});
+/**
+* Avatar Component
+*/
+function Avatar(props) {
+	const { children, className, style, title, alt, shape = "circle", size = "middle", src, fit = "fill", onError, onLoad } = props;
+	const sizeStyle = typeof size === "number" ? {
+		width: `${size}px`,
+		height: `${size}px`,
+		lineHeight: `${size}px`
+	} : {};
+	const fitStyle = { objectFit: fit };
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx(avatarVariants({
+			shape,
+			size: typeof size === "number" ? "middle" : size
+		}), { "univer-bg-transparent": src }, className),
+		style: {
+			...sizeStyle,
+			...style,
+			...src && fitStyle
+		},
+		children: [src && /* @__PURE__ */ jsx("img", {
+			className: "univer-block univer-size-full",
+			src,
+			title,
+			alt,
+			onError,
+			onLoad
+		}), children]
+	});
+}
+
+//#endregion
+//#region src/components/badge/Badge.tsx
+function Badge(props) {
+	const { className, children, closable = false, onClose } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-u-comp": "badge",
+		className: clsx("univer-box-border univer-inline-flex univer-items-center univer-gap-1 univer-truncate univer-rounded-md univer-border univer-border-solid univer-border-gray-100 univer-bg-gray-100 univer-px-2.5 univer-py-0.5 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-border-gray-500 dark:!univer-bg-gray-700 dark:!univer-text-gray-300", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "univer-flex-1 univer-truncate",
+			children
+		}), closable && /* @__PURE__ */ jsx("button", {
+			className: "univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-p-0 univer-outline-none univer-transition-opacity hover:univer-opacity-70",
+			type: "button",
+			"aria-label": "Close badge",
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(CloseIcon, { className: "univer-text-current" })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/button/Button.tsx
+const buttonVariants = 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:`
+    `, {
+	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:`
+                `,
+			primary: `
                   univer-border-primary-600 univer-bg-primary-600 univer-text-white
                   hover:univer-bg-primary-500
                   active:univer-bg-primary-700
-                `,danger:`
+                `,
+			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:`
+                `,
+			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:`
+                `,
+			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:`
+                `,
+			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`,middle:`univer-h-8 univer-rounded-lg univer-px-2 univer-text-sm`,large:`univer-h-10 univer-rounded-lg univer-px-3 univer-text-sm`}},defaultVariants:{variant:`default`,size:`middle`}}),G=S(({className:e,variant:t,size:n,asChild:r=!1,...i},a)=>I(r?z:`button`,{className:W(Fe({variant:t,size:n,className:e})),ref:a,"data-u-comp":`button`,...i}));G.displayName=`Button`;const Ie=({className:e,orientation:t=`horizontal`,children:n})=>{let r=y.count(n),i=t===`horizontal`,a=t===`vertical`;return I(`div`,{className:W(`univer-grid`,{"univer-grid-flow-row":a,"univer-w-fit":a},e),children:y.map(n,(e,t)=>{let n=t===0,o=t===r-1;return b(e,{className:W({"!univer-rounded-l-none":i&&!n,"!univer-rounded-r-none":i&&!o,"!univer-border-l-0":i&&!n,"!univer-rounded-t-none":a&&!n,"!univer-rounded-b-none":a&&!o,"!univer-border-t-0":a&&!n},e.props.className)})})})};function Le(){return typeof window<`u`&&typeof document<`u`}const K=x({mountContainer:Le()?document.body:null});function Re(e){let{children:t,locale:n,mountContainer:r}=e,i=A(()=>({locale:n,mountContainer:r}),[n,r]);return I(K.Provider,{value:i,children:t})}const q=`univer-scrollbar-thin univer-scrollbar-track-gray-50 univer-scrollbar-thumb-gray-300 dark:!univer-scrollbar-track-gray-900 dark:!univer-scrollbar-thumb-gray-700`,J=`univer-border-gray-200 dark:!univer-border-gray-600 univer-border-solid`,Y=W(J,`univer-border`),ze=W(J,`univer-border-l univer-border-b univer-border-t-0 univer-border-r-0`),Be=W(J,`univer-border-l univer-border-b-0 univer-border-t-0 univer-border-r-0`),Ve=W(J,`univer-border-b-0 univer-border-t-0 rtl:univer-border-l-0 rtl:univer-border-r`),He=W(J,`univer-border-l-0 univer-border-b-0 univer-border-t univer-border-r-0`),Ue=W(J,`univer-border-l-0 univer-border-b univer-border-t-0 univer-border-r-0`),We=W(J,`univer-border-l-0 univer-border-b-0 univer-border-t-0 univer-border-r`),Ge=`univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid`,Ke=`univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid`;function X(e,t=2){return String(e).padStart(t,`0`)}function qe(e,t){let n=e==null?new Date:e;if(Number.isNaN(n.getTime()))return`Invalid Date`;let r={YYYY:String(n.getFullYear()),MM:X(n.getMonth()+1),DD:X(n.getDate()),HH:X(n.getHours()),mm:X(n.getMinutes()),ss:X(n.getSeconds())};return t.replace(/YYYY|MM|DD|HH|mm|ss/g,e=>{var t;return(t=r[e])==null?e:t})}function Je(e){let{className:t,value:r,onValueChange:i}=e;function a(e){let[t,n,a]=e.target.value.split(`:`).map(Number),o=new Date(r==null?Date.now():r);o.setHours(t,n,a,0),i==null||i(o)}return L(`div`,{"data-u-comp":`time-input`,className:`univer-relative univer-mx-auto univer-mt-1 univer-w-fit`,children:[I(n,{className:`univer-absolute univer-left-2 univer-top-1/2 -univer-translate-y-1/2 univer-text-gray-600 dark:!univer-text-gray-400`}),I(`input`,{className:W(`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`,Y,t),type:`time`,step:`1`,value:qe(r,`HH:mm:ss`),onChange:a})]})}function Ye(e,t){return new Date(e,t+1,0).getDate()}function Xe(e,t){return new Date(e,t,1).getDay()}function Ze(e){let{className:t,...n}=e;return I(`button`,{className:W(`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`,t),type:`button`,...n})}function Qe(e){let{className:t,max:n,min:r,showTime:i=!1,value:a,onValueChange:o}=e,{locale:s}=E(K),{year:c,weekDays:l,months:u}=s==null?void 0:s.Calendar,d=new Date,[p,m]=M((a==null?d:a).getFullYear()),[h,g]=M((a==null?d:a).getMonth());function _(){g(e=>e===0?(m(e=>e-1),11):e-1)}function v(){g(e=>e===11?(m(e=>e+1),0):e+1)}let y=Ye(p,h),b=Xe(p,h),x=A(()=>{let e=[];for(let t=0;t<b;t++)e.push(null);for(let t=1;t<=y;t++)e.push(t);return e},[y,b]);function S(e){return e&&p===(a==null?void 0:a.getFullYear())&&h===(a==null?void 0:a.getMonth())&&e===(a==null?void 0:a.getDate())}function C(e){return e&&p===d.getFullYear()&&h===d.getMonth()&&e===d.getDate()}function w(e){var t,i,o;if(!e)return!1;let s=(t=a==null?void 0:a.getHours())==null?d.getHours():t,c=(i=a==null?void 0:a.getMinutes())==null?d.getMinutes():i,l=(o=a==null?void 0:a.getSeconds())==null?d.getSeconds():o,u=new Date(p,h,e,s,c,l);return!!(r&&u<r||n&&u>n)}function T(e){var t,n,r;if(w(e))return;let i=(t=a==null?void 0:a.getHours())==null?d.getHours():t,s=(n=a==null?void 0:a.getMinutes())==null?d.getMinutes():n,c=(r=a==null?void 0:a.getSeconds())==null?d.getSeconds():r;o==null||o(new Date(p,h,e,i,s,c))}function D(e){var t;let n=e.getHours(),r=e.getMinutes(),i=e.getSeconds(),s=new Date(p,h,(t=a==null?void 0:a.getDate())==null?d.getDate():t,n,r,i);o==null||o(s)}return L(`div`,{"data-u-comp":`calendar`,className:W(`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`,t),children:[L(`nav`,{className:`univer-mb-4 univer-flex univer-items-center univer-justify-between`,children:[I(Ze,{className:`univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200`,"aria-label":`Previous Month`,onClick:_,children:I(f,{className:`univer-rotate-180`})}),L(`span`,{className:`univer-flex univer-gap-0.5 univer-text-sm univer-font-medium`,children:[I(`span`,{children:p}),I(`span`,{children:c}),I(`span`,{children:u[h]})]}),I(Ze,{className:`univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200`,"aria-label":`Next Month`,onClick:v,children:I(f,{})})]}),I(`div`,{className:`univer-mb-1 univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center univer-text-sm univer-text-gray-500 dark:!univer-text-gray-200`,children:l.map(e=>I(`div`,{children:e},e))}),I(`div`,{className:`univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center`,children:x.map((e,t)=>e?I(Ze,{className:W({"!univer-bg-primary-600 univer-font-bold univer-text-white":!C(e)&&S(e),"dark:!univer-text-white":!C(e)&&!S(e),"!univer-bg-primary-600 univer-text-white":C(e)&&S(e),"univer-font-semibold univer-text-primary-600 dark:!univer-text-primary-500":C(e)&&!S(e),"univer-cursor-not-allowed univer-opacity-40":w(e),"univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800":!S(e)&&!w(e)}),onClick:()=>T(e),disabled:w(e),children:e},t):I(`div`,{},t))}),i&&I(Je,{value:a,onValueChange:D})]})}function $e({emptyText:e}){return I(`section`,{className:`univer-h-8 univer-px-2 univer-pr-32 univer-text-sm/8 univer-text-gray-600 dark:!univer-text-gray-200`,children:e})}function et(e){let{value:n,options:r=[],onChange:i,contentClassName:a,wrapperClassName:o}=e,{locale:s}=E(K),c=A(()=>{let e=[r];return n.forEach((t,n)=>{let r=e[n].find(e=>e.value===t);r!=null&&r.children&&e.push(r.children)}),e},[n]);function l(e,t){if(t===n[e])return;if(n[e+1]){let r=n.slice(0,e+1);r[e]=t,i(r);return}let r=[...n];r[e]=t,i(r)}return L(`section`,{"data-u-comp":`cascader-list`,className:W(`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`,Y,q,o),children:[c.map((e,r)=>e.length?I(`ul`,{className:W(`univer-m-0 univer-h-full univer-max-h-full univer-list-none univer-overflow-auto univer-px-2`,q,a),children:e.map(e=>I(`li`,{children:L(`a`,{className:W(`univer-relative univer-block univer-h-8 univer-cursor-pointer univer-rounded univer-text-sm/8`,{"univer-px-7":r>0,"univer-px-1.5":r===0,"univer-bg-gray-200 dark:!univer-bg-gray-600":e.value===n[r]}),onClick:()=>l(r,e.value),children:[r>0&&I(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-h-full univer-items-center`,children:e.value===n[r]&&I(t,{className:`univer-text-primary-600`})}),I(`span`,{children:e.label})]})},e.value))},r):I($e,{emptyText:s==null?void 0:s.CascaderList.empty},r)),n.length<=0&&I($e,{emptyText:s==null?void 0:s.CascaderList.empty})]})}function tt(e){let{children:t,className:n,style:r,value:i,disabled:a,direction:o=`horizontal`,onChange:s}=e,c=e=>{i.includes(e)?s(i.filter(t=>t!==e)):s([...i,e])};return I(`div`,{className:W(`univer-flex univer-gap-2`,{"univer-flex-col":o===`vertical`},n),style:r,children:y.map(t,(e,t)=>C(e)?b(e,{key:t,children:e.props.children,checked:e.props.value?i.includes(e.props.value):!1,disabled:a==null?e.props.disabled:a,onChange:c}):e)})}function nt(e){let{children:n,className:r,style:i,checked:a=!1,indeterminate:o=!1,value:s,disabled:c=!1,onChange:l,contentClassName:u}=e,d=j(null);function f(e){if(e.stopPropagation(),!(!l||c))if(s!==void 0)l==null||l(s);else{var t,n;let e=(t=d==null||(n=d.current)==null?void 0:n.checked)==null?!1:t;l==null||l(e)}}return L(`label`,{"data-u-comp":`checkbox`,className:W(`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":!c,"univer-text-gray-400":c},r),style:i,children:[L(`span`,{className:`univer-relative univer-block`,children:[I(`input`,{ref:d,className:`univer-absolute univer-size-0 univer-opacity-0`,type:`checkbox`,checked:a,disabled:c,onChange:f}),L(`span`,{className:W(`univer-relative univer-box-border univer-flex univer-size-4 univer-items-center univer-justify-center univer-overflow-hidden univer-rounded univer-border univer-border-solid univer-transition-colors`,{"univer-opacity-50":c,"univer-border-primary-600 univer-bg-primary-600":a||o,"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600":!a&&!o}),children:[a&&I(t,{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`}),o&&!a&&I(`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`})]})]}),I(`span`,{className:W(`univer-select-none`,u),children:n})]})}const rt=ne,it=te,at=S(({className:e,...t},n)=>I(H,{ref:n,className:W(`data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 univer-fixed univer-inset-0 univer-z-[1080] univer-bg-[rgba(0,0,0,0.8)]`,e),...t}));at.displayName=H.displayName;const ot=S(({className:e,children:t,closable:n=!0,onClickClose:i,...a},o)=>L(it,{children:[I(at,{}),L(B,{ref:o,className:W(`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`,Y,e),...a,children:[t,n&&L(ee,{className:`univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none`,onClick:i,children:[I(r,{className:`univer-size-4 univer-text-gray-400`}),I(`span`,{className:`univer-sr-only`,children:`Close`})]})]})]}));ot.displayName=B.displayName;const st=({className:e,...t})=>I(`div`,{className:W(`univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left`,e),...t});st.displayName=`DialogHeader`;const ct=({className:e,...t})=>I(`div`,{className:W(`univer-flex univer-flex-col-reverse sm:!univer-flex-row sm:!univer-justify-end sm:!univer-space-x-2`,e),...t});ct.displayName=`DialogFooter`;const lt=S(({className:e,...t},n)=>I(re,{ref:n,className:W(`univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight univer-text-gray-900 dark:!univer-text-white`,e),...t}));lt.displayName=re.displayName;const ut=S(({className:e,...t},n)=>I(V,{ref:n,className:W(`univer-text-sm univer-text-gray-500`,e),...t}));ut.displayName=V.displayName;function dt(e={}){let t=T(()=>{let{innerWidth:e,innerHeight:t}=window;return{x:Math.max(0,(e-0)/2),y:Math.max(0,(t-0)/2)}},[]),{defaultPosition:n=t(),enabled:r=!1}=e,[i,a]=M(n),[o,s]=M(!1),c=j(null),l=j({x:0,y:0}),u=j({x:0,y:0}),d=j(!1);D(()=>{if(!c.current||d.current||e.defaultPosition)return;let{width:t,height:n}=c.current.getBoundingClientRect(),{innerWidth:r,innerHeight:i}=window,o=Math.max(0,(r-t)/2),s=Math.max(0,(i-n)/2);a({x:o,y:s}),l.current={x:o,y:s},d.current=!0},[e.defaultPosition]);let f=T((e,t)=>{if(!c.current)return{x:e,y:t};let n=c.current.getBoundingClientRect(),{clientWidth:r,clientHeight:i}=document.documentElement,a=l.current.x+(e-u.current.x),o=l.current.y+(t-u.current.y);return a<0&&(a=0),o<0&&(o=0),a+n.width>r&&(a=r-n.width),o+n.height>i&&(o=i-n.height),{x:a,y:o}},[]),p=T(e=>{r&&(e.preventDefault(),e.stopPropagation(),l.current={...i},u.current={x:e.clientX,y:e.clientY},s(!0),document.body.style.userSelect=`none`)},[r,i]),m=T(e=>{o&&(e.preventDefault(),e.stopPropagation(),a(f(e.clientX,e.clientY)))},[o,f]),h=T(()=>{s(!1),document.body.style.userSelect=``},[]);return D(()=>{if(r)return document.addEventListener(`mousemove`,m),document.addEventListener(`mouseup`,h),()=>{document.removeEventListener(`mousemove`,m),document.removeEventListener(`mouseup`,h)}},[r,m,h]),{position:i,isDragging:o,elementRef:c,setElementRef:t=>{if(c.current=t,t&&!d.current&&!e.defaultPosition){let{width:e,height:n}=t.getBoundingClientRect(),{innerWidth:r,innerHeight:i}=window,o=Math.max(0,(r-e)/2),s=Math.max(0,(i-n)/2);a({x:o,y:s}),l.current={x:o,y:s},d.current=!0}},handleMouseDown:p}}function ft(e){var t,n,r,i;let{className:a,children:o,style:s,open:c=!1,title:l,width:u,draggable:d=!1,defaultPosition:f,footer:p,mask:m=!0,keyboard:h=!0,closable:g=!0,maskClosable:_=!0,showOk:v,showCancel:y,onOpenChange:b,onClose:x,onOk:S,onCancel:C}=e,{locale:w}=E(K),{position:D,isDragging:O,setElementRef:k,handleMouseDown:A}=dt({defaultPosition:f,enabled:d}),j=p==null?v||y?L(`div`,{className:`univer-flex univer-justify-end univer-gap-2`,children:[y&&I(G,{onClick:C,children:(t=w==null||(n=w.Confirm)==null?void 0:n.cancel)==null?`Cancel`:t}),v&&I(G,{variant:`primary`,onClick:S,children:(r=w==null||(i=w.Confirm)==null?void 0:i.confirm)==null?`OK`:r})]}):null:p,M=T(e=>{e&&d&&k(e)},[d,k]),N=T(e=>{!m&&!e||(b==null||b(e),e||x==null||x())},[x,b]);function P(){b==null||b(!1),x==null||x()}return I(rt,{open:c,onOpenChange:N,modal:m!==!1,children:L(ot,{ref:M,className:W(a,{"!univer-animate-none":d}),style:{...s,width:u?typeof u==`number`?`${u}px`:u:void 0,maxWidth:u?`initial`:void 0,...d?{position:`absolute`,margin:0,left:0,top:0,transform:`translate(${D.x}px, ${D.y}px)`,transition:O?`none`:void 0,cursor:O?`grabbing`:void 0}:{}},closable:g,onClickClose:P,onEscapeKeyDown:e=>{h&&P(),e.preventDefault()},onPointerDownOutside:e=>{_&&P(),e.preventDefault()},children:[L(st,{className:W({"!univer-hidden":!l}),"data-drag-handle":d?`true`:void 0,style:{cursor:d?`grab`:void 0,userSelect:d?`none`:void 0,touchAction:d?`none`:void 0},onMouseDown:d?A:void 0,children:[I(lt,{children:l}),I(ut,{className:`univer-hidden`})]}),o,j&&I(ct,{children:j})]})})}const Z=(e,t,n)=>{t/=100,n/=100;let r=n*t,i=r*(1-Math.abs(e/60%2-1)),a=n-r,o=0,s=0,c=0;return e>=0&&e<60?(o=r,s=i,c=0):e>=60&&e<120?(o=i,s=r,c=0):e>=120&&e<180?(o=0,s=r,c=i):e>=180&&e<240?(o=0,s=i,c=r):e>=240&&e<300?(o=i,s=0,c=r):e>=300&&e<360&&(o=r,s=0,c=i),[Math.round((o+a)*255),Math.round((s+a)*255),Math.round((c+a)*255)]},pt=(e,t,n)=>{let r=e=>e.toString(16).padStart(2,`0`);return`#${r(e)}${r(t)}${r(n)}`},mt=(e,t,n)=>{e/=255,t/=255,n/=255;let r=Math.max(e,t,n),i=r-Math.min(e,t,n),a=0,o=0,s=r;return r!==0&&(o=i/r),i!==0&&(r===e?a=(t-n)/i+(t<n?6:0):r===t?a=(n-e)/i+2:r===n&&(a=(e-t)/i+4),a*=60),[a,o*100,s*100]},ht=e=>{e.length===4&&(e=`#${e.slice(1).split(``).map(e=>e+e).join(``)}`);let[t,n,r]=e.match(/\w\w/g).map(e=>Number.parseInt(e,16));return mt(t,n,r)},gt=(e,t,n)=>{let[r,i,a]=Z(e,t,n);return pt(r,i,a)},_t=(e,t,n,r)=>{let[i,a,o]=Z(e,t,n);return`rgba(${i}, ${a}, ${o}, ${r})`},vt=e=>{let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d*\.?\d+))?\)/);if(!t)throw Error(`Invalid RGBA string`);return[Number.parseInt(t[1],10),Number.parseInt(t[2],10),Number.parseInt(t[3],10),t[4]?Number.parseFloat(t[4]):1]};function yt({hsv:e,alpha:t,onChange:n,onChanged:r}){let[i,a]=M(!1),o=j(null),s=j(null),c=T(e=>{var t,r;let i=o.current;if(!i)return;let a=(t=(r=s.current)==null?void 0:r.clientWidth)==null?0:t,c=i.getBoundingClientRect(),l=c.width-a;if(l<=0){n(0);return}let u=Math.max(0,Math.min(e-c.left,l));n(Math.round(u/l*100)/100)},[n]),l=T(e=>{i&&c(e.clientX)},[i,c]),u=T(()=>{a(!1),r==null||r(t)},[t]);D(()=>(i&&(window.addEventListener(`pointermove`,l),window.addEventListener(`pointerup`,u),window.addEventListener(`mouseup`,u)),()=>{window.removeEventListener(`pointermove`,l),window.removeEventListener(`pointerup`,u),window.removeEventListener(`mouseup`,u)}),[i,l,u]);let d=()=>{var e,n,r,i;let a=Math.min(Math.max(t*100,0),100),c=(e=(n=s.current)==null?void 0:n.clientWidth)==null?0:e,l=(r=(i=o.current)==null?void 0:i.clientWidth)==null?0:r,u=l>0?c/l*100:0;return`${a/100*(100-u)}%`},f=Z(...e);return L(`div`,{className:`univer-relative univer-w-full univer-select-none`,children:[I(`div`,{className:`univer-absolute univer-inset-0 univer-rounded-full`,style:{backgroundImage:`linear-gradient(45deg, #E3E5EA 25%, transparent 25%), linear-gradient(-45deg, #E3E5EA 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #E3E5EA 75%), linear-gradient(-45deg, transparent 75%, #E3E5EA 75%)`,backgroundPosition:`0 0, 0 4px, 4px -4px, -4px 0`,backgroundSize:`8px 8px`}}),I(`div`,{ref:o,className:`univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner`,style:{background:`linear-gradient(to right, transparent, rgb(${f.join(`,`)}))`},onPointerDown:e=>{a(!0),c(e.clientX)},children:I(`div`,{ref:s,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`,style:{left:d(),transform:`translateY(-50%)`,transition:i?`none`:`all 0.1s ease-out`}})})]})}function bt({hsv:e,onChange:t}){let[n,r]=M(``),i=A(()=>gt(e[0],e[1],e[2]),[e]);D(()=>{r(i.replace(/^#/,``))},[i]);let a=e=>/^[0-9A-Fa-f]{6}$/.test(e);return L(F,{children:[I(`input`,{className:W(`univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white`,Y),value:n,onChange:e=>{let n=e.target.value.trim();if(!(n.length>6)&&!(n!==``&&!/^[0-9A-Fa-f]*$/.test(n))&&(r(n),a(n))){let e=ht(n);e&&t&&t(...e)}},onBlur:()=>{a(n)||r(i.replace(/^#/,``))},maxLength:6,spellCheck:!1}),I(`span`,{className:`univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400`,children:`#`})]})}function xt({hsv:e,alpha:t,format:n,onChange:r}){let[i,a]=M({r:0,g:0,b:0,a:1});D(()=>{let[n,r,i]=Z(e[0],e[1],e[2]);a({r:Math.round(n),g:Math.round(r),b:Math.round(i),a:t==null?1:t})},[e,t]);let o=(t,n)=>{if(t===`a`){if(n!==``&&!/^\d*\.?\d*$/.test(n))return;let t=n===``?0:Number.parseFloat(n);if(t>1)return;a({...i,a:t}),r&&r(e[0],e[1],e[2],t);return}if(n!==``&&!/^\d*$/.test(n))return;let o=n===``?0:Number.parseInt(n,10);if(o>255)return;let s={...i,[t]:o};a(s),r&&r(...mt(s.r,s.g,s.b),i.a)},s=()=>{let[n,r,i]=Z(e[0],e[1],e[2]);a({r:Math.round(n),g:Math.round(r),b:Math.round(i),a:t==null?1:t})};return L(`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`,children:[I(`input`,{value:i.r,onChange:e=>o(`r`,e.target.value),onBlur:s,maxLength:3}),I(`input`,{value:i.g,onChange:e=>o(`g`,e.target.value),onBlur:s,maxLength:3}),I(`input`,{value:i.b,onChange:e=>o(`b`,e.target.value),onBlur:s,maxLength:3}),n===`rgba`&&I(`input`,{value:i.a,onChange:e=>o(`a`,e.target.value),onBlur:s,maxLength:4})]})}function St({hsv:e,alpha:t,format:n,onChange:r}){return I(`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`,children:L(`div`,{className:`univer-relative univer-flex univer-flex-1 univer-gap-2`,children:[I(bt,{hsv:e,onChange:r}),I(xt,{hsv:e,alpha:t,format:n,onChange:r})]})})}const Ct=[[`#FFFFFF`,`#E1EFFE`,`#FDE8E8`,`#FEECDC`,`#FFF4B9`,`#DEF7EC`,`#D5F5F6`,`#EDEBFE`,`#FCE8F3`],[`#CDD0D8`,`#A4CAFE`,`#F8B4B4`,`#FDBA8C`,`#FAC815`,`#84E1BC`,`#7EDCE2`,`#CABFFD`,`#F8B4D9`],[`#979DAC`,`#3F83F8`,`#F05252`,`#FF5A1F`,`#D49D0F`,`#0DA471`,`#0694A2`,`#9061F9`,`#E74694`],[`#414657`,`#1A56DB`,`#C81E1E`,`#B43403`,`#9A6D15`,`#046C4E`,`#036672`,`#6C2BD9`,`#BF125D`],[`#000000`,`#233876`,`#771D1D`,`#8A2C0D`,`#634312`,`#014737`,`#014451`,`#4A1D96`,`#751A3D`]];function wt({hsv:e,onChange:t}){let n=T(e=>{let[n,r,i]=ht(e);t(n,r,i)},[t]),r=gt(e[0],e[1],e[2]);return I(`div`,{"data-u-comp":`color-picker-presets`,className:`univer-grid univer-content-center univer-gap-2`,children:Ct.map((e,t)=>I(`div`,{className:`univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2`,children:e.map((e,i)=>I(`button`,{type:`button`,className:W(`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":e.toUpperCase()===r.toUpperCase(),"!univer-border-gray-200":t===0&&i===0}),style:{backgroundColor:e},onClick:()=>n(e)},i))},t))})}function Tt({hsv:e,onChange:t,onChanged:n}){let r=j(null),i=j(null),[a,o]=M(!1);D(()=>{let t=r.current;if(!t)return;let n=t.getContext(`2d`);if(!n)return;let i=n.createLinearGradient(0,0,t.width,0);i.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),i.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),n.fillStyle=i,n.fillRect(0,0,t.width,t.height);let a=n.createLinearGradient(0,0,0,t.height);a.addColorStop(0,`rgba(255, 255, 255, 0)`),a.addColorStop(1,`rgba(0, 0, 0, 1)`),n.fillStyle=a,n.fillRect(0,0,t.width,t.height)},[e]);let s=n=>{n.stopPropagation();let i=r.current;if(!i)return;let a=i.getBoundingClientRect(),o=Math.max(0,Math.min(n.clientX-a.left,a.width)),s=Math.max(0,Math.min(n.clientY-a.top,a.height)),c=o/a.width*100,l=100-s/a.height*100;t(e[0],c,l)},c=T(()=>{o(!1)},[e]);function l(){n==null||n(e[0],e[1],e[2])}D(()=>{var e;return(e=i.current)==null||e.addEventListener(`mouseup`,l),window.addEventListener(`pointerup`,c),window.addEventListener(`mouseup`,c),()=>{var e;(e=i.current)==null||e.removeEventListener(`mouseup`,l),window.removeEventListener(`pointerup`,c),window.removeEventListener(`mouseup`,c)}},[e]);let u=()=>{var t,n,r,o;let s=(t=(n=i.current)==null?void 0:n.clientWidth)==null?0:t,c=(r=(o=i.current)==null?void 0:o.clientHeight)==null?0:r;return{transform:`translate(${e[1]/100*s-8}px, ${(100-e[2])/100*c-8}px)`,transition:a?`none`:`transform 0.1s ease-out`}};return D(()=>{let e=()=>{o(!1)};return window.addEventListener(`pointerup`,e),window.addEventListener(`mouseup`,e),()=>{window.removeEventListener(`pointerup`,e),window.removeEventListener(`mouseup`,e)}},[]),L(`div`,{"data-u-comp":`color-picker-spectrum`,ref:i,className:`univer-relative univer-overflow-hidden`,children:[I(`canvas`,{ref:r,className:`univer-size-full univer-cursor-crosshair univer-rounded`,onPointerDown:e=>{o(!0),s(e)},onPointerMove:e=>a&&s(e)}),I(`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`,style:u()})]})}function Et({hsv:e,onChange:t,onChanged:n}){let[r,i]=M(!1),a=j(null),o=j(null),s=T(n=>{var r,i;let s=a.current;if(!s)return;let c=(r=(i=o.current)==null?void 0:i.clientWidth)==null?0:r,l=s.getBoundingClientRect(),u=l.width-c;if(u<=0){t(0,e[1],e[2]);return}let d=Math.max(0,Math.min(n-l.left,u));t(Math.round(d/u*360),e[1],e[2])},[e,t]),c=T(e=>{e.stopPropagation(),r&&s(e.clientX)},[r,s]),l=T(()=>{i(!1),n==null||n(e[0],e[1],e[2])},[e,n]);D(()=>(r&&(window.addEventListener(`pointermove`,c),window.addEventListener(`pointerup`,l),window.addEventListener(`mouseup`,l)),()=>{window.removeEventListener(`pointermove`,c),window.removeEventListener(`pointerup`,l),window.removeEventListener(`mouseup`,l)}),[r,c,l]);let u=()=>{var t,n,r,i;let s=Math.min(Math.max(e[0],0),360),c=(t=(n=o.current)==null?void 0:n.clientWidth)==null?0:t,l=(r=(i=a.current)==null?void 0:i.clientWidth)==null?0:r,u=l>0?c/l*100:0;return`${s/360*(100-u)}%`};return I(`div`,{"data-u-comp":`color-picker-hue-slider`,className:`univer-relative univer-w-full univer-select-none`,children:I(`div`,{ref:a,className:`univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner`,style:{background:`linear-gradient(to right,
+                `
+		},
+		size: {
+			small: "univer-h-6 univer-rounded-md univer-px-1.5 univer-text-xs",
+			middle: "univer-h-8 univer-rounded-lg univer-px-2 univer-text-sm",
+			large: "univer-h-10 univer-rounded-lg univer-px-3 univer-text-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "middle"
+	}
+});
+const Button = forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		className: clsx(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		"data-u-comp": "button",
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/components/button/ButtonGroup.tsx
+const ButtonGroup = ({ className, orientation = "horizontal", children }) => {
+	const totalButtons = Children.count(children);
+	const isHorizontal = orientation === "horizontal";
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-grid", {
+			"univer-grid-flow-row": isVertical,
+			"univer-w-fit": isVertical
+		}, className),
+		children: Children.map(children, (child, index) => {
+			const isFirst = index === 0;
+			const isLast = index === totalButtons - 1;
+			return cloneElement(child, { className: clsx({
+				"!univer-rounded-l-none": isHorizontal && !isFirst,
+				"!univer-rounded-r-none": isHorizontal && !isLast,
+				"!univer-border-l-0": isHorizontal && !isFirst,
+				"!univer-rounded-t-none": isVertical && !isFirst,
+				"!univer-rounded-b-none": isVertical && !isLast,
+				"!univer-border-t-0": isVertical && !isFirst
+			}, child.props.className) });
+		})
+	});
+};
+
+//#endregion
+//#region src/helper/is-browser.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function isBrowser() {
+	return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+//#endregion
+//#region src/components/config-provider/ConfigProvider.tsx
+const ConfigContext = createContext({ mountContainer: isBrowser() ? document.body : null });
+function ConfigProvider(props) {
+	const { children, locale, mountContainer } = props;
+	const value = useMemo(() => {
+		return {
+			locale,
+			mountContainer
+		};
+	}, [locale, mountContainer]);
+	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+//#region src/helper/class-utilities.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const scrollbarClassName = "univer-scrollbar-thin univer-scrollbar-track-gray-50 univer-scrollbar-thumb-gray-300 dark:!univer-scrollbar-track-gray-900 dark:!univer-scrollbar-thumb-gray-700";
+const borderBasicClassName = "univer-border-gray-200 dark:!univer-border-gray-600 univer-border-solid";
+const borderClassName = clsx(borderBasicClassName, "univer-border");
+const borderLeftBottomClassName = clsx(borderBasicClassName, "univer-border-l univer-border-b univer-border-t-0 univer-border-r-0");
+const borderLeftClassName = clsx(borderBasicClassName, "univer-border-l univer-border-b-0 univer-border-t-0 univer-border-r-0");
+const borderLeftRTLClassName = clsx(borderBasicClassName, "univer-border-b-0 univer-border-t-0 rtl:univer-border-l-0 rtl:univer-border-r");
+const borderTopClassName = clsx(borderBasicClassName, "univer-border-l-0 univer-border-b-0 univer-border-t univer-border-r-0");
+const borderBottomClassName = clsx(borderBasicClassName, "univer-border-l-0 univer-border-b univer-border-t-0 univer-border-r-0");
+const borderRightClassName = clsx(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";
+
+//#endregion
+//#region src/helper/date.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+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();
+	if (Number.isNaN(date.getTime())) return "Invalid Date";
+	const tokenMap = {
+		YYYY: String(date.getFullYear()),
+		MM: pad(date.getMonth() + 1),
+		DD: pad(date.getDate()),
+		HH: pad(date.getHours()),
+		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;
+	});
+}
+
+//#endregion
+//#region src/components/time-input/TimeInput.tsx
+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());
+		newValue.setHours(hours, minutes, seconds, 0);
+		onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"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),
+			type: "time",
+			step: "1",
+			value: formatDateWithPattern(value, "HH:mm:ss"),
+			onChange: handleChangeTime
+		})]
+	});
+}
+
+//#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__ */ jsx("button", {
+		className: clsx("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 } = useContext(ConfigContext);
+	const { 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());
+	function prevMonth() {
+		setCurrentMonth((prev) => {
+			if (prev === 0) {
+				setCurrentYear((y) => y - 1);
+				return 11;
+			}
+			return prev - 1;
+		});
+	}
+	function nextMonth() {
+		setCurrentMonth((prev) => {
+			if (prev === 11) {
+				setCurrentYear((y) => y + 1);
+				return 0;
+			}
+			return prev + 1;
+		});
+	}
+	const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+	const firstDay = getFirstDayOfWeek(currentYear, currentMonth);
+	const days = useMemo(() => {
+		const daysArray = [];
+		for (let i = 0; i < firstDay; i++) daysArray.push(null);
+		for (let d = 1; d <= daysInMonth; d++) daysArray.push(d);
+		return daysArray;
+	}, [daysInMonth, firstDay]);
+	function isSelected(day) {
+		return day && currentYear === (value === null || value === void 0 ? void 0 : value.getFullYear()) && currentMonth === (value === null || value === void 0 ? void 0 : value.getMonth()) && day === (value === null || value === void 0 ? void 0 : value.getDate());
+	}
+	function isToday(day) {
+		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 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 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);
+		onValueChange === null || onValueChange === void 0 || onValueChange(updatedDate);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "calendar",
+		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),
+		children: [
+			/* @__PURE__ */ jsxs("nav", {
+				className: "univer-mb-4 univer-flex univer-items-center univer-justify-between",
+				children: [
+					/* @__PURE__ */ jsx(DayButton, {
+						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
+						"aria-label": "Previous Month",
+						onClick: prevMonth,
+						children: /* @__PURE__ */ jsx(MoreRightIcon, { className: "univer-rotate-180" })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "univer-flex univer-gap-0.5 univer-text-sm univer-font-medium",
+						children: [
+							/* @__PURE__ */ jsx("span", { children: currentYear }),
+							/* @__PURE__ */ jsx("span", { children: year }),
+							/* @__PURE__ */ jsx("span", { children: months[currentMonth] })
+						]
+					}),
+					/* @__PURE__ */ jsx(DayButton, {
+						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
+						"aria-label": "Next Month",
+						onClick: nextMonth,
+						children: /* @__PURE__ */ jsx(MoreRightIcon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-mb-1 univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center univer-text-sm univer-text-gray-500 dark:!univer-text-gray-200",
+				children: weekDays.map((wd) => /* @__PURE__ */ jsx("div", { children: wd }, wd))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				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-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)
+					}),
+					onClick: () => handleChangeDate(day),
+					disabled: isDisabled(day),
+					children: day
+				}, idx) : /* @__PURE__ */ jsx("div", {}, idx))
+			}),
+			showTime && /* @__PURE__ */ jsx(TimeInput, {
+				value,
+				onValueChange: handleChangeTime
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/cascader-list/CascaderList.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function Empty({ emptyText }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: "univer-h-8 univer-px-2 univer-pr-32 univer-text-sm/8 univer-text-gray-600 dark:!univer-text-gray-200",
+		children: emptyText
+	});
+}
+function CascaderList(props) {
+	const { value, options = [], onChange, contentClassName, wrapperClassName } = props;
+	const { locale } = useContext(ConfigContext);
+	const activeOptions = useMemo(() => {
+		const activeOptions = [options];
+		value.forEach((item, index) => {
+			const option = activeOptions[index].find((option) => option.value === item);
+			if (option === null || option === void 0 ? void 0 : option.children) activeOptions.push(option.children);
+		});
+		return activeOptions;
+	}, [value]);
+	function handleChange(index, v) {
+		if (v === value[index]) return;
+		if (value[index + 1]) {
+			const newValue = value.slice(0, index + 1);
+			newValue[index] = v;
+			onChange(newValue);
+			return;
+		}
+		const newValue = [...value];
+		newValue[index] = v;
+		onChange(newValue);
+	}
+	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),
+		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", {
+				className: clsx("univer-relative univer-block univer-h-8 univer-cursor-pointer univer-rounded univer-text-sm/8", {
+					"univer-px-7": index > 0,
+					"univer-px-1.5": index === 0,
+					"univer-bg-gray-200 dark:!univer-bg-gray-600": option.value === value[index]
+				}),
+				onClick: () => handleChange(index, option.value),
+				children: [index > 0 && /* @__PURE__ */ jsx("span", {
+					className: "univer-absolute univer-left-2 univer-flex univer-h-full univer-items-center",
+					children: option.value === value[index] && /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-text-primary-600" })
+				}), /* @__PURE__ */ jsx("span", { children: option.label })]
+			}) }, option.value))
+		}, index) : /* @__PURE__ */ jsx(Empty, { emptyText: locale === null || locale === void 0 ? void 0 : locale.CascaderList.empty }, index)), value.length <= 0 && /* @__PURE__ */ jsx(Empty, { emptyText: locale === null || locale === void 0 ? void 0 : locale.CascaderList.empty })]
+	});
+}
+
+//#endregion
+//#region src/components/checkbox-group/CheckboxGroup.tsx
+/**
+* CheckboxGroup Component
+*/
+function CheckboxGroup(props) {
+	const { children, className, style, value, disabled, direction = "horizontal", onChange } = props;
+	const handleChange = (item) => {
+		if (value.includes(item)) onChange(value.filter((i) => i !== item));
+		else onChange([...value, item]);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-flex univer-gap-2", { "univer-flex-col": direction === "vertical" }, className),
+		style,
+		children: Children.map(children, (child, index) => {
+			if (isValidElement(child)) return cloneElement(child, {
+				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,
+				onChange: handleChange
+			});
+			return child;
+		})
+	});
+}
+
+//#endregion
+//#region src/components/checkbox/Checkbox.tsx
+/**
+* Checkbox Component
+*/
+function Checkbox(props) {
+	const { children, className, style, checked = false, indeterminate = false, value, disabled = false, onChange, contentClassName } = props;
+	const inputRef = useRef(null);
+	function handleChange(e) {
+		e.stopPropagation();
+		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;
+			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-text-gray-400": disabled
+		}, className),
+		style,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "univer-relative univer-block",
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				className: "univer-absolute univer-size-0 univer-opacity-0",
+				type: "checkbox",
+				checked,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsxs("span", {
+				className: clsx("univer-relative univer-box-border univer-flex univer-size-4 univer-items-center univer-justify-center univer-overflow-hidden univer-rounded univer-border univer-border-solid univer-transition-colors", {
+					"univer-opacity-50": disabled,
+					"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" })]
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: clsx("univer-select-none", contentClassName),
+			children
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/dialog/DialogPrimitive.tsx
+const Dialog$1 = Root;
+const DialogPortal = Portal;
+const DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Overlay, {
+	ref,
+	className: clsx("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 univer-fixed univer-inset-0 univer-z-[1080] univer-bg-[rgba(0,0,0,0.8)]", className),
+	...props
+}));
+DialogOverlay.displayName = Overlay.displayName;
+const DialogContent = forwardRef(({ className, children, closable = true, onClickClose, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Content, {
+	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),
+	...props,
+	children: [children, closable && /* @__PURE__ */ jsxs(Close, {
+		className: "univer-absolute univer-right-4 univer-top-4 univer-size-6 univer-cursor-pointer univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-transition-opacity hover:univer-opacity-100 disabled:univer-pointer-events-none",
+		onClick: onClickClose,
+		children: [/* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ jsx("span", {
+			className: "univer-sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+DialogContent.displayName = Content.displayName;
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left", className),
+	...props
+});
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("univer-flex univer-flex-col-reverse sm:!univer-flex-row sm:!univer-justify-end sm:!univer-space-x-2", className),
+	...props
+});
+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),
+	...props
+}));
+DialogTitle.displayName = Title.displayName;
+const DialogDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Description, {
+	ref,
+	className: clsx("univer-text-sm univer-text-gray-500", className),
+	...props
+}));
+DialogDescription.displayName = Description.displayName;
+
+//#endregion
+//#region src/components/dialog/Dialog.tsx
+function useDraggable(options = {}) {
+	const getCenteredPosition = useCallback(() => {
+		const { innerWidth, innerHeight } = window;
+		return {
+			x: Math.max(0, (innerWidth - 0) / 2),
+			y: Math.max(0, (innerHeight - 0) / 2)
+		};
+	}, []);
+	const { defaultPosition = getCenteredPosition(), enabled = false } = options;
+	const [position, setPosition] = useState(defaultPosition);
+	const [isDragging, setIsDragging] = useState(false);
+	const elementRef = useRef(null);
+	const startPosRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const startClientRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const initializedRef = useRef(false);
+	useEffect(() => {
+		if (!elementRef.current || initializedRef.current || options.defaultPosition) return;
+		const { width, height } = elementRef.current.getBoundingClientRect();
+		const { innerWidth, innerHeight } = window;
+		const centeredX = Math.max(0, (innerWidth - width) / 2);
+		const centeredY = Math.max(0, (innerHeight - height) / 2);
+		setPosition({
+			x: centeredX,
+			y: centeredY
+		});
+		startPosRef.current = {
+			x: centeredX,
+			y: centeredY
+		};
+		initializedRef.current = true;
+	}, [options.defaultPosition]);
+	const calculateBounds = useCallback((clientX, clientY) => {
+		if (!elementRef.current) return {
+			x: clientX,
+			y: clientY
+		};
+		const rect = elementRef.current.getBoundingClientRect();
+		const { clientWidth, clientHeight } = document.documentElement;
+		let newX = startPosRef.current.x + (clientX - startClientRef.current.x);
+		let newY = startPosRef.current.y + (clientY - startClientRef.current.y);
+		if (newX < 0) newX = 0;
+		if (newY < 0) newY = 0;
+		if (newX + rect.width > clientWidth) newX = clientWidth - rect.width;
+		if (newY + rect.height > clientHeight) newY = clientHeight - rect.height;
+		return {
+			x: newX,
+			y: newY
+		};
+	}, []);
+	const startDrag = useCallback((e) => {
+		if (!enabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		startPosRef.current = { ...position };
+		startClientRef.current = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		setIsDragging(true);
+		document.body.style.userSelect = "none";
+	}, [enabled, position]);
+	const onDrag = useCallback((e) => {
+		if (!isDragging) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setPosition(calculateBounds(e.clientX, e.clientY));
+	}, [isDragging, calculateBounds]);
+	const endDrag = useCallback(() => {
+		setIsDragging(false);
+		document.body.style.userSelect = "";
+	}, []);
+	useEffect(() => {
+		if (enabled) {
+			document.addEventListener("mousemove", onDrag);
+			document.addEventListener("mouseup", endDrag);
+			return () => {
+				document.removeEventListener("mousemove", onDrag);
+				document.removeEventListener("mouseup", endDrag);
+			};
+		}
+	}, [
+		enabled,
+		onDrag,
+		endDrag
+	]);
+	return {
+		position,
+		isDragging,
+		elementRef,
+		setElementRef: (el) => {
+			elementRef.current = el;
+			if (el && !initializedRef.current && !options.defaultPosition) {
+				const { width, height } = el.getBoundingClientRect();
+				const { innerWidth, innerHeight } = window;
+				const centeredX = Math.max(0, (innerWidth - width) / 2);
+				const centeredY = Math.max(0, (innerHeight - height) / 2);
+				setPosition({
+					x: centeredX,
+					y: centeredY
+				});
+				startPosRef.current = {
+					x: centeredX,
+					y: centeredY
+				};
+				initializedRef.current = true;
+			}
+		},
+		handleMouseDown: startDrag
+	};
+}
+function Dialog(props) {
+	var _locale$Confirm$cance, _locale$Confirm, _locale$Confirm$confi, _locale$Confirm2;
+	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 { locale } = useContext(ConfigContext);
+	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
+		defaultPosition,
+		enabled: draggable
+	});
+	const footer = propFooter !== null && propFooter !== void 0 ? propFooter : showOk || showCancel ? /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-justify-end univer-gap-2",
+		children: [showCancel && /* @__PURE__ */ jsx(Button, {
+			onClick: onCancel,
+			children: (_locale$Confirm$cance = locale === null || locale === void 0 || (_locale$Confirm = locale.Confirm) === null || _locale$Confirm === void 0 ? void 0 : _locale$Confirm.cancel) !== null && _locale$Confirm$cance !== void 0 ? _locale$Confirm$cance : "Cancel"
+		}), showOk && /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			onClick: onOk,
+			children: (_locale$Confirm$confi = locale === null || locale === void 0 || (_locale$Confirm2 = locale.Confirm) === null || _locale$Confirm2 === void 0 ? void 0 : _locale$Confirm2.confirm) !== null && _locale$Confirm$confi !== void 0 ? _locale$Confirm$confi : "OK"
+		})]
+	}) : null;
+	const handleContentRef = useCallback((node) => {
+		if (node && draggable) setElementRef(node);
+	}, [draggable, setElementRef]);
+	const handleOpenChange = useCallback((isOpen) => {
+		if (!mask && !isOpen) return;
+		onOpenChange === null || onOpenChange === void 0 || onOpenChange(isOpen);
+		if (!isOpen) onClose === null || onClose === void 0 || onClose();
+	}, [onClose, onOpenChange]);
+	function handleClickClose() {
+		onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+		onClose === null || onClose === void 0 || onClose();
+	}
+	return /* @__PURE__ */ jsx(Dialog$1, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: mask !== false,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			ref: handleContentRef,
+			className: clsx(className, { "!univer-animate-none": draggable }),
+			style: {
+				...style,
+				width: width ? typeof width === "number" ? `${width}px` : width : void 0,
+				maxWidth: width ? "initial" : void 0,
+				...draggable ? {
+					position: "absolute",
+					margin: 0,
+					left: 0,
+					top: 0,
+					transform: `translate(${position.x}px, ${position.y}px)`,
+					transition: isDragging ? "none" : void 0,
+					cursor: isDragging ? "grabbing" : void 0
+				} : {}
+			},
+			closable,
+			onClickClose: handleClickClose,
+			onEscapeKeyDown: (e) => {
+				if (keyboard) handleClickClose();
+				e.preventDefault();
+			},
+			onPointerDownOutside: (e) => {
+				if (maskClosable) handleClickClose();
+				e.preventDefault();
+			},
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, {
+					className: clsx({ "!univer-hidden": !title }),
+					"data-drag-handle": draggable ? "true" : void 0,
+					style: {
+						cursor: draggable ? "grab" : void 0,
+						userSelect: draggable ? "none" : void 0,
+						touchAction: draggable ? "none" : void 0
+					},
+					onMouseDown: draggable ? handleMouseDown : void 0,
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { className: "univer-hidden" })]
+				}),
+				children,
+				footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/color-conversion.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const hsvToRgb = (h, s, v) => {
+	s = s / 100;
+	v = v / 100;
+	const c = v * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = v - c;
+	let r = 0;
+	let g = 0;
+	let b = 0;
+	if (h >= 0 && h < 60) {
+		r = c;
+		g = x;
+		b = 0;
+	} else if (h >= 60 && h < 120) {
+		r = x;
+		g = c;
+		b = 0;
+	} else if (h >= 120 && h < 180) {
+		r = 0;
+		g = c;
+		b = x;
+	} else if (h >= 180 && h < 240) {
+		r = 0;
+		g = x;
+		b = c;
+	} else if (h >= 240 && h < 300) {
+		r = x;
+		g = 0;
+		b = c;
+	} else if (h >= 300 && h < 360) {
+		r = c;
+		g = 0;
+		b = x;
+	}
+	return [
+		Math.round((r + m) * 255),
+		Math.round((g + m) * 255),
+		Math.round((b + m) * 255)
+	];
+};
+const rgbToHex = (r, g, b) => {
+	const toHex = (n) => n.toString(16).padStart(2, "0");
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+const rgbToHsv = (r, g, b) => {
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const d = max - Math.min(r, g, b);
+	let h = 0;
+	let s = 0;
+	const v = max;
+	if (max !== 0) s = d / max;
+	if (d !== 0) {
+		if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+		else if (max === g) h = (b - r) / d + 2;
+		else if (max === b) h = (r - g) / d + 4;
+		h *= 60;
+	}
+	return [
+		h,
+		s * 100,
+		v * 100
+	];
+};
+const hexToHsv = (hex) => {
+	if (hex.length === 4) hex = `#${hex.slice(1).split("").map((i) => i + i).join("")}`;
+	const [r, g, b] = hex.match(/\w\w/g).map((x) => Number.parseInt(x, 16));
+	return rgbToHsv(r, g, b);
+};
+const hsvToHex = (h, s, v) => {
+	const [r, g, b] = hsvToRgb(h, s, v);
+	return rgbToHex(r, g, b);
+};
+const hsvToRgba = (h, s, v, a) => {
+	const [r, g, b] = hsvToRgb(h, s, v);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+const parseRgba = (rgba) => {
+	const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d*\.?\d+))?\)/);
+	if (!match) throw new Error("Invalid RGBA string");
+	return [
+		Number.parseInt(match[1], 10),
+		Number.parseInt(match[2], 10),
+		Number.parseInt(match[3], 10),
+		match[4] ? Number.parseFloat(match[4]) : 1
+	];
+};
+
+//#endregion
+//#region src/components/color-picker/AlphaSlider.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
+	const [isDragging, setIsDragging] = useState(false);
+	const sliderRef = useRef(null);
+	const thumbRef = useRef(null);
+	const calculateAlpha = useCallback((clientX) => {
+		var _thumbRef$current$cli, _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 rect = slider.getBoundingClientRect();
+		const maxX = rect.width - thumbSize;
+		if (maxX <= 0) {
+			onChange(0);
+			return;
+		}
+		const x = Math.max(0, Math.min(clientX - rect.left, maxX));
+		onChange(Math.round(x / maxX * 100) / 100);
+	}, [onChange]);
+	const handlePointerMove = useCallback((e) => {
+		if (!isDragging) return;
+		calculateAlpha(e.clientX);
+	}, [isDragging, calculateAlpha]);
+	const handlePointerUp = useCallback(() => {
+		setIsDragging(false);
+		onChanged === null || onChanged === void 0 || onChanged(alpha);
+	}, [alpha]);
+	useEffect(() => {
+		if (isDragging) {
+			window.addEventListener("pointermove", handlePointerMove);
+			window.addEventListener("pointerup", handlePointerUp);
+			window.addEventListener("mouseup", handlePointerUp);
+		}
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("mouseup", handlePointerUp);
+		};
+	}, [
+		isDragging,
+		handlePointerMove,
+		handlePointerUp
+	]);
+	const getThumbPosition = () => {
+		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _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 thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
+		return `${safeAlpha / 100 * (100 - thumbOffsetPercent)}%`;
+	};
+	const color = hsvToRgb(...hsv);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-relative univer-w-full univer-select-none",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "univer-absolute univer-inset-0 univer-rounded-full",
+			style: {
+				backgroundImage: "linear-gradient(45deg, #E3E5EA 25%, transparent 25%), linear-gradient(-45deg, #E3E5EA 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #E3E5EA 75%), linear-gradient(-45deg, transparent 75%, #E3E5EA 75%)",
+				backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0",
+				backgroundSize: "8px 8px"
+			}
+		}), /* @__PURE__ */ jsx("div", {
+			ref: sliderRef,
+			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
+			style: { background: `linear-gradient(to right, transparent, rgb(${color.join(",")}))` },
+			onPointerDown: (e) => {
+				setIsDragging(true);
+				calculateAlpha(e.clientX);
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: thumbRef,
+				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",
+				style: {
+					left: getThumbPosition(),
+					transform: "translateY(-50%)",
+					transition: isDragging ? "none" : "all 0.1s ease-out"
+				}
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/ColorInput.tsx
+function HexInput({ hsv, onChange }) {
+	const [inputValue, setInputValue] = useState("");
+	const hexValue = useMemo(() => hsvToHex(hsv[0], hsv[1], hsv[2]), [hsv]);
+	useEffect(() => {
+		setInputValue(hexValue.replace(/^#/, ""));
+	}, [hexValue]);
+	const isValidHex = (hex) => {
+		return /^[0-9A-Fa-f]{6}$/.test(hex);
+	};
+	const handleChange = (e) => {
+		const newValue = e.target.value.trim();
+		if (newValue.length > 6) return;
+		if (newValue !== "" && !/^[0-9A-Fa-f]*$/.test(newValue)) return;
+		setInputValue(newValue);
+		if (isValidHex(newValue)) {
+			const hsvValue = hexToHsv(newValue);
+			if (hsvValue && onChange) onChange(...hsvValue);
+		}
+	};
+	const handleBlur = () => {
+		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 dark:!univer-text-white", borderClassName),
+		value: inputValue,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		maxLength: 6,
+		spellCheck: false
+	}), /* @__PURE__ */ jsx("span", {
+		className: "univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",
+		children: "#"
+	})] });
+}
+function RgbInput({ hsv, alpha, format, onChange }) {
+	const [localValues, setLocalValues] = useState({
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	});
+	useEffect(() => {
+		const [r, g, b] = hsvToRgb(hsv[0], hsv[1], hsv[2]);
+		setLocalValues({
+			r: Math.round(r),
+			g: Math.round(g),
+			b: Math.round(b),
+			a: alpha !== null && alpha !== void 0 ? alpha : 1
+		});
+	}, [hsv, alpha]);
+	const handleChange = (color, value) => {
+		if (color === "a") {
+			if (value !== "" && !/^\d*\.?\d*$/.test(value)) return;
+			const numValue = value === "" ? 0 : Number.parseFloat(value);
+			if (numValue > 1) return;
+			setLocalValues({
+				...localValues,
+				a: numValue
+			});
+			if (onChange) onChange(hsv[0], hsv[1], hsv[2], numValue);
+			return;
+		}
+		if (value !== "" && !/^\d*$/.test(value)) return;
+		const numValue = value === "" ? 0 : Number.parseInt(value, 10);
+		if (numValue > 255) return;
+		const newValues = {
+			...localValues,
+			[color]: numValue
+		};
+		setLocalValues(newValues);
+		if (onChange) onChange(...rgbToHsv(newValues.r, newValues.g, newValues.b), localValues.a);
+	};
+	const handleBlur = () => {
+		const [r, g, b] = hsvToRgb(hsv[0], hsv[1], hsv[2]);
+		setLocalValues({
+			r: Math.round(r),
+			g: Math.round(g),
+			b: Math.round(b),
+			a: alpha !== null && alpha !== void 0 ? 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",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				value: localValues.r,
+				onChange: (e) => handleChange("r", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			/* @__PURE__ */ jsx("input", {
+				value: localValues.g,
+				onChange: (e) => handleChange("g", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			/* @__PURE__ */ jsx("input", {
+				value: localValues.b,
+				onChange: (e) => handleChange("b", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			format === "rgba" && /* @__PURE__ */ jsx("input", {
+				value: localValues.a,
+				onChange: (e) => handleChange("a", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 4
+			})
+		]
+	});
+}
+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",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "univer-relative univer-flex univer-flex-1 univer-gap-2",
+			children: [/* @__PURE__ */ jsx(HexInput, {
+				hsv,
+				onChange
+			}), /* @__PURE__ */ jsx(RgbInput, {
+				hsv,
+				alpha,
+				format,
+				onChange
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/presets.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const colorPresets = [
+	[
+		"#FFFFFF",
+		"#E1EFFE",
+		"#FDE8E8",
+		"#FEECDC",
+		"#FFF4B9",
+		"#DEF7EC",
+		"#D5F5F6",
+		"#EDEBFE",
+		"#FCE8F3"
+	],
+	[
+		"#CDD0D8",
+		"#A4CAFE",
+		"#F8B4B4",
+		"#FDBA8C",
+		"#FAC815",
+		"#84E1BC",
+		"#7EDCE2",
+		"#CABFFD",
+		"#F8B4D9"
+	],
+	[
+		"#979DAC",
+		"#3F83F8",
+		"#F05252",
+		"#FF5A1F",
+		"#D49D0F",
+		"#0DA471",
+		"#0694A2",
+		"#9061F9",
+		"#E74694"
+	],
+	[
+		"#414657",
+		"#1A56DB",
+		"#C81E1E",
+		"#B43403",
+		"#9A6D15",
+		"#046C4E",
+		"#036672",
+		"#6C2BD9",
+		"#BF125D"
+	],
+	[
+		"#000000",
+		"#233876",
+		"#771D1D",
+		"#8A2C0D",
+		"#634312",
+		"#014737",
+		"#014451",
+		"#4A1D96",
+		"#751A3D"
+	]
+];
+
+//#endregion
+//#region src/components/color-picker/ColorPresets.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function ColorPresets({ hsv, onChange }) {
+	const handleSelectPreset = useCallback((color) => {
+		const [h, s, v] = hexToHsv(color);
+		onChange(h, s, v);
+	}, [onChange]);
+	const currentColor = hsvToHex(hsv[0], hsv[1], hsv[2]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-u-comp": "color-picker-presets",
+		className: "univer-grid univer-content-center univer-gap-2",
+		children: colorPresets.map((row, i) => /* @__PURE__ */ jsx("div", {
+			className: "univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",
+			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-border-gray-200": i === 0 && j === 0
+				}),
+				style: { backgroundColor: color },
+				onClick: () => handleSelectPreset(color)
+			}, j))
+		}, i))
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/ColorSpectrum.tsx
+function ColorSpectrum({ hsv, onChange, onChanged }) {
+	const canvasRef = useRef(null);
+	const containerRef = useRef(null);
+	const [isDragging, setIsDragging] = useState(false);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const gradientS = ctx.createLinearGradient(0, 0, canvas.width, 0);
+		gradientS.addColorStop(0, `hsl(${hsv[0]}, 0%, 50%)`);
+		gradientS.addColorStop(1, `hsl(${hsv[0]}, 100%, 50%)`);
+		ctx.fillStyle = gradientS;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+		const gradientV = ctx.createLinearGradient(0, 0, 0, canvas.height);
+		gradientV.addColorStop(0, "rgba(255, 255, 255, 0)");
+		gradientV.addColorStop(1, "rgba(0, 0, 0, 1)");
+		ctx.fillStyle = gradientV;
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+	}, [hsv]);
+	const handlePointerEvent = (e) => {
+		e.stopPropagation();
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const rect = canvas.getBoundingClientRect();
+		const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+		const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+		const s = x / rect.width * 100;
+		const v = 100 - y / rect.height * 100;
+		onChange(hsv[0], s, v);
+	};
+	const handlePointerUp = useCallback(() => {
+		setIsDragging(false);
+	}, [hsv]);
+	function handleChange() {
+		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
+	}
+	useEffect(() => {
+		var _containerRef$current;
+		(_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.addEventListener("mouseup", handleChange);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("mouseup", handlePointerUp);
+		return () => {
+			var _containerRef$current2;
+			(_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.removeEventListener("mouseup", handleChange);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("mouseup", handlePointerUp);
+		};
+	}, [hsv]);
+	const getIndicatorStyles = () => {
+		var _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
+		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;
+		return {
+			transform: `translate(${hsv[1] / 100 * w - halfIndicatorSize}px, ${(100 - hsv[2]) / 100 * h - halfIndicatorSize}px)`,
+			transition: isDragging ? "none" : "transform 0.1s ease-out"
+		};
+	};
+	useEffect(() => {
+		const handlePointerUp = () => {
+			setIsDragging(false);
+		};
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("mouseup", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("mouseup", handlePointerUp);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "color-picker-spectrum",
+		ref: containerRef,
+		className: "univer-relative univer-overflow-hidden",
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			className: "univer-size-full univer-cursor-crosshair univer-rounded",
+			onPointerDown: (e) => {
+				setIsDragging(true);
+				handlePointerEvent(e);
+			},
+			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",
+			style: getIndicatorStyles()
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/HueSlider.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function HueSlider({ hsv, onChange, onChanged }) {
+	const [isDragging, setIsDragging] = useState(false);
+	const sliderRef = useRef(null);
+	const thumbRef = useRef(null);
+	const calculateHue = useCallback((clientX) => {
+		var _thumbRef$current$cli, _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 rect = slider.getBoundingClientRect();
+		const maxX = rect.width - thumbSize;
+		if (maxX <= 0) {
+			onChange(0, hsv[1], hsv[2]);
+			return;
+		}
+		const x = Math.max(0, Math.min(clientX - rect.left, maxX));
+		onChange(Math.round(x / maxX * 360), hsv[1], hsv[2]);
+	}, [hsv, onChange]);
+	const handlePointerMove = useCallback((e) => {
+		e.stopPropagation();
+		if (!isDragging) return;
+		calculateHue(e.clientX);
+	}, [isDragging, calculateHue]);
+	const handlePointerUp = useCallback(() => {
+		setIsDragging(false);
+		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
+	}, [hsv, onChanged]);
+	useEffect(() => {
+		if (isDragging) {
+			window.addEventListener("pointermove", handlePointerMove);
+			window.addEventListener("pointerup", handlePointerUp);
+			window.addEventListener("mouseup", handlePointerUp);
+		}
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("mouseup", handlePointerUp);
+		};
+	}, [
+		isDragging,
+		handlePointerMove,
+		handlePointerUp
+	]);
+	const getThumbPosition = () => {
+		var _thumbRef$current$cli2, _thumbRef$current2, _sliderRef$current$cl, _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 thumbOffsetPercent = sliderWidth > 0 ? thumbSize / sliderWidth * 100 : 0;
+		return `${safeHue / 360 * (100 - thumbOffsetPercent)}%`;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-u-comp": "color-picker-hue-slider",
+		className: "univer-relative univer-w-full univer-select-none",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: sliderRef,
+			className: "univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",
+			style: { background: `linear-gradient(to right,
                         hsl(0, 100%, 50%),
                         hsl(60, 100%, 50%),
                         hsl(120, 100%, 50%),
                         hsl(180, 100%, 50%),
                         hsl(240, 100%, 50%),
                         hsl(300, 100%, 50%),
-                        hsl(360, 100%, 50%))`},onPointerDown:e=>{i(!0),s(e.clientX)},children:I(`div`,{ref:o,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`,style:{left:u(),transform:`translateY(-50%)`,transition:r?`none`:`all 0.1s ease-out`}})})})}const Dt=w(Tt),Ot=w(Et),kt=w(yt),At=w(St),jt=w(wt);function Mt({format:e=`hex`,value:t,onChange:n}){if(!Le)return null;let{locale:r}=E(K),[i,a]=M([0,100,100]),[o,s]=M(1),[c,l]=M(!1),u=T((e,t,n)=>Z(e,t,n),[]);D(()=>{try{let n=t||(e===`hex`?`#000000`:`rgba(0, 0, 0, 1)`);if(e===`hex`){let[e,t,r]=ht(n);a([e,t,r]),s(1)}else if(e===`rgba`){let[e,t,r,i]=vt(n),[o,c,l]=mt(e,t,r);a([o,c,l]),s(i)}}catch(e){console.error(`Invalid value:`,e)}},[t,e]);function d(e,t,n){a([e,t,n])}function f(e){s(e)}function p(t,r,i,a=o){if(e===`hex`){let[e,a,o]=u(t,r,i),s=pt(e,a,o);n==null||n(s)}else if(e===`rgba`){let[e,o,s]=u(t,r,i);n==null||n(`rgba(${e}, ${o}, ${s}, ${a})`)}}function m(){let[t,r,a]=i;if(e===`hex`){let e=gt(t,r,a);n==null||n(e)}else if(e===`rgba`){let[e,i,s]=u(t,r,a);n==null||n(`rgba(${e}, ${i}, ${s}, ${o})`)}l(!1)}return L(`div`,{"data-u-comp":`color-picker`,className:`univer-cursor-default univer-space-y-2 univer-rounded-lg`,onClick:e=>e.stopPropagation(),children:[I(jt,{hsv:i,onChange:(e,t,n)=>{d(e,t,n),f(1),p(e,t,n,1)}}),I(`div`,{className:`univer-flex univer-h-7 univer-items-center`,children:I(`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`,onClick:()=>l(!0),children:r==null?void 0:r.ColorPicker.more})}),I(ft,{className:`!univer-w-fit !univer-p-2.5`,closable:!1,maskClosable:!1,open:c,onOpenChange:l,children:L(`div`,{className:`univer-grid univer-w-64 univer-gap-2`,children:[I(Dt,{hsv:i,onChange:d}),L(`div`,{className:`univer-flex univer-items-center univer-gap-2`,children:[I(`div`,{className:`univer-size-6 univer-flex-shrink-0 univer-rounded-sm`,style:{backgroundColor:e===`hex`?gt(...i):_t(...i,o)}}),L(`div`,{className:`univer-flex-1 univer-space-y-2`,children:[I(Ot,{hsv:i,onChange:d}),e===`rgba`&&I(kt,{hsv:i,alpha:o,onChange:f})]})]}),I(At,{hsv:i,alpha:o,format:e,onChange:(e,t,n,r)=>{d(e,t,n),r!==void 0&&f(r)}}),L(`footer`,{className:`univer-flex univer-items-center univer-justify-end univer-gap-2`,children:[I(G,{onClick:()=>l(!1),children:r==null?void 0:r.ColorPicker.cancel}),I(G,{variant:`primary`,onClick:m,children:r==null?void 0:r.ColorPicker.confirm})]})]})})]})}function Nt(e){let{locale:t,cancelText:n,confirmText:r,onClose:i,onConfirm:a,closable:o=!0}=e;return L(`footer`,{className:`univer-flex univer-items-center univer-justify-end univer-gap-2`,children:[o&&I(G,{onClick:i,children:n==null?t==null?void 0:t.Confirm.cancel:n}),I(G,{variant:`primary`,onClick:a,children:r==null?t==null?void 0:t.Confirm.confirm:r})]})}function Pt(e){let{children:t,visible:n=!1,title:r,cancelText:i,confirmText:a,width:o,onClose:s,onConfirm:c,closable:l=!0}=e,{locale:u}=E(K);return I(ft,{open:n,title:r,maskClosable:!1,footer:I(Nt,{locale:u,cancelText:i,confirmText:a,onClose:s,onConfirm:c,closable:l}),onClose:s,width:o,closable:l,children:t})}function Ft({...e}){return I(oe,{"data-slot":`popover`,...e})}function It({...e}){return I(se,{"data-slot":`popover-trigger`,...e})}function Lt({className:e,align:t=`center`,sideOffset:n=4,...r}){return I(ae,{children:I(ie,{"data-slot":`popover-content`,align:t,sideOffset:n,className:W(`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`,Y,q,e),...r})})}function Rt(e){let{children:t,overlay:n,disabled:r,open:i,onOpenChange:a,...o}=e,[s,c]=M(!1),l=i!==void 0,u=l?i:s;function d(e){r||(l||c(e),a==null||a(e))}return L(Ft,{open:u,onOpenChange:d,children:[I(It,{asChild:!0,children:t}),I(Lt,{...o,children:n})]})}function zt(t){let{value:n,onValueChange:r,className:i}=t,[a,o]=M(!1);function s(e){r==null||r(e),o(!1)}return I(Rt,{align:`start`,overlay:I(`div`,{className:`univer-p-2`,children:I(Qe,{value:n,onValueChange:s})}),open:a,onOpenChange:o,children:L(`button`,{className:W(`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`,Y,i),type:`button`,children:[qe(n,`YYYY-MM-DD`),I(e,{className:`univer-text-gray-600 dark:!univer-text-gray-400`})]})})}function Bt(t){let{value:n=[new Date,new Date],onValueChange:r,className:i}=t,[a,o]=M(!1);function s(e){let[t,n]=e;t>n&&([t,n]=[n,t]),r==null||r([t,n]),o(!1)}return I(Rt,{align:`start`,overlay:L(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 univer-p-2`,children:[I(Qe,{value:n[0],max:n[1],onValueChange:e=>{s([e,n[1]])}}),I(Qe,{value:n[1],min:n[0],onValueChange:e=>{s([n[0],e])}})]}),open:a,onOpenChange:o,children:L(`button`,{className:W(`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`,Y,i),type:`button`,children:[L(`span`,{className:`univer-flex univer-gap-1`,children:[I(`span`,{children:qe(n[0],`YYYY-MM-DD`)}),I(`span`,{children:`-`}),I(`span`,{children:qe(n[1],`YYYY-MM-DD`)})]}),I(e,{className:`univer-text-gray-600 dark:!univer-text-gray-400`})]})})}function Vt(e,t,n){if(t===n||t<0||n<0||t>=e.length||n>=e.length)return e;let r=[...e],[i]=r.splice(t,1);return r.splice(n,0,i),r}function Ht(e){let{list:t,onListChange:n,idKey:r,itemRender:i,className:a,style:o,draggableHandle:s,rowHeight:c,margin:l=[0,0],onDragStart:u,onDragStop:d,...f}=e,[p,m]=M(t),h=j(t),[g,_]=M(null),[v,y]=M(null),[b,x]=M(null),[S,C]=M(null),[w,T]=M(!1),E=j(null),O=j({x:0,y:0}),k=j({width:0,height:0}),N=j(null),P=j(null),R=j(null),z=j(-1);D(()=>{g||(m(t),h.current=t)},[g,t]),D(()=>{T(typeof document<`u`)},[]),D(()=>{let e=N.current;e&&(e.replaceChildren(),b&&e.appendChild(b))},[b]),D(()=>{if(!g)return;let e=e=>{let t=R.current;if(!t||E.current!==e.pointerId)return;C({x:e.clientX-O.current.x,y:e.clientY-O.current.y});let n=document.elementFromPoint(e.clientX,e.clientY),r=n==null?void 0:n.closest(`[data-draggable-list-item-id]`),i=r==null?void 0:r.dataset.draggableListItemId;!i||i===t||(y(i),m(e=>{let n=e.findIndex(e=>B(e)===t),r=e.findIndex(e=>B(e)===i);if(n<0||r<0||n===r)return e;let a=Vt(e,n,r);return h.current=a,a}))},t=e=>{if(E.current!==e.pointerId)return;let t=R.current,r=z.current,i=h.current;if(t){let e=i.findIndex(e=>B(e)===t);d==null||d(void 0,{y:r},{y:e}),r>=0&&n([...i])}E.current=null,P.current=null,R.current=null,z.current=-1,y(null),x(null),C(null),_(null)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),window.addEventListener(`pointercancel`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t),window.removeEventListener(`pointercancel`,t)}},[g,d,n]);let ee=A(()=>{let[e,t]=l;return{rowGap:`${t}px`,paddingLeft:e?`${e}px`:void 0,paddingRight:e?`${e}px`:void 0,...o}},[l,o]),B=e=>String(e[r]),V=g?p.find(e=>B(e)===g):null;return L(F,{children:[I(`div`,{...f,className:W(`univer-flex univer-flex-col`,g&&`univer-cursor-grabbing univer-select-none`,a),style:ee,children:p.map((e,t)=>{let n=B(e),r=g===n,a=v===n&&!r;return L(`div`,{"data-draggable-list-item-id":n,className:W(`univer-relative univer-transition-all univer-duration-150`,r&&`univer-opacity-0`,a&&`
+                        hsl(360, 100%, 50%))` },
+			onPointerDown: (e) => {
+				setIsDragging(true);
+				calculateHue(e.clientX);
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref: thumbRef,
+				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",
+				style: {
+					left: getThumbPosition(),
+					transform: "translateY(-50%)",
+					transition: isDragging ? "none" : "all 0.1s ease-out"
+				}
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/color-picker/ColorPicker.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const MemoizedColorSpectrum = memo(ColorSpectrum);
+const MemoizedHueSlider = memo(HueSlider);
+const MemoizedAlphaSlider = memo(AlphaSlider);
+const MemoizedColorInput = memo(ColorInput);
+const MemoizedColorPresets = memo(ColorPresets);
+function ColorPicker({ format = "hex", value, onChange }) {
+	if (!isBrowser) return null;
+	const { locale } = useContext(ConfigContext);
+	const [hsv, setHsv] = useState([
+		0,
+		100,
+		100
+	]);
+	const [alpha, setAlpha] = useState(1);
+	const [visible, setVisible] = useState(false);
+	const getRgb = useCallback((h, s, v) => {
+		return hsvToRgb(h, s, v);
+	}, []);
+	useEffect(() => {
+		try {
+			const actualValue = value || (format === "hex" ? "#000000" : "rgba(0, 0, 0, 1)");
+			if (format === "hex") {
+				const [h, s, v] = hexToHsv(actualValue);
+				setHsv([
+					h,
+					s,
+					v
+				]);
+				setAlpha(1);
+			} else if (format === "rgba") {
+				const [r, g, b, a] = parseRgba(actualValue);
+				const [h, s, v] = rgbToHsv(r, g, b);
+				setHsv([
+					h,
+					s,
+					v
+				]);
+				setAlpha(a);
+			}
+		} catch (error) {
+			console.error("Invalid value:", error);
+		}
+	}, [value, format]);
+	function handleColorChange(h, s, v) {
+		setHsv([
+			h,
+			s,
+			v
+		]);
+	}
+	function handleAlphaChange(a) {
+		setAlpha(a);
+	}
+	function handleColorChanged(h, s, v, a = alpha) {
+		if (format === "hex") {
+			const [r, g, b] = getRgb(h, s, v);
+			const hex = rgbToHex(r, g, b);
+			onChange === null || onChange === void 0 || onChange(hex);
+		} else if (format === "rgba") {
+			const [r, g, b] = getRgb(h, s, v);
+			onChange === null || onChange === void 0 || onChange(`rgba(${r}, ${g}, ${b}, ${a})`);
+		}
+	}
+	function handleConfirmCustomColor() {
+		const [h, s, v] = hsv;
+		if (format === "hex") {
+			const hex = hsvToHex(h, s, v);
+			onChange === null || onChange === void 0 || onChange(hex);
+		} else if (format === "rgba") {
+			const [r, g, b] = getRgb(h, s, v);
+			onChange === null || onChange === void 0 || onChange(`rgba(${r}, ${g}, ${b}, ${alpha})`);
+		}
+		setVisible(false);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "color-picker",
+		className: "univer-cursor-default univer-space-y-2 univer-rounded-lg",
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ jsx(MemoizedColorPresets, {
+				hsv,
+				onChange: (h, s, v) => {
+					handleColorChange(h, s, v);
+					handleAlphaChange(1);
+					handleColorChanged(h, s, v, 1);
+				}
+			}),
+			/* @__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",
+					onClick: () => setVisible(true),
+					children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.more
+				})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				className: "!univer-w-fit !univer-p-2.5",
+				closable: false,
+				maskClosable: false,
+				open: visible,
+				onOpenChange: setVisible,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "univer-grid univer-w-64 univer-gap-2",
+					children: [
+						/* @__PURE__ */ jsx(MemoizedColorSpectrum, {
+							hsv,
+							onChange: handleColorChange
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "univer-flex univer-items-center univer-gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "univer-size-6 univer-flex-shrink-0 univer-rounded-sm",
+								style: { backgroundColor: format === "hex" ? hsvToHex(...hsv) : hsvToRgba(...hsv, alpha) }
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "univer-flex-1 univer-space-y-2",
+								children: [/* @__PURE__ */ jsx(MemoizedHueSlider, {
+									hsv,
+									onChange: handleColorChange
+								}), format === "rgba" && /* @__PURE__ */ jsx(MemoizedAlphaSlider, {
+									hsv,
+									alpha,
+									onChange: handleAlphaChange
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsx(MemoizedColorInput, {
+							hsv,
+							alpha,
+							format,
+							onChange: (h, s, v, a) => {
+								handleColorChange(h, s, v);
+								if (a !== void 0) handleAlphaChange(a);
+							}
+						}),
+						/* @__PURE__ */ jsxs("footer", {
+							className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								onClick: () => setVisible(false),
+								children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.cancel
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								onClick: handleConfirmCustomColor,
+								children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.confirm
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/confirm/Confirm.tsx
+function Footer(props) {
+	const { locale, cancelText, confirmText, onClose, onConfirm, closable = true } = props;
+	return /* @__PURE__ */ jsxs("footer", {
+		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
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			onClick: onConfirm,
+			children: confirmText !== null && confirmText !== void 0 ? confirmText : locale === null || locale === void 0 ? void 0 : locale.Confirm.confirm
+		})]
+	});
+}
+function Confirm(props) {
+	const { children, visible = false, title, cancelText, confirmText, width, onClose, onConfirm, closable = true } = props;
+	const { locale } = useContext(ConfigContext);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: visible,
+		title,
+		maskClosable: false,
+		footer: /* @__PURE__ */ jsx(Footer, {
+			locale,
+			cancelText,
+			confirmText,
+			onClose,
+			onConfirm,
+			closable
+		}),
+		onClose,
+		width,
+		closable,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/dropdown/PopoverPrimitive.tsx
+function PopoverPrimitive({ ...props }) {
+	return /* @__PURE__ */ jsx(Root$1, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(Content$1, {
+		"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),
+		...props
+	}) });
+}
+
+//#endregion
+//#region src/components/dropdown/Dropdown.tsx
+function Dropdown(props) {
+	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = 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__ */ jsxs(PopoverPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			...restProps,
+			children: overlay
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/date-picker/DatePicker.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function DatePicker(props) {
+	const { value, onValueChange, className } = props;
+	const [open, setOpen] = useState(false);
+	function handleValueChange(date) {
+		onValueChange === null || onValueChange === void 0 || onValueChange(date);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsx(Dropdown, {
+		align: "start",
+		overlay: /* @__PURE__ */ jsx("div", {
+			className: "univer-p-2",
+			children: /* @__PURE__ */ jsx(Calendar, {
+				value,
+				onValueChange: handleValueChange
+			})
+		}),
+		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),
+			type: "button",
+			children: [formatDateWithPattern(value, "YYYY-MM-DD"), /* @__PURE__ */ jsx(CalendarIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-400" })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/date-range-picker/DateRangePicker.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function DateRangePicker(props) {
+	const { value = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()], onValueChange, className } = props;
+	const [open, setOpen] = useState(false);
+	function handleValueChange(date) {
+		let [start, end] = date;
+		if (start > end) [start, end] = [end, start];
+		onValueChange === null || onValueChange === void 0 || onValueChange([start, end]);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsx(Dropdown, {
+		align: "start",
+		overlay: /* @__PURE__ */ jsxs("div", {
+			className: "univer-grid univer-grid-cols-2 univer-gap-2 univer-p-2",
+			children: [/* @__PURE__ */ jsx(Calendar, {
+				value: value[0],
+				max: value[1],
+				onValueChange: (date) => {
+					handleValueChange([date, value[1]]);
+				}
+			}), /* @__PURE__ */ jsx(Calendar, {
+				value: value[1],
+				min: value[0],
+				onValueChange: (date) => {
+					handleValueChange([value[0], date]);
+				}
+			})]
+		}),
+		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),
+			type: "button",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "univer-flex univer-gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: formatDateWithPattern(value[0], "YYYY-MM-DD") }),
+					/* @__PURE__ */ jsx("span", { children: "-" }),
+					/* @__PURE__ */ jsx("span", { children: formatDateWithPattern(value[1], "YYYY-MM-DD") })
+				]
+			}), /* @__PURE__ */ jsx(CalendarIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-400" })]
+		})
+	});
+}
+
+//#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] = useState(list);
+	const displayListRef = useRef(list);
+	const [draggingId, setDraggingId] = useState(null);
+	const [dragOverId, setDragOverId] = useState(null);
+	const [ghostElement, setGhostElement] = useState(null);
+	const [ghostPosition, setGhostPosition] = useState(null);
+	const [canUsePortal, setCanUsePortal] = useState(false);
+	const pointerIdRef = useRef(null);
+	const dragPointerOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const dragItemSizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const ghostContainerRef = useRef(null);
+	const pressedHandleIdRef = useRef(null);
+	const dragSourceIdRef = useRef(null);
+	const dragStartIndexRef = useRef(-1);
+	useEffect(() => {
+		if (!draggingId) {
+			setDisplayList(list);
+			displayListRef.current = list;
+		}
+	}, [draggingId, list]);
+	useEffect(() => {
+		setCanUsePortal(typeof document !== "undefined");
+	}, []);
+	useEffect(() => {
+		const container = ghostContainerRef.current;
+		if (!container) return;
+		container.replaceChildren();
+		if (ghostElement) container.appendChild(ghostElement);
+	}, [ghostElement]);
+	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 = 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		...restProps,
+		className: clsx("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__ */ jsxs("div", {
+				"data-draggable-list-item-id": itemId,
+				className: clsx("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(E.current!==null||(s?P.current=e.target.closest(s)?n:null:P.current=n,P.current!==n))return;let r=e.currentTarget.getBoundingClientRect();O.current={x:e.clientX-r.left,y:e.clientY-r.top},k.current={width:r.width,height:r.height},C({x:r.left,y:r.top}),x(e.currentTarget.cloneNode(!0)),E.current=e.pointerId,R.current=n,z.current=t,_(n),h.current=p,u==null||u(void 0,{y:t}),e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId)},style:{...c?{minHeight:`${c}px`}:void 0,cursor:g?`grabbing`:void 0},children:[r&&I(`div`,{className:`
-                                      univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded
-                                      univer-border univer-border-dashed univer-border-primary-300
-                                    `}),i(e,t)]},n)})}),w&&V&&S&&ce(I(`div`,{className:W(`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:`${S.x}px`,top:`${S.y}px`,width:`${k.current.width}px`,height:`${k.current.height}px`,opacity:.95},children:b?I(`div`,{ref:N}):i(V,p.findIndex(e=>B(e)===B(V)))}),document.body)]})}function Ut({...e}){return I(ge,{"data-slot":`dropdown-menu`,...e})}function Wt({...e}){return I(pe,{"data-slot":`dropdown-menu-portal`,...e})}function Gt({...e}){return I(xe,{"data-slot":`dropdown-menu-trigger`,...e})}function Kt({...e}){return I(ve,{"data-slot":`dropdown-menu-sub`,...e})}function qt({...e}){return I(me,{"data-slot":`dropdown-menu-radio-group`,...e})}function Jt({className:e,inset:t,children:n,...r}){return L(be,{"data-slot":`dropdown-menu-sub-trigger`,"data-inset":t,className:W(`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`,e),...r,children:[n,I(f,{className:`ml-auto`})]})}function Yt({className:e,...t}){return I(ye,{"data-slot":`dropdown-menu-sub-content`,className:W(`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`,Y,q,e),...t})}function Xt({className:e,sideOffset:t=4,...n}){return I(pe,{children:I(ue,{"data-slot":`dropdown-menu-content`,sideOffset:t,className:W(`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`,Y,q,e),...n})})}function Zt({className:e,inset:t,variant:n=`default`,...r}){return I(de,{"data-slot":`dropdown-menu-item`,"data-inset":t,"data-variant":n,className:W(`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`,e),...r})}function Qt({className:e,children:n,hideIndicator:r,checked:i,...a}){return L(le,{"data-slot":`dropdown-menu-checkbox-item`,className:W(`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":!r,"univer-pl-2":r},e),checked:i,...a,children:[!r&&I(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center`,children:I(fe,{children:I(t,{className:`univer-block univer-size-4 univer-fill-current univer-text-primary-600`})})}),n]})}function $t({className:e,children:n,hideIndicator:r,...i}){return L(he,{"data-slot":`dropdown-menu-radio-item`,className:W(`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":!r,"univer-pl-2":r},e),...i,children:[!r&&I(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center`,children:I(fe,{children:I(t,{className:`univer-block univer-size-4 univer-fill-current univer-text-primary-600`})})}),n]})}function en({className:e,...t}){return I(_e,{className:W(`-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600`,e),...t})}function tn(e){let{children:t,items:n,disabled:r,open:i,onOpenChange:a,...o}=e,[s,c]=M(!1),l=i!==void 0,u=l?i:s;function d(e){r||(l||c(e),a==null||a(e))}function f(e,t){let{className:n,type:r}=e;if(r===`separator`)return I(en,{className:n},t);if(r===`radio`)return I(qt,{className:n,value:e.value,onValueChange:e.onSelect,children:e.options.map((t,n)=>{if(`type`in t){if(t.type===`separator`)return I(en,{className:t.className},n)}else{if(t.value===void 0)throw Error("[DropdownMenu]: `value` is required");return I($t,{value:t.value,disabled:t.disabled,hideIndicator:e.hideIndicator,children:t.label},t.value)}return null})},t);if(r===`checkbox`)return I(Qt,{className:n,disabled:e.disabled,checked:e.checked,onSelect:()=>{var t;(t=e.onSelect)==null||t.call(e,e.value)},children:e.label},t);if(r===`item`)return I(Zt,{className:n,disabled:e.disabled,onSelect:()=>{var t;(t=e.onSelect)==null||t.call(e,e)},children:e.children},t);if(r===`subItem`){var i;return L(Kt,{children:[I(Jt,{children:e.children}),I(Wt,{children:I(Yt,{sideOffset:12,children:(i=e.options)==null?void 0:i.map((e,t)=>f(e,t))})})]},t)}}return L(Ut,{modal:!1,open:u,onOpenChange:d,children:[I(Gt,{asChild:!0,children:t}),I(Xt,{className:`univer-text-sm`,collisionPadding:{top:12,bottom:12},onWheel:e=>e.stopPropagation(),...o,children:n.map((e,t)=>f(e,t))})]})}const nn=x(!1),rn=e=>{let{label:t,desc:n,children:r,style:i,className:a,error:o,contentStyle:s,collapsable:c=!1,defaultCollapsed:l=!1}=e,[u,d]=M(l);return I(nn.Provider,{value:!0,children:L(`div`,{"data-u-comp":`form-layout`,className:W(`univer-mb-3 univer-flex univer-flex-col`,a),style:i,children:[t&&L(`div`,{className:W(`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":c}),onClick:()=>d(!u),children:[t,c&&I(p,{className:W(`univer-ml-1 univer-transition-transform`,{"univer-rotate-180":u})})]}),u&&c?null:L(F,{children:[n&&I(`div`,{className:`univer-mt-1 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:n}),r?L(`div`,{className:W(`last:univer-mb-0 [&_[data-u-comp=input]]:univer-w-full [&_[data-u-comp=select]]:univer-w-full`,{"[&_[data-u-comp=input]]:univer-border-red-500":o,"[&_[data-u-comp=select]]:univer-border-red-500":o}),style:s,children:[r,o?I(`div`,{className:`univer-mt-1 univer-text-xs univer-text-red-500`,children:o}):null]}):null]})]})})},an=e=>I(`div`,{className:`univer-flex univer-justify-between [&_[data-u-comp=form-layout]]:univer-max-w-[calc(50%-8px)] [&_[data-u-comp=form-layout]]:univer-shrink [&_[data-u-comp=form-layout]]:univer-grow`,children:e.children});function on(e){let{className:t,value:n=0,total:r=0,loop:i,text:a,onChange:o}=e,s=A(()=>a==null?`${n}/${r}`:a,[n,r,a]),c=r>0,l=()=>{n===1?i&&(o==null||o(r)):o==null||o(n-1)},u=()=>{n===r?i&&(o==null||o(1)):o==null||o(n+1)};return I(`div`,{"data-u-comp":`pager`,className:W(`univer-flex univer-flex-shrink-0 univer-items-center univer-text-sm univer-text-gray-700 dark:!univer-text-gray-400`,t),children:c?L(F,{children:[I(`button`,{"data-u-comp":`pager-left-arrow`,className:`univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600`,type:`button`,role:`button`,onClick:l,children:I(d,{})}),I(`span`,{className:`univer-mx-1`,children:s}),I(`button`,{"data-u-comp":`pager-right-arrow`,className:`univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600`,type:`button`,role:`button`,onClick:u,children:I(f,{})})]}):I(`div`,{className:`univer-mx-1`,children:s})})}const sn=`
+                                `),
+				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__ */ 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 && createPortal(/* @__PURE__ */ jsx("div", {
+		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"),
+		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__ */ 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__ */ jsx(Root$2, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Portal$2, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Trigger$1, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: clsx("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__ */ jsx(MoreRightIcon, { className: "ml-auto" })]
+	});
+}
+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),
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(Content$2, {
+		"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),
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: clsx("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__ */ jsxs(CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: clsx("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__ */ jsx("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
+	return /* @__PURE__ */ jsxs(RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: clsx("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__ */ jsx("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		className: clsx("-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] = 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__ */ jsx(DropdownMenuSeparator, { className }, index);
+		else if (type === "radio") return /* @__PURE__ */ 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__ */ jsx(DropdownMenuSeparator, { className: option.className }, index);
+				} else {
+					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
+					return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsx(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ 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__ */ jsxs(DropdownMenuPrimitive, {
+		modal: false,
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ 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/form-layout/FormLayout.tsx
+const FormLayoutContext = createContext(false);
+const FormLayout = (props) => {
+	const { label, desc, children, style, className, error, contentStyle, collapsable = false, defaultCollapsed = false } = props;
+	const [collapsed, setCollapsed] = useState(defaultCollapsed);
+	return /* @__PURE__ */ jsx(FormLayoutContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "form-layout",
+			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 }),
+				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", {
+				className: "univer-mt-1 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+				children: desc
+			}), children ? /* @__PURE__ */ jsxs("div", {
+				className: clsx("last:univer-mb-0 [&_[data-u-comp=input]]:univer-w-full [&_[data-u-comp=select]]:univer-w-full", {
+					"[&_[data-u-comp=input]]:univer-border-red-500": error,
+					"[&_[data-u-comp=select]]:univer-border-red-500": error
+				}),
+				style: contentStyle,
+				children: [children, error ? /* @__PURE__ */ jsx("div", {
+					className: "univer-mt-1 univer-text-xs univer-text-red-500",
+					children: error
+				}) : null]
+			}) : null] })]
+		})
+	});
+};
+/**
+* A dual columns layout component for the form.
+* @param props props of the component
+*/
+const FormDualColumnLayout = (props) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "univer-flex univer-justify-between [&_[data-u-comp=form-layout]]:univer-max-w-[calc(50%-8px)] [&_[data-u-comp=form-layout]]:univer-shrink [&_[data-u-comp=form-layout]]:univer-grow",
+		children: props.children
+	});
+};
+
+//#endregion
+//#region src/components/pager/Pager.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function Pager(props) {
+	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
+	const text = useMemo(() => propText !== null && propText !== void 0 ? propText : `${current}/${count}`, [
+		current,
+		count,
+		propText
+	]);
+	const hasValue = count > 0;
+	const onClickLeftArrow = () => {
+		if (current === 1) {
+			if (loop) onChange === null || onChange === void 0 || onChange(count);
+		} else onChange === null || onChange === void 0 || onChange(current - 1);
+	};
+	const onClickRightArrow = () => {
+		if (current === count) {
+			if (loop) onChange === null || onChange === void 0 || onChange(1);
+		} else onChange === null || onChange === void 0 || onChange(current + 1);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-u-comp": "pager",
+		className: clsx("univer-flex univer-flex-shrink-0 univer-items-center univer-text-sm univer-text-gray-700 dark:!univer-text-gray-400", className),
+		children: hasValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("button", {
+				"data-u-comp": "pager-left-arrow",
+				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				type: "button",
+				role: "button",
+				onClick: onClickLeftArrow,
+				children: /* @__PURE__ */ jsx(MoreLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "univer-mx-1",
+				children: text
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"data-u-comp": "pager-right-arrow",
+				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				type: "button",
+				role: "button",
+				onClick: onClickRightArrow,
+				children: /* @__PURE__ */ jsx(MoreRightIcon, {})
+			})
+		] }) : /* @__PURE__ */ jsx("div", {
+			className: "univer-mx-1",
+			children: text
+		})
+	});
+}
+
+//#endregion
+//#region src/components/gallery/Gallery.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+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
-`;function cn(e){let{className:t,images:n,open:r,onOpenChange:i}=e,[a,o]=M(!1),[s,c]=M(0),[l,u]=M(1),d=j(null),f=A(()=>n[s],[s,n]);if(D(()=>{r&&d.current&&d.current.focus()},[r]),D(()=>{if(!r)return;let e=e=>{e.key===`Escape`&&(i==null||i(!1))};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[r,i]),D(()=>{if(r)o(!0);else{let e=setTimeout(()=>{o(!1)},150);return()=>clearTimeout(e)}},[r]),D(()=>{if(!r)return;let e=e=>{e.preventDefault();let t=-e.deltaY*.001;u(e=>Math.min(Math.max(.5,e+t),2))};return window.addEventListener(`wheel`,e,{passive:!1}),()=>{window.removeEventListener(`wheel`,e)}},[r]),!r&&!a)return null;function p(e){if(e===`reset`){u(1);return}let t=l+e;t<.5||t>2||u(t)}return ce(L(`div`,{"data-u-comp":`gallery`,role:`dialog`,"aria-modal":`true`,"aria-label":`Image gallery`,tabIndex:-1,ref:d,className:W(`univer-absolute univer-inset-0 univer-z-[1080] univer-flex univer-size-full univer-select-none univer-items-center univer-justify-center`,{"univer-animate-in univer-fade-in":r,"univer-animate-out univer-fade-out":!r},t),children:[I(`div`,{className:`univer-absolute univer-inset-0 univer-size-full univer-bg-gray-900 univer-opacity-80`,"aria-hidden":`true`,onClick:()=>i==null?void 0:i(!1)}),I(`div`,{className:`univer-relative`,children:f&&I(`img`,{className:`univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out`,style:{transform:`scale(${l})`},src:f,alt:`Image ${s+1} of ${n.length}`,draggable:!1})}),L(`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`,children:[I(on,{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`,value:s+1,total:n.length,onChange:e=>c(e-1)}),I(`button`,{type:`button`,"aria-label":`Zoom in`,className:sn,onClick:()=>p(.25),children:I(_,{"aria-hidden":`true`})}),I(`button`,{type:`button`,"aria-label":`Zoom out`,className:sn,onClick:()=>p(-.25),children:I(v,{"aria-hidden":`true`})}),I(`button`,{type:`button`,"aria-label":`Reset zoom`,className:sn,onClick:()=>p(`reset`),children:I(m,{"aria-hidden":`true`})})]})]}),document.body)}const ln=R(`
+`;
+function Gallery(props) {
+	const { className, images, open, onOpenChange } = props;
+	const [isVisible, setIsVisible] = useState(false);
+	const [activeImageIndex, setActiveImageIndex] = useState(0);
+	const [zoomLevel, setZoomLevel] = useState(1);
+	const dialogRef = useRef(null);
+	const activeImage = useMemo(() => images[activeImageIndex], [activeImageIndex, images]);
+	useEffect(() => {
+		if (open && dialogRef.current) dialogRef.current.focus();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handler = (e) => {
+			if (e.key === "Escape") onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [open, onOpenChange]);
+	useEffect(() => {
+		if (open) setIsVisible(true);
+		else {
+			const timer = setTimeout(() => {
+				setIsVisible(false);
+			}, 150);
+			return () => clearTimeout(timer);
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const handleWheel = (e) => {
+			e.preventDefault();
+			const step = -e.deltaY * .001;
+			setZoomLevel((prev) => Math.min(Math.max(.5, prev + step), 2));
+		};
+		window.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			window.removeEventListener("wheel", handleWheel);
+		};
+	}, [open]);
+	if (!open && !isVisible) return null;
+	function handleToggleZoom(ratio) {
+		if (ratio === "reset") {
+			setZoomLevel(1);
+			return;
+		}
+		const newZoomLevel = zoomLevel + ratio;
+		if (newZoomLevel < .5) return;
+		if (newZoomLevel > 2) return;
+		setZoomLevel(newZoomLevel);
+	}
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "gallery",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Image gallery",
+		tabIndex: -1,
+		ref: dialogRef,
+		className: clsx("univer-absolute univer-inset-0 univer-z-[1080] univer-flex univer-size-full univer-select-none univer-items-center univer-justify-center", {
+			"univer-animate-in univer-fade-in": open,
+			"univer-animate-out univer-fade-out": !open
+		}, className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-absolute univer-inset-0 univer-size-full univer-bg-gray-900 univer-opacity-80",
+				"aria-hidden": "true",
+				onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-relative",
+				children: activeImage && /* @__PURE__ */ jsx("img", {
+					className: "univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out",
+					style: { transform: `scale(${zoomLevel})` },
+					src: activeImage,
+					alt: `Image ${activeImageIndex + 1} of ${images.length}`,
+					draggable: false
+				})
+			}),
+			/* @__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",
+				children: [
+					/* @__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",
+						value: activeImageIndex + 1,
+						total: images.length,
+						onChange: (value) => setActiveImageIndex(value - 1)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Zoom in",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom(.25),
+						children: /* @__PURE__ */ jsx(ZoomInIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Zoom out",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom(-.25),
+						children: /* @__PURE__ */ jsx(ZoomOutIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Reset zoom",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom("reset"),
+						children: /* @__PURE__ */ jsx(OneToOneIcon, { "aria-hidden": "true" })
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+
+//#endregion
+//#region src/components/input/Input.tsx
+const inputVariants = 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`,middle:`univer-h-10 univer-px-3 univer-text-base`,large:`univer-h-12 univer-px-4 univer-text-lg`}},defaultVariants:{size:`small`}}),un=S(({autoFocus:e=!1,className:t,style:n,type:i=`text`,placeholder:a,value:o,size:s=`small`,allowClear:c=!1,disabled:l=!1,onClick:u,onKeyDown:d,onChange:f,onFocus:p,onBlur:m,slot:h,inputClass:g,inputStyle:_,...v},y)=>{let b=e=>{e.stopPropagation(),f==null||f(``)},x=e=>{f==null||f(e.target.value)},S=A(()=>c&&o&&!l||h,[c,l,h,o]),[C,w]=M(0),T=j(null);return D(()=>{let e=null;return h&&T.current&&(e=new MutationObserver(()=>{T.current&&w(T.current.offsetWidth+8)}),e.observe(T.current,{childList:!0,subtree:!0}),w(T.current.offsetWidth+8)),()=>e==null?void 0:e.disconnect()},[T.current]),D(()=>{c&&!(h&&T.current)&&w(26)},[]),L(`div`,{"data-u-comp":`input`,className:W(`univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md`,l&&`univer-cursor-not-allowed`,t),style:n,children:[I(`input`,{ref:y,type:i,className:W(ln({size:s}),Y,l&&`
+    `, {
+	variants: { size: {
+		mini: "univer-h-7 univer-px-1.5 univer-text-sm",
+		small: "univer-h-8 univer-px-2 univer-text-sm",
+		middle: "univer-h-10 univer-px-3 univer-text-base",
+		large: "univer-h-12 univer-px-4 univer-text-lg"
+	} },
+	defaultVariants: { size: "small" }
+});
+const Input = forwardRef(({ autoFocus = false, className, style, type = "text", placeholder, value, size = "small", allowClear = false, disabled = false, onClick, onKeyDown, onChange, onFocus, onBlur, slot, inputClass, inputStyle, ...props }, ref) => {
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onChange === null || onChange === void 0 || onChange("");
+	};
+	const handleChange = (e) => {
+		onChange === null || onChange === void 0 || onChange(e.target.value);
+	};
+	const hasSlotContent = useMemo(() => {
+		return allowClear && value && !disabled || slot;
+	}, [
+		allowClear,
+		disabled,
+		slot,
+		value
+	]);
+	const [paddingRight, setPaddingRight] = useState(0);
+	const slotRef = useRef(null);
+	useEffect(() => {
+		let observer = null;
+		if (slot && slotRef.current) {
+			observer = new MutationObserver(() => {
+				if (slotRef.current) setPaddingRight(slotRef.current.offsetWidth + 8);
+			});
+			observer.observe(slotRef.current, {
+				childList: true,
+				subtree: true
+			});
+			setPaddingRight(slotRef.current.offsetWidth + 8);
+		}
+		return () => observer === null || observer === void 0 ? void 0 : observer.disconnect();
+	}, [slotRef.current]);
+	useEffect(() => {
+		if (allowClear && !(slot && slotRef.current)) setPaddingRight(26);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "input",
+		className: clsx("univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md", disabled && "univer-cursor-not-allowed", className),
+		style,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type,
+			className: clsx(inputVariants({ size }), borderClassName, disabled && `
                           univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400
                           dark:!univer-text-gray-500
-                        `,c&&!h&&`univer-pr-8`,g),placeholder:a,value:o,disabled:l,autoFocus:e,onClick:u,onKeyDown:d,onChange:x,onFocus:p,onBlur:m,style:{..._,paddingRight:C},...v}),S&&L(`div`,{className:`univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full`,ref:T,children:[h,c&&o&&!l&&I(`button`,{type:`button`,onClick:b,className:`univer-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded-full univer-border-none univer-bg-transparent univer-p-1 univer-text-gray-400 univer-transition-colors univer-duration-200 hover:univer-text-gray-500 focus:univer-outline-none`,children:I(r,{className:`univer-size-3`})})]})]})}),dn=S(({value:e,defaultValue:t,size:n=`small`,min:r=-(2**53-1),max:i=2**53-1,step:a=1,precision:o,formatter:s,parser:c,controls:l=!0,className:u,inputClassName:d,controlsClassName:f,disabled:p,onChange:m,onKeyDown:h,onPressEnter:g,onFocus:_,onBlur:v,allowEmpty:y=!1},b)=>{let[x,S]=M(e===void 0?t===void 0?null:t:e),C=j(x),[w,T]=M(N(x)),E=j(null),O=j(null),k=j(null),A=e=>{b&&(typeof b==`function`?b(e):b.current=e),E.current=e};D(()=>{e!==void 0&&e!==x&&(S(e),C.current=e,T(N(e)))},[e]),D(()=>{x!==null&&(C.current=x)},[x]),D(()=>()=>{O.current&&clearTimeout(O.current),k.current&&clearInterval(k.current)},[]);function N(e){if(e==null)return``;let t=e;return o!==void 0&&(t=Number(e).toFixed(o)),s?s(t):String(t)}function P(e){if(!e)return null;let t=e;c&&(t=c(e));try{let e=t.replace(/[^\d.-]/g,``).split(`.`),n=e[0],a=e.length>1?e.slice(1).join(``):``,s=n+(a?`.${a}`:``),c=Number(s);if(Number.isNaN(c))return null;let l;if(o!==void 0){let e=10**o,t=Math.round(c*e)/e;l=t.toString().includes(`e`)?Number.parseFloat(t.toFixed(o)):t}else l=c.toString().includes(`e`)?Number.parseFloat(c.toFixed(16).replace(/\.?0+$/,``)):c;return i!==void 0&&l>i&&(l=i),r!==void 0&&l<r&&(l=r),l}catch{return null}}function F(e){if(T(e),y&&e===``){S(null),m==null||m(null);return}let t=P(e);S(t),m==null||m(t)}function R(e){if(x===null){if(w===``&&y)m&&m(null);else{let e=C.current;S(e),T(N(e)),m&&m(e)}v==null||v(e);return}let t=x;i!==void 0&&t>i&&(t=i),r!==void 0&&t<r&&(t=r),t===x?T(N(x)):(S(t),T(N(t)),m==null||m(t)),v==null||v(e)}function z(e){if(p)return;let t=e?a:-a,n;n=x===null?C.current===null?r>0?r:0:C.current:x;let o=n+t;i!==void 0&&o>i&&(o=i),r!==void 0&&o<r&&(o=r),o!==n&&(S(o),C.current=o,T(N(o)),m==null||m(o))}function ee(e){p||(h==null||h(e),e.key===`ArrowUp`?(e.preventDefault(),z(!0)):e.key===`ArrowDown`?(e.preventDefault(),z(!1)):e.key===`Enter`&&(g==null||g(e)))}function B(e){var t;p||(z(e),(t=E.current)==null||t.focus())}let V=p||i!==void 0&&x!==null&&x>=i,H=p||r!==void 0&&x!==null&&x<=r;return I(`div`,{className:W(`univer-inline-block`,u),children:L(`div`,{className:`univer-relative univer-w-full`,children:[I(un,{ref:A,className:W(`univer-box-border`,d),size:n,value:w,disabled:p,onChange:F,onFocus:_,onBlur:R,onKeyDown:ee}),l&&L(`div`,{className:W(`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`,Be,Ve,f),children:[I(`span`,{className:W(`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`,V&&`univer-cursor-not-allowed univer-opacity-60`),role:`button`,"aria-label":`increment`,"aria-disabled":V,tabIndex:-1,onMouseDown:e=>e.preventDefault(),onClick:()=>{V||B(!0)},children:`+`}),I(`span`,{className:W(`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`,H&&`univer-cursor-not-allowed univer-opacity-60`),role:`button`,"aria-label":`decrement`,"aria-disabled":H,tabIndex:-1,onMouseDown:e=>e.preventDefault(),onClick:()=>{H||B(!1)},children:`-`})]})]})})});function fn({items:e,value:t,defaultValue:n,onChange:r,className:i=``}){let[a,o]=M(t===void 0?n||e[0].value:t),[s,c]=M({}),l=j(new Map),u=j(null);D(()=>{t!==void 0&&t!==a&&o(t)},[t]);let d=(e,t)=>{let n=l.current.get(e),r=t?l.current.get(t):null;if(n&&u.current){let e=u.current.getBoundingClientRect(),t=n.getBoundingClientRect(),i=t.left-e.left-4;if(r){let n=r.getBoundingClientRect().left-e.left-4;c({"--slide-from":`${n}px`,"--slide-to":`${i}px`,width:`${t.width}px`,transform:`translateX(${i}px)`})}else c({width:`${t.width}px`,transform:`translateX(${i}px)`})}};D(()=>{d(a)},[a]);let f=e=>{let t=a;o(e),r==null||r(e),d(e,t)};return L(`div`,{"data-u-comp":`segmented`,ref:u,className:W(`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`,i),children:[I(`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:s}),e.map(e=>I(`button`,{ref:t=>{t&&l.current.set(e.value,t)},className:W(`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`,{"univer-text-gray-900 dark:!univer-text-white":a===e.value,"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white":a!==e.value}),type:`button`,onClick:()=>f(e.value),children:e.label},String(e.value)))]})}function pn(e){let{children:t,className:n,asChild:r=!0,title:i,placement:a=`bottom`,showIfEllipsis:o=!1,visible:s,onVisibleChange:c}=e,[l,u]=M(!1),d=s!==void 0,f=d?s:l,p=j(null),m=j(null),h=j(null),[g,_]=M(null),[v,y]=M(a);function b(e){return Math.abs(e.scrollWidth-e.clientWidth)>1}function x(){d?c==null||c(!0):u(!0)}function S(){d?c==null||c(!1):u(!1)}k(()=>{if(!f)return;let e=p.current,t=m.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=window.innerWidth,o=window.innerHeight,s=[a,`bottom`,`top`,`right`,`left`],c=a,l=0,u=0,d=e=>{let t=0,i=0;return e===`bottom`?(t=n.bottom+8,i=n.left+n.width/2-r.width/2):e===`top`?(t=n.top-r.height-8,i=n.left+n.width/2-r.width/2):e===`left`?(t=n.top+n.height/2-r.height/2,i=n.left-r.width-8):(t=n.top+n.height/2-r.height/2,i=n.right+8),{t,l:i}};for(let e of s){let{t,l:n}=d(e),a=n>=0&&n+r.width<=i,s=t>=0&&t+r.height<=o;if(a&&s){c=e,l=t,u=n;break}}if(!l&&!u){let e=d(a);l=Math.min(Math.max(0,e.t),o-r.height),u=Math.min(Math.max(0,e.l),i-r.width)}y(c),_({top:Math.round(l+window.scrollY),left:Math.round(u+window.scrollX)})},[f,a]),D(()=>{if(!f)return;let e=()=>{if(!p.current||!m.current)return;let e=p.current.getBoundingClientRect(),t=m.current.getBoundingClientRect(),n=0,r=0;v===`bottom`?(n=e.bottom+8,r=e.left+e.width/2-t.width/2):v===`top`?(n=e.top-t.height-8,r=e.left+e.width/2-t.width/2):v===`left`?(n=e.top+e.height/2-t.height/2,r=e.left-t.width-8):(n=e.top+e.height/2-t.height/2,r=e.right+8),_({top:Math.round(n+window.scrollY),left:Math.round(r+window.scrollX)})};return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[f,v]);let C={ref:e=>p.current=e,onMouseEnter:()=>{o&&p.current&&!b(p.current)||x()},onMouseLeave:()=>S(),onFocus:()=>x(),onBlur:()=>S()},w=r?I(`span`,{...C,className:`univer-inline-block univer-max-w-full univer-truncate`,children:t}):I(`button`,{type:`button`,...C,children:t}),T=null;if(typeof document<`u`&&f&&i&&document.body){var E,O;T=ce(L(`div`,{ref:m,role:`tooltip`,className:W(`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`,n),style:{top:(E=g==null?void 0:g.top)==null?-9999:E,left:(O=g==null?void 0:g.left)==null?-9999:O},onMouseEnter:()=>x(),onMouseLeave:()=>S(),children:[I(`div`,{className:`univer-break-words`,children:i}),I(`div`,{ref:h,className:`univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100`,style:{...v===`bottom`&&{top:-5,left:`50%`,transform:`translateX(-50%) rotate(45deg)`},...v===`top`&&{bottom:-5,left:`50%`,transform:`translateX(-50%) rotate(45deg)`},...v===`left`&&{right:-5,top:`50%`,transform:`translateY(-50%) rotate(45deg)`},...v===`right`&&{left:-5,top:`50%`,transform:`translateY(-50%) rotate(45deg)`}}})]}),document.body)}return L(F,{children:[w,T]})}const mn={type:`linear`,stops:[{color:`#ffffff`,offset:0},{color:`#000000`,offset:100}],angle:90};function hn(e){var t,n;let{className:r,value:a=mn,onChange:o}=e,{locale:s}=E(K),[c,l]=M(0),u=j(null),d=A(()=>[...a.stops].sort((e,t)=>e.offset-t.offset),[a.stops]),f=e=>{o==null||o({...a,type:e})},p=e=>{o==null||o({...a,angle:e==null?0:e})},m=e=>{let t=[...a.stops];t[c]={...t[c],color:e},o==null||o({...a,stops:t})},h=e=>{if(e===null)return;let t=[...a.stops];t[c]={...t[c],offset:e},o==null||o({...a,stops:t})},g=e=>{if(!u.current)return;let t=u.current.getBoundingClientRect(),n=Math.round((e.clientX-t.left)/t.width*100),r={color:([...d].reverse().find(e=>e.offset<=n)||d[0]).color,offset:n},i=[...a.stops,r];o==null||o({...a,stops:i}),l(i.length-1)},_=()=>{if(a.stops.length<=2)return;let e=a.stops.filter((e,t)=>t!==c);o==null||o({...a,stops:e}),l(0)},v=A(()=>`linear-gradient(to right, ${d.map(e=>`${e.color} ${e.offset}%`).join(`, `)})`,[d]),y=A(()=>{let e=d.map(e=>`${e.color} ${e.offset}%`).join(`, `);switch(a.type){case`linear`:return`linear-gradient(${a.angle}deg, ${e})`;case`radial`:return`radial-gradient(circle, ${e})`;case`angular`:return`conic-gradient(from ${a.angle}deg, ${e})`;case`diamond`:return`radial-gradient(circle, ${e})`;default:return`linear-gradient(${a.angle}deg, ${e})`}},[a,d]);return L(`div`,{className:W(`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`,r),children:[I(fn,{items:[{label:s==null?void 0:s.GradientColorPicker.linear,value:`linear`},{label:s==null?void 0:s.GradientColorPicker.radial,value:`radial`},{label:s==null?void 0:s.GradientColorPicker.angular,value:`angular`},{label:s==null?void 0:s.GradientColorPicker.diamond,value:`diamond`}],value:a.type,onChange:e=>f(e)}),I(`div`,{className:`univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600`,style:{background:y}}),L(`div`,{className:`univer-relative univer-mt-4 univer-h-6`,children:[I(`div`,{ref:u,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:v},onClick:g}),a.stops.map((e,t)=>I(`div`,{className:W(`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`,c===t?`univer-z-10 univer-ring-2 univer-ring-primary-500`:`univer-z-0`),style:{left:`${e.offset}%`,backgroundColor:e.color},onClick:e=>{e.stopPropagation(),l(t)},onPointerDown:n=>{let r=n.clientX,i=e.offset,s=e=>{if(!u.current)return;let n=u.current.getBoundingClientRect(),s=(e.clientX-r)/n.width*100,c=Math.max(0,Math.min(100,Math.round(i+s))),l=[...a.stops];l[t]={...l[t],offset:c},o==null||o({...a,stops:l})},c=()=>{window.removeEventListener(`pointermove`,s),window.removeEventListener(`pointerup`,c)};window.addEventListener(`pointermove`,s),window.addEventListener(`pointerup`,c)}},t))]}),L(`div`,{className:`univer-flex univer-items-end univer-gap-2`,children:[L(`div`,{className:`univer-flex-1`,children:[I(`div`,{className:`univer-mb-1 univer-text-xs univer-text-gray-500`,children:s==null?void 0:s.GradientColorPicker.offset}),I(dn,{value:(t=a.stops[c])==null?void 0:t.offset,min:0,max:100,onChange:h})]}),(a.type===`linear`||a.type===`angular`)&&L(`div`,{className:`univer-flex-1`,children:[I(`div`,{className:`univer-mb-1 univer-text-xs univer-text-gray-500`,children:s==null?void 0:s.GradientColorPicker.angle}),I(dn,{value:a.angle,min:0,max:360,onChange:p})]}),I(`div`,{className:`univer-flex univer-gap-1`,children:I(pn,{title:s==null?void 0:s.GradientColorPicker.delete,children:I(G,{variant:`danger`,onClick:_,disabled:a.stops.length<=2,children:I(i,{})})})})]}),I(`div`,{className:`univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700`,children:I(Mt,{value:(n=a.stops[c])==null?void 0:n.color,onChange:m})})]})}const gn=we,_n=Ce,vn=Te,yn=S(({className:e,align:t=`center`,sideOffset:n=4,...r},i)=>I(Se,{ref:i,align:t,sideOffset:n,className:W(`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`,Y,e),...r}));yn.displayName=Se.displayName;function bn(e){let{children:t,overlay:n,disabled:r,openDelay:i=200,open:a,onOpenChange:o,...s}=e,[c,l]=M(!1),u=a!==void 0,d=u?a:c;function f(e){r||(u||l(e),o==null||o(e))}return L(gn,{open:d,onOpenChange:f,openDelay:i,children:[I(vn,{asChild:!0,children:t}),I(_n,{children:I(yn,{...s,children:n})})]})}function xn(e){let{keyboard:t,className:n}=e,r=t.split(`+`);return I(`span`,{className:W(`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`,Y,n),children:r.map((e,t)=>L(F,{children:[I(`kbd`,{className:`univer-inline-block univer-h-full`,children:e}),t<r.length-1&&I(`span`,{className:`univer-inline-block univer-h-full univer-px-1`,children:`+`})]},t))})}let Q=function(e){return e.Success=`success`,e.Info=`info`,e.Warning=`warning`,e.Error=`error`,e.Loading=`loading`,e}({});const Sn=`univer-message-toaster`,Cn=3e3,$=new Set,wn=I(l,{className:`univer-animate-spin univer-text-violet-500`});let Tn=0;const En={[Q.Success]:I(h,{className:`univer-text-green-500`}),[Q.Info]:I(c,{className:`univer-text-sky-500 dark:!univer-text-sky-400`}),[Q.Warning]:I(g,{className:`univer-text-amber-500`}),[Q.Error]:I(s,{className:`univer-text-red-500`}),[Q.Loading]:wn},Dn={[Q.Success]:`[&_[data-icon]]:univer-text-green-500`,[Q.Info]:`[&_[data-icon]]:univer-text-sky-500`,[Q.Warning]:`[&_[data-icon]]:univer-text-amber-500`,[Q.Error]:`[&_[data-icon]]:univer-text-red-500`,[Q.Loading]:`[&_[data-icon]]:univer-text-violet-500`},On=e=>{switch(e){case Q.Success:return U.success;case Q.Warning:return U.warning;case Q.Error:return U.error;case Q.Loading:return U.loading;case Q.Info:default:return U.info}},kn=()=>{let e=`univer-message-${Tn}`;return Tn+=1,e},An=({className:e,...t})=>I(Ee,{id:Sn,position:`top-center`,visibleToasts:4,closeButton:!1,expand:!1,icons:{loading:wn},offset:{top:16},className:W(`[&_[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`,e),toastOptions:{duration:Cn,classNames:{toast:`
+                        `, allowClear && !slot && "univer-pr-8", inputClass),
+			placeholder,
+			value,
+			disabled,
+			autoFocus,
+			onClick,
+			onKeyDown,
+			onChange: handleChange,
+			onFocus,
+			onBlur,
+			style: {
+				...inputStyle,
+				paddingRight
+			},
+			...props
+		}), hasSlotContent && /* @__PURE__ */ jsxs("div", {
+			className: "univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full",
+			ref: slotRef,
+			children: [slot, allowClear && value && !disabled && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleClear,
+				className: "univer-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded-full univer-border-none univer-bg-transparent univer-p-1 univer-text-gray-400 univer-transition-colors univer-duration-200 hover:univer-text-gray-500 focus:univer-outline-none",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-3" })
+			})]
+		})]
+	});
+});
+
+//#endregion
+//#region src/components/input-number/InputNumber.tsx
+const InputNumber = forwardRef(({ value, defaultValue, size = "small", min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, precision, formatter, parser, controls = true, className, inputClassName, controlsClassName, disabled, onChange, onKeyDown, onPressEnter, onFocus, onBlur, allowEmpty = false }, ref) => {
+	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
+	const lastValidValueRef = useRef(internalValue);
+	const [inputValue, setInputValue] = useState(formatValue(internalValue));
+	const inputRef = useRef(null);
+	const longPressTimerRef = useRef(null);
+	const longPressIntervalRef = useRef(null);
+	const mergedRef = (node) => {
+		if (ref) if (typeof ref === "function") ref(node);
+		else ref.current = node;
+		inputRef.current = node;
+	};
+	useEffect(() => {
+		if (value !== void 0 && value !== internalValue) {
+			setInternalValue(value);
+			lastValidValueRef.current = value;
+			setInputValue(formatValue(value));
+		}
+	}, [value]);
+	useEffect(() => {
+		if (internalValue !== null) lastValidValueRef.current = internalValue;
+	}, [internalValue]);
+	useEffect(() => {
+		return () => {
+			if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current);
+			if (longPressIntervalRef.current) clearInterval(longPressIntervalRef.current);
+		};
+	}, []);
+	function formatValue(val) {
+		if (val === null || val === void 0) return "";
+		let formattedValue = val;
+		if (precision !== void 0) formattedValue = Number(val).toFixed(precision);
+		if (formatter) return formatter(formattedValue);
+		return String(formattedValue);
+	}
+	function parseValue(val) {
+		if (!val) return null;
+		let parsedValue = val;
+		if (parser) parsedValue = parser(val);
+		try {
+			const parts = parsedValue.replace(/[^\d.-]/g, "").split(".");
+			const firstPart = parts[0];
+			const secondPart = parts.length > 1 ? parts.slice(1).join("") : "";
+			const normalizedValue = firstPart + (secondPart ? `.${secondPart}` : "");
+			const num = Number(normalizedValue);
+			if (Number.isNaN(num)) return null;
+			let result;
+			if (precision !== void 0) {
+				const factor = 10 ** precision;
+				const roundedNum = Math.round(num * factor) / factor;
+				if (roundedNum.toString().includes("e")) result = Number.parseFloat(roundedNum.toFixed(precision));
+				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 handleInputChange(value) {
+		setInputValue(value);
+		if (allowEmpty && value === "") {
+			setInternalValue(null);
+			onChange === null || onChange === void 0 || onChange(null);
+			return;
+		}
+		const parsedValue = parseValue(value);
+		setInternalValue(parsedValue);
+		onChange === null || onChange === void 0 || onChange(parsedValue);
+	}
+	function handleBlur(e) {
+		if (internalValue === null) {
+			if (inputValue === "" && allowEmpty) {
+				if (onChange) onChange(null);
+			} else {
+				const valueToRestore = lastValidValueRef.current;
+				setInternalValue(valueToRestore);
+				setInputValue(formatValue(valueToRestore));
+				if (onChange) onChange(valueToRestore);
+			}
+			onBlur === null || onBlur === void 0 || onBlur(e);
+			return;
+		}
+		let valueInRange = internalValue;
+		if (max !== void 0 && valueInRange > max) valueInRange = max;
+		if (min !== void 0 && valueInRange < min) valueInRange = min;
+		if (valueInRange !== internalValue) {
+			setInternalValue(valueInRange);
+			setInputValue(formatValue(valueInRange));
+			onChange === null || onChange === void 0 || onChange(valueInRange);
+		} else setInputValue(formatValue(internalValue));
+		onBlur === null || onBlur === void 0 || onBlur(e);
+	}
+	function handleStep(isUp) {
+		if (disabled) return;
+		const stepValue = isUp ? step : -step;
+		let currentValue;
+		if (internalValue !== null) currentValue = internalValue;
+		else if (lastValidValueRef.current !== null) currentValue = lastValidValueRef.current;
+		else currentValue = min > 0 ? min : 0;
+		let newValue = currentValue + stepValue;
+		if (max !== void 0 && newValue > max) newValue = max;
+		if (min !== void 0 && newValue < min) newValue = min;
+		if (newValue === currentValue) return;
+		setInternalValue(newValue);
+		lastValidValueRef.current = newValue;
+		setInputValue(formatValue(newValue));
+		onChange === null || onChange === void 0 || onChange(newValue);
+	}
+	function handleKeyDown(e) {
+		if (disabled) return;
+		onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			handleStep(true);
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			handleStep(false);
+		} else if (e.key === "Enter") onPressEnter === null || onPressEnter === void 0 || onPressEnter(e);
+	}
+	function handleClick(isUp) {
+		var _inputRef$current;
+		if (disabled) return;
+		handleStep(isUp);
+		(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+	}
+	const incrementDisabled = disabled || max !== void 0 && internalValue !== null && internalValue >= max;
+	const decrementDisabled = disabled || min !== void 0 && internalValue !== null && internalValue <= min;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-inline-block", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "univer-relative univer-w-full",
+			children: [/* @__PURE__ */ jsx(Input, {
+				ref: mergedRef,
+				className: clsx("univer-box-border", inputClassName),
+				size,
+				value: inputValue,
+				disabled,
+				onChange: handleInputChange,
+				onFocus,
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown
+			}), 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"),
+					role: "button",
+					"aria-label": "increment",
+					"aria-disabled": incrementDisabled,
+					tabIndex: -1,
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => {
+						if (incrementDisabled) return;
+						handleClick(true);
+					},
+					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"),
+					role: "button",
+					"aria-label": "decrement",
+					"aria-disabled": decrementDisabled,
+					tabIndex: -1,
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => {
+						if (decrementDisabled) return;
+						handleClick(false);
+					},
+					children: "-"
+				})]
+			})]
+		})
+	});
+});
+
+//#endregion
+//#region src/components/segmented/Segmented.tsx
+function Segmented({ items, value, defaultValue, onChange, className = "" }) {
+	const [selectedItem, setSelectedItem] = useState(value !== void 0 ? value : defaultValue || items[0].value);
+	const [slideStyle, setSlideStyle] = useState({});
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (value !== void 0 && value !== selectedItem) setSelectedItem(value);
+	}, [value]);
+	const updateSliderPosition = (newValue, oldValue) => {
+		const newItemElement = itemRefs.current.get(newValue);
+		const oldItemElement = oldValue ? itemRefs.current.get(oldValue) : null;
+		if (newItemElement && containerRef.current) {
+			const containerRect = containerRef.current.getBoundingClientRect();
+			const newRect = newItemElement.getBoundingClientRect();
+			const newLeft = newRect.left - containerRect.left - 4;
+			if (oldItemElement) setSlideStyle({
+				"--slide-from": `${oldItemElement.getBoundingClientRect().left - containerRect.left - 4}px`,
+				"--slide-to": `${newLeft}px`,
+				width: `${newRect.width}px`,
+				transform: `translateX(${newLeft}px)`
+			});
+			else setSlideStyle({
+				width: `${newRect.width}px`,
+				transform: `translateX(${newLeft}px)`
+			});
+		}
+	};
+	useEffect(() => {
+		updateSliderPosition(selectedItem);
+	}, [selectedItem]);
+	const handleClick = (itemValue) => {
+		const oldValue = selectedItem;
+		setSelectedItem(itemValue);
+		onChange === null || onChange === void 0 || onChange(itemValue);
+		updateSliderPosition(itemValue, oldValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-u-comp": "segmented",
+		ref: containerRef,
+		className: clsx("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),
+		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",
+			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-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", {
+				"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
+			}),
+			type: "button",
+			onClick: () => handleClick(item.value),
+			children: item.label
+		}, String(item.value)))]
+	});
+}
+
+//#endregion
+//#region src/components/tooltip/Tooltip.tsx
+function Tooltip(props) {
+	const { children, className, asChild = true, title, placement = "bottom", showIfEllipsis = false, visible: controlledVisible, onVisibleChange } = props;
+	const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
+	const isControlled = controlledVisible !== void 0;
+	const visible = isControlled ? controlledVisible : uncontrolledVisible;
+	const triggerRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const arrowRef = useRef(null);
+	const [coords, setCoords] = useState(null);
+	const [currentPlacement, setCurrentPlacement] = useState(placement);
+	function isContentOverflowing(element) {
+		return Math.abs(element.scrollWidth - element.clientWidth) > 1;
+	}
+	function showTooltip() {
+		if (isControlled) onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(true);
+		else setUncontrolledVisible(true);
+	}
+	function hideTooltip() {
+		if (isControlled) onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
+		else setUncontrolledVisible(false);
+	}
+	useLayoutEffect(() => {
+		if (!visible) return;
+		const trigger = triggerRef.current;
+		const tip = tooltipRef.current;
+		if (!trigger || !tip) return;
+		const triggerRect = trigger.getBoundingClientRect();
+		const tipRect = tip.getBoundingClientRect();
+		const offset = 8;
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+		const placements = [
+			placement,
+			"bottom",
+			"top",
+			"right",
+			"left"
+		];
+		let chosen = placement;
+		let top = 0;
+		let left = 0;
+		const computeFor = (p) => {
+			let t = 0;
+			let l = 0;
+			if (p === "bottom") {
+				t = triggerRect.bottom + offset;
+				l = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
+			} else if (p === "top") {
+				t = triggerRect.top - tipRect.height - offset;
+				l = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
+			} else if (p === "left") {
+				t = triggerRect.top + triggerRect.height / 2 - tipRect.height / 2;
+				l = triggerRect.left - tipRect.width - offset;
+			} else {
+				t = triggerRect.top + triggerRect.height / 2 - tipRect.height / 2;
+				l = triggerRect.right + offset;
+			}
+			return {
+				t,
+				l
+			};
+		};
+		for (const p of placements) {
+			const { t, l } = computeFor(p);
+			const fitsHorizontally = l >= 0 && l + tipRect.width <= viewportWidth;
+			const fitsVertically = t >= 0 && t + tipRect.height <= viewportHeight;
+			if (fitsHorizontally && fitsVertically) {
+				chosen = p;
+				top = t;
+				left = l;
+				break;
+			}
+		}
+		if (!top && !left) {
+			const c = computeFor(placement);
+			top = Math.min(Math.max(0, c.t), viewportHeight - tipRect.height);
+			left = Math.min(Math.max(0, c.l), viewportWidth - tipRect.width);
+		}
+		setCurrentPlacement(chosen);
+		setCoords({
+			top: Math.round(top + window.scrollY),
+			left: Math.round(left + window.scrollX)
+		});
+	}, [visible, placement]);
+	useEffect(() => {
+		if (!visible) return;
+		const handler = () => {
+			if (!triggerRef.current || !tooltipRef.current) return;
+			const triggerRect = triggerRef.current.getBoundingClientRect();
+			const tipRect = tooltipRef.current.getBoundingClientRect();
+			const offset = 8;
+			let top = 0;
+			let left = 0;
+			if (currentPlacement === "bottom") {
+				top = triggerRect.bottom + offset;
+				left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
+			} else if (currentPlacement === "top") {
+				top = triggerRect.top - tipRect.height - offset;
+				left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
+			} else if (currentPlacement === "left") {
+				top = triggerRect.top + triggerRect.height / 2 - tipRect.height / 2;
+				left = triggerRect.left - tipRect.width - offset;
+			} else {
+				top = triggerRect.top + triggerRect.height / 2 - tipRect.height / 2;
+				left = triggerRect.right + offset;
+			}
+			setCoords({
+				top: Math.round(top + window.scrollY),
+				left: Math.round(left + window.scrollX)
+			});
+		};
+		window.addEventListener("scroll", handler, true);
+		window.addEventListener("resize", handler);
+		return () => {
+			window.removeEventListener("scroll", handler, true);
+			window.removeEventListener("resize", handler);
+		};
+	}, [visible, currentPlacement]);
+	const commonProps = {
+		ref: (node) => triggerRef.current = node,
+		onMouseEnter: () => {
+			if (showIfEllipsis && triggerRef.current) {
+				if (!isContentOverflowing(triggerRef.current)) return;
+			}
+			showTooltip();
+		},
+		onMouseLeave: () => hideTooltip(),
+		onFocus: () => showTooltip(),
+		onBlur: () => hideTooltip()
+	};
+	const triggerElement = asChild ? /* @__PURE__ */ jsx("span", {
+		...commonProps,
+		className: "univer-inline-block univer-max-w-full univer-truncate",
+		children
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...commonProps,
+		children
+	});
+	let tooltipNode = null;
+	if (typeof document !== "undefined" && visible && title && document.body) {
+		var _coords$top, _coords$left;
+		tooltipNode = createPortal(/* @__PURE__ */ jsxs("div", {
+			ref: tooltipRef,
+			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),
+			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)"
+					}
+				}
+			})]
+		}), document.body);
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [triggerElement, tooltipNode] });
+}
+
+//#endregion
+//#region src/components/gradient-color-picker/GradientColorPicker.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DEFAULT_VALUE = {
+	type: "linear",
+	stops: [{
+		color: "#ffffff",
+		offset: 0
+	}, {
+		color: "#000000",
+		offset: 100
+	}],
+	angle: 90
+};
+function GradientColorPicker(props) {
+	var _value$stops$selected, _value$stops$selected2;
+	const { className, value = DEFAULT_VALUE, onChange } = props;
+	const { locale } = useContext(ConfigContext);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const barRef = useRef(null);
+	const stops = useMemo(() => {
+		return [...value.stops].sort((a, b) => a.offset - b.offset);
+	}, [value.stops]);
+	const handleTypeChange = (type) => {
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			type
+		});
+	};
+	const handleAngleChange = (angle) => {
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			angle: angle !== null && angle !== void 0 ? angle : 0
+		});
+	};
+	const handleStopColorChange = (color) => {
+		const newStops = [...value.stops];
+		newStops[selectedIndex] = {
+			...newStops[selectedIndex],
+			color
+		};
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			stops: newStops
+		});
+	};
+	const handleStopOffsetChange = (offset) => {
+		if (offset === null) return;
+		const newStops = [...value.stops];
+		newStops[selectedIndex] = {
+			...newStops[selectedIndex],
+			offset
+		};
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			stops: newStops
+		});
+	};
+	const handleAddStop = (e) => {
+		if (!barRef.current) return;
+		const rect = barRef.current.getBoundingClientRect();
+		const offset = Math.round((e.clientX - rect.left) / rect.width * 100);
+		const newStop = {
+			color: ([...stops].reverse().find((s) => s.offset <= offset) || stops[0]).color,
+			offset
+		};
+		const newStops = [...value.stops, newStop];
+		onChange === null || onChange === void 0 || onChange({
+			...value,
+			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,
+			stops: newStops
+		});
+		setSelectedIndex(0);
+	};
+	const gradientPreview = useMemo(() => {
+		return `linear-gradient(to right, ${stops.map((s) => `${s.color} ${s.offset}%`).join(", ")})`;
+	}, [stops]);
+	const mainPreview = useMemo(() => {
+		const stopsStr = stops.map((s) => `${s.color} ${s.offset}%`).join(", ");
+		switch (value.type) {
+			case "linear": return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+			case "radial": return `radial-gradient(circle, ${stopsStr})`;
+			case "angular": return `conic-gradient(from ${value.angle}deg, ${stopsStr})`;
+			case "diamond": return `radial-gradient(circle, ${stopsStr})`;
+			default: return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+		}
+	}, [value, stops]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("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),
+		children: [
+			/* @__PURE__ */ jsx(Segmented, {
+				items: [
+					{
+						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"
+					}
+				],
+				value: value.type,
+				onChange: (v) => handleTypeChange(v)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-h-32 univer-w-full univer-rounded-md univer-border univer-border-gray-200 dark:!univer-border-gray-600",
+				style: { background: mainPreview }
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-relative univer-mt-4 univer-h-6",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: barRef,
+					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__ */ jsx("div", {
+					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"),
+					style: {
+						left: `${stop.offset}%`,
+						backgroundColor: stop.color
+					},
+					onClick: (e) => {
+						e.stopPropagation();
+						setSelectedIndex(index);
+					},
+					onPointerDown: (e) => {
+						const startX = e.clientX;
+						const startOffset = stop.offset;
+						const handlePointerMove = (moveEvent) => {
+							if (!barRef.current) return;
+							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];
+							newStops[index] = {
+								...newStops[index],
+								offset: newOffset
+							};
+							onChange === null || onChange === void 0 || onChange({
+								...value,
+								stops: newStops
+							});
+						};
+						const handlePointerUp = () => {
+							window.removeEventListener("pointermove", handlePointerMove);
+							window.removeEventListener("pointerup", handlePointerUp);
+						};
+						window.addEventListener("pointermove", handlePointerMove);
+						window.addEventListener("pointerup", handlePointerUp);
+					}
+				}, index))]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-items-end univer-gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset
+						}), /* @__PURE__ */ jsx(InputNumber, {
+							value: (_value$stops$selected = value.stops[selectedIndex]) === null || _value$stops$selected === void 0 ? void 0 : _value$stops$selected.offset,
+							min: 0,
+							max: 100,
+							onChange: handleStopOffsetChange
+						})]
+					}),
+					(value.type === "linear" || value.type === "angular") && /* @__PURE__ */ jsxs("div", {
+						className: "univer-flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+						}), /* @__PURE__ */ jsx(InputNumber, {
+							value: value.angle,
+							min: 0,
+							max: 360,
+							onChange: handleAngleChange
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "univer-flex univer-gap-1",
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "danger",
+								onClick: handleRemoveStop,
+								disabled: value.stops.length <= 2,
+								children: /* @__PURE__ */ jsx(DeleteIcon, {})
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700",
+				children: /* @__PURE__ */ jsx(ColorPicker, {
+					value: (_value$stops$selected2 = value.stops[selectedIndex]) === null || _value$stops$selected2 === void 0 ? void 0 : _value$stops$selected2.color,
+					onChange: handleStopColorChange
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/hover-card/HoverCardPrimitive.tsx
+const HoverCardPrimitive = Root$3;
+const HoverCardPortal = Portal$3;
+const HoverCardTrigger = Trigger$2;
+const HoverCardContent = forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Content$3, {
+	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),
+	...props
+}));
+HoverCardContent.displayName = Content$3.displayName;
+
+//#endregion
+//#region src/components/hover-card/HoverCard.tsx
+function HoverCard(props) {
+	const { children, overlay, disabled, openDelay = 200, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = 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__ */ jsxs(HoverCardPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		openDelay,
+		children: [/* @__PURE__ */ jsx(HoverCardTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(HoverCardPortal, { children: /* @__PURE__ */ jsx(HoverCardContent, {
+			...restProps,
+			children: overlay
+		}) })]
+	});
+}
+
+//#endregion
+//#region src/components/kbd/Kbd.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+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),
+		children: keys.map((text, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("kbd", {
+			className: "univer-inline-block univer-h-full",
+			children: text
+		}), index < keys.length - 1 && /* @__PURE__ */ jsx("span", {
+			className: "univer-inline-block univer-h-full univer-px-1",
+			children: "+"
+		})] }, index))
+	});
+}
+
+//#endregion
+//#region src/components/message/Message.tsx
+let MessageType = /* @__PURE__ */ function(MessageType) {
+	MessageType["Success"] = "success";
+	MessageType["Info"] = "info";
+	MessageType["Warning"] = "warning";
+	MessageType["Error"] = "error";
+	MessageType["Loading"] = "loading";
+	return MessageType;
+}({});
+const MESSAGE_TOASTER_ID = "univer-message-toaster";
+const DEFAULT_MESSAGE_DURATION = 3e3;
+const activeMessageIds = /* @__PURE__ */ new Set();
+const loadingIcon = /* @__PURE__ */ jsx(LoadingMultiIcon, { className: "univer-animate-spin univer-text-violet-500" });
+let messageCount = 0;
+const iconMap = {
+	[MessageType.Success]: /* @__PURE__ */ jsx(SuccessIcon, { className: "univer-text-green-500" }),
+	[MessageType.Info]: /* @__PURE__ */ jsx(InfoIcon, { className: "univer-text-sky-500 dark:!univer-text-sky-400" }),
+	[MessageType.Warning]: /* @__PURE__ */ jsx(WarningIcon, { className: "univer-text-amber-500" }),
+	[MessageType.Error]: /* @__PURE__ */ jsx(ErrorIcon, { className: "univer-text-red-500" }),
+	[MessageType.Loading]: loadingIcon
+};
+const typeClassMap = {
+	[MessageType.Success]: "[&_[data-icon]]:univer-text-green-500",
+	[MessageType.Info]: "[&_[data-icon]]:univer-text-sky-500",
+	[MessageType.Warning]: "[&_[data-icon]]:univer-text-amber-500",
+	[MessageType.Error]: "[&_[data-icon]]:univer-text-red-500",
+	[MessageType.Loading]: "[&_[data-icon]]:univer-text-violet-500"
+};
+const resolveToastMethod = (type) => {
+	switch (type) {
+		case MessageType.Success: return toast$1.success;
+		case MessageType.Warning: return toast$1.warning;
+		case MessageType.Error: return toast$1.error;
+		case MessageType.Loading: return toast$1.loading;
+		case MessageType.Info:
+		default: return toast$1.info;
+	}
+};
+const createMessageId = () => {
+	const id = `univer-message-${messageCount}`;
+	messageCount += 1;
+	return id;
+};
+const Messager = ({ className, ...props }) => /* @__PURE__ */ jsx(Toaster$1, {
+	id: MESSAGE_TOASTER_ID,
+	position: "top-center",
+	visibleToasts: 4,
+	closeButton: false,
+	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),
+	toastOptions: {
+		duration: DEFAULT_MESSAGE_DURATION,
+		classNames: {
+			toast: `
                   univer-group univer-min-h-0 univer-min-w-[320px] univer-max-w-[520px] univer-px-3.5 univer-py-3
                   univer-font-sans univer-transition-all univer-duration-300
-                `,title:`
+                `,
+			title: `
                   univer-m-0 univer-font-sans univer-text-sm univer-font-medium univer-leading-5 univer-text-gray-700
                   dark:!univer-text-gray-100
-                `,content:`univer-gap-2.5`,icon:`[&>svg]:univer-block [&>svg]:univer-size-4`,success:Dn[Q.Success],info:Dn[Q.Info],warning:Dn[Q.Warning],error:Dn[Q.Error],loading:Dn[Q.Loading]}},...t}),jn=({content:e,duration:t,id:n,onClose:r,type:i=Q.Info})=>{let a=n==null?kn():n,o=On(i),s=!1,c=()=>{s||(s=!0,$.delete(a),r==null||r())};return o(e,{id:a,toasterId:Sn,duration:t==null?Cn:t,icon:i===Q.Loading?void 0:En[i],onDismiss:c,onAutoClose:c}),$.add(a),a},Mn=e=>{if(e!==void 0){U.dismiss(e),$.delete(e);return}$.forEach(e=>{U.dismiss(e)}),$.clear()},Nn=[-9999,-9999];function Pn(e){let{children:t,visible:n=!1,offset:r=[0,0],overflowVisible:i=!1,placementY:a=`below`}=e,o=j(null),[s,c]=M(Nn),{mountContainer:l}=E(K),u=()=>{let e=o.current;if(!e)return null;let[t,n]=r,{clientWidth:i,clientHeight:s}=e,{innerWidth:c,innerHeight:l}=window,u=Math.max(0,c-i-2),d=Math.max(0,l-s-2),f=Math.min(Math.max(t,0),u),p=a===`above`?n-s:n;return[f,Math.min(Math.max(p,0),d)]};k(()=>{if(!n){c(Nn);return}let e=u();e&&c(e)},[r,a,n]),D(()=>{if(!n)return;let e=()=>{let e=u();e&&c(e)};return window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[r,a,n]);function d(e){e.preventDefault()}return ce(I(Oe,{in:n,nodeRef:o,timeout:500,classNames:{enter:`univer-popup-enter`,enterActive:`univer-popup-enter-active`,enterDone:`univer-popup-enter-done`,exitActive:`univer-popup-exit`,exitDone:`univer-popup-exit-active`},children:I(`section`,{ref:o,className:`univer-popup`,style:{left:s[0]+2,top:s[1]+2,overflow:i?`visible`:void 0},onContextMenu:d,children:t})}),l)}function Fn(e){let{children:t,className:n,style:r,value:i,disabled:a=!1,direction:o=`horizontal`,onChange:s}=e,c=e=>{s(e)};return I(`div`,{className:W(`univer-flex univer-gap-2`,{"univer-flex-col":o===`vertical`},n),style:r,children:y.map(t,(e,t)=>C(e)?b(e,{key:t,children:e.props.children,value:e.props.value,checked:i===e.props.value,disabled:a==null?e.props.disabled:a,onChange:c}):e)})}function In(e){let{children:t,checked:n,value:r,disabled:i=!1,onChange:a}=e,o=j(null);function s(e){if(e.stopPropagation(),!(!a||i))if(r!==void 0)a&&a(r);else{let e=o.current.checked;a&&a(e)}}return L(`label`,{"data-u-comp":`radio`,className:W(`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":!i,"univer-text-gray-400":i}),children:[L(`span`,{className:`univer-relative univer-block`,children:[I(`input`,{ref:o,className:`univer-absolute univer-size-0 univer-opacity-0`,type:`radio`,checked:n,disabled:i,onChange:s}),I(`span`,{className:W(`univer-relative univer-box-border univer-flex univer-size-4 univer-items-center univer-justify-center univer-overflow-hidden univer-rounded-full univer-border univer-border-solid univer-transition-colors`,{"univer-opacity-50":i,"univer-border-primary-600 univer-bg-primary-600 dark:!univer-bg-primary-600":n,"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600":!n}),children:n&&I(`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`})})]}),I(`span`,{children:t})]})}function Ln(e){let{value:n,options:r=[],hideCheckMark:i=!1,onChange:a,multiple:o,className:s,optionClassName:c}=e,l=Array.isArray(n)?n:[n];function u(e){let t=l.indexOf(e);a(o?t>-1?l.filter(t=>t===e):[...l,e]:t>-1?void 0:e)}return I(`ul`,{className:W(`univer-m-0 univer-grid univer-max-h-80 univer-list-none univer-gap-1 univer-overflow-y-auto univer-rounded univer-p-1.5`,Y,q,s),children:r.map((e,n)=>{let r=l.indexOf(e.value)>-1;return I(`li`,{children:L(`a`,{className:W(`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`,c,{"univer-bg-gray-200 dark:!univer-bg-gray-500":r}),onClick:()=>u(e.value),children:[!i&&r&&I(t,{className:`univer-absolute univer-left-0 univer-top-1/2 -univer-translate-y-1/2 univer-pl-2 univer-text-primary-600`}),I(`span`,{style:{color:e.color},children:e.label})]})},n)})})}const Rn=W(`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`,Y);function zn(e){let{className:t,value:n,disabled:r=!1,options:i=[],borderless:a=!1,onChange:o}=e,[s,c]=M(!1);function l(e){c(e)}let d=A(()=>{let e=[];for(let t of i)t.options?(t.options.forEach(t=>{e.push({label:t.label,value:t.value,disabled:t.disabled})}),e.push({type:`separator`})):e.push({label:t.label,value:t.value,disabled:t.disabled});return[{type:`radio`,value:n,hideIndicator:!0,options:e,onSelect:e=>{o(e)}}]},[i]),f=A(()=>{let e=null;for(let t of i)if(t.options){for(let r of t.options)if(r.value===n){e=r.label;break}}else if(t.value===n){e=t.label;break}return e||n},[i,n]);return I(tn,{className:`max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36`,align:`start`,open:s,items:d,disabled:r,onOpenChange:l,children:L(`div`,{"data-u-comp":`select`,className:W(Rn,{"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900":s&&!a,"univer-border-transparent univer-bg-transparent hover:univer-border-transparent":a,"univer-cursor-not-allowed":r,"hover:univer-border-primary-600":!r&&!a,"univer-cursor-pointer":!r&&!s},t),children:[I(`div`,{className:`univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-white`,children:f}),I(u,{className:`univer-flex-shrink-0 dark:!univer-text-white`})]})})}function Bn(e){let{className:t,value:n=[],disabled:r=!1,options:i=[],borderless:a=!1,onChange:o}=e,[s,c]=M(!1);function l(e){c(e)}let d=A(()=>i.map(e=>({type:`checkbox`,value:e.value,label:e.label,disabled:e.disabled,checked:n.includes(e.value),onSelect:e=>{o(n.includes(e)?n.filter(t=>t!==e):[...n,e])}})),[i]);function f(e){o(n.filter(t=>t!==e))}let p=A(()=>i.filter(e=>n.includes(e.value)).map((e,t)=>I(Pe,{className:`univer-max-w-32`,closable:!0,onClose:()=>f(e.value),children:e.label},t)),[i,n]);return I(tn,{className:`univer-w-[--radix-popper-anchor-width] univer-min-w-36`,align:`start`,open:s,items:d,disabled:r,onOpenChange:l,children:L(`div`,{"data-u-comp":`multiple-select`,className:W(Rn,{"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900":s&&!a,"univer-border-transparent univer-bg-transparent hover:univer-border-transparent":a,"univer-cursor-not-allowed":r,"hover:univer-border-primary-600":!r&&!a,"univer-cursor-pointer":!r&&!s},t),children:[I(`div`,{className:`univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2`,children:p}),I(u,{className:`univer-flex-shrink-0 dark:!univer-text-white`})]})})}function Vn({className:e,orientation:t=`horizontal`,decorative:n=!0,...r}){return I(ke,{"data-u-comp":`separator`,"data-slot":`separator-root`,decorative:n,orientation:t,className:W(`univer-shrink-0 univer-bg-gray-200 data-[orientation=horizontal]:univer-h-px data-[orientation=vertical]:univer-h-full data-[orientation=horizontal]:univer-w-full data-[orientation=vertical]:univer-w-px dark:!univer-bg-gray-600`,e),...r})}const Hn=e=>{let{defaultChecked:t=!1,onChange:n}=e,[r,i]=M(t);return D(()=>{i(t)},[t]),I(`div`,{className:`univer-h-4`,children:L(`label`,{className:`univer-relative univer-inline-block univer-h-4 univer-w-7`,children:[I(`input`,{className:`univer-size-0 univer-opacity-0`,type:`checkbox`,checked:r,onChange:()=>{i(!r),n==null||n(!r)}}),I(`span`,{className:W(`univer-absolute univer-inset-0 univer-cursor-pointer univer-rounded-2xl univer-transition-colors univer-duration-200`,{"univer-bg-primary-600":r,"univer-bg-gray-200 dark:!univer-bg-gray-600":!r}),children:I(`span`,{className:W(`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":r})})})]})})},Un=S((e,t)=>{let n=j(null),r=j({width:0,height:0}),{className:i,onResize:a,onValueChange:o,...s}=e;O(t,()=>n.current,[]),k(()=>{let e=n.current;if(e&&a){let t=new ResizeObserver(e=>{let{width:t,height:n}=e[0].target.getBoundingClientRect();t===0||n===0||(r.current.width!==t||r.current.height!==n)&&(r.current={width:t,height:n},a(t,n))});return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}},[a]);function c(e){let t=e.target.value;o==null||o(t)}return I(`textarea`,{ref:n,"data-u-comp":`textarea`,"data-slot":`textarea`,className:W(`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`,Y,q,i),onChange:c,...s})});function Wn({visibleToasts:e,...t}){return I(Ee,{className:`dark:![&_[data-description]]:univer-text-gray-200 [&_[data-description]]:univer-text-sm [&_[data-description]]:univer-text-gray-600 [&_[data-icon]>svg]:univer-relative [&_[data-icon]>svg]:univer-top-1 [&_[data-icon]]:univer-self-baseline [&_[data-sonner-toast]]:univer-shadow-md [&_[data-title]]:univer-text-sm [&_[data-title]]:univer-text-gray-900`,toastOptions:{classNames:{content:`univer-leading-normal`,success:`[&_[data-icon]]:univer-text-green-500`,info:`[&_[data-icon]]:univer-text-primary-600`,error:`[&_[data-icon]]:univer-text-red-500`,warning:`[&_[data-icon]]:univer-text-yellow-500`}},visibleToasts:e==null?5:e,...t})}function Gn(e){let{data:t,itemKey:n,children:r,height:i,itemHeight:a,overscan:o=2,className:s,style:c}=e,[l,u]=M(0);if(!i||!a||a<=0)return I(`div`,{className:s,style:c,children:t.map((e,t)=>{let i=typeof n==`function`?n(e):e[n];return I(`div`,{children:r(e,t)},i)})});let d=Math.max(0,Math.floor(l/a)-o),f=Math.ceil(i/a)+o*2,p=Math.min(t.length,d+f),m=d*a,h=t.length*a,g=t.slice(d,p);return I(`div`,{className:s,style:{...c,height:i,overflowY:`auto`},onScroll:e=>u(e.currentTarget.scrollTop),children:I(`div`,{style:{height:h,position:`relative`},children:I(`div`,{style:{transform:`translateY(${m}px)`},children:g.map((e,t)=>{let i=typeof n==`function`?n(e):e[n];return I(`div`,{children:r(e,d+t)},i)})})})})}const Kn=(e,t)=>{let n=[],r=e=>{var i;if(n.push(e.key),t===e.key||(i=e.children)!=null&&i.length&&e.children.some(r))return!0;n.pop()};return e.some(r),n},qn=(e,t)=>{let n=t==null?new Map:t,r=e;return{findNodePathFromTreeWithCache:e=>{let t=n.get(e);if(t)return t;let i=Kn(r,e);return i.map((e,t,n)=>{let r=[];for(let e=0;e<=t;e++)r.push(n[e]);return r}).reverse().forEach(e=>{let t=e[e.length-1];n.set(t,e)}),i},reset:e=>{n.clear(),e&&(r=e)}}},Jn=(e,t)=>t.length?t.reduce((e,t)=>{let n=e.find(e=>e.key===t);return(n==null?void 0:n.children)||[]},e):e,Yn=(e,t)=>{let n=t.slice(0),r=n.pop();return Jn(e,n).find(e=>e.key===r)},Xn=(e,t,n)=>{let r=new Set(t),i=n[n.length-1],a=Jn(e,n);if(r.has(i)){if(a.length){let e=t=>{r.delete(t.key),t.children&&t.children.forEach(t=>e(t))};a.forEach(e)}n.map((e,t,n)=>{let r=[];for(let e=0;e<=t;e++)r.push(n[e]);return r}).reverse().some(t=>{let n=Jn(e,t),i=t[t.length-1];if(n.every(e=>!r.has(e.key)))r.delete(i);else return!0;return!1})}else{let e=t=>{r.add(t.key),t.children&&t.children.forEach(t=>e(t))};n.forEach(e=>r.add(e)),a.length&&a.forEach(e)}return[...r]},Zn=(e,t)=>{let n=t.children||[],r=t=>{var n;return(n=t.children)!=null&&n.length?!!t.children.every(r):e.has(t.key)};return n.length?n.some(e=>!r(e)):!1},Qn=(e,t)=>{let n=[],r=qn(e);return t.forEach(t=>{let i=Yn(e,r.findNodePathFromTreeWithCache(t));if(i){var a;(a=i.children)!=null&&a.length||n.push(i)}}),n};let $n=function(e){return e[e.ONLY_LEAF_NODE=0]=`ONLY_LEAF_NODE`,e[e.ALL=1]=`ALL`,e}({});function er(e,t,n=1){let r=[];return e.forEach(e=>{r.push({...e,level:n}),e.children&&t.has(e.key)&&r.push(...er(e.children,t,n+1))}),r}function tr(e){let{data:t=[],defaultCache:n,style:r,defaultExpandAll:i=!1,selectionMode:a=$n.ALL,valueGroup:s=[],onChange:c,onExpend:l,height:u=200,itemHeight:d=32,attachRender:f}=e,[p,m]=M({}),h=A(()=>new Set,[]),g=A(()=>qn(t,n),[t,n]),_=A(()=>{let e=new Set;return s.forEach(t=>{g.findNodePathFromTreeWithCache(t).forEach(t=>e.add(t))}),e},[s,g]);D(()=>{function e(t){var n;h.add(t.key),(n=t.children)==null||n.forEach(e)}i&&t.forEach(e),m({})},[i,t]);let v=A(()=>er(t,h),[t,p,h]);function y(e){var t;(t=e.children)!=null&&t.length&&(h.has(e.key)?h.delete(e.key):h.add(e.key),m({})),!(a===$n.ONLY_LEAF_NODE&&e.children)&&(l==null||l(e.key))}function b(t){let{title:n,key:r,level:i=0}=t,a=e.treeNodeClassName,s=h.has(r),l=_.has(r),u=Zn(_,t);return I(`div`,{className:W(`univer-relative univer-text-[13px]`,a),style:{paddingLeft:`${i*20}px`},children:L(`div`,{className:`univer-relative univer-my-1 univer-flex univer-w-full univer-items-center`,children:[t.children&&t.children.length>0&&I(`span`,{className:W(`univer-absolute univer-left-[-16px] univer-top-1/2 univer-flex univer--translate-y-1/2 univer-items-center univer-justify-center univer-text-[8px]`,{"univer-rotate-[-90deg]":!s}),onClick:e=>{e.stopPropagation(),y(t)},children:I(o,{})}),I(nt,{checked:l&&!u,indeterminate:l&&u,onChange:()=>{c==null||c(t)}}),I(`div`,{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(),y(t)},children:I(pn,{className:`univer-block`,showIfEllipsis:!0,placement:`top`,title:n,children:I(`span`,{className:`univer-block`,children:n})})}),f&&f(t)]})},r)}return I(`section`,{className:`
-              univer-relative univer-select-none univer-text-gray-900
-              dark:!univer-text-white
-            `,children:I(`div`,{className:`univer-m-0 univer-h-full univer-list-none univer-p-0`,style:r,children:I(Gn,{data:v,itemKey:e=>e.key,height:u,itemHeight:d,children:e=>b(e)})})})}const nr=new WeakMap;function rr(e,t){let n=nr.get(t);n||(n=Ae(t),nr.set(t,n)),n.render(e)}function ir(e){let t=nr.get(e);t&&(t.unmount(),nr.delete(e))}const ar=new Set;let or;function sr(e){return or||(or=new ResizeObserver((...e)=>{ar.forEach(t=>t(...e))})),{observe(t,n){ar.add(e),or.observe(t,n)},unobserve(t){ar.delete(e),or.unobserve(t)}}}export{je as Accordion,Ne as Avatar,Pe as Badge,G as Button,Ie as ButtonGroup,Qe as Calendar,et as CascaderList,nt as Checkbox,tt as CheckboxGroup,Mt as ColorPicker,K as ConfigContext,Re as ConfigProvider,Pt as Confirm,zt as DatePicker,Bt as DateRangePicker,ft as Dialog,Ht as DraggableList,Rt as Dropdown,tn as DropdownMenu,an as FormDualColumnLayout,rn as FormLayout,cn as Gallery,hn as GradientColorPicker,bn as HoverCard,un as Input,dn as InputNumber,xn as KBD,Q as MessageType,An as Messager,Bn as MultipleSelect,on as Pager,Pn as Popup,In as Radio,Fn as RadioGroup,fn as Segmented,zn as Select,Ln as SelectList,Vn as Separator,Hn as Switch,Un as Textarea,Je as TimeInput,Wn as Toaster,pn as Tooltip,tr as Tree,$n as TreeSelectionMode,Ue as borderBottomClassName,Y as borderClassName,ze as borderLeftBottomClassName,Be as borderLeftClassName,We as borderRightClassName,He as borderTopClassName,W as clsx,Ke as divideXClassName,Ge as divideYClassName,Qn as filterLeafNode,Kn as findNodePathFromTree,Jn as findSubTreeFromPath,Le as isBrowser,Xn as mergeTreeSelected,jn as message,Mn as removeMessage,rr as render,sr as resizeObserverCtor,q as scrollbarClassName,De as toast,ir as unmount};
+                `,
+			content: "univer-gap-2.5",
+			icon: "[&>svg]:univer-block [&>svg]:univer-size-4",
+			success: typeClassMap[MessageType.Success],
+			info: typeClassMap[MessageType.Info],
+			warning: typeClassMap[MessageType.Warning],
+			error: typeClassMap[MessageType.Error],
+			loading: typeClassMap[MessageType.Loading]
+		}
+	},
+	...props
+});
+const message = ({ content, duration, id, onClose, type = MessageType.Info }) => {
+	const messageId = id !== null && id !== void 0 ? id : createMessageId();
+	const method = resolveToastMethod(type);
+	let closed = false;
+	const handleClose = () => {
+		if (closed) return;
+		closed = true;
+		activeMessageIds.delete(messageId);
+		onClose === null || onClose === void 0 || onClose();
+	};
+	method(content, {
+		id: messageId,
+		toasterId: MESSAGE_TOASTER_ID,
+		duration: duration !== null && duration !== void 0 ? duration : DEFAULT_MESSAGE_DURATION,
+		icon: type === MessageType.Loading ? void 0 : iconMap[type],
+		onDismiss: handleClose,
+		onAutoClose: handleClose
+	});
+	activeMessageIds.add(messageId);
+	return messageId;
+};
+const removeMessage = (id) => {
+	if (typeof id !== "undefined") {
+		toast$1.dismiss(id);
+		activeMessageIds.delete(id);
+		return;
+	}
+	activeMessageIds.forEach((messageId) => {
+		toast$1.dismiss(messageId);
+	});
+	activeMessageIds.clear();
+};
+
+//#endregion
+//#region src/components/popup/Popup.tsx
+const POPUP_POINTER_OFFSET = 2;
+const HIDDEN_POPUP_OFFSET = [-9999, -9999];
+function Popup(props) {
+	const { children, visible = false, offset = [0, 0], overflowVisible = false, placementY = "below" } = props;
+	const nodeRef = useRef(null);
+	const [realOffset, setRealOffset] = useState(HIDDEN_POPUP_OFFSET);
+	const { mountContainer } = useContext(ConfigContext);
+	const calculateOffset = () => {
+		const element = nodeRef.current;
+		if (!element) return null;
+		const [left, top] = offset;
+		const { clientWidth, clientHeight } = element;
+		const { innerWidth, innerHeight } = window;
+		const maxX = Math.max(0, innerWidth - clientWidth - POPUP_POINTER_OFFSET);
+		const maxY = Math.max(0, innerHeight - clientHeight - POPUP_POINTER_OFFSET);
+		const x = Math.min(Math.max(left, 0), maxX);
+		const topWithPlacement = placementY === "above" ? top - clientHeight : top;
+		return [x, Math.min(Math.max(topWithPlacement, 0), maxY)];
+	};
+	useLayoutEffect(() => {
+		if (!visible) {
+			setRealOffset(HIDDEN_POPUP_OFFSET);
+			return;
+		}
+		const nextOffset = calculateOffset();
+		if (nextOffset) setRealOffset(nextOffset);
+	}, [
+		offset,
+		placementY,
+		visible
+	]);
+	useEffect(() => {
+		if (!visible) return;
+		const handleResize = () => {
+			const nextOffset = calculateOffset();
+			if (nextOffset) setRealOffset(nextOffset);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [
+		offset,
+		placementY,
+		visible
+	]);
+	function preventDefault(event) {
+		event.preventDefault();
+	}
+	return createPortal(/* @__PURE__ */ jsx(CSSTransition, {
+		in: visible,
+		nodeRef,
+		timeout: 500,
+		classNames: {
+			enter: "univer-popup-enter",
+			enterActive: "univer-popup-enter-active",
+			enterDone: "univer-popup-enter-done",
+			exitActive: "univer-popup-exit",
+			exitDone: "univer-popup-exit-active"
+		},
+		children: /* @__PURE__ */ jsx("section", {
+			ref: nodeRef,
+			className: "univer-popup",
+			style: {
+				left: realOffset[0] + POPUP_POINTER_OFFSET,
+				top: realOffset[1] + POPUP_POINTER_OFFSET,
+				overflow: overflowVisible ? "visible" : void 0
+			},
+			onContextMenu: preventDefault,
+			children
+		})
+	}), mountContainer);
+}
+
+//#endregion
+//#region src/components/radio-group/RadioGroup.tsx
+/**
+* RadioGroup Component
+*/
+function RadioGroup(props) {
+	const { children, className, style, value, disabled = false, direction = "horizontal", onChange } = props;
+	const handleChange = (value) => {
+		onChange(value);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-flex univer-gap-2", { "univer-flex-col": direction === "vertical" }, className),
+		style,
+		children: Children.map(children, (child, index) => {
+			if (isValidElement(child)) return cloneElement(child, {
+				key: index,
+				children: child.props.children,
+				value: child.props.value,
+				checked: value === child.props.value,
+				disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+				onChange: handleChange
+			});
+			return child;
+		})
+	});
+}
+
+//#endregion
+//#region src/components/radio/Radio.tsx
+/**
+* Radio Component
+*/
+function Radio(props) {
+	const { children, checked, value, disabled = false, onChange } = props;
+	const inputRef = useRef(null);
+	function handleChange(e) {
+		e.stopPropagation();
+		if (!onChange || disabled) return;
+		if (typeof value !== "undefined") onChange && onChange(value);
+		else {
+			const checked = inputRef.current.checked;
+			onChange && onChange(checked);
+		}
+	}
+	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-text-gray-400": disabled
+		}),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "univer-relative univer-block",
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				className: "univer-absolute univer-size-0 univer-opacity-0",
+				type: "radio",
+				checked,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx("span", {
+				className: clsx("univer-relative univer-box-border univer-flex univer-size-4 univer-items-center univer-justify-center univer-overflow-hidden univer-rounded-full univer-border univer-border-solid univer-transition-colors", {
+					"univer-opacity-50": disabled,
+					"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" })
+			})]
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+
+//#endregion
+//#region src/components/select-list/SelectList.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function SelectList(props) {
+	const { value: _value, options = [], hideCheckMark = false, onChange, multiple, className, optionClassName } = props;
+	const value = Array.isArray(_value) ? _value : [_value];
+	function handleSelect(newValue) {
+		const index = value.indexOf(newValue);
+		if (!multiple) if (index > -1) onChange(void 0);
+		else onChange(newValue);
+		else if (index > -1) onChange(value.filter((i) => i === newValue));
+		else onChange([...value, newValue]);
+	}
+	return /* @__PURE__ */ jsx("ul", {
+		className: clsx("univer-m-0 univer-grid univer-max-h-80 univer-list-none univer-gap-1 univer-overflow-y-auto univer-rounded univer-p-1.5", borderClassName, scrollbarClassName, className),
+		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 }),
+				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 },
+					children: option.label
+				})]
+			}) }, index);
+		})
+	});
+}
+
+//#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);
+function Select(props) {
+	const { className, value, disabled = false, options = [], borderless = false, onChange } = props;
+	const [open, setOpen] = useState(false);
+	function handleOpenChange(open) {
+		setOpen(open);
+	}
+	const items = useMemo(() => {
+		const selectOptions = [];
+		for (const option of options) if (option.options) {
+			option.options.forEach((opt) => {
+				selectOptions.push({
+					label: opt.label,
+					value: opt.value,
+					disabled: opt.disabled
+				});
+			});
+			selectOptions.push({ type: "separator" });
+		} else selectOptions.push({
+			label: option.label,
+			value: option.value,
+			disabled: option.disabled
+		});
+		return [{
+			type: "radio",
+			value,
+			hideIndicator: true,
+			options: selectOptions,
+			onSelect: (item) => {
+				onChange(item);
+			}
+		}];
+	}, [options]);
+	const displayValue = useMemo(() => {
+		let label = null;
+		for (const option of options) if (option.options) {
+			for (const opt of option.options) if (opt.value === value) {
+				label = opt.label;
+				break;
+			}
+		} else if (option.value === value) {
+			label = option.label;
+			break;
+		}
+		return label || value;
+	}, [options, value]);
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		className: "max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		align: "start",
+		open,
+		items,
+		disabled,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "select",
+			className: clsx(selectClassName, {
+				"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900": open && !borderless,
+				"univer-border-transparent univer-bg-transparent hover:univer-border-transparent": borderless,
+				"univer-cursor-not-allowed": disabled,
+				"hover:univer-border-primary-600": !disabled && !borderless,
+				"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",
+				children: displayValue
+			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-white" })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/select/MultipleSelect.tsx
+function MultipleSelect(props) {
+	const { className, value = [], disabled = false, options = [], borderless = false, onChange } = props;
+	const [open, setOpen] = useState(false);
+	function handleOpenChange(open) {
+		setOpen(open);
+	}
+	const items = useMemo(() => {
+		return options.map((option) => {
+			return {
+				type: "checkbox",
+				value: option.value,
+				label: option.label,
+				disabled: option.disabled,
+				checked: value.includes(option.value),
+				onSelect: (item) => {
+					onChange(value.includes(item) ? value.filter((v) => v !== item) : [...value, item]);
+				}
+			};
+		});
+	}, [options]);
+	function handleClose(item) {
+		onChange(value.filter((v) => v !== item));
+	}
+	const displayValue = useMemo(() => {
+		return options.filter((option) => value.includes(option.value)).map((option, index) => /* @__PURE__ */ jsx(Badge, {
+			className: "univer-max-w-32",
+			closable: true,
+			onClose: () => handleClose(option.value),
+			children: option.label
+		}, index));
+	}, [options, value]);
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		className: "univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		align: "start",
+		open,
+		items,
+		disabled,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "multiple-select",
+			className: clsx(selectClassName, {
+				"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900": open && !borderless,
+				"univer-border-transparent univer-bg-transparent hover:univer-border-transparent": borderless,
+				"univer-cursor-not-allowed": disabled,
+				"hover:univer-border-primary-600": !disabled && !borderless,
+				"univer-cursor-pointer": !disabled && !open
+			}, className),
+			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" })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/separator/Separator.tsx
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+	return /* @__PURE__ */ jsx(Root$4, {
+		"data-u-comp": "separator",
+		"data-slot": "separator-root",
+		decorative,
+		orientation,
+		className: clsx("univer-shrink-0 univer-bg-gray-200 data-[orientation=horizontal]:univer-h-px data-[orientation=vertical]:univer-h-full data-[orientation=horizontal]:univer-w-full data-[orientation=vertical]:univer-w-px dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/switch/Switch.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const Switch = (props) => {
+	const { defaultChecked = false, onChange } = props;
+	const [checked, setChecked] = useState(defaultChecked);
+	const handleChange = () => {
+		setChecked(!checked);
+		onChange === null || onChange === void 0 || onChange(!checked);
+	};
+	useEffect(() => {
+		setChecked(defaultChecked);
+	}, [defaultChecked]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "univer-h-4",
+		children: /* @__PURE__ */ jsxs("label", {
+			className: "univer-relative univer-inline-block univer-h-4 univer-w-7",
+			children: [/* @__PURE__ */ jsx("input", {
+				className: "univer-size-0 univer-opacity-0",
+				type: "checkbox",
+				checked,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx("span", {
+				className: clsx("univer-absolute univer-inset-0 univer-cursor-pointer univer-rounded-2xl univer-transition-colors univer-duration-200", {
+					"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 }) })
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/textarea/Textarea.tsx
+const Textarea = forwardRef((props, ref) => {
+	const textareaRef = useRef(null);
+	const lastSizeRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const { className, onResize, onValueChange, ...restProps } = props;
+	useImperativeHandle(ref, () => textareaRef.current, []);
+	useLayoutEffect(() => {
+		const textarea = textareaRef.current;
+		if (textarea && onResize) {
+			const resizeObserver = new ResizeObserver((entries) => {
+				const { width, height } = entries[0].target.getBoundingClientRect();
+				if (width === 0 || height === 0) return;
+				if (lastSizeRef.current.width !== width || lastSizeRef.current.height !== height) {
+					lastSizeRef.current = {
+						width,
+						height
+					};
+					onResize(width, height);
+				}
+			});
+			resizeObserver.observe(textarea);
+			return () => {
+				resizeObserver.unobserve(textarea);
+				resizeObserver.disconnect();
+			};
+		}
+	}, [onResize]);
+	function handleChange(event) {
+		const value = event.target.value;
+		onValueChange === null || onValueChange === void 0 || onValueChange(value);
+	}
+	return /* @__PURE__ */ jsx("textarea", {
+		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),
+		onChange: handleChange,
+		...restProps
+	});
+});
+
+//#endregion
+//#region src/components/toaster/Toaster.tsx
+function Toaster({ visibleToasts, ...props }) {
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		className: "dark:![&_[data-description]]:univer-text-gray-200 [&_[data-description]]:univer-text-sm [&_[data-description]]:univer-text-gray-600 [&_[data-icon]>svg]:univer-relative [&_[data-icon]>svg]:univer-top-1 [&_[data-icon]]:univer-self-baseline [&_[data-sonner-toast]]:univer-shadow-md [&_[data-title]]:univer-text-sm [&_[data-title]]:univer-text-gray-900",
+		toastOptions: { classNames: {
+			content: "univer-leading-normal",
+			success: "[&_[data-icon]]:univer-text-green-500",
+			info: "[&_[data-icon]]:univer-text-primary-600",
+			error: "[&_[data-icon]]:univer-text-red-500",
+			warning: "[&_[data-icon]]:univer-text-yellow-500"
+		} },
+		visibleToasts: visibleToasts !== null && visibleToasts !== void 0 ? visibleToasts : 5,
+		...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] = useState(0);
+	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		style,
+		children: data.map((item, index) => {
+			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+			return /* @__PURE__ */ 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__ */ jsx("div", {
+		className,
+		style: {
+			...style,
+			height,
+			overflowY: "auto"
+		},
+		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				height: totalHeight,
+				position: "relative"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: { transform: `translateY(${offsetY}px)` },
+				children: visibleItems.map((item, index) => {
+					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+					return /* @__PURE__ */ jsx("div", { children: children(item, start + index) }, key);
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/tree/util.ts
+const findNodePathFromTree = (tree, key) => {
+	const result = [];
+	const recursive = (node) => {
+		var _node$children;
+		result.push(node.key);
+		if (key === node.key) return true;
+		if ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) {
+			if (node.children.some(recursive)) return true;
+		}
+		result.pop();
+	};
+	tree.some(recursive);
+	return result;
+};
+const createCacheWithFindNodePathFromTree = (tree, defaultCache) => {
+	const cache = defaultCache !== null && defaultCache !== void 0 ? defaultCache : /* @__PURE__ */ new Map();
+	let cacheTree = tree;
+	return {
+		findNodePathFromTreeWithCache: (key) => {
+			const cacheValue = cache.get(key);
+			if (cacheValue) return cacheValue;
+			const path = findNodePathFromTree(cacheTree, key);
+			path.map((k, index, arr) => {
+				const result = [];
+				for (let i = 0; i <= index; i++) result.push(arr[i]);
+				return result;
+			}).reverse().forEach((list) => {
+				const key = list[list.length - 1];
+				cache.set(key, list);
+			});
+			return path;
+		},
+		reset: (newTree) => {
+			cache.clear();
+			if (newTree) cacheTree = newTree;
+		}
+	};
+};
+const findSubTreeFromPath = (tree, path) => {
+	if (!path.length) return tree;
+	return path.reduce((list, key) => {
+		const item = list.find((node) => node.key === key);
+		return (item === null || item === void 0 ? void 0 : item.children) || [];
+	}, tree);
+};
+const findNodeFromPath = (tree, _path) => {
+	const path = _path.slice(0);
+	const key = path.pop();
+	return findSubTreeFromPath(tree, path).find((node) => node.key === key);
+};
+const mergeTreeSelected = (treeData, treeSelected, path) => {
+	const set = new Set(treeSelected);
+	const key = path[path.length - 1];
+	const subTree = findSubTreeFromPath(treeData, path);
+	if (!set.has(key)) {
+		const addRecursive = (node) => {
+			set.add(node.key);
+			if (node.children) node.children.forEach((n) => addRecursive(n));
+		};
+		path.forEach((k) => set.add(k));
+		if (subTree.length) subTree.forEach(addRecursive);
+	} else {
+		if (subTree.length) {
+			const deleteRecursive = (node) => {
+				set.delete(node.key);
+				if (node.children) node.children.forEach((n) => deleteRecursive(n));
+			};
+			subTree.forEach(deleteRecursive);
+		}
+		path.map((k, index, arr) => {
+			const result = [];
+			for (let i = 0; i <= index; i++) result.push(arr[i]);
+			return result;
+		}).reverse().some((path) => {
+			const list = findSubTreeFromPath(treeData, path);
+			const key = path[path.length - 1];
+			if (list.every((e) => !set.has(e.key))) set.delete(key);
+			else return true;
+			return false;
+		});
+	}
+	return [...set];
+};
+const isIntermediated = (treeSelected, node) => {
+	const list = node.children || [];
+	const checkIsSelected = (node) => {
+		var _node$children2;
+		if ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) {
+			if (node.children.every(checkIsSelected)) return true;
+			return false;
+		}
+		return treeSelected.has(node.key);
+	};
+	if (list.length) return list.some((node) => !checkIsSelected(node));
+	return false;
+};
+const filterLeafNode = (tree, keyList) => {
+	const result = [];
+	const find = createCacheWithFindNodePathFromTree(tree);
+	keyList.forEach((key) => {
+		const node = findNodeFromPath(tree, find.findNodePathFromTreeWithCache(key));
+		if (node) {
+			var _node$children3;
+			if (!((_node$children3 = node.children) === null || _node$children3 === void 0 ? void 0 : _node$children3.length)) result.push(node);
+		}
+	});
+	return result;
+};
+
+//#endregion
+//#region src/components/tree/Tree.tsx
+let TreeSelectionMode = /* @__PURE__ */ function(TreeSelectionMode) {
+	TreeSelectionMode[TreeSelectionMode["ONLY_LEAF_NODE"] = 0] = "ONLY_LEAF_NODE";
+	TreeSelectionMode[TreeSelectionMode["ALL"] = 1] = "ALL";
+	return TreeSelectionMode;
+}({});
+function flattenTree(items, expandedKeys, level = 1) {
+	const flatItems = [];
+	items.forEach((item) => {
+		flatItems.push({
+			...item,
+			level
+		});
+		if (item.children && expandedKeys.has(item.key)) flatItems.push(...flattenTree(item.children, expandedKeys, level + 1));
+	});
+	return flatItems;
+}
+/**
+* Tree Component
+*/
+function Tree(props) {
+	const { data = [], defaultCache, style, defaultExpandAll = false, selectionMode = TreeSelectionMode.ALL, valueGroup = [], onChange, onExpend, height = 200, itemHeight = 32, attachRender } = props;
+	const [update, forceUpdate] = useState({});
+	const expandKeySet = useMemo(() => {
+		return /* @__PURE__ */ new Set();
+	}, []);
+	const findNode = useMemo(() => createCacheWithFindNodePathFromTree(data, defaultCache), [data, defaultCache]);
+	const selectedNodeKeySet = useMemo(() => {
+		const set = /* @__PURE__ */ new Set();
+		valueGroup.forEach((key) => {
+			findNode.findNodePathFromTreeWithCache(key).forEach((k) => set.add(k));
+		});
+		return set;
+	}, [valueGroup, findNode]);
+	useEffect(() => {
+		function walkData(item) {
+			var _item$children;
+			expandKeySet.add(item.key);
+			(_item$children = item.children) === null || _item$children === void 0 || _item$children.forEach(walkData);
+		}
+		if (defaultExpandAll) data.forEach(walkData);
+		forceUpdate({});
+	}, [defaultExpandAll, data]);
+	const flatData = useMemo(() => flattenTree(data, expandKeySet), [
+		data,
+		update,
+		expandKeySet
+	]);
+	function handleExpendItem(treeItem) {
+		var _treeItem$children;
+		if ((_treeItem$children = treeItem.children) === null || _treeItem$children === void 0 ? void 0 : _treeItem$children.length) {
+			if (expandKeySet.has(treeItem.key)) expandKeySet.delete(treeItem.key);
+			else expandKeySet.add(treeItem.key);
+			forceUpdate({});
+		}
+		if (selectionMode === TreeSelectionMode.ONLY_LEAF_NODE) {
+			if (treeItem.children) return;
+		}
+		onExpend === null || onExpend === void 0 || onExpend(treeItem.key);
+	}
+	function renderTreeItem(treeItem) {
+		const { title, key, level = 0 } = treeItem;
+		const treeNodeClassName = props.treeNodeClassName;
+		const expended = expandKeySet.has(key);
+		const selected = selectedNodeKeySet.has(key);
+		const intermediated = isIntermediated(selectedNodeKeySet, treeItem);
+		return /* @__PURE__ */ jsx("div", {
+			className: clsx("univer-relative univer-text-[13px]", treeNodeClassName),
+			style: { paddingLeft: `${level * 20}px` },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "univer-relative univer-my-1 univer-flex univer-w-full univer-items-center",
+				children: [
+					treeItem.children && treeItem.children.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: clsx("univer-absolute univer-left-[-16px] univer-top-1/2 univer-flex univer--translate-y-1/2 univer-items-center univer-justify-center univer-text-[8px]", { "univer-rotate-[-90deg]": !expended }),
+						onClick: (e) => {
+							e.stopPropagation();
+							handleExpendItem(treeItem);
+						},
+						children: /* @__PURE__ */ jsx(DropdownIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Checkbox, {
+						checked: selected && !intermediated,
+						indeterminate: selected && intermediated,
+						onChange: () => {
+							onChange === null || onChange === void 0 || onChange(treeItem);
+						}
+					}),
+					/* @__PURE__ */ 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                        ",
+						onClick: (e) => {
+							e.stopPropagation();
+							handleExpendItem(treeItem);
+						},
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							className: "univer-block",
+							showIfEllipsis: true,
+							placement: "top",
+							title,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "univer-block",
+								children: title
+							})
+						})
+					}),
+					attachRender && attachRender(treeItem)
+				]
+			})
+		}, key);
+	}
+	return /* @__PURE__ */ jsx("section", {
+		className: "\n              univer-relative univer-select-none univer-text-gray-900\n              dark:!univer-text-white\n            ",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
+			style,
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				data: flatData,
+				itemKey: (item) => item.key,
+				height,
+				itemHeight,
+				children: (item) => renderTreeItem(item)
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/helper/react-dom.ts
+const rootMap = /* @__PURE__ */ new WeakMap();
+function render(node, container) {
+	let root = rootMap.get(container);
+	if (!root) {
+		root = createRoot(container);
+		rootMap.set(container, root);
+	}
+	root.render(node);
+}
+function unmount(container) {
+	const root = rootMap.get(container);
+	if (root) {
+		root.unmount();
+		rootMap.delete(container);
+	}
+}
+
+//#endregion
+//#region src/helper/resize-observer.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+/**
+* All elements are observed by a single ResizeObserver is got greater performance than each element observed by separate ResizeObserver
+* See issue https://github.com/WICG/resize-observer/issues/59#issuecomment-408098151
+*/
+const _resizeObserverCallbacks = /* @__PURE__ */ new Set();
+let _resizeObserver;
+function resizeObserverCtor(callback) {
+	if (!_resizeObserver) _resizeObserver = new ResizeObserver((...args) => {
+		_resizeObserverCallbacks.forEach((callback) => callback(...args));
+	});
+	return {
+		observe(target, options) {
+			_resizeObserverCallbacks.add(callback);
+			_resizeObserver.observe(target, options);
+		},
+		unobserve(target) {
+			_resizeObserverCallbacks.delete(callback);
+			_resizeObserver.unobserve(target);
+		}
+	};
+}
+
+//#endregion
+export { Accordion, Avatar, Badge, Button, ButtonGroup, Calendar, CascaderList, Checkbox, CheckboxGroup, ColorPicker, ConfigContext, ConfigProvider, Confirm, DatePicker, DateRangePicker, Dialog, DraggableList, Dropdown, DropdownMenu, FormDualColumnLayout, FormLayout, Gallery, GradientColorPicker, HoverCard, Input, InputNumber, KBD, MessageType, Messager, MultipleSelect, Pager, Popup, Radio, RadioGroup, Segmented, Select, SelectList, Separator, Switch, Textarea, TimeInput, Toaster, Tooltip, Tree, TreeSelectionMode, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderLeftClassName, borderRightClassName, borderTopClassName, clsx, divideXClassName, divideYClassName, filterLeafNode, findNodePathFromTree, findSubTreeFromPath, isBrowser, mergeTreeSelected, message, removeMessage, render, resizeObserverCtor, scrollbarClassName, toast, unmount };