@univerjs/design 0.20.1 → 0.21.0

package/lib/cjs/index.js

@@ -1,84 +1,4271 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/icons`),t=require(`react`),n=require(`clsx`),r=require(`tailwind-merge`),i=require(`react/jsx-runtime`),a=require(`class-variance-authority`),o=require(`@radix-ui/react-slot`),s=require(`@radix-ui/react-dialog`),c=require(`@radix-ui/react-popover`),l=require(`react-dom`),u=require(`@radix-ui/react-dropdown-menu`),d=require(`@radix-ui/react-hover-card`),f=require(`sonner`),p=require(`react-transition-group`),m=require(`@radix-ui/react-separator`),h=require(`react-dom/client`);function g(...e){return(0,r.twMerge)((0,n.clsx)(e))}function _(n){let{className:r,items:a}=n,[o,s]=(0,t.useState)(null),c=e=>{s(o===e?null:e)};return(0,i.jsx)(`div`,{"data-u-comp":`accordion`,className:g(`univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600`,r),children:a.map((t,n)=>(0,i.jsxs)(`div`,{children:[(0,i.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:()=>c(n),children:[(0,i.jsx)(e.DownIcon,{className:g(`univer-size-2.5 univer-flex-shrink-0 univer-transition-transform`,{"-univer-rotate-90":o!==n,"univer-rotate-0":o===n})}),(0,i.jsx)(`span`,{className:`univer-font-medium`,children:t.label})]}),(0,i.jsx)(`div`,{className:g(`univer-overflow-hidden univer-transition-[max-height,opacity] univer-duration-500 univer-ease-in-out`,{"univer-max-h-screen":o===n,"univer-max-h-0":o!==n}),children:(0,i.jsx)(`div`,{className:`univer-box-border univer-px-4 univer-py-1.5`,children:t.children})})]},n))})}const v=(0,a.cva)(`
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_icons = require("@univerjs/icons");
+let react = require("react");
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+let react_dom = require("react-dom");
+let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+let _radix_ui_react_hover_card = require("@radix-ui/react-hover-card");
+let sonner = require("sonner");
+let react_transition_group = require("react-transition-group");
+let _radix_ui_react_separator = require("@radix-ui/react-separator");
+let react_dom_client = require("react-dom/client");
+
+//#region src/helper/clsx.ts
+function clsx$1(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+
+//#endregion
+//#region src/components/accordion/Accordion.tsx
+function Accordion(props) {
+	const { className, items } = props;
+	const [openIndex, setOpenIndex] = (0, react.useState)(null);
+	const toggleItem = (index) => {
+		setOpenIndex(openIndex === index ? null : index);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "accordion",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+				"-univer-rotate-90": openIndex !== index,
+				"univer-rotate-0": openIndex === index
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-font-medium",
+				children: item.label
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: clsx$1("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__ */ (0, react_jsx_runtime.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 = (0, class_variance_authority.cva)(`
       univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200
       univer-text-center univer-align-middle univer-text-white
-    `,{variants:{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 y(e){let{children:t,className:n,style:r,title:a,alt:o,shape:s=`circle`,size:c=`middle`,src:l,fit:u=`fill`,onError:d,onLoad:f}=e,p=typeof c==`number`?{width:`${c}px`,height:`${c}px`,lineHeight:`${c}px`}:{},m={objectFit:u};return(0,i.jsxs)(`span`,{className:g(v({shape:s,size:typeof c==`number`?`middle`:c}),{"univer-bg-transparent":l},n),style:{...p,...r,...l&&m},children:[l&&(0,i.jsx)(`img`,{className:`univer-block univer-size-full`,src:l,title:a,alt:o,onError:d,onLoad:f}),t]})}function b(t){let{className:n,children:r,closable:a=!1,onClose:o}=t;return(0,i.jsxs)(`span`,{"data-u-comp":`badge`,className:g(`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`,n),children:[(0,i.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:r}),a&&(0,i.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:o,children:(0,i.jsx)(e.CloseIcon,{className:`univer-text-current`})})]})}const x=(0,a.cva)(`
+    `, {
+	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__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: clsx$1(avatarVariants({
+			shape,
+			size: typeof size === "number" ? "middle" : size
+		}), { "univer-bg-transparent": src }, className),
+		style: {
+			...sizeStyle,
+			...style,
+			...src && fitStyle
+		},
+		children: [src && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+		"data-u-comp": "badge",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-flex-1 univer-truncate",
+			children
+		}), closable && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-text-current" })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/button/Button.tsx
+const buttonVariants = (0, class_variance_authority.cva)(`
       univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center
       univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid
       univer-text-sm univer-font-medium univer-transition-colors
       disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50
       [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0
-    `,{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`}}),S=(0,t.forwardRef)(({className:e,variant:t,size:n,asChild:r=!1,...a},s)=>(0,i.jsx)(r?o.Slot:`button`,{className:g(x({variant:t,size:n,className:e})),ref:s,"data-u-comp":`button`,...a}));S.displayName=`Button`;const C=({className:e,orientation:n=`horizontal`,children:r})=>{let a=t.Children.count(r),o=n===`horizontal`,s=n===`vertical`;return(0,i.jsx)(`div`,{className:g(`univer-grid`,{"univer-grid-flow-row":s,"univer-w-fit":s},e),children:t.Children.map(r,(e,n)=>{let r=n===0,i=n===a-1;return(0,t.cloneElement)(e,{className:g({"!univer-rounded-l-none":o&&!r,"!univer-rounded-r-none":o&&!i,"!univer-border-l-0":o&&!r,"!univer-rounded-t-none":s&&!r,"!univer-rounded-b-none":s&&!i,"!univer-border-t-0":s&&!r},e.props.className)})})})};function w(){return typeof window<`u`&&typeof document<`u`}const T=(0,t.createContext)({mountContainer:w()?document.body:null});function E(e){let{children:n,locale:r,mountContainer:a}=e,o=(0,t.useMemo)(()=>({locale:r,mountContainer:a}),[r,a]);return(0,i.jsx)(T.Provider,{value:o,children:n})}const D=`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`,O=`univer-border-gray-200 dark:!univer-border-gray-600 univer-border-solid`,k=g(O,`univer-border`),A=g(O,`univer-border-l univer-border-b univer-border-t-0 univer-border-r-0`),j=g(O,`univer-border-l univer-border-b-0 univer-border-t-0 univer-border-r-0`),M=g(O,`univer-border-b-0 univer-border-t-0 rtl:univer-border-l-0 rtl:univer-border-r`),N=g(O,`univer-border-l-0 univer-border-b-0 univer-border-t univer-border-r-0`),P=g(O,`univer-border-l-0 univer-border-b univer-border-t-0 univer-border-r-0`),F=g(O,`univer-border-l-0 univer-border-b-0 univer-border-t-0 univer-border-r`);function I(e,t=2){return String(e).padStart(t,`0`)}function L(e,t){let n=e==null?new Date:e;if(Number.isNaN(n.getTime()))return`Invalid Date`;let r={YYYY:String(n.getFullYear()),MM:I(n.getMonth()+1),DD:I(n.getDate()),HH:I(n.getHours()),mm:I(n.getMinutes()),ss:I(n.getSeconds())};return t.replace(/YYYY|MM|DD|HH|mm|ss/g,e=>{var t;return(t=r[e])==null?e:t})}function R(t){let{className:n,value:r,onValueChange:a}=t;function o(e){let[t,n,i]=e.target.value.split(`:`).map(Number),o=new Date(r==null?Date.now():r);o.setHours(t,n,i,0),a==null||a(o)}return(0,i.jsxs)(`div`,{"data-u-comp":`time-input`,className:`univer-relative univer-mx-auto univer-mt-1 univer-w-fit`,children:[(0,i.jsx)(e.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`}),(0,i.jsx)(`input`,{className:g(`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`,k,n),type:`time`,step:`1`,value:L(r,`HH:mm:ss`),onChange:o})]})}function z(e,t){return new Date(e,t+1,0).getDate()}function ee(e,t){return new Date(e,t,1).getDay()}function B(e){let{className:t,...n}=e;return(0,i.jsx)(`button`,{className:g(`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 V(n){let{className:r,max:a,min:o,showTime:s=!1,value:c,onValueChange:l}=n,{locale:u}=(0,t.useContext)(T),{year:d,weekDays:f,months:p}=u==null?void 0:u.Calendar,m=new Date,[h,_]=(0,t.useState)((c==null?m:c).getFullYear()),[v,y]=(0,t.useState)((c==null?m:c).getMonth());function b(){y(e=>e===0?(_(e=>e-1),11):e-1)}function x(){y(e=>e===11?(_(e=>e+1),0):e+1)}let S=z(h,v),C=ee(h,v),w=(0,t.useMemo)(()=>{let e=[];for(let t=0;t<C;t++)e.push(null);for(let t=1;t<=S;t++)e.push(t);return e},[S,C]);function E(e){return e&&h===(c==null?void 0:c.getFullYear())&&v===(c==null?void 0:c.getMonth())&&e===(c==null?void 0:c.getDate())}function D(e){return e&&h===m.getFullYear()&&v===m.getMonth()&&e===m.getDate()}function O(e){var t,n,r;if(!e)return!1;let i=(t=c==null?void 0:c.getHours())==null?m.getHours():t,s=(n=c==null?void 0:c.getMinutes())==null?m.getMinutes():n,l=(r=c==null?void 0:c.getSeconds())==null?m.getSeconds():r,u=new Date(h,v,e,i,s,l);return!!(o&&u<o||a&&u>a)}function k(e){var t,n,r;if(O(e))return;let i=(t=c==null?void 0:c.getHours())==null?m.getHours():t,a=(n=c==null?void 0:c.getMinutes())==null?m.getMinutes():n,o=(r=c==null?void 0:c.getSeconds())==null?m.getSeconds():r;l==null||l(new Date(h,v,e,i,a,o))}function A(e){var t;let n=e.getHours(),r=e.getMinutes(),i=e.getSeconds(),a=new Date(h,v,(t=c==null?void 0:c.getDate())==null?m.getDate():t,n,r,i);l==null||l(a)}return(0,i.jsxs)(`div`,{"data-u-comp":`calendar`,className:g(`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`,r),children:[(0,i.jsxs)(`nav`,{className:`univer-mb-4 univer-flex univer-items-center univer-justify-between`,children:[(0,i.jsx)(B,{className:`univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200`,"aria-label":`Previous Month`,onClick:b,children:(0,i.jsx)(e.MoreRightIcon,{className:`univer-rotate-180`})}),(0,i.jsxs)(`span`,{className:`univer-flex univer-gap-0.5 univer-text-sm univer-font-medium`,children:[(0,i.jsx)(`span`,{children:h}),(0,i.jsx)(`span`,{children:d}),(0,i.jsx)(`span`,{children:p[v]})]}),(0,i.jsx)(B,{className:`univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200`,"aria-label":`Next Month`,onClick:x,children:(0,i.jsx)(e.MoreRightIcon,{})})]}),(0,i.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:f.map(e=>(0,i.jsx)(`div`,{children:e},e))}),(0,i.jsx)(`div`,{className:`univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center`,children:w.map((e,t)=>e?(0,i.jsx)(B,{className:g({"!univer-bg-primary-600 univer-font-bold univer-text-white":!D(e)&&E(e),"dark:!univer-text-white":!D(e)&&!E(e),"!univer-bg-primary-600 univer-text-white":D(e)&&E(e),"univer-font-semibold univer-text-primary-600 dark:!univer-text-primary-500":D(e)&&!E(e),"univer-cursor-not-allowed univer-opacity-40":O(e),"univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800":!E(e)&&!O(e)}),onClick:()=>k(e),disabled:O(e),children:e},t):(0,i.jsx)(`div`,{},t))}),s&&(0,i.jsx)(R,{value:c,onValueChange:A})]})}function H({emptyText:e}){return(0,i.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:e})}function te(n){let{value:r,options:a=[],onChange:o,contentClassName:s,wrapperClassName:c}=n,{locale:l}=(0,t.useContext)(T),u=(0,t.useMemo)(()=>{let e=[a];return r.forEach((t,n)=>{let r=e[n].find(e=>e.value===t);r!=null&&r.children&&e.push(r.children)}),e},[r]);function d(e,t){if(t===r[e])return;if(r[e+1]){let n=r.slice(0,e+1);n[e]=t,o(n);return}let n=[...r];n[e]=t,o(n)}return(0,i.jsxs)(`section`,{"data-u-comp":`cascader-list`,className:g(`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`,k,D,c),children:[u.map((t,n)=>t.length?(0,i.jsx)(`ul`,{className:g(`univer-m-0 univer-h-full univer-max-h-full univer-list-none univer-overflow-auto univer-px-2`,D,s),children:t.map(t=>(0,i.jsx)(`li`,{children:(0,i.jsxs)(`a`,{className:g(`univer-relative univer-block univer-h-8 univer-cursor-pointer univer-rounded univer-text-sm/8`,{"univer-px-7":n>0,"univer-px-1.5":n===0,"univer-bg-gray-200 dark:!univer-bg-gray-600":t.value===r[n]}),onClick:()=>d(n,t.value),children:[n>0&&(0,i.jsx)(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-h-full univer-items-center`,children:t.value===r[n]&&(0,i.jsx)(e.CheckMarkIcon,{className:`univer-text-primary-600`})}),(0,i.jsx)(`span`,{children:t.label})]})},t.value))},n):(0,i.jsx)(H,{emptyText:l==null?void 0:l.CascaderList.empty},n)),r.length<=0&&(0,i.jsx)(H,{emptyText:l==null?void 0:l.CascaderList.empty})]})}function ne(e){let{children:n,className:r,style:a,value:o,disabled:s,direction:c=`horizontal`,onChange:l}=e,u=e=>{o.includes(e)?l(o.filter(t=>t!==e)):l([...o,e])};return(0,i.jsx)(`div`,{className:g(`univer-flex univer-gap-2`,{"univer-flex-col":c===`vertical`},r),style:a,children:t.Children.map(n,(e,n)=>(0,t.isValidElement)(e)?(0,t.cloneElement)(e,{key:n,children:e.props.children,checked:e.props.value?o.includes(e.props.value):!1,disabled:s==null?e.props.disabled:s,onChange:u}):e)})}function re(n){let{children:r,className:a,style:o,checked:s=!1,indeterminate:c=!1,value:l,disabled:u=!1,onChange:d,contentClassName:f}=n,p=(0,t.useRef)(null);function m(e){if(e.stopPropagation(),!(!d||u))if(l!==void 0)d==null||d(l);else{var t,n;let e=(t=p==null||(n=p.current)==null?void 0:n.checked)==null?!1:t;d==null||d(e)}}return(0,i.jsxs)(`label`,{"data-u-comp":`checkbox`,className:g(`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":!u,"univer-text-gray-400":u},a),style:o,children:[(0,i.jsxs)(`span`,{className:`univer-relative univer-block`,children:[(0,i.jsx)(`input`,{ref:p,className:`univer-absolute univer-size-0 univer-opacity-0`,type:`checkbox`,checked:s,disabled:u,onChange:m}),(0,i.jsxs)(`span`,{className:g(`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":u,"univer-border-primary-600 univer-bg-primary-600":s||c,"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600":!s&&!c}),children:[s&&(0,i.jsx)(e.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`}),c&&!s&&(0,i.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`})]})]}),(0,i.jsx)(`span`,{className:g(`univer-select-none`,f),children:r})]})}const ie=s.Root,ae=s.Portal,oe=(0,t.forwardRef)(({className:e,...t},n)=>(0,i.jsx)(s.Overlay,{ref:n,className:g(`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}));oe.displayName=s.Overlay.displayName;const se=(0,t.forwardRef)(({className:t,children:n,closable:r=!0,onClickClose:a,...o},c)=>(0,i.jsxs)(ae,{children:[(0,i.jsx)(oe,{}),(0,i.jsxs)(s.Content,{ref:c,className:g(`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`,k,t),...o,children:[n,r&&(0,i.jsxs)(s.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:a,children:[(0,i.jsx)(e.CloseIcon,{className:`univer-size-4 univer-text-gray-400`}),(0,i.jsx)(`span`,{className:`univer-sr-only`,children:`Close`})]})]})]}));se.displayName=s.Content.displayName;const ce=({className:e,...t})=>(0,i.jsx)(`div`,{className:g(`univer-flex univer-flex-col univer-space-y-1.5 univer-text-center sm:!univer-text-left`,e),...t});ce.displayName=`DialogHeader`;const le=({className:e,...t})=>(0,i.jsx)(`div`,{className:g(`univer-flex univer-flex-col-reverse sm:!univer-flex-row sm:!univer-justify-end sm:!univer-space-x-2`,e),...t});le.displayName=`DialogFooter`;const ue=(0,t.forwardRef)(({className:e,...t},n)=>(0,i.jsx)(s.Title,{ref:n,className:g(`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}));ue.displayName=s.Title.displayName;const de=(0,t.forwardRef)(({className:e,...t},n)=>(0,i.jsx)(s.Description,{ref:n,className:g(`univer-text-sm univer-text-gray-500`,e),...t}));de.displayName=s.Description.displayName;function fe(e={}){let n=(0,t.useCallback)(()=>{let{innerWidth:e,innerHeight:t}=window;return{x:Math.max(0,(e-0)/2),y:Math.max(0,(t-0)/2)}},[]),{defaultPosition:r=n(),enabled:i=!1}=e,[a,o]=(0,t.useState)(r),[s,c]=(0,t.useState)(!1),l=(0,t.useRef)(null),u=(0,t.useRef)({x:0,y:0}),d=(0,t.useRef)({x:0,y:0}),f=(0,t.useRef)(!1);(0,t.useEffect)(()=>{if(!l.current||f.current||e.defaultPosition)return;let{width:t,height:n}=l.current.getBoundingClientRect(),{innerWidth:r,innerHeight:i}=window,a=Math.max(0,(r-t)/2),s=Math.max(0,(i-n)/2);o({x:a,y:s}),u.current={x:a,y:s},f.current=!0},[e.defaultPosition]);let p=(0,t.useCallback)((e,t)=>{if(!l.current)return{x:e,y:t};let n=l.current.getBoundingClientRect(),{clientWidth:r,clientHeight:i}=document.documentElement,a=u.current.x+(e-d.current.x),o=u.current.y+(t-d.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}},[]),m=(0,t.useCallback)(e=>{i&&(e.preventDefault(),e.stopPropagation(),u.current={...a},d.current={x:e.clientX,y:e.clientY},c(!0),document.body.style.userSelect=`none`)},[i,a]),h=(0,t.useCallback)(e=>{s&&(e.preventDefault(),e.stopPropagation(),o(p(e.clientX,e.clientY)))},[s,p]),g=(0,t.useCallback)(()=>{c(!1),document.body.style.userSelect=``},[]);return(0,t.useEffect)(()=>{if(i)return document.addEventListener(`mousemove`,h),document.addEventListener(`mouseup`,g),()=>{document.removeEventListener(`mousemove`,h),document.removeEventListener(`mouseup`,g)}},[i,h,g]),{position:a,isDragging:s,elementRef:l,setElementRef:t=>{if(l.current=t,t&&!f.current&&!e.defaultPosition){let{width:e,height:n}=t.getBoundingClientRect(),{innerWidth:r,innerHeight:i}=window,a=Math.max(0,(r-e)/2),s=Math.max(0,(i-n)/2);o({x:a,y:s}),u.current={x:a,y:s},f.current=!0}},handleMouseDown:m}}function U(e){var n,r,a,o;let{className:s,children:c,style:l,open:u=!1,title:d,width:f,draggable:p=!1,defaultPosition:m,footer:h,mask:_=!0,keyboard:v=!0,closable:y=!0,maskClosable:b=!0,showOk:x,showCancel:C,onOpenChange:w,onClose:E,onOk:D,onCancel:O}=e,{locale:k}=(0,t.useContext)(T),{position:A,isDragging:j,setElementRef:M,handleMouseDown:N}=fe({defaultPosition:m,enabled:p}),P=h==null?x||C?(0,i.jsxs)(`div`,{className:`univer-flex univer-justify-end univer-gap-2`,children:[C&&(0,i.jsx)(S,{onClick:O,children:(n=k==null||(r=k.Confirm)==null?void 0:r.cancel)==null?`Cancel`:n}),x&&(0,i.jsx)(S,{variant:`primary`,onClick:D,children:(a=k==null||(o=k.Confirm)==null?void 0:o.confirm)==null?`OK`:a})]}):null:h,F=(0,t.useCallback)(e=>{e&&p&&M(e)},[p,M]),I=(0,t.useCallback)(e=>{!_&&!e||(w==null||w(e),e||E==null||E())},[E,w]);function L(){w==null||w(!1),E==null||E()}return(0,i.jsx)(ie,{open:u,onOpenChange:I,modal:_!==!1,children:(0,i.jsxs)(se,{ref:F,className:g(s,{"!univer-animate-none":p}),style:{...l,width:f?typeof f==`number`?`${f}px`:f:void 0,maxWidth:f?`initial`:void 0,...p?{position:`absolute`,margin:0,left:0,top:0,transform:`translate(${A.x}px, ${A.y}px)`,transition:j?`none`:void 0,cursor:j?`grabbing`:void 0}:{}},closable:y,onClickClose:L,onEscapeKeyDown:e=>{v&&L(),e.preventDefault()},onPointerDownOutside:e=>{b&&L(),e.preventDefault()},children:[(0,i.jsxs)(ce,{className:g({"!univer-hidden":!d}),"data-drag-handle":p?`true`:void 0,style:{cursor:p?`grab`:void 0,userSelect:p?`none`:void 0,touchAction:p?`none`:void 0},onMouseDown:p?N:void 0,children:[(0,i.jsx)(ue,{children:d}),(0,i.jsx)(de,{className:`univer-hidden`})]}),c,P&&(0,i.jsx)(le,{children:P})]})})}const W=(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)]},pe=(e,t,n)=>{let r=e=>e.toString(16).padStart(2,`0`);return`#${r(e)}${r(t)}${r(n)}`},G=(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]},K=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 G(t,n,r)},q=(e,t,n)=>{let[r,i,a]=W(e,t,n);return pe(r,i,a)},me=(e,t,n,r)=>{let[i,a,o]=W(e,t,n);return`rgba(${i}, ${a}, ${o}, ${r})`},he=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 ge({hsv:e,alpha:n,onChange:r,onChanged:a}){let[o,s]=(0,t.useState)(!1),c=(0,t.useRef)(null),l=(0,t.useRef)(null),u=(0,t.useCallback)(e=>{var t,n;let i=c.current;if(!i)return;let a=(t=(n=l.current)==null?void 0:n.clientWidth)==null?0:t,o=i.getBoundingClientRect(),s=o.width-a;if(s<=0){r(0);return}let u=Math.max(0,Math.min(e-o.left,s));r(Math.round(u/s*100)/100)},[r]),d=(0,t.useCallback)(e=>{o&&u(e.clientX)},[o,u]),f=(0,t.useCallback)(()=>{s(!1),a==null||a(n)},[n]);(0,t.useEffect)(()=>(o&&(window.addEventListener(`pointermove`,d),window.addEventListener(`pointerup`,f),window.addEventListener(`mouseup`,f)),()=>{window.removeEventListener(`pointermove`,d),window.removeEventListener(`pointerup`,f),window.removeEventListener(`mouseup`,f)}),[o,d,f]);let p=()=>{var e,t,r,i;let a=Math.min(Math.max(n*100,0),100),o=(e=(t=l.current)==null?void 0:t.clientWidth)==null?0:e,s=(r=(i=c.current)==null?void 0:i.clientWidth)==null?0:r,u=s>0?o/s*100:0;return`${a/100*(100-u)}%`},m=W(...e);return(0,i.jsxs)(`div`,{className:`univer-relative univer-w-full univer-select-none`,children:[(0,i.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`}}),(0,i.jsx)(`div`,{ref:c,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(${m.join(`,`)}))`},onPointerDown:e=>{s(!0),u(e.clientX)},children:(0,i.jsx)(`div`,{ref:l,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:p(),transform:`translateY(-50%)`,transition:o?`none`:`all 0.1s ease-out`}})})]})}function _e({hsv:e,onChange:n}){let[r,a]=(0,t.useState)(``),o=(0,t.useMemo)(()=>q(e[0],e[1],e[2]),[e]);(0,t.useEffect)(()=>{a(o.replace(/^#/,``))},[o]);let s=e=>/^[0-9A-Fa-f]{6}$/.test(e);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`input`,{className:g(`univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white`,k),value:r,onChange:e=>{let t=e.target.value.trim();if(!(t.length>6)&&!(t!==``&&!/^[0-9A-Fa-f]*$/.test(t))&&(a(t),s(t))){let e=K(t);e&&n&&n(...e)}},onBlur:()=>{s(r)||a(o.replace(/^#/,``))},maxLength:6,spellCheck:!1}),(0,i.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 ve({hsv:e,alpha:n,format:r,onChange:a}){let[o,s]=(0,t.useState)({r:0,g:0,b:0,a:1});(0,t.useEffect)(()=>{let[t,r,i]=W(e[0],e[1],e[2]);s({r:Math.round(t),g:Math.round(r),b:Math.round(i),a:n==null?1:n})},[e,n]);let c=(t,n)=>{if(t===`a`){if(n!==``&&!/^\d*\.?\d*$/.test(n))return;let t=n===``?0:Number.parseFloat(n);if(t>1)return;s({...o,a:t}),a&&a(e[0],e[1],e[2],t);return}if(n!==``&&!/^\d*$/.test(n))return;let r=n===``?0:Number.parseInt(n,10);if(r>255)return;let i={...o,[t]:r};s(i),a&&a(...G(i.r,i.g,i.b),o.a)},l=()=>{let[t,r,i]=W(e[0],e[1],e[2]);s({r:Math.round(t),g:Math.round(r),b:Math.round(i),a:n==null?1:n})};return(0,i.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:[(0,i.jsx)(`input`,{value:o.r,onChange:e=>c(`r`,e.target.value),onBlur:l,maxLength:3}),(0,i.jsx)(`input`,{value:o.g,onChange:e=>c(`g`,e.target.value),onBlur:l,maxLength:3}),(0,i.jsx)(`input`,{value:o.b,onChange:e=>c(`b`,e.target.value),onBlur:l,maxLength:3}),r===`rgba`&&(0,i.jsx)(`input`,{value:o.a,onChange:e=>c(`a`,e.target.value),onBlur:l,maxLength:4})]})}function ye({hsv:e,alpha:t,format:n,onChange:r}){return(0,i.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:(0,i.jsxs)(`div`,{className:`univer-relative univer-flex univer-flex-1 univer-gap-2`,children:[(0,i.jsx)(_e,{hsv:e,onChange:r}),(0,i.jsx)(ve,{hsv:e,alpha:t,format:n,onChange:r})]})})}const be=[[`#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 xe({hsv:e,onChange:n}){let r=(0,t.useCallback)(e=>{let[t,r,i]=K(e);n(t,r,i)},[n]),a=q(e[0],e[1],e[2]);return(0,i.jsx)(`div`,{"data-u-comp":`color-picker-presets`,className:`univer-grid univer-content-center univer-gap-2`,children:be.map((e,t)=>(0,i.jsx)(`div`,{className:`univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2`,children:e.map((e,n)=>(0,i.jsx)(`button`,{type:`button`,className:g(`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()===a.toUpperCase(),"!univer-border-gray-200":t===0&&n===0}),style:{backgroundColor:e},onClick:()=>r(e)},n))},t))})}function Se({hsv:e,onChange:n,onChanged:r}){let a=(0,t.useRef)(null),o=(0,t.useRef)(null),[s,c]=(0,t.useState)(!1);(0,t.useEffect)(()=>{let t=a.current;if(!t)return;let n=t.getContext(`2d`);if(!n)return;let r=n.createLinearGradient(0,0,t.width,0);r.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),r.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),n.fillStyle=r,n.fillRect(0,0,t.width,t.height);let i=n.createLinearGradient(0,0,0,t.height);i.addColorStop(0,`rgba(255, 255, 255, 0)`),i.addColorStop(1,`rgba(0, 0, 0, 1)`),n.fillStyle=i,n.fillRect(0,0,t.width,t.height)},[e]);let l=t=>{t.stopPropagation();let r=a.current;if(!r)return;let i=r.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-i.left,i.width)),s=Math.max(0,Math.min(t.clientY-i.top,i.height)),c=o/i.width*100,l=100-s/i.height*100;n(e[0],c,l)},u=(0,t.useCallback)(()=>{c(!1)},[e]);function d(){r==null||r(e[0],e[1],e[2])}(0,t.useEffect)(()=>{var e;return(e=o.current)==null||e.addEventListener(`mouseup`,d),window.addEventListener(`pointerup`,u),window.addEventListener(`mouseup`,u),()=>{var e;(e=o.current)==null||e.removeEventListener(`mouseup`,d),window.removeEventListener(`pointerup`,u),window.removeEventListener(`mouseup`,u)}},[e]);let f=()=>{var t,n,r,i;let a=(t=(n=o.current)==null?void 0:n.clientWidth)==null?0:t,c=(r=(i=o.current)==null?void 0:i.clientHeight)==null?0:r;return{transform:`translate(${e[1]/100*a-8}px, ${(100-e[2])/100*c-8}px)`,transition:s?`none`:`transform 0.1s ease-out`}};return(0,t.useEffect)(()=>{let e=()=>{c(!1)};return window.addEventListener(`pointerup`,e),window.addEventListener(`mouseup`,e),()=>{window.removeEventListener(`pointerup`,e),window.removeEventListener(`mouseup`,e)}},[]),(0,i.jsxs)(`div`,{"data-u-comp":`color-picker-spectrum`,ref:o,className:`univer-relative univer-overflow-hidden`,children:[(0,i.jsx)(`canvas`,{ref:a,className:`univer-size-full univer-cursor-crosshair univer-rounded`,onPointerDown:e=>{c(!0),l(e)},onPointerMove:e=>s&&l(e)}),(0,i.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:f()})]})}function Ce({hsv:e,onChange:n,onChanged:r}){let[a,o]=(0,t.useState)(!1),s=(0,t.useRef)(null),c=(0,t.useRef)(null),l=(0,t.useCallback)(t=>{var r,i;let a=s.current;if(!a)return;let o=(r=(i=c.current)==null?void 0:i.clientWidth)==null?0:r,l=a.getBoundingClientRect(),u=l.width-o;if(u<=0){n(0,e[1],e[2]);return}let d=Math.max(0,Math.min(t-l.left,u));n(Math.round(d/u*360),e[1],e[2])},[e,n]),u=(0,t.useCallback)(e=>{e.stopPropagation(),a&&l(e.clientX)},[a,l]),d=(0,t.useCallback)(()=>{o(!1),r==null||r(e[0],e[1],e[2])},[e,r]);(0,t.useEffect)(()=>(a&&(window.addEventListener(`pointermove`,u),window.addEventListener(`pointerup`,d),window.addEventListener(`mouseup`,d)),()=>{window.removeEventListener(`pointermove`,u),window.removeEventListener(`pointerup`,d),window.removeEventListener(`mouseup`,d)}),[a,u,d]);let f=()=>{var t,n,r,i;let a=Math.min(Math.max(e[0],0),360),o=(t=(n=c.current)==null?void 0:n.clientWidth)==null?0:t,l=(r=(i=s.current)==null?void 0:i.clientWidth)==null?0:r,u=l>0?o/l*100:0;return`${a/360*(100-u)}%`};return(0,i.jsx)(`div`,{"data-u-comp":`color-picker-hue-slider`,className:`univer-relative univer-w-full univer-select-none`,children:(0,i.jsx)(`div`,{ref:s,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 = (0, react.forwardRef)(({ className, variant, size, asChild = false, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "button", {
+		className: clsx$1(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 = react.Children.count(children);
+	const isHorizontal = orientation === "horizontal";
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-grid", {
+			"univer-grid-flow-row": isVertical,
+			"univer-w-fit": isVertical
+		}, className),
+		children: react.Children.map(children, (child, index) => {
+			const isFirst = index === 0;
+			const isLast = index === totalButtons - 1;
+			return (0, react.cloneElement)(child, { className: clsx$1({
+				"!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 = (0, react.createContext)({ mountContainer: isBrowser() ? document.body : null });
+function ConfigProvider(props) {
+	const { children, locale, mountContainer } = props;
+	const value = (0, react.useMemo)(() => {
+		return {
+			locale,
+			mountContainer
+		};
+	}, [locale, mountContainer]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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$1(borderBasicClassName, "univer-border");
+const borderLeftBottomClassName = clsx$1(borderBasicClassName, "univer-border-l univer-border-b univer-border-t-0 univer-border-r-0");
+const borderLeftClassName = clsx$1(borderBasicClassName, "univer-border-l univer-border-b-0 univer-border-t-0 univer-border-r-0");
+const borderLeftRTLClassName = clsx$1(borderBasicClassName, "univer-border-b-0 univer-border-t-0 rtl:univer-border-l-0 rtl:univer-border-r");
+const borderTopClassName = clsx$1(borderBasicClassName, "univer-border-l-0 univer-border-b-0 univer-border-t univer-border-r-0");
+const borderBottomClassName = clsx$1(borderBasicClassName, "univer-border-l-0 univer-border-b univer-border-t-0 univer-border-r-0");
+const borderRightClassName = clsx$1(borderBasicClassName, "univer-border-l-0 univer-border-b-0 univer-border-t-0 univer-border-r");
+const divideYClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid";
+const divideXClassName = "univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid";
+
+//#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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "time-input",
+		className: "univer-relative univer-mx-auto univer-mt-1 univer-w-fit",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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__ */ (0, react_jsx_runtime.jsx)("input", {
+			className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: clsx$1("univer-size-7 univer-rounded-md univer-border-none univer-bg-transparent univer-p-1 univer-transition-all hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", className),
+		type: "button",
+		...restProps
+	});
+}
+function Calendar(props) {
+	const { className, max, min, showTime = false, value, onValueChange } = props;
+	const { locale } = (0, react.useContext)(ConfigContext);
+	const { year, weekDays, months } = locale === null || locale === void 0 ? void 0 : locale.Calendar;
+	const today = /* @__PURE__ */ new Date();
+	const [currentYear, setCurrentYear] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getFullYear());
+	const [currentMonth, setCurrentMonth] = (0, react.useState)((value !== null && value !== void 0 ? value : today).getMonth());
+	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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "calendar",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)("nav", {
+				className: "univer-mb-4 univer-flex univer-items-center univer-justify-between",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
+						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
+						"aria-label": "Previous Month",
+						onClick: prevMonth,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "univer-rotate-180" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "univer-flex univer-gap-0.5 univer-text-sm univer-font-medium",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: currentYear }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: year }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: months[currentMonth] })
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
+						className: "univer-text-lg univer-text-gray-500 dark:!univer-text-gray-200",
+						"aria-label": "Next Month",
+						onClick: nextMonth,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: wd }, wd))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center",
+				children: days.map((day, idx) => day ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
+					className: clsx$1({
+						"!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__ */ (0, react_jsx_runtime.jsx)("div", {}, idx))
+			}),
+			showTime && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 } = (0, react.useContext)(ConfigContext);
+	const activeOptions = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		"data-u-comp": "cascader-list",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-absolute univer-left-2 univer-flex univer-h-full univer-items-center",
+					children: option.value === value[index] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-text-primary-600" })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label })]
+			}) }, option.value))
+		}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, { emptyText: locale === null || locale === void 0 ? void 0 : locale.CascaderList.empty }, index)), value.length <= 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-flex univer-gap-2", { "univer-flex-col": direction === "vertical" }, className),
+		style,
+		children: react.Children.map(children, (child, index) => {
+			if ((0, react.isValidElement)(child)) return (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("label", {
+		"data-u-comp": "checkbox",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "univer-relative univer-block",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				className: "univer-absolute univer-size-0 univer-opacity-0",
+				type: "checkbox",
+				checked,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: clsx$1("univer-select-none", contentClassName),
+			children
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/dialog/DialogPrimitive.tsx
+const Dialog$1 = _radix_ui_react_dialog.Root;
+const DialogPortal = _radix_ui_react_dialog.Portal;
+const DialogOverlay = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, {
+	ref,
+	className: clsx$1("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 = _radix_ui_react_dialog.Overlay.displayName;
+const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+	ref,
+	className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=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__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-4 univer-text-gray-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+DialogContent.displayName = _radix_ui_react_dialog.Content.displayName;
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: clsx$1("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 = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+	ref,
+	className: clsx$1("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 = _radix_ui_react_dialog.Title.displayName;
+const DialogDescription = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
+	ref,
+	className: clsx$1("univer-text-sm univer-text-gray-500", className),
+	...props
+}));
+DialogDescription.displayName = _radix_ui_react_dialog.Description.displayName;
+
+//#endregion
+//#region src/components/dialog/Dialog.tsx
+function useDraggable(options = {}) {
+	const getCenteredPosition = (0, react.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] = (0, react.useState)(defaultPosition);
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const elementRef = (0, react.useRef)(null);
+	const startPosRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const startClientRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const initializedRef = (0, react.useRef)(false);
+	(0, react.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 = (0, react.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 = (0, react.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 = (0, react.useCallback)((e) => {
+		if (!isDragging) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setPosition(calculateBounds(e.clientX, e.clientY));
+	}, [isDragging, calculateBounds]);
+	const endDrag = (0, react.useCallback)(() => {
+		setIsDragging(false);
+		document.body.style.userSelect = "";
+	}, []);
+	(0, react.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 } = (0, react.useContext)(ConfigContext);
+	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
+		defaultPosition,
+		enabled: draggable
+	});
+	const footer = propFooter !== null && propFooter !== void 0 ? propFooter : showOk || showCancel ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-justify-end univer-gap-2",
+		children: [showCancel && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.useCallback)((node) => {
+		if (node && draggable) setElementRef(node);
+	}, [draggable, setElementRef]);
+	const handleOpenChange = (0, react.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__ */ (0, react_jsx_runtime.jsx)(Dialog$1, {
+		open,
+		onOpenChange: handleOpenChange,
+		modal: mask !== false,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
+			ref: handleContentRef,
+			className: clsx$1(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__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, {
+					className: clsx$1({ "!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__ */ (0, react_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { className: "univer-hidden" })]
+				}),
+				children,
+				footer && /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.useState)(false);
+	const sliderRef = (0, react.useRef)(null);
+	const thumbRef = (0, react.useRef)(null);
+	const calculateAlpha = (0, react.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 = (0, react.useCallback)((e) => {
+		if (!isDragging) return;
+		calculateAlpha(e.clientX);
+	}, [isDragging, calculateAlpha]);
+	const handlePointerUp = (0, react.useCallback)(() => {
+		setIsDragging(false);
+		onChanged === null || onChanged === void 0 || onChanged(alpha);
+	}, [alpha]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-relative univer-w-full univer-select-none",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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] = (0, react.useState)("");
+	const hexValue = (0, react.useMemo)(() => hsvToHex(hsv[0], hsv[1], hsv[2]), [hsv]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		className: clsx$1("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__ */ (0, react_jsx_runtime.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] = (0, react.useState)({
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	});
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("input", {
+				value: localValues.r,
+				onChange: (e) => handleChange("r", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				value: localValues.g,
+				onChange: (e) => handleChange("g", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				value: localValues.b,
+				onChange: (e) => handleChange("b", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 3
+			}),
+			format === "rgba" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				value: localValues.a,
+				onChange: (e) => handleChange("a", e.target.value),
+				onBlur: handleBlur,
+				maxLength: 4
+			})
+		]
+	});
+}
+function ColorInput({ hsv, alpha, format, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-relative univer-flex univer-flex-1 univer-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HexInput, {
+				hsv,
+				onChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useCallback)((color) => {
+		const [h, s, v] = hexToHsv(color);
+		onChange(h, s, v);
+	}, [onChange]);
+	const currentColor = hsvToHex(hsv[0], hsv[1], hsv[2]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "color-picker-presets",
+		className: "univer-grid univer-content-center univer-gap-2",
+		children: colorPresets.map((row, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",
+			children: row.map((color, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: clsx$1("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 = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	(0, react.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 = (0, react.useCallback)(() => {
+		setIsDragging(false);
+	}, [hsv]);
+	function handleChange() {
+		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
+	}
+	(0, react.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"
+		};
+	};
+	(0, react.useEffect)(() => {
+		const handlePointerUp = () => {
+			setIsDragging(false);
+		};
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("mouseup", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("mouseup", handlePointerUp);
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "color-picker-spectrum",
+		ref: containerRef,
+		className: "univer-relative univer-overflow-hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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] = (0, react.useState)(false);
+	const sliderRef = (0, react.useRef)(null);
+	const thumbRef = (0, react.useRef)(null);
+	const calculateHue = (0, react.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 = (0, react.useCallback)((e) => {
+		e.stopPropagation();
+		if (!isDragging) return;
+		calculateHue(e.clientX);
+	}, [isDragging, calculateHue]);
+	const handlePointerUp = (0, react.useCallback)(() => {
+		setIsDragging(false);
+		onChanged === null || onChanged === void 0 || onChanged(hsv[0], hsv[1], hsv[2]);
+	}, [hsv, onChanged]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "color-picker-hue-slider",
+		className: "univer-relative univer-w-full univer-select-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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=>{o(!0),l(e.clientX)},children:(0,i.jsx)(`div`,{ref:c,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:f(),transform:`translateY(-50%)`,transition:a?`none`:`all 0.1s ease-out`}})})})}const we=(0,t.memo)(Se),Te=(0,t.memo)(Ce),Ee=(0,t.memo)(ge),De=(0,t.memo)(ye),Oe=(0,t.memo)(xe);function ke({format:e=`hex`,value:n,onChange:r}){if(!w)return null;let{locale:a}=(0,t.useContext)(T),[o,s]=(0,t.useState)([0,100,100]),[c,l]=(0,t.useState)(1),[u,d]=(0,t.useState)(!1),f=(0,t.useCallback)((e,t,n)=>W(e,t,n),[]);(0,t.useEffect)(()=>{try{let t=n||(e===`hex`?`#000000`:`rgba(0, 0, 0, 1)`);if(e===`hex`){let[e,n,r]=K(t);s([e,n,r]),l(1)}else if(e===`rgba`){let[e,n,r,i]=he(t),[a,o,c]=G(e,n,r);s([a,o,c]),l(i)}}catch(e){console.error(`Invalid value:`,e)}},[n,e]);function p(e,t,n){s([e,t,n])}function m(e){l(e)}function h(t,n,i,a=c){if(e===`hex`){let[e,a,o]=f(t,n,i),s=pe(e,a,o);r==null||r(s)}else if(e===`rgba`){let[e,o,s]=f(t,n,i);r==null||r(`rgba(${e}, ${o}, ${s}, ${a})`)}}function g(){let[t,n,i]=o;if(e===`hex`){let e=q(t,n,i);r==null||r(e)}else if(e===`rgba`){let[e,a,o]=f(t,n,i);r==null||r(`rgba(${e}, ${a}, ${o}, ${c})`)}d(!1)}return(0,i.jsxs)(`div`,{"data-u-comp":`color-picker`,className:`univer-cursor-default univer-space-y-2 univer-rounded-lg`,onClick:e=>e.stopPropagation(),children:[(0,i.jsx)(Oe,{hsv:o,onChange:(e,t,n)=>{p(e,t,n),m(1),h(e,t,n,1)}}),(0,i.jsx)(`div`,{className:`univer-flex univer-h-7 univer-items-center`,children:(0,i.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:()=>d(!0),children:a==null?void 0:a.ColorPicker.more})}),(0,i.jsx)(U,{className:`!univer-w-fit !univer-p-2.5`,closable:!1,maskClosable:!1,open:u,onOpenChange:d,children:(0,i.jsxs)(`div`,{className:`univer-grid univer-w-64 univer-gap-2`,children:[(0,i.jsx)(we,{hsv:o,onChange:p}),(0,i.jsxs)(`div`,{className:`univer-flex univer-items-center univer-gap-2`,children:[(0,i.jsx)(`div`,{className:`univer-size-6 univer-flex-shrink-0 univer-rounded-sm`,style:{backgroundColor:e===`hex`?q(...o):me(...o,c)}}),(0,i.jsxs)(`div`,{className:`univer-flex-1 univer-space-y-2`,children:[(0,i.jsx)(Te,{hsv:o,onChange:p}),e===`rgba`&&(0,i.jsx)(Ee,{hsv:o,alpha:c,onChange:m})]})]}),(0,i.jsx)(De,{hsv:o,alpha:c,format:e,onChange:(e,t,n,r)=>{p(e,t,n),r!==void 0&&m(r)}}),(0,i.jsxs)(`footer`,{className:`univer-flex univer-items-center univer-justify-end univer-gap-2`,children:[(0,i.jsx)(S,{onClick:()=>d(!1),children:a==null?void 0:a.ColorPicker.cancel}),(0,i.jsx)(S,{variant:`primary`,onClick:g,children:a==null?void 0:a.ColorPicker.confirm})]})]})})]})}function Ae(e){let{locale:t,cancelText:n,confirmText:r,onClose:a,onConfirm:o,closable:s=!0}=e;return(0,i.jsxs)(`footer`,{className:`univer-flex univer-items-center univer-justify-end univer-gap-2`,children:[s&&(0,i.jsx)(S,{onClick:a,children:n==null?t==null?void 0:t.Confirm.cancel:n}),(0,i.jsx)(S,{variant:`primary`,onClick:o,children:r==null?t==null?void 0:t.Confirm.confirm:r})]})}function je(e){let{children:n,visible:r=!1,title:a,cancelText:o,confirmText:s,width:c,onClose:l,onConfirm:u,closable:d=!0}=e,{locale:f}=(0,t.useContext)(T);return(0,i.jsx)(U,{open:r,title:a,maskClosable:!1,footer:(0,i.jsx)(Ae,{locale:f,cancelText:o,confirmText:s,onClose:l,onConfirm:u,closable:d}),onClose:l,width:c,closable:d,children:n})}function Me({...e}){return(0,i.jsx)(c.Root,{"data-slot":`popover`,...e})}function Ne({...e}){return(0,i.jsx)(c.Trigger,{"data-slot":`popover-trigger`,...e})}function Pe({className:e,align:t=`center`,sideOffset:n=4,...r}){return(0,i.jsx)(c.Portal,{children:(0,i.jsx)(c.Content,{"data-slot":`popover-content`,align:t,sideOffset:n,className:g(`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`,k,D,e),...r})})}function Fe(e){let{children:n,overlay:r,disabled:a,open:o,onOpenChange:s,...c}=e,[l,u]=(0,t.useState)(!1),d=o!==void 0,f=d?o:l;function p(e){a||(d||u(e),s==null||s(e))}return(0,i.jsxs)(Me,{open:f,onOpenChange:p,children:[(0,i.jsx)(Ne,{asChild:!0,children:n}),(0,i.jsx)(Pe,{...c,children:r})]})}function Ie(n){let{value:r,onValueChange:a,className:o}=n,[s,c]=(0,t.useState)(!1);function l(e){a==null||a(e),c(!1)}return(0,i.jsx)(Fe,{align:`start`,overlay:(0,i.jsx)(`div`,{className:`univer-p-2`,children:(0,i.jsx)(V,{value:r,onValueChange:l})}),open:s,onOpenChange:c,children:(0,i.jsxs)(`button`,{className:g(`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`,k,o),type:`button`,children:[L(r,`YYYY-MM-DD`),(0,i.jsx)(e.CalendarIcon,{className:`univer-text-gray-600 dark:!univer-text-gray-400`})]})})}function Le(n){let{value:r=[new Date,new Date],onValueChange:a,className:o}=n,[s,c]=(0,t.useState)(!1);function l(e){let[t,n]=e;t>n&&([t,n]=[n,t]),a==null||a([t,n]),c(!1)}return(0,i.jsx)(Fe,{align:`start`,overlay:(0,i.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 univer-p-2`,children:[(0,i.jsx)(V,{value:r[0],max:r[1],onValueChange:e=>{l([e,r[1]])}}),(0,i.jsx)(V,{value:r[1],min:r[0],onValueChange:e=>{l([r[0],e])}})]}),open:s,onOpenChange:c,children:(0,i.jsxs)(`button`,{className:g(`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`,k,o),type:`button`,children:[(0,i.jsxs)(`span`,{className:`univer-flex univer-gap-1`,children:[(0,i.jsx)(`span`,{children:L(r[0],`YYYY-MM-DD`)}),(0,i.jsx)(`span`,{children:`-`}),(0,i.jsx)(`span`,{children:L(r[1],`YYYY-MM-DD`)})]}),(0,i.jsx)(e.CalendarIcon,{className:`univer-text-gray-600 dark:!univer-text-gray-400`})]})})}function Re(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 ze(e){let{list:n,onListChange:r,idKey:a,itemRender:o,className:s,style:c,draggableHandle:u,rowHeight:d,margin:f=[0,0],onDragStart:p,onDragStop:m,...h}=e,[_,v]=(0,t.useState)(n),y=(0,t.useRef)(n),[b,x]=(0,t.useState)(null),[S,C]=(0,t.useState)(null),[w,T]=(0,t.useState)(null),[E,D]=(0,t.useState)(null),[O,k]=(0,t.useState)(!1),A=(0,t.useRef)(null),j=(0,t.useRef)({x:0,y:0}),M=(0,t.useRef)({width:0,height:0}),N=(0,t.useRef)(null),P=(0,t.useRef)(null),F=(0,t.useRef)(null),I=(0,t.useRef)(-1);(0,t.useEffect)(()=>{b||(v(n),y.current=n)},[b,n]),(0,t.useEffect)(()=>{k(typeof document<`u`)},[]),(0,t.useEffect)(()=>{let e=N.current;e&&(e.replaceChildren(),w&&e.appendChild(w))},[w]),(0,t.useEffect)(()=>{if(!b)return;let e=e=>{let t=F.current;if(!t||A.current!==e.pointerId)return;D({x:e.clientX-j.current.x,y:e.clientY-j.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||(C(i),v(e=>{let n=e.findIndex(e=>R(e)===t),r=e.findIndex(e=>R(e)===i);if(n<0||r<0||n===r)return e;let a=Re(e,n,r);return y.current=a,a}))},t=e=>{if(A.current!==e.pointerId)return;let t=F.current,n=I.current,i=y.current;if(t){let e=i.findIndex(e=>R(e)===t);m==null||m(void 0,{y:n},{y:e}),n>=0&&r([...i])}A.current=null,P.current=null,F.current=null,I.current=-1,C(null),T(null),D(null),x(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)}},[b,m,r]);let L=(0,t.useMemo)(()=>{let[e,t]=f;return{rowGap:`${t}px`,paddingLeft:e?`${e}px`:void 0,paddingRight:e?`${e}px`:void 0,...c}},[f,c]),R=e=>String(e[a]),z=b?_.find(e=>R(e)===b):null;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{...h,className:g(`univer-flex univer-flex-col`,b&&`univer-cursor-grabbing univer-select-none`,s),style:L,children:_.map((e,t)=>{let n=R(e),r=b===n,a=S===n&&!r;return(0,i.jsxs)(`div`,{"data-draggable-list-item-id":n,className:g(`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__ */ (0, react_jsx_runtime.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 = (0, react.memo)(ColorSpectrum);
+const MemoizedHueSlider = (0, react.memo)(HueSlider);
+const MemoizedAlphaSlider = (0, react.memo)(AlphaSlider);
+const MemoizedColorInput = (0, react.memo)(ColorInput);
+const MemoizedColorPresets = (0, react.memo)(ColorPresets);
+function ColorPicker({ format = "hex", value, onChange }) {
+	if (!isBrowser) return null;
+	const { locale } = (0, react.useContext)(ConfigContext);
+	const [hsv, setHsv] = (0, react.useState)([
+		0,
+		100,
+		100
+	]);
+	const [alpha, setAlpha] = (0, react.useState)(1);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const getRgb = (0, react.useCallback)((h, s, v) => {
+		return hsvToRgb(h, s, v);
+	}, []);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "color-picker",
+		className: "univer-cursor-default univer-space-y-2 univer-rounded-lg",
+		onClick: (e) => e.stopPropagation(),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedColorPresets, {
+				hsv,
+				onChange: (h, s, v) => {
+					handleColorChange(h, s, v);
+					handleAlphaChange(1);
+					handleColorChanged(h, s, v, 1);
+				}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-h-7 univer-items-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+				className: "!univer-w-fit !univer-p-2.5",
+				closable: false,
+				maskClosable: false,
+				open: visible,
+				onOpenChange: setVisible,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-grid univer-w-64 univer-gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedColorSpectrum, {
+							hsv,
+							onChange: handleColorChange
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-flex univer-items-center univer-gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-size-6 univer-flex-shrink-0 univer-rounded-sm",
+								style: { backgroundColor: format === "hex" ? hsvToHex(...hsv) : hsvToRgba(...hsv, alpha) }
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "univer-flex-1 univer-space-y-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedHueSlider, {
+									hsv,
+									onChange: handleColorChange
+								}), format === "rgba" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedAlphaSlider, {
+									hsv,
+									alpha,
+									onChange: handleAlphaChange
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedColorInput, {
+							hsv,
+							alpha,
+							format,
+							onChange: (h, s, v, a) => {
+								handleColorChange(h, s, v);
+								if (a !== void 0) handleAlphaChange(a);
+							}
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+							className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								onClick: () => setVisible(false),
+								children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.cancel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("footer", {
+		className: "univer-flex univer-items-center univer-justify-end univer-gap-2",
+		children: [closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+			onClick: onClose,
+			children: cancelText !== null && cancelText !== void 0 ? cancelText : locale === null || locale === void 0 ? void 0 : locale.Confirm.cancel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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 } = (0, react.useContext)(ConfigContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open: visible,
+		title,
+		maskClosable: false,
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Footer, {
+			locale,
+			cancelText,
+			confirmText,
+			onClose,
+			onConfirm,
+			closable
+		}),
+		onClose,
+		width,
+		closable,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/dropdown/PopoverPrimitive.tsx
+function PopoverPrimitive({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: clsx$1("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-white dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
+		...props
+	}) });
+}
+
+//#endregion
+//#region src/components/dropdown/Dropdown.tsx
+function Dropdown(props) {
+	const { children, overlay, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			...restProps,
+			children: overlay
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/date-picker/DatePicker.tsx
+/**
+* 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] = (0, react.useState)(false);
+	function handleValueChange(date) {
+		onValueChange === null || onValueChange === void 0 || onValueChange(date);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dropdown, {
+		align: "start",
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-p-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+				value,
+				onValueChange: handleValueChange
+			})
+		}),
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(Dropdown, {
+		align: "start",
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-grid univer-grid-cols-2 univer-gap-2 univer-p-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+				value: value[0],
+				max: value[1],
+				onValueChange: (date) => {
+					handleValueChange([date, value[1]]);
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Calendar, {
+				value: value[1],
+				min: value[0],
+				onValueChange: (date) => {
+					handleValueChange([value[0], date]);
+				}
+			})]
+		}),
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "univer-flex univer-gap-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatDateWithPattern(value[0], "YYYY-MM-DD") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "-" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatDateWithPattern(value[1], "YYYY-MM-DD") })
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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] = (0, react.useState)(list);
+	const displayListRef = (0, react.useRef)(list);
+	const [draggingId, setDraggingId] = (0, react.useState)(null);
+	const [dragOverId, setDragOverId] = (0, react.useState)(null);
+	const [ghostElement, setGhostElement] = (0, react.useState)(null);
+	const [ghostPosition, setGhostPosition] = (0, react.useState)(null);
+	const [canUsePortal, setCanUsePortal] = (0, react.useState)(false);
+	const pointerIdRef = (0, react.useRef)(null);
+	const dragPointerOffsetRef = (0, react.useRef)({
+		x: 0,
+		y: 0
+	});
+	const dragItemSizeRef = (0, react.useRef)({
+		width: 0,
+		height: 0
+	});
+	const ghostContainerRef = (0, react.useRef)(null);
+	const pressedHandleIdRef = (0, react.useRef)(null);
+	const dragSourceIdRef = (0, react.useRef)(null);
+	const dragStartIndexRef = (0, react.useRef)(-1);
+	(0, react.useEffect)(() => {
+		if (!draggingId) {
+			setDisplayList(list);
+			displayListRef.current = list;
+		}
+	}, [draggingId, list]);
+	(0, react.useEffect)(() => {
+		setCanUsePortal(typeof document !== "undefined");
+	}, []);
+	(0, react.useEffect)(() => {
+		const container = ghostContainerRef.current;
+		if (!container) return;
+		container.replaceChildren();
+		if (ghostElement) container.appendChild(ghostElement);
+	}, [ghostElement]);
+	(0, react.useEffect)(() => {
+		if (!draggingId) return;
+		const handlePointerMove = (evt) => {
+			const sourceId = dragSourceIdRef.current;
+			if (!sourceId || pointerIdRef.current !== evt.pointerId) return;
+			setGhostPosition({
+				x: evt.clientX - dragPointerOffsetRef.current.x,
+				y: evt.clientY - dragPointerOffsetRef.current.y
+			});
+			const element = document.elementFromPoint(evt.clientX, evt.clientY);
+			const itemElement = element === null || element === void 0 ? void 0 : element.closest("[data-draggable-list-item-id]");
+			const targetId = itemElement === null || itemElement === void 0 ? void 0 : itemElement.dataset.draggableListItemId;
+			if (!targetId || targetId === sourceId) return;
+			setDragOverId(targetId);
+			setDisplayList((prev) => {
+				const fromIndex = prev.findIndex((it) => getItemId(it) === sourceId);
+				const toIndex = prev.findIndex((it) => getItemId(it) === targetId);
+				if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return prev;
+				const next = moveItemByIndex(prev, fromIndex, toIndex);
+				displayListRef.current = next;
+				return next;
+			});
+		};
+		const handlePointerUp = (evt) => {
+			if (pointerIdRef.current !== evt.pointerId) return;
+			const sourceId = dragSourceIdRef.current;
+			const startIndex = dragStartIndexRef.current;
+			const currentList = displayListRef.current;
+			if (sourceId) {
+				const finalIndex = currentList.findIndex((it) => getItemId(it) === sourceId);
+				onDragStop === null || onDragStop === void 0 || onDragStop(void 0, { y: startIndex }, { y: finalIndex });
+				if (startIndex >= 0) onListChange([...currentList]);
+			}
+			pointerIdRef.current = null;
+			pressedHandleIdRef.current = null;
+			dragSourceIdRef.current = null;
+			dragStartIndexRef.current = -1;
+			setDragOverId(null);
+			setGhostElement(null);
+			setGhostPosition(null);
+			setDraggingId(null);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [
+		draggingId,
+		onDragStop,
+		onListChange
+	]);
+	const gapStyle = (0, react.useMemo)(() => {
+		const [horizontal, vertical] = margin;
+		return {
+			rowGap: `${vertical}px`,
+			paddingLeft: horizontal ? `${horizontal}px` : void 0,
+			paddingRight: horizontal ? `${horizontal}px` : void 0,
+			...style
+		};
+	}, [margin, style]);
+	const getItemId = (item) => String(item[idKey]);
+	const draggingItem = draggingId ? displayList.find((item) => getItemId(item) === draggingId) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...restProps,
+		className: clsx$1("univer-flex univer-flex-col", draggingId && "univer-cursor-grabbing univer-select-none", className),
+		style: gapStyle,
+		children: displayList.map((item, index) => {
+			const itemId = getItemId(item);
+			const isDraggingItem = draggingId === itemId;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-draggable-list-item-id": itemId,
+				className: clsx$1("univer-relative univer-transition-all univer-duration-150", isDraggingItem && "univer-opacity-0", dragOverId === itemId && !isDraggingItem && `
                                   univer-bg-primary-50/60
                                   dark:!univer-bg-primary-900/20
                                   univer-rounded univer-border univer-border-primary-200
                                   dark:!univer-border-primary-700
-                                `),onPointerDownCapture:e=>{if(A.current!==null||(u?P.current=e.target.closest(u)?n:null:P.current=n,P.current!==n))return;let r=e.currentTarget.getBoundingClientRect();j.current={x:e.clientX-r.left,y:e.clientY-r.top},M.current={width:r.width,height:r.height},D({x:r.left,y:r.top}),T(e.currentTarget.cloneNode(!0)),A.current=e.pointerId,F.current=n,I.current=t,x(n),y.current=_,p==null||p(void 0,{y:t}),e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId)},style:{...d?{minHeight:`${d}px`}:void 0,cursor:b?`grabbing`:void 0},children:[r&&(0,i.jsx)(`div`,{className:`
-                                      univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded
-                                      univer-border univer-border-dashed univer-border-primary-300
-                                    `}),o(e,t)]},n)})}),O&&z&&E&&(0,l.createPortal)((0,i.jsx)(`div`,{className:g(`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:`${E.x}px`,top:`${E.y}px`,width:`${M.current.width}px`,height:`${M.current.height}px`,opacity:.95},children:w?(0,i.jsx)(`div`,{ref:N}):o(z,_.findIndex(e=>R(e)===R(z)))}),document.body)]})}function Be({...e}){return(0,i.jsx)(u.Root,{"data-slot":`dropdown-menu`,...e})}function Ve({...e}){return(0,i.jsx)(u.Portal,{"data-slot":`dropdown-menu-portal`,...e})}function He({...e}){return(0,i.jsx)(u.Trigger,{"data-slot":`dropdown-menu-trigger`,...e})}function Ue({...e}){return(0,i.jsx)(u.Sub,{"data-slot":`dropdown-menu-sub`,...e})}function We({...e}){return(0,i.jsx)(u.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,...e})}function Ge({className:t,inset:n,children:r,...a}){return(0,i.jsxs)(u.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,"data-inset":n,className:g(`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`,t),...a,children:[r,(0,i.jsx)(e.MoreRightIcon,{className:`ml-auto`})]})}function Ke({className:e,...t}){return(0,i.jsx)(u.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:g(`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`,k,D,e),...t})}function qe({className:e,sideOffset:t=4,...n}){return(0,i.jsx)(u.Portal,{children:(0,i.jsx)(u.Content,{"data-slot":`dropdown-menu-content`,sideOffset:t,className:g(`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`,k,D,e),...n})})}function Je({className:e,inset:t,variant:n=`default`,...r}){return(0,i.jsx)(u.Item,{"data-slot":`dropdown-menu-item`,"data-inset":t,"data-variant":n,className:g(`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 Ye({className:t,children:n,hideIndicator:r,checked:a,...o}){return(0,i.jsxs)(u.CheckboxItem,{"data-slot":`dropdown-menu-checkbox-item`,className:g(`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},t),checked:a,...o,children:[!r&&(0,i.jsx)(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center`,children:(0,i.jsx)(u.ItemIndicator,{children:(0,i.jsx)(e.CheckMarkIcon,{className:`univer-block univer-size-4 univer-fill-current univer-text-primary-600`})})}),n]})}function Xe({className:t,children:n,hideIndicator:r,...a}){return(0,i.jsxs)(u.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:g(`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},t),...a,children:[!r&&(0,i.jsx)(`span`,{className:`univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center`,children:(0,i.jsx)(u.ItemIndicator,{children:(0,i.jsx)(e.CheckMarkIcon,{className:`univer-block univer-size-4 univer-fill-current univer-text-primary-600`})})}),n]})}function Ze({className:e,...t}){return(0,i.jsx)(u.Separator,{className:g(`-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600`,e),...t})}function Qe(e){let{children:n,items:r,disabled:a,open:o,onOpenChange:s,...c}=e,[l,u]=(0,t.useState)(!1),d=o!==void 0,f=d?o:l;function p(e){a||(d||u(e),s==null||s(e))}function m(e,t){let{className:n,type:r}=e;if(r===`separator`)return(0,i.jsx)(Ze,{className:n},t);if(r===`radio`)return(0,i.jsx)(We,{className:n,value:e.value,onValueChange:e.onSelect,children:e.options.map((t,n)=>{if(`type`in t){if(t.type===`separator`)return(0,i.jsx)(Ze,{className:t.className},n)}else{if(t.value===void 0)throw Error("[DropdownMenu]: `value` is required");return(0,i.jsx)(Xe,{value:t.value,disabled:t.disabled,hideIndicator:e.hideIndicator,children:t.label},t.value)}return null})},t);if(r===`checkbox`)return(0,i.jsx)(Ye,{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(0,i.jsx)(Je,{className:n,disabled:e.disabled,onSelect:()=>{var t;(t=e.onSelect)==null||t.call(e,e)},children:e.children},t);if(r===`subItem`){var a;return(0,i.jsxs)(Ue,{children:[(0,i.jsx)(Ge,{children:e.children}),(0,i.jsx)(Ve,{children:(0,i.jsx)(Ke,{sideOffset:12,children:(a=e.options)==null?void 0:a.map((e,t)=>m(e,t))})})]},t)}}return(0,i.jsxs)(Be,{modal:!1,open:f,onOpenChange:p,children:[(0,i.jsx)(He,{asChild:!0,children:n}),(0,i.jsx)(qe,{className:`univer-text-sm`,collisionPadding:{top:12,bottom:12},onWheel:e=>e.stopPropagation(),...c,children:r.map((e,t)=>m(e,t))})]})}const $e=(0,t.createContext)(!1),et=n=>{let{label:r,desc:a,children:o,style:s,className:c,error:l,contentStyle:u,collapsable:d=!1,defaultCollapsed:f=!1}=n,[p,m]=(0,t.useState)(f);return(0,i.jsx)($e.Provider,{value:!0,children:(0,i.jsxs)(`div`,{"data-u-comp":`form-layout`,className:g(`univer-mb-3 univer-flex univer-flex-col`,c),style:s,children:[r&&(0,i.jsxs)(`div`,{className:g(`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":d}),onClick:()=>m(!p),children:[r,d&&(0,i.jsx)(e.MoreUpIcon,{className:g(`univer-ml-1 univer-transition-transform`,{"univer-rotate-180":p})})]}),p&&d?null:(0,i.jsxs)(i.Fragment,{children:[a&&(0,i.jsx)(`div`,{className:`univer-mt-1 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:a}),o?(0,i.jsxs)(`div`,{className:g(`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":l,"[&_[data-u-comp=select]]:univer-border-red-500":l}),style:u,children:[o,l?(0,i.jsx)(`div`,{className:`univer-mt-1 univer-text-xs univer-text-red-500`,children:l}):null]}):null]})]})})},tt=e=>(0,i.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:e.children});function nt(n){let{className:r,value:a=0,total:o=0,loop:s,text:c,onChange:l}=n,u=(0,t.useMemo)(()=>c==null?`${a}/${o}`:c,[a,o,c]),d=o>0,f=()=>{a===1?s&&(l==null||l(o)):l==null||l(a-1)},p=()=>{a===o?s&&(l==null||l(1)):l==null||l(a+1)};return(0,i.jsx)(`div`,{"data-u-comp":`pager`,className:g(`univer-flex univer-flex-shrink-0 univer-items-center univer-text-sm univer-text-gray-700 dark:!univer-text-gray-400`,r),children:d?(0,i.jsxs)(i.Fragment,{children:[(0,i.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:f,children:(0,i.jsx)(e.MoreLeftIcon,{})}),(0,i.jsx)(`span`,{className:`univer-mx-1`,children:u}),(0,i.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:p,children:(0,i.jsx)(e.MoreRightIcon,{})})]}):(0,i.jsx)(`div`,{className:`univer-mx-1`,children:u})})}const rt=`
+                                `),
+				onPointerDownCapture: (e) => {
+					if (pointerIdRef.current !== null) return;
+					if (!draggableHandle) pressedHandleIdRef.current = itemId;
+					else pressedHandleIdRef.current = !!e.target.closest(draggableHandle) ? itemId : null;
+					if (pressedHandleIdRef.current !== itemId) return;
+					const rect = e.currentTarget.getBoundingClientRect();
+					dragPointerOffsetRef.current = {
+						x: e.clientX - rect.left,
+						y: e.clientY - rect.top
+					};
+					dragItemSizeRef.current = {
+						width: rect.width,
+						height: rect.height
+					};
+					setGhostPosition({
+						x: rect.left,
+						y: rect.top
+					});
+					setGhostElement(e.currentTarget.cloneNode(true));
+					pointerIdRef.current = e.pointerId;
+					dragSourceIdRef.current = itemId;
+					dragStartIndexRef.current = index;
+					setDraggingId(itemId);
+					displayListRef.current = displayList;
+					onDragStart === null || onDragStart === void 0 || onDragStart(void 0, { y: index });
+					e.preventDefault();
+					e.currentTarget.setPointerCapture(e.pointerId);
+				},
+				style: {
+					...rowHeight ? { minHeight: `${rowHeight}px` } : void 0,
+					cursor: draggingId ? "grabbing" : void 0
+				},
+				children: [isDraggingItem && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "\n                                      univer-bg-primary-50/50 univer-absolute univer-inset-0 univer-rounded\n                                      univer-border univer-border-dashed univer-border-primary-300\n                                    " }), itemRender(item, index)]
+			}, itemId);
+		})
+	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
+		style: {
+			zIndex: 2147483647,
+			left: `${ghostPosition.x}px`,
+			top: `${ghostPosition.y}px`,
+			width: `${dragItemSizeRef.current.width}px`,
+			height: `${dragItemSizeRef.current.height}px`,
+			opacity: .95
+		},
+		children: ghostElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: ghostContainerRef }) : itemRender(draggingItem, displayList.findIndex((item) => getItemId(item) === getItemId(draggingItem)))
+	}), document.body)] });
+}
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenuPrimitive.tsx
+function DropdownMenuPrimitive({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: clsx$1("univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none data-[state=open]:univer-bg-gray-100 focus:univer-bg-gray-100 dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600 [&>svg]:univer-size-4 [&>svg]:univer-shrink-0", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, hideIndicator, checked, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		checked,
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, hideIndicator, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: clsx$1("univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50 focus:univer-bg-gray-100 dark:focus:!univer-bg-gray-600", {
+			"univer-pl-8": !hideIndicator,
+			"univer-pl-2": hideIndicator
+		}, className),
+		...props,
+		children: [!hideIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "univer-absolute univer-left-2 univer-flex univer-size-3.5 univer-items-center univer-justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-block univer-size-4 univer-fill-current univer-text-primary-600" }) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
+		className: clsx$1("-univer-mx-1 univer-my-1 univer-h-px univer-bg-gray-200 dark:!univer-bg-gray-600", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenu.tsx
+function DropdownMenu(props) {
+	const { children, items, disabled, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	function renderMenuItem(item, index) {
+		const { className, type } = item;
+		if (type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className }, index);
+		else if (type === "radio") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioGroup, {
+			className,
+			value: item.value,
+			onValueChange: item.onSelect,
+			children: item.options.map((option, index) => {
+				if ("type" in option) {
+					if (option.type === "separator") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSeparator, { className: option.className }, index);
+				} else {
+					if (option.value === void 0) throw new Error("[DropdownMenu]: `value` is required");
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRadioItem, {
+						value: option.value,
+						disabled: option.disabled,
+						hideIndicator: item.hideIndicator,
+						children: option.label
+					}, option.value);
+				}
+				return null;
+			})
+		}, index);
+		else if (type === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuCheckboxItem, {
+			className,
+			disabled: item.disabled,
+			checked: item.checked,
+			onSelect: () => {
+				var _item$onSelect;
+				(_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item, item.value);
+			},
+			children: item.label
+		}, index);
+		else if (type === "item") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuItem, {
+			className,
+			disabled: item.disabled,
+			onSelect: () => {
+				var _item$onSelect2;
+				(_item$onSelect2 = item.onSelect) === null || _item$onSelect2 === void 0 || _item$onSelect2.call(item, item);
+			},
+			children: item.children
+		}, index);
+		else if (type === "subItem") {
+			var _item$options;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuSub, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubTrigger, { children: item.children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuSubContent, {
+				sideOffset: 12,
+				children: (_item$options = item.options) === null || _item$options === void 0 ? void 0 : _item$options.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
+			}) })] }, index);
+		}
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DropdownMenuPrimitive, {
+		modal: false,
+		open,
+		onOpenChange: handleChangeOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuContent, {
+			className: "univer-text-sm",
+			collisionPadding: {
+				top: 12,
+				bottom: 12
+			},
+			onWheel: (e) => e.stopPropagation(),
+			...restProps,
+			children: items.map((item, index) => renderMenuItem(item, index))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/form-layout/FormLayout.tsx
+const FormLayoutContext = (0, react.createContext)(false);
+const FormLayout = (props) => {
+	const { label, desc, children, style, className, error, contentStyle, collapsable = false, defaultCollapsed = false } = props;
+	const [collapsed, setCollapsed] = (0, react.useState)(defaultCollapsed);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormLayoutContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "form-layout",
+			className: clsx$1("univer-mb-3 univer-flex univer-flex-col", className),
+			style,
+			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreUpIcon, { className: clsx$1("univer-ml-1 univer-transition-transform", { "univer-rotate-180": collapsed }) })]
+			}), collapsed && collapsable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-1 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+				children: desc
+			}), children ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "pager",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-mx-1",
+				children: text
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
+			})
+		] }) : /* @__PURE__ */ (0, react_jsx_runtime.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 it(n){let{className:r,images:a,open:o,onOpenChange:s}=n,[c,u]=(0,t.useState)(!1),[d,f]=(0,t.useState)(0),[p,m]=(0,t.useState)(1),h=(0,t.useRef)(null),_=(0,t.useMemo)(()=>a[d],[d,a]);if((0,t.useEffect)(()=>{o&&h.current&&h.current.focus()},[o]),(0,t.useEffect)(()=>{if(!o)return;let e=e=>{e.key===`Escape`&&(s==null||s(!1))};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[o,s]),(0,t.useEffect)(()=>{if(o)u(!0);else{let e=setTimeout(()=>{u(!1)},150);return()=>clearTimeout(e)}},[o]),(0,t.useEffect)(()=>{if(!o)return;let e=e=>{e.preventDefault();let t=-e.deltaY*.001;m(e=>Math.min(Math.max(.5,e+t),2))};return window.addEventListener(`wheel`,e,{passive:!1}),()=>{window.removeEventListener(`wheel`,e)}},[o]),!o&&!c)return null;function v(e){if(e===`reset`){m(1);return}let t=p+e;t<.5||t>2||m(t)}return(0,l.createPortal)((0,i.jsxs)(`div`,{"data-u-comp":`gallery`,role:`dialog`,"aria-modal":`true`,"aria-label":`Image gallery`,tabIndex:-1,ref:h,className:g(`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":o,"univer-animate-out univer-fade-out":!o},r),children:[(0,i.jsx)(`div`,{className:`univer-absolute univer-inset-0 univer-size-full univer-bg-gray-900 univer-opacity-80`,"aria-hidden":`true`,onClick:()=>s==null?void 0:s(!1)}),(0,i.jsx)(`div`,{className:`univer-relative`,children:_&&(0,i.jsx)(`img`,{className:`univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out`,style:{transform:`scale(${p})`},src:_,alt:`Image ${d+1} of ${a.length}`,draggable:!1})}),(0,i.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:[(0,i.jsx)(nt,{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:d+1,total:a.length,onChange:e=>f(e-1)}),(0,i.jsx)(`button`,{type:`button`,"aria-label":`Zoom in`,className:rt,onClick:()=>v(.25),children:(0,i.jsx)(e.ZoomInIcon,{"aria-hidden":`true`})}),(0,i.jsx)(`button`,{type:`button`,"aria-label":`Zoom out`,className:rt,onClick:()=>v(-.25),children:(0,i.jsx)(e.ZoomOutIcon,{"aria-hidden":`true`})}),(0,i.jsx)(`button`,{type:`button`,"aria-label":`Reset zoom`,className:rt,onClick:()=>v(`reset`),children:(0,i.jsx)(e.OneToOneIcon,{"aria-hidden":`true`})})]})]}),document.body)}const at=(0,a.cva)(`
+`;
+function Gallery(props) {
+	const { className, images, open, onOpenChange } = props;
+	const [isVisible, setIsVisible] = (0, react.useState)(false);
+	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
+	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
+	const dialogRef = (0, react.useRef)(null);
+	const activeImage = (0, react.useMemo)(() => images[activeImageIndex], [activeImageIndex, images]);
+	(0, react.useEffect)(() => {
+		if (open && dialogRef.current) dialogRef.current.focus();
+	}, [open]);
+	(0, react.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]);
+	(0, react.useEffect)(() => {
+		if (open) setIsVisible(true);
+		else {
+			const timer = setTimeout(() => {
+				setIsVisible(false);
+			}, 150);
+			return () => clearTimeout(timer);
+		}
+	}, [open]);
+	(0, react.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 (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "gallery",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Image gallery",
+		tabIndex: -1,
+		ref: dialogRef,
+		className: clsx$1("univer-absolute univer-inset-0 univer-z-[1080] univer-flex univer-size-full univer-select-none univer-items-center univer-justify-center", {
+			"univer-animate-in univer-fade-in": open,
+			"univer-animate-out univer-fade-out": !open
+		}, className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-relative",
+				children: activeImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "univer-max-h-[40vh] univer-max-w-[60vw] univer-transition-transform univer-duration-300 univer-ease-out",
+					style: { transform: `scale(${zoomLevel})` },
+					src: activeImage,
+					alt: `Image ${activeImageIndex + 1} of ${images.length}`,
+					draggable: false
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Zoom in",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom(.25),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomInIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Zoom out",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom(-.25),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomOutIcon, { "aria-hidden": "true" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Reset zoom",
+						className: buttonClassName,
+						onClick: () => handleToggleZoom("reset"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.OneToOneIcon, { "aria-hidden": "true" })
+					})
+				]
+			})
+		]
+	}), document.body);
+}
+
+//#endregion
+//#region src/components/input/Input.tsx
+const inputVariants = (0, class_variance_authority.cva)(`
       univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200
       placeholder:univer-text-gray-400
       focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50
       dark:!univer-bg-gray-700 dark:!univer-text-white
       dark:focus:!univer-ring-primary-900
-    `,{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`}}),ot=(0,t.forwardRef)(({autoFocus:n=!1,className:r,style:a,type:o=`text`,placeholder:s,value:c,size:l=`small`,allowClear:u=!1,disabled:d=!1,onClick:f,onKeyDown:p,onChange:m,onFocus:h,onBlur:_,slot:v,inputClass:y,inputStyle:b,...x},S)=>{let C=e=>{e.stopPropagation(),m==null||m(``)},w=e=>{m==null||m(e.target.value)},T=(0,t.useMemo)(()=>u&&c&&!d||v,[u,d,v,c]),[E,D]=(0,t.useState)(0),O=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=null;return v&&O.current&&(e=new MutationObserver(()=>{O.current&&D(O.current.offsetWidth+8)}),e.observe(O.current,{childList:!0,subtree:!0}),D(O.current.offsetWidth+8)),()=>e==null?void 0:e.disconnect()},[O.current]),(0,t.useEffect)(()=>{u&&!(v&&O.current)&&D(26)},[]),(0,i.jsxs)(`div`,{"data-u-comp":`input`,className:g(`univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md`,d&&`univer-cursor-not-allowed`,r),style:a,children:[(0,i.jsx)(`input`,{ref:S,type:o,className:g(at({size:l}),k,d&&`
+    `, {
+	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 = (0, react.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 = (0, react.useMemo)(() => {
+		return allowClear && value && !disabled || slot;
+	}, [
+		allowClear,
+		disabled,
+		slot,
+		value
+	]);
+	const [paddingRight, setPaddingRight] = (0, react.useState)(0);
+	const slotRef = (0, react.useRef)(null);
+	(0, react.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]);
+	(0, react.useEffect)(() => {
+		if (allowClear && !(slot && slotRef.current)) setPaddingRight(26);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "input",
+		className: clsx$1("univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md", disabled && "univer-cursor-not-allowed", className),
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref,
+			type,
+			className: clsx$1(inputVariants({ size }), borderClassName, disabled && `
                           univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400
                           dark:!univer-text-gray-500
-                        `,u&&!v&&`univer-pr-8`,y),placeholder:s,value:c,disabled:d,autoFocus:n,onClick:f,onKeyDown:p,onChange:w,onFocus:h,onBlur:_,style:{...b,paddingRight:E},...x}),T&&(0,i.jsxs)(`div`,{className:`univer-absolute univer-right-2 univer-flex univer-items-center univer-gap-1 univer-rounded-full`,ref:O,children:[v,u&&c&&!d&&(0,i.jsx)(`button`,{type:`button`,onClick:C,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:(0,i.jsx)(e.CloseIcon,{className:`univer-size-3`})})]})]})}),st=(0,t.forwardRef)(({value:e,defaultValue:n,size:r=`small`,min:a=-(2**53-1),max:o=2**53-1,step:s=1,precision:c,formatter:l,parser:u,controls:d=!0,className:f,inputClassName:p,controlsClassName:m,disabled:h,onChange:_,onKeyDown:v,onPressEnter:y,onFocus:b,onBlur:x,allowEmpty:S=!1},C)=>{let[w,T]=(0,t.useState)(e===void 0?n===void 0?null:n:e),E=(0,t.useRef)(w),[D,O]=(0,t.useState)(F(w)),k=(0,t.useRef)(null),A=(0,t.useRef)(null),N=(0,t.useRef)(null),P=e=>{C&&(typeof C==`function`?C(e):C.current=e),k.current=e};(0,t.useEffect)(()=>{e!==void 0&&e!==w&&(T(e),E.current=e,O(F(e)))},[e]),(0,t.useEffect)(()=>{w!==null&&(E.current=w)},[w]),(0,t.useEffect)(()=>()=>{A.current&&clearTimeout(A.current),N.current&&clearInterval(N.current)},[]);function F(e){if(e==null)return``;let t=e;return c!==void 0&&(t=Number(e).toFixed(c)),l?l(t):String(t)}function I(e){if(!e)return null;let t=e;u&&(t=u(e));try{let e=t.replace(/[^\d.-]/g,``).split(`.`),n=e[0],r=e.length>1?e.slice(1).join(``):``,i=n+(r?`.${r}`:``),s=Number(i);if(Number.isNaN(s))return null;let l;if(c!==void 0){let e=10**c,t=Math.round(s*e)/e;l=t.toString().includes(`e`)?Number.parseFloat(t.toFixed(c)):t}else l=s.toString().includes(`e`)?Number.parseFloat(s.toFixed(16).replace(/\.?0+$/,``)):s;return o!==void 0&&l>o&&(l=o),a!==void 0&&l<a&&(l=a),l}catch{return null}}function L(e){if(O(e),S&&e===``){T(null),_==null||_(null);return}let t=I(e);T(t),_==null||_(t)}function R(e){if(w===null){if(D===``&&S)_&&_(null);else{let e=E.current;T(e),O(F(e)),_&&_(e)}x==null||x(e);return}let t=w;o!==void 0&&t>o&&(t=o),a!==void 0&&t<a&&(t=a),t===w?O(F(w)):(T(t),O(F(t)),_==null||_(t)),x==null||x(e)}function z(e){if(h)return;let t=e?s:-s,n;n=w===null?E.current===null?a>0?a:0:E.current:w;let r=n+t;o!==void 0&&r>o&&(r=o),a!==void 0&&r<a&&(r=a),r!==n&&(T(r),E.current=r,O(F(r)),_==null||_(r))}function ee(e){h||(v==null||v(e),e.key===`ArrowUp`?(e.preventDefault(),z(!0)):e.key===`ArrowDown`?(e.preventDefault(),z(!1)):e.key===`Enter`&&(y==null||y(e)))}function B(e){var t;h||(z(e),(t=k.current)==null||t.focus())}let V=h||o!==void 0&&w!==null&&w>=o,H=h||a!==void 0&&w!==null&&w<=a;return(0,i.jsx)(`div`,{className:g(`univer-inline-block`,f),children:(0,i.jsxs)(`div`,{className:`univer-relative univer-w-full`,children:[(0,i.jsx)(ot,{ref:P,className:g(`univer-box-border`,p),size:r,value:D,disabled:h,onChange:L,onFocus:b,onBlur:R,onKeyDown:ee}),d&&(0,i.jsxs)(`div`,{className:g(`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`,j,M,m),children:[(0,i.jsx)(`span`,{className:g(`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:`+`}),(0,i.jsx)(`span`,{className:g(`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 ct({items:e,value:n,defaultValue:r,onChange:a,className:o=``}){let[s,c]=(0,t.useState)(n===void 0?r||e[0].value:n),[l,u]=(0,t.useState)({}),d=(0,t.useRef)(new Map),f=(0,t.useRef)(null);(0,t.useEffect)(()=>{n!==void 0&&n!==s&&c(n)},[n]);let p=(e,t)=>{let n=d.current.get(e),r=t?d.current.get(t):null;if(n&&f.current){let e=f.current.getBoundingClientRect(),t=n.getBoundingClientRect(),i=t.left-e.left-4;if(r){let n=r.getBoundingClientRect().left-e.left-4;u({"--slide-from":`${n}px`,"--slide-to":`${i}px`,width:`${t.width}px`,transform:`translateX(${i}px)`})}else u({width:`${t.width}px`,transform:`translateX(${i}px)`})}};(0,t.useEffect)(()=>{p(s)},[s]);let m=e=>{let t=s;c(e),a==null||a(e),p(e,t)};return(0,i.jsxs)(`div`,{"data-u-comp":`segmented`,ref:f,className:g(`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`,o),children:[(0,i.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:l}),e.map(e=>(0,i.jsx)(`button`,{ref:t=>{t&&d.current.set(e.value,t)},className:g(`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":s===e.value,"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white":s!==e.value}),type:`button`,onClick:()=>m(e.value),children:e.label},String(e.value)))]})}function lt(e){let{children:n,className:r,asChild:a=!0,title:o,placement:s=`bottom`,showIfEllipsis:c=!1,visible:u,onVisibleChange:d}=e,[f,p]=(0,t.useState)(!1),m=u!==void 0,h=m?u:f,_=(0,t.useRef)(null),v=(0,t.useRef)(null),y=(0,t.useRef)(null),[b,x]=(0,t.useState)(null),[S,C]=(0,t.useState)(s);function w(e){return Math.abs(e.scrollWidth-e.clientWidth)>1}function T(){m?d==null||d(!0):p(!0)}function E(){m?d==null||d(!1):p(!1)}(0,t.useLayoutEffect)(()=>{if(!h)return;let e=_.current,t=v.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=window.innerWidth,a=window.innerHeight,o=[s,`bottom`,`top`,`right`,`left`],c=s,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 o){let{t,l:n}=d(e),o=n>=0&&n+r.width<=i,s=t>=0&&t+r.height<=a;if(o&&s){c=e,l=t,u=n;break}}if(!l&&!u){let e=d(s);l=Math.min(Math.max(0,e.t),a-r.height),u=Math.min(Math.max(0,e.l),i-r.width)}C(c),x({top:Math.round(l+window.scrollY),left:Math.round(u+window.scrollX)})},[h,s]),(0,t.useEffect)(()=>{if(!h)return;let e=()=>{if(!_.current||!v.current)return;let e=_.current.getBoundingClientRect(),t=v.current.getBoundingClientRect(),n=0,r=0;S===`bottom`?(n=e.bottom+8,r=e.left+e.width/2-t.width/2):S===`top`?(n=e.top-t.height-8,r=e.left+e.width/2-t.width/2):S===`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),x({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)}},[h,S]);let D={ref:e=>_.current=e,onMouseEnter:()=>{c&&_.current&&!w(_.current)||T()},onMouseLeave:()=>E(),onFocus:()=>T(),onBlur:()=>E()},O=a?(0,i.jsx)(`span`,{...D,className:`univer-inline-block univer-max-w-full univer-truncate`,children:n}):(0,i.jsx)(`button`,{type:`button`,...D,children:n}),k=null;if(typeof document<`u`&&h&&o&&document.body){var A,j;k=(0,l.createPortal)((0,i.jsxs)(`div`,{ref:v,role:`tooltip`,className:g(`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`,r),style:{top:(A=b==null?void 0:b.top)==null?-9999:A,left:(j=b==null?void 0:b.left)==null?-9999:j},onMouseEnter:()=>T(),onMouseLeave:()=>E(),children:[(0,i.jsx)(`div`,{className:`univer-break-words`,children:o}),(0,i.jsx)(`div`,{ref:y,className:`univer-absolute univer-size-2.5 univer-rotate-45 univer-rounded-sm univer-bg-gray-700 dark:!univer-bg-gray-100`,style:{...S===`bottom`&&{top:-5,left:`50%`,transform:`translateX(-50%) rotate(45deg)`},...S===`top`&&{bottom:-5,left:`50%`,transform:`translateX(-50%) rotate(45deg)`},...S===`left`&&{right:-5,top:`50%`,transform:`translateY(-50%) rotate(45deg)`},...S===`right`&&{left:-5,top:`50%`,transform:`translateY(-50%) rotate(45deg)`}}})]}),document.body)}return(0,i.jsxs)(i.Fragment,{children:[O,k]})}const ut={type:`linear`,stops:[{color:`#ffffff`,offset:0},{color:`#000000`,offset:100}],angle:90};function dt(n){var r,a;let{className:o,value:s=ut,onChange:c}=n,{locale:l}=(0,t.useContext)(T),[u,d]=(0,t.useState)(0),f=(0,t.useRef)(null),p=(0,t.useMemo)(()=>[...s.stops].sort((e,t)=>e.offset-t.offset),[s.stops]),m=e=>{c==null||c({...s,type:e})},h=e=>{c==null||c({...s,angle:e==null?0:e})},_=e=>{let t=[...s.stops];t[u]={...t[u],color:e},c==null||c({...s,stops:t})},v=e=>{if(e===null)return;let t=[...s.stops];t[u]={...t[u],offset:e},c==null||c({...s,stops:t})},y=e=>{if(!f.current)return;let t=f.current.getBoundingClientRect(),n=Math.round((e.clientX-t.left)/t.width*100),r={color:([...p].reverse().find(e=>e.offset<=n)||p[0]).color,offset:n},i=[...s.stops,r];c==null||c({...s,stops:i}),d(i.length-1)},b=()=>{if(s.stops.length<=2)return;let e=s.stops.filter((e,t)=>t!==u);c==null||c({...s,stops:e}),d(0)},x=(0,t.useMemo)(()=>`linear-gradient(to right, ${p.map(e=>`${e.color} ${e.offset}%`).join(`, `)})`,[p]),C=(0,t.useMemo)(()=>{let e=p.map(e=>`${e.color} ${e.offset}%`).join(`, `);switch(s.type){case`linear`:return`linear-gradient(${s.angle}deg, ${e})`;case`radial`:return`radial-gradient(circle, ${e})`;case`angular`:return`conic-gradient(from ${s.angle}deg, ${e})`;case`diamond`:return`radial-gradient(circle, ${e})`;default:return`linear-gradient(${s.angle}deg, ${e})`}},[s,p]);return(0,i.jsxs)(`div`,{className:g(`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`,o),children:[(0,i.jsx)(ct,{items:[{label:l==null?void 0:l.GradientColorPicker.linear,value:`linear`},{label:l==null?void 0:l.GradientColorPicker.radial,value:`radial`},{label:l==null?void 0:l.GradientColorPicker.angular,value:`angular`},{label:l==null?void 0:l.GradientColorPicker.diamond,value:`diamond`}],value:s.type,onChange:e=>m(e)}),(0,i.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:C}}),(0,i.jsxs)(`div`,{className:`univer-relative univer-mt-4 univer-h-6`,children:[(0,i.jsx)(`div`,{ref:f,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:x},onClick:y}),s.stops.map((e,t)=>(0,i.jsx)(`div`,{className:g(`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`,u===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(),d(t)},onPointerDown:n=>{let r=n.clientX,i=e.offset,a=e=>{if(!f.current)return;let n=f.current.getBoundingClientRect(),a=(e.clientX-r)/n.width*100,o=Math.max(0,Math.min(100,Math.round(i+a))),l=[...s.stops];l[t]={...l[t],offset:o},c==null||c({...s,stops:l})},o=()=>{window.removeEventListener(`pointermove`,a),window.removeEventListener(`pointerup`,o)};window.addEventListener(`pointermove`,a),window.addEventListener(`pointerup`,o)}},t))]}),(0,i.jsxs)(`div`,{className:`univer-flex univer-items-end univer-gap-2`,children:[(0,i.jsxs)(`div`,{className:`univer-flex-1`,children:[(0,i.jsx)(`div`,{className:`univer-mb-1 univer-text-xs univer-text-gray-500`,children:l==null?void 0:l.GradientColorPicker.offset}),(0,i.jsx)(st,{value:(r=s.stops[u])==null?void 0:r.offset,min:0,max:100,onChange:v})]}),(s.type===`linear`||s.type===`angular`)&&(0,i.jsxs)(`div`,{className:`univer-flex-1`,children:[(0,i.jsx)(`div`,{className:`univer-mb-1 univer-text-xs univer-text-gray-500`,children:l==null?void 0:l.GradientColorPicker.angle}),(0,i.jsx)(st,{value:s.angle,min:0,max:360,onChange:h})]}),(0,i.jsx)(`div`,{className:`univer-flex univer-gap-1`,children:(0,i.jsx)(lt,{title:l==null?void 0:l.GradientColorPicker.delete,children:(0,i.jsx)(S,{variant:`danger`,onClick:b,disabled:s.stops.length<=2,children:(0,i.jsx)(e.DeleteIcon,{})})})})]}),(0,i.jsx)(`div`,{className:`univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700`,children:(0,i.jsx)(ke,{value:(a=s.stops[u])==null?void 0:a.color,onChange:_})})]})}const ft=d.Root,pt=d.Portal,mt=d.Trigger,ht=(0,t.forwardRef)(({className:e,align:t=`center`,sideOffset:n=4,...r},a)=>(0,i.jsx)(d.Content,{ref:a,align:t,sideOffset:n,className:g(`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`,k,e),...r}));ht.displayName=d.Content.displayName;function gt(e){let{children:n,overlay:r,disabled:a,openDelay:o=200,open:s,onOpenChange:c,...l}=e,[u,d]=(0,t.useState)(!1),f=s!==void 0,p=f?s:u;function m(e){a||(f||d(e),c==null||c(e))}return(0,i.jsxs)(ft,{open:p,onOpenChange:m,openDelay:o,children:[(0,i.jsx)(mt,{asChild:!0,children:n}),(0,i.jsx)(pt,{children:(0,i.jsx)(ht,{...l,children:r})})]})}function _t(e){let{keyboard:t,className:n}=e,r=t.split(`+`);return(0,i.jsx)(`span`,{className:g(`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`,k,n),children:r.map((e,t)=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`kbd`,{className:`univer-inline-block univer-h-full`,children:e}),t<r.length-1&&(0,i.jsx)(`span`,{className:`univer-inline-block univer-h-full univer-px-1`,children:`+`})]},t))})}let J=function(e){return e.Success=`success`,e.Info=`info`,e.Warning=`warning`,e.Error=`error`,e.Loading=`loading`,e}({});const vt=`univer-message-toaster`,yt=3e3,Y=new Set,bt=(0,i.jsx)(e.LoadingMultiIcon,{className:`univer-animate-spin univer-text-violet-500`});let xt=0;const St={[J.Success]:(0,i.jsx)(e.SuccessIcon,{className:`univer-text-green-500`}),[J.Info]:(0,i.jsx)(e.InfoIcon,{className:`univer-text-sky-500 dark:!univer-text-sky-400`}),[J.Warning]:(0,i.jsx)(e.WarningIcon,{className:`univer-text-amber-500`}),[J.Error]:(0,i.jsx)(e.ErrorIcon,{className:`univer-text-red-500`}),[J.Loading]:bt},X={[J.Success]:`[&_[data-icon]]:univer-text-green-500`,[J.Info]:`[&_[data-icon]]:univer-text-sky-500`,[J.Warning]:`[&_[data-icon]]:univer-text-amber-500`,[J.Error]:`[&_[data-icon]]:univer-text-red-500`,[J.Loading]:`[&_[data-icon]]:univer-text-violet-500`},Ct=e=>{switch(e){case J.Success:return f.toast.success;case J.Warning:return f.toast.warning;case J.Error:return f.toast.error;case J.Loading:return f.toast.loading;case J.Info:default:return f.toast.info}},wt=()=>{let e=`univer-message-${xt}`;return xt+=1,e},Tt=({className:e,...t})=>(0,i.jsx)(f.Toaster,{id:vt,position:`top-center`,visibleToasts:4,closeButton:!1,expand:!1,icons:{loading:bt},offset:{top:16},className:g(`[&_[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:yt,classNames:{toast:`
+                        `, allowClear && !slot && "univer-pr-8", inputClass),
+			placeholder,
+			value,
+			disabled,
+			autoFocus,
+			onClick,
+			onKeyDown,
+			onChange: handleChange,
+			onFocus,
+			onBlur,
+			style: {
+				...inputStyle,
+				paddingRight
+			},
+			...props
+		}), hasSlotContent && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-3" })
+			})]
+		})]
+	});
+});
+
+//#endregion
+//#region src/components/input-number/InputNumber.tsx
+const InputNumber = (0, react.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] = (0, react.useState)(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : null);
+	const lastValidValueRef = (0, react.useRef)(internalValue);
+	const [inputValue, setInputValue] = (0, react.useState)(formatValue(internalValue));
+	const inputRef = (0, react.useRef)(null);
+	const longPressTimerRef = (0, react.useRef)(null);
+	const longPressIntervalRef = (0, react.useRef)(null);
+	const mergedRef = (node) => {
+		if (ref) if (typeof ref === "function") ref(node);
+		else ref.current = node;
+		inputRef.current = node;
+	};
+	(0, react.useEffect)(() => {
+		if (value !== void 0 && value !== internalValue) {
+			setInternalValue(value);
+			lastValidValueRef.current = value;
+			setInputValue(formatValue(value));
+		}
+	}, [value]);
+	(0, react.useEffect)(() => {
+		if (internalValue !== null) lastValidValueRef.current = internalValue;
+	}, [internalValue]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-inline-block", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-relative univer-w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+				ref: mergedRef,
+				className: clsx$1("univer-box-border", inputClassName),
+				size,
+				value: inputValue,
+				disabled,
+				onChange: handleInputChange,
+				onFocus,
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown
+			}), controls && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: clsx$1("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] = (0, react.useState)(value !== void 0 ? value : defaultValue || items[0].value);
+	const [slideStyle, setSlideStyle] = (0, react.useState)({});
+	const itemRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const containerRef = (0, react.useRef)(null);
+	(0, react.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)`
+			});
+		}
+	};
+	(0, react.useEffect)(() => {
+		updateSliderPosition(selectedItem);
+	}, [selectedItem]);
+	const handleClick = (itemValue) => {
+		const oldValue = selectedItem;
+		setSelectedItem(itemValue);
+		onChange === null || onChange === void 0 || onChange(itemValue);
+		updateSliderPosition(itemValue, oldValue);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "segmented",
+		ref: containerRef,
+		className: clsx$1("univer-relative univer-box-border univer-flex univer-gap-4 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-white univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
+			style: slideStyle
+		}), items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref: (el) => {
+				if (el) itemRefs.current.set(item.value, el);
+			},
+			className: clsx$1("univer-relative univer-box-border univer-flex-1 univer-cursor-pointer univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
+				"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] = (0, react.useState)(false);
+	const isControlled = controlledVisible !== void 0;
+	const visible = isControlled ? controlledVisible : uncontrolledVisible;
+	const triggerRef = (0, react.useRef)(null);
+	const tooltipRef = (0, react.useRef)(null);
+	const arrowRef = (0, react.useRef)(null);
+	const [coords, setCoords] = (0, react.useState)(null);
+	const [currentPlacement, setCurrentPlacement] = (0, react.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);
+	}
+	(0, react.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]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		...commonProps,
+		className: "univer-inline-block univer-max-w-full univer-truncate",
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		...commonProps,
+		children
+	});
+	let tooltipNode = null;
+	if (typeof document !== "undefined" && visible && title && document.body) {
+		var _coords$top, _coords$left;
+		tooltipNode = (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: tooltipRef,
+			role: "tooltip",
+			className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-break-words",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.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 } = (0, react.useContext)(ConfigContext);
+	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
+	const barRef = (0, react.useRef)(null);
+	const stops = (0, react.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 = (0, react.useMemo)(() => {
+		return `linear-gradient(to right, ${stops.map((s) => `${s.color} ${s.offset}%`).join(", ")})`;
+	}, [stops]);
+	const mainPreview = (0, react.useMemo)(() => {
+		const stopsStr = stops.map((s) => `${s.color} ${s.offset}%`).join(", ");
+		switch (value.type) {
+			case "linear": return `linear-gradient(${value.angle}deg, ${stopsStr})`;
+			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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: clsx$1("univer-flex univer-w-64 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-relative univer-mt-4 univer-h-6",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
+					style: {
+						left: `${stop.offset}%`,
+						backgroundColor: stop.color
+					},
+					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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-items-end univer-gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.offset
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+							value: (_value$stops$selected = value.stops[selectedIndex]) === null || _value$stops$selected === void 0 ? void 0 : _value$stops$selected.offset,
+							min: 0,
+							max: 100,
+							onChange: handleStopOffsetChange
+						})]
+					}),
+					(value.type === "linear" || value.type === "angular") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-mb-1 univer-text-xs univer-text-gray-500",
+							children: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.angle
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputNumber, {
+							value: value.angle,
+							min: 0,
+							max: 360,
+							onChange: handleAngleChange
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-flex univer-gap-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+							title: locale === null || locale === void 0 ? void 0 : locale.GradientColorPicker.delete,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+								variant: "danger",
+								onClick: handleRemoveStop,
+								disabled: value.stops.length <= 2,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-border-t univer-border-gray-100 univer-pt-4 dark:!univer-border-gray-700",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
+					value: (_value$stops$selected2 = value.stops[selectedIndex]) === null || _value$stops$selected2 === void 0 ? void 0 : _value$stops$selected2.color,
+					onChange: handleStopColorChange
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/hover-card/HoverCardPrimitive.tsx
+const HoverCardPrimitive = _radix_ui_react_hover_card.Root;
+const HoverCardPortal = _radix_ui_react_hover_card.Portal;
+const HoverCardTrigger = _radix_ui_react_hover_card.Trigger;
+const HoverCardContent = (0, react.forwardRef)(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_hover_card.Content, {
+	ref,
+	align,
+	sideOffset,
+	className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-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 = _radix_ui_react_hover_card.Content.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] = (0, react.useState)(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	function handleChangeOpen(newOpen) {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledOpen(newOpen);
+		controlledOnOpenChange === null || controlledOnOpenChange === void 0 || controlledOnOpenChange(newOpen);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HoverCardPrimitive, {
+		open,
+		onOpenChange: handleChangeOpen,
+		openDelay,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverCardTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverCardPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+			className: "univer-inline-block univer-h-full",
+			children: text
+		}), index < keys.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LoadingMultiIcon, { className: "univer-animate-spin univer-text-violet-500" });
+let messageCount = 0;
+const iconMap = {
+	[MessageType.Success]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SuccessIcon, { className: "univer-text-green-500" }),
+	[MessageType.Info]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-text-sky-500 dark:!univer-text-sky-400" }),
+	[MessageType.Warning]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.WarningIcon, { className: "univer-text-amber-500" }),
+	[MessageType.Error]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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 sonner.toast.success;
+		case MessageType.Warning: return sonner.toast.warning;
+		case MessageType.Error: return sonner.toast.error;
+		case MessageType.Loading: return sonner.toast.loading;
+		case MessageType.Info:
+		default: return sonner.toast.info;
+	}
+};
+const createMessageId = () => {
+	const id = `univer-message-${messageCount}`;
+	messageCount += 1;
+	return id;
+};
+const Messager = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
+	id: MESSAGE_TOASTER_ID,
+	position: "top-center",
+	visibleToasts: 4,
+	closeButton: false,
+	expand: false,
+	icons: { loading: loadingIcon },
+	offset: { top: 16 },
+	className: clsx$1("[&_[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:X[J.Success],info:X[J.Info],warning:X[J.Warning],error:X[J.Error],loading:X[J.Loading]}},...t}),Et=({content:e,duration:t,id:n,onClose:r,type:i=J.Info})=>{let a=n==null?wt():n,o=Ct(i),s=!1,c=()=>{s||(s=!0,Y.delete(a),r==null||r())};return o(e,{id:a,toasterId:vt,duration:t==null?yt:t,icon:i===J.Loading?void 0:St[i],onDismiss:c,onAutoClose:c}),Y.add(a),a},Dt=e=>{if(e!==void 0){f.toast.dismiss(e),Y.delete(e);return}Y.forEach(e=>{f.toast.dismiss(e)}),Y.clear()},Ot=[-9999,-9999];function kt(e){let{children:n,visible:r=!1,offset:a=[0,0],overflowVisible:o=!1,placementY:s=`below`}=e,c=(0,t.useRef)(null),[u,d]=(0,t.useState)(Ot),{mountContainer:f}=(0,t.useContext)(T),m=()=>{let e=c.current;if(!e)return null;let[t,n]=a,{clientWidth:r,clientHeight:i}=e,{innerWidth:o,innerHeight:l}=window,u=Math.max(0,o-r-2),d=Math.max(0,l-i-2),f=Math.min(Math.max(t,0),u),p=s===`above`?n-i:n;return[f,Math.min(Math.max(p,0),d)]};(0,t.useLayoutEffect)(()=>{if(!r){d(Ot);return}let e=m();e&&d(e)},[a,s,r]),(0,t.useEffect)(()=>{if(!r)return;let e=()=>{let e=m();e&&d(e)};return window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}},[a,s,r]);function h(e){e.preventDefault()}return(0,l.createPortal)((0,i.jsx)(p.CSSTransition,{in:r,nodeRef:c,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:(0,i.jsx)(`section`,{ref:c,className:`univer-popup`,style:{left:u[0]+2,top:u[1]+2,overflow:o?`visible`:void 0},onContextMenu:h,children:n})}),f)}function At(e){let{children:n,className:r,style:a,value:o,disabled:s=!1,direction:c=`horizontal`,onChange:l}=e,u=e=>{l(e)};return(0,i.jsx)(`div`,{className:g(`univer-flex univer-gap-2`,{"univer-flex-col":c===`vertical`},r),style:a,children:t.Children.map(n,(e,n)=>(0,t.isValidElement)(e)?(0,t.cloneElement)(e,{key:n,children:e.props.children,value:e.props.value,checked:o===e.props.value,disabled:s==null?e.props.disabled:s,onChange:u}):e)})}function jt(e){let{children:n,checked:r,value:a,disabled:o=!1,onChange:s}=e,c=(0,t.useRef)(null);function l(e){if(e.stopPropagation(),!(!s||o))if(a!==void 0)s&&s(a);else{let e=c.current.checked;s&&s(e)}}return(0,i.jsxs)(`label`,{"data-u-comp":`radio`,className:g(`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":!o,"univer-text-gray-400":o}),children:[(0,i.jsxs)(`span`,{className:`univer-relative univer-block`,children:[(0,i.jsx)(`input`,{ref:c,className:`univer-absolute univer-size-0 univer-opacity-0`,type:`radio`,checked:r,disabled:o,onChange:l}),(0,i.jsx)(`span`,{className:g(`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":o,"univer-border-primary-600 univer-bg-primary-600 dark:!univer-bg-primary-600":r,"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600":!r}),children:r&&(0,i.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`})})]}),(0,i.jsx)(`span`,{children:n})]})}function Mt(t){let{value:n,options:r=[],hideCheckMark:a=!1,onChange:o,multiple:s,className:c,optionClassName:l}=t,u=Array.isArray(n)?n:[n];function d(e){let t=u.indexOf(e);o(s?t>-1?u.filter(t=>t===e):[...u,e]:t>-1?void 0:e)}return(0,i.jsx)(`ul`,{className:g(`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`,k,D,c),children:r.map((t,n)=>{let r=u.indexOf(t.value)>-1;return(0,i.jsx)(`li`,{children:(0,i.jsxs)(`a`,{className:g(`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`,l,{"univer-bg-gray-200 dark:!univer-bg-gray-500":r}),onClick:()=>d(t.value),children:[!a&&r&&(0,i.jsx)(e.CheckMarkIcon,{className:`univer-absolute univer-left-0 univer-top-1/2 -univer-translate-y-1/2 univer-pl-2 univer-text-primary-600`}),(0,i.jsx)(`span`,{style:{color:t.color},children:t.label})]})},n)})})}const Nt=g(`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`,k);function Pt(n){let{className:r,value:a,disabled:o=!1,options:s=[],borderless:c=!1,onChange:l}=n,[u,d]=(0,t.useState)(!1);function f(e){d(e)}let p=(0,t.useMemo)(()=>{let e=[];for(let t of s)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:a,hideIndicator:!0,options:e,onSelect:e=>{l(e)}}]},[s]),m=(0,t.useMemo)(()=>{let e=null;for(let t of s)if(t.options){for(let n of t.options)if(n.value===a){e=n.label;break}}else if(t.value===a){e=t.label;break}return e||a},[s,a]);return(0,i.jsx)(Qe,{className:`max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36`,align:`start`,open:u,items:p,disabled:o,onOpenChange:f,children:(0,i.jsxs)(`div`,{"data-u-comp":`select`,className:g(Nt,{"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900":u&&!c,"univer-border-transparent univer-bg-transparent hover:univer-border-transparent":c,"univer-cursor-not-allowed":o,"hover:univer-border-primary-600":!o&&!c,"univer-cursor-pointer":!o&&!u},r),children:[(0,i.jsx)(`div`,{className:`univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-white`,children:m}),(0,i.jsx)(e.MoreDownIcon,{className:`univer-flex-shrink-0 dark:!univer-text-white`})]})})}function Ft(n){let{className:r,value:a=[],disabled:o=!1,options:s=[],borderless:c=!1,onChange:l}=n,[u,d]=(0,t.useState)(!1);function f(e){d(e)}let p=(0,t.useMemo)(()=>s.map(e=>({type:`checkbox`,value:e.value,label:e.label,disabled:e.disabled,checked:a.includes(e.value),onSelect:e=>{l(a.includes(e)?a.filter(t=>t!==e):[...a,e])}})),[s]);function m(e){l(a.filter(t=>t!==e))}let h=(0,t.useMemo)(()=>s.filter(e=>a.includes(e.value)).map((e,t)=>(0,i.jsx)(b,{className:`univer-max-w-32`,closable:!0,onClose:()=>m(e.value),children:e.label},t)),[s,a]);return(0,i.jsx)(Qe,{className:`univer-w-[--radix-popper-anchor-width] univer-min-w-36`,align:`start`,open:u,items:p,disabled:o,onOpenChange:f,children:(0,i.jsxs)(`div`,{"data-u-comp":`multiple-select`,className:g(Nt,{"univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900":u&&!c,"univer-border-transparent univer-bg-transparent hover:univer-border-transparent":c,"univer-cursor-not-allowed":o,"hover:univer-border-primary-600":!o&&!c,"univer-cursor-pointer":!o&&!u},r),children:[(0,i.jsx)(`div`,{className:`univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2`,children:h}),(0,i.jsx)(e.MoreDownIcon,{className:`univer-flex-shrink-0 dark:!univer-text-white`})]})})}function It({className:e,orientation:t=`horizontal`,decorative:n=!0,...r}){return(0,i.jsx)(m.Root,{"data-u-comp":`separator`,"data-slot":`separator-root`,decorative:n,orientation:t,className:g(`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 Lt=e=>{let{defaultChecked:n=!1,onChange:r}=e,[a,o]=(0,t.useState)(n);return(0,t.useEffect)(()=>{o(n)},[n]),(0,i.jsx)(`div`,{className:`univer-h-4`,children:(0,i.jsxs)(`label`,{className:`univer-relative univer-inline-block univer-h-4 univer-w-7`,children:[(0,i.jsx)(`input`,{className:`univer-size-0 univer-opacity-0`,type:`checkbox`,checked:a,onChange:()=>{o(!a),r==null||r(!a)}}),(0,i.jsx)(`span`,{className:g(`univer-absolute univer-inset-0 univer-cursor-pointer univer-rounded-2xl univer-transition-colors univer-duration-200`,{"univer-bg-primary-600":a,"univer-bg-gray-200 dark:!univer-bg-gray-600":!a}),children:(0,i.jsx)(`span`,{className:g(`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":a})})})]})})},Rt=(0,t.forwardRef)((e,n)=>{let r=(0,t.useRef)(null),a=(0,t.useRef)({width:0,height:0}),{className:o,onResize:s,onValueChange:c,...l}=e;(0,t.useImperativeHandle)(n,()=>r.current,[]),(0,t.useLayoutEffect)(()=>{let e=r.current;if(e&&s){let t=new ResizeObserver(e=>{let{width:t,height:n}=e[0].target.getBoundingClientRect();t===0||n===0||(a.current.width!==t||a.current.height!==n)&&(a.current={width:t,height:n},s(t,n))});return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}},[s]);function u(e){let t=e.target.value;c==null||c(t)}return(0,i.jsx)(`textarea`,{ref:r,"data-u-comp":`textarea`,"data-slot":`textarea`,className:g(`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`,k,D,o),onChange:u,...l})});function zt({visibleToasts:e,...t}){return(0,i.jsx)(f.Toaster,{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 Bt(e){let{data:n,itemKey:r,children:a,height:o,itemHeight:s,overscan:c=2,className:l,style:u}=e,[d,f]=(0,t.useState)(0);if(!o||!s||s<=0)return(0,i.jsx)(`div`,{className:l,style:u,children:n.map((e,t)=>{let n=typeof r==`function`?r(e):e[r];return(0,i.jsx)(`div`,{children:a(e,t)},n)})});let p=Math.max(0,Math.floor(d/s)-c),m=Math.ceil(o/s)+c*2,h=Math.min(n.length,p+m),g=p*s,_=n.length*s,v=n.slice(p,h);return(0,i.jsx)(`div`,{className:l,style:{...u,height:o,overflowY:`auto`},onScroll:e=>f(e.currentTarget.scrollTop),children:(0,i.jsx)(`div`,{style:{height:_,position:`relative`},children:(0,i.jsx)(`div`,{style:{transform:`translateY(${g}px)`},children:v.map((e,t)=>{let n=typeof r==`function`?r(e):e[r];return(0,i.jsx)(`div`,{children:a(e,p+t)},n)})})})})}const Vt=(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},Ht=(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=Vt(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)}}},Z=(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,Ut=(e,t)=>{let n=t.slice(0),r=n.pop();return Z(e,n).find(e=>e.key===r)},Wt=(e,t,n)=>{let r=new Set(t),i=n[n.length-1],a=Z(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=Z(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]},Gt=(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},Kt=(e,t)=>{let n=[],r=Ht(e);return t.forEach(t=>{let i=Ut(e,r.findNodePathFromTreeWithCache(t));if(i){var a;(a=i.children)!=null&&a.length||n.push(i)}}),n};let qt=function(e){return e[e.ONLY_LEAF_NODE=0]=`ONLY_LEAF_NODE`,e[e.ALL=1]=`ALL`,e}({});function Jt(e,t,n=1){let r=[];return e.forEach(e=>{r.push({...e,level:n}),e.children&&t.has(e.key)&&r.push(...Jt(e.children,t,n+1))}),r}function Yt(n){let{data:r=[],defaultCache:a,style:o,defaultExpandAll:s=!1,selectionMode:c=qt.ALL,valueGroup:l=[],onChange:u,onExpend:d,height:f=200,itemHeight:p=32,attachRender:m}=n,[h,_]=(0,t.useState)({}),v=(0,t.useMemo)(()=>new Set,[]),y=(0,t.useMemo)(()=>Ht(r,a),[r,a]),b=(0,t.useMemo)(()=>{let e=new Set;return l.forEach(t=>{y.findNodePathFromTreeWithCache(t).forEach(t=>e.add(t))}),e},[l,y]);(0,t.useEffect)(()=>{function e(t){var n;v.add(t.key),(n=t.children)==null||n.forEach(e)}s&&r.forEach(e),_({})},[s,r]);let x=(0,t.useMemo)(()=>Jt(r,v),[r,h,v]);function S(e){var t;(t=e.children)!=null&&t.length&&(v.has(e.key)?v.delete(e.key):v.add(e.key),_({})),!(c===qt.ONLY_LEAF_NODE&&e.children)&&(d==null||d(e.key))}function C(t){let{title:r,key:a,level:o=0}=t,s=n.treeNodeClassName,c=v.has(a),l=b.has(a),d=Gt(b,t);return(0,i.jsx)(`div`,{className:g(`univer-relative univer-text-[13px]`,s),style:{paddingLeft:`${o*20}px`},children:(0,i.jsxs)(`div`,{className:`univer-relative univer-my-1 univer-flex univer-w-full univer-items-center`,children:[t.children&&t.children.length>0&&(0,i.jsx)(`span`,{className:g(`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]":!c}),onClick:e=>{e.stopPropagation(),S(t)},children:(0,i.jsx)(e.DropdownIcon,{})}),(0,i.jsx)(re,{checked:l&&!d,indeterminate:l&&d,onChange:()=>{u==null||u(t)}}),(0,i.jsx)(`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(),S(t)},children:(0,i.jsx)(lt,{className:`univer-block`,showIfEllipsis:!0,placement:`top`,title:r,children:(0,i.jsx)(`span`,{className:`univer-block`,children:r})})}),m&&m(t)]})},a)}return(0,i.jsx)(`section`,{className:`
-              univer-relative univer-select-none univer-text-gray-900
-              dark:!univer-text-white
-            `,children:(0,i.jsx)(`div`,{className:`univer-m-0 univer-h-full univer-list-none univer-p-0`,style:o,children:(0,i.jsx)(Bt,{data:x,itemKey:e=>e.key,height:f,itemHeight:p,children:e=>C(e)})})})}const Q=new WeakMap;function Xt(e,t){let n=Q.get(t);n||(n=(0,h.createRoot)(t),Q.set(t,n)),n.render(e)}function Zt(e){let t=Q.get(e);t&&(t.unmount(),Q.delete(e))}const Qt=new Set;let $;function $t(e){return $||($=new ResizeObserver((...e)=>{Qt.forEach(t=>t(...e))})),{observe(t,n){Qt.add(e),$.observe(t,n)},unobserve(t){Qt.delete(e),$.unobserve(t)}}}exports.Accordion=_,exports.Avatar=y,exports.Badge=b,exports.Button=S,exports.ButtonGroup=C,exports.Calendar=V,exports.CascaderList=te,exports.Checkbox=re,exports.CheckboxGroup=ne,exports.ColorPicker=ke,exports.ConfigContext=T,exports.ConfigProvider=E,exports.Confirm=je,exports.DatePicker=Ie,exports.DateRangePicker=Le,exports.Dialog=U,exports.DraggableList=ze,exports.Dropdown=Fe,exports.DropdownMenu=Qe,exports.FormDualColumnLayout=tt,exports.FormLayout=et,exports.Gallery=it,exports.GradientColorPicker=dt,exports.HoverCard=gt,exports.Input=ot,exports.InputNumber=st,exports.KBD=_t,exports.MessageType=J,exports.Messager=Tt,exports.MultipleSelect=Ft,exports.Pager=nt,exports.Popup=kt,exports.Radio=jt,exports.RadioGroup=At,exports.Segmented=ct,exports.Select=Pt,exports.SelectList=Mt,exports.Separator=It,exports.Switch=Lt,exports.Textarea=Rt,exports.TimeInput=R,exports.Toaster=zt,exports.Tooltip=lt,exports.Tree=Yt,exports.TreeSelectionMode=qt,exports.borderBottomClassName=P,exports.borderClassName=k,exports.borderLeftBottomClassName=A,exports.borderLeftClassName=j,exports.borderRightClassName=F,exports.borderTopClassName=N,exports.clsx=g,exports.divideXClassName=`univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-x univer-divide-y-0 univer-divide-solid`,exports.divideYClassName=`univer-divide-gray-200 dark:!univer-divide-gray-600 univer-divide-y univer-divide-x-0 univer-divide-solid`,exports.filterLeafNode=Kt,exports.findNodePathFromTree=Vt,exports.findSubTreeFromPath=Z,exports.isBrowser=w,exports.mergeTreeSelected=Wt,exports.message=Et,exports.removeMessage=Dt,exports.render=Xt,exports.resizeObserverCtor=$t,exports.scrollbarClassName=D,exports.toast=f.toast,exports.unmount=Zt;
+                `,
+			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") {
+		sonner.toast.dismiss(id);
+		activeMessageIds.delete(id);
+		return;
+	}
+	activeMessageIds.forEach((messageId) => {
+		sonner.toast.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 = (0, react.useRef)(null);
+	const [realOffset, setRealOffset] = (0, react.useState)(HIDDEN_POPUP_OFFSET);
+	const { mountContainer } = (0, react.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)];
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (!visible) {
+			setRealOffset(HIDDEN_POPUP_OFFSET);
+			return;
+		}
+		const nextOffset = calculateOffset();
+		if (nextOffset) setRealOffset(nextOffset);
+	}, [
+		offset,
+		placementY,
+		visible
+	]);
+	(0, react.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 (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: clsx$1("univer-flex univer-gap-2", { "univer-flex-col": direction === "vertical" }, className),
+		style,
+		children: react.Children.map(children, (child, index) => {
+			if ((0, react.isValidElement)(child)) return (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("label", {
+		"data-u-comp": "radio",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "univer-relative univer-block",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				className: "univer-absolute univer-size-0 univer-opacity-0",
+				type: "radio",
+				checked,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-left-0 univer-top-1/2 -univer-translate-y-1/2 univer-pl-2 univer-text-primary-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: { color: option.color },
+					children: option.label
+				})]
+			}) }, index);
+		})
+	});
+}
+
+//#endregion
+//#region src/components/select/Select.tsx
+const selectClassName = clsx$1("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] = (0, react.useState)(false);
+	function handleOpenChange(open) {
+		setOpen(open);
+	}
+	const items = (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, {
+		className: "max-h univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		align: "start",
+		open,
+		items,
+		disabled,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "select",
+			className: clsx$1(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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-white",
+				children: displayValue
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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] = (0, react.useState)(false);
+	function handleOpenChange(open) {
+		setOpen(open);
+	}
+	const items = (0, react.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 = (0, react.useMemo)(() => {
+		return options.filter((option) => value.includes(option.value)).map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			className: "univer-max-w-32",
+			closable: true,
+			onClose: () => handleClose(option.value),
+			children: option.label
+		}, index));
+	}, [options, value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenu, {
+		className: "univer-w-[--radix-popper-anchor-width] univer-min-w-36",
+		align: "start",
+		open,
+		items,
+		disabled,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "multiple-select",
+			className: clsx$1(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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2",
+				children: displayValue
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_separator.Root, {
+		"data-u-comp": "separator",
+		"data-slot": "separator-root",
+		decorative,
+		orientation,
+		className: clsx$1("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] = (0, react.useState)(defaultChecked);
+	const handleChange = () => {
+		setChecked(!checked);
+		onChange === null || onChange === void 0 || onChange(!checked);
+	};
+	(0, react.useEffect)(() => {
+		setChecked(defaultChecked);
+	}, [defaultChecked]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-h-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "univer-relative univer-inline-block univer-h-4 univer-w-7",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				className: "univer-size-0 univer-opacity-0",
+				type: "checkbox",
+				checked,
+				onChange: handleChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)("span", { className: clsx$1("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 = (0, react.forwardRef)((props, ref) => {
+	const textareaRef = (0, react.useRef)(null);
+	const lastSizeRef = (0, react.useRef)({
+		width: 0,
+		height: 0
+	});
+	const { className, onResize, onValueChange, ...restProps } = props;
+	(0, react.useImperativeHandle)(ref, () => textareaRef.current, []);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		ref: textareaRef,
+		"data-u-comp": "textarea",
+		"data-slot": "textarea",
+		className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
+		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] = (0, react.useState)(0);
+	if (!height || !itemHeight || itemHeight <= 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style,
+		children: data.map((item, index) => {
+			const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, index) }, key);
+		})
+	});
+	const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+	const visibleCount = Math.ceil(height / itemHeight) + overscan * 2;
+	const end = Math.min(data.length, start + visibleCount);
+	const offsetY = start * itemHeight;
+	const totalHeight = data.length * itemHeight;
+	const visibleItems = data.slice(start, end);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			...style,
+			height,
+			overflowY: "auto"
+		},
+		onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				height: totalHeight,
+				position: "relative"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { transform: `translateY(${offsetY}px)` },
+				children: visibleItems.map((item, index) => {
+					const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: children(item, start + index) }, key);
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/tree/util.ts
+const findNodePathFromTree = (tree, key) => {
+	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] = (0, react.useState)({});
+	const expandKeySet = (0, react.useMemo)(() => {
+		return /* @__PURE__ */ new Set();
+	}, []);
+	const findNode = (0, react.useMemo)(() => createCacheWithFindNodePathFromTree(data, defaultCache), [data, defaultCache]);
+	const selectedNodeKeySet = (0, react.useMemo)(() => {
+		const set = /* @__PURE__ */ new Set();
+		valueGroup.forEach((key) => {
+			findNode.findNodePathFromTreeWithCache(key).forEach((k) => set.add(k));
+		});
+		return set;
+	}, [valueGroup, findNode]);
+	(0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: clsx$1("univer-relative univer-text-[13px]", treeNodeClassName),
+			style: { paddingLeft: `${level * 20}px` },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-relative univer-my-1 univer-flex univer-w-full univer-items-center",
+				children: [
+					treeItem.children && treeItem.children.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: clsx$1("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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+						checked: selected && !intermediated,
+						indeterminate: selected && intermediated,
+						onChange: () => {
+							onChange === null || onChange === void 0 || onChange(treeItem);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "\n                          univer-mx-1 univer-flex univer-h-full univer-shrink univer-items-center univer-overflow-hidden\n                          univer-text-ellipsis univer-whitespace-nowrap\n                        ",
+						onClick: (e) => {
+							e.stopPropagation();
+							handleExpendItem(treeItem);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+							className: "univer-block",
+							showIfEllipsis: true,
+							placement: "top",
+							title,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "univer-block",
+								children: title
+							})
+						})
+					}),
+					attachRender && attachRender(treeItem)
+				]
+			})
+		}, key);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "\n              univer-relative univer-select-none univer-text-gray-900\n              dark:!univer-text-white\n            ",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
+			style,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react_dom_client.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
+exports.Accordion = Accordion;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.Calendar = Calendar;
+exports.CascaderList = CascaderList;
+exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
+exports.ColorPicker = ColorPicker;
+exports.ConfigContext = ConfigContext;
+exports.ConfigProvider = ConfigProvider;
+exports.Confirm = Confirm;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
+exports.Dialog = Dialog;
+exports.DraggableList = DraggableList;
+exports.Dropdown = Dropdown;
+exports.DropdownMenu = DropdownMenu;
+exports.FormDualColumnLayout = FormDualColumnLayout;
+exports.FormLayout = FormLayout;
+exports.Gallery = Gallery;
+exports.GradientColorPicker = GradientColorPicker;
+exports.HoverCard = HoverCard;
+exports.Input = Input;
+exports.InputNumber = InputNumber;
+exports.KBD = KBD;
+exports.MessageType = MessageType;
+exports.Messager = Messager;
+exports.MultipleSelect = MultipleSelect;
+exports.Pager = Pager;
+exports.Popup = Popup;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.Segmented = Segmented;
+exports.Select = Select;
+exports.SelectList = SelectList;
+exports.Separator = Separator;
+exports.Switch = Switch;
+exports.Textarea = Textarea;
+exports.TimeInput = TimeInput;
+exports.Toaster = Toaster;
+exports.Tooltip = Tooltip;
+exports.Tree = Tree;
+exports.TreeSelectionMode = TreeSelectionMode;
+exports.borderBottomClassName = borderBottomClassName;
+exports.borderClassName = borderClassName;
+exports.borderLeftBottomClassName = borderLeftBottomClassName;
+exports.borderLeftClassName = borderLeftClassName;
+exports.borderRightClassName = borderRightClassName;
+exports.borderTopClassName = borderTopClassName;
+exports.clsx = clsx$1;
+exports.divideXClassName = divideXClassName;
+exports.divideYClassName = divideYClassName;
+exports.filterLeafNode = filterLeafNode;
+exports.findNodePathFromTree = findNodePathFromTree;
+exports.findSubTreeFromPath = findSubTreeFromPath;
+exports.isBrowser = isBrowser;
+exports.mergeTreeSelected = mergeTreeSelected;
+exports.message = message;
+exports.removeMessage = removeMessage;
+exports.render = render;
+exports.resizeObserverCtor = resizeObserverCtor;
+exports.scrollbarClassName = scrollbarClassName;
+exports.toast = sonner.toast;
+exports.unmount = unmount;