@univerjs/design 0.1.0-alpha.1

package/lib/cjs/index.js

@@ -0,0 +1,2170 @@
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+var __copyProps = function(to, from, except, desc) {
+    if (from && typeof from === "object" || typeof from === "function") {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var key = _step.value;
+                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+                    get: function() {
+                        return from[key];
+                    },
+                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+                });
+            };
+            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return to;
+};
+var __toESM = function(mod, isNodeMode, target) {
+    return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+        value: mod,
+        enumerable: true
+    }) : target, mod);
+};
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
+};
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+    Avatar: function() {
+        return Avatar;
+    },
+    Button: function() {
+        return Button;
+    },
+    CascaderList: function() {
+        return CascaderList;
+    },
+    Checkbox: function() {
+        return Checkbox;
+    },
+    CheckboxGroup: function() {
+        return CheckboxGroup;
+    },
+    ColorPicker: function() {
+        return ColorPicker;
+    },
+    ConfigContext: function() {
+        return ConfigContext;
+    },
+    ConfigProvider: function() {
+        return ConfigProvider;
+    },
+    Confirm: function() {
+        return Confirm;
+    },
+    Container: function() {
+        return Container;
+    },
+    Dialog: function() {
+        return Dialog;
+    },
+    Dropdown: function() {
+        return Dropdown;
+    },
+    Input: function() {
+        return Input;
+    },
+    InputNumber: function() {
+        return InputNumber;
+    },
+    Menu: function() {
+        return Menu;
+    },
+    MenuItem: function() {
+        return MenuItem;
+    },
+    MenuItemGroup: function() {
+        return MenuItemGroup;
+    },
+    Message: function() {
+        return Message;
+    },
+    MessageType: function() {
+        return MessageType;
+    },
+    Popup: function() {
+        return Popup;
+    },
+    Radio: function() {
+        return Radio;
+    },
+    RadioGroup: function() {
+        return RadioGroup;
+    },
+    Scrollbar: function() {
+        return Scrollbar;
+    },
+    Select: function() {
+        return Select;
+    },
+    SelectList: function() {
+        return SelectList;
+    },
+    Slider: function() {
+        return Slider;
+    },
+    SubMenu: function() {
+        return SubMenu;
+    },
+    Tooltip: function() {
+        return Tooltip;
+    },
+    defaultTheme: function() {
+        return default_module_default;
+    },
+    greenTheme: function() {
+        return green_module_default;
+    },
+    themeInstance: function() {
+        return themeInstance;
+    }
+});
+module.exports = __toCommonJS(src_exports);
+// src/components/avatar/Avatar.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/avatar/index.module.less
+var index_module_default = {
+    "avatar": "univer-avatar",
+    "avatarSquare": "univer-avatar-square",
+    "avatarCircle": "univer-avatar-circle",
+    "avatarMiddle": "univer-avatar-middle",
+    "avatarSmall": "univer-avatar-small",
+    "avatarImage": "univer-avatar-image"
+};
+// src/components/avatar/Avatar.tsx
+function Avatar(props) {
+    var children = props.children, style = props.style, title = props.title, alt = props.alt, _props_shape = props.shape, shape = _props_shape === void 0 ? "circle" : _props_shape, _props_size = props.size, size = _props_size === void 0 ? "middle" : _props_size, src = props.src, _props_fit = props.fit, fit = _props_fit === void 0 ? "fill" : _props_fit, onError = props.onError, onLoad = props.onLoad;
+    var sizeStyle = typeof size === "number" ? {
+        width: size,
+        height: size,
+        lineHeight: "".concat(size, "px")
+    } : {};
+    var _obj;
+    var _className = (0, import_clsx.default)(index_module_default.avatar, (_obj = {}, _define_property(_obj, index_module_default.avatarCircle, shape === "circle"), _define_property(_obj, index_module_default.avatarSquare, shape === "square"), _define_property(_obj, index_module_default.avatarImage, src), _define_property(_obj, index_module_default.avatarMiddle, size === "middle"), _define_property(_obj, index_module_default.avatarSmall, size === "small"), _obj));
+    var fitStyle = fit ? {
+        objectFit: fit
+    } : {};
+    if (src) {
+        return /* @__PURE__ */ import_react.default.createElement("span", {
+            className: _className,
+            style: _object_spread({}, sizeStyle, style, fitStyle)
+        }, /* @__PURE__ */ import_react.default.createElement("img", {
+            src: src,
+            title: title,
+            alt: alt,
+            onError: onError,
+            onLoad: onLoad
+        }), children);
+    }
+    return /* @__PURE__ */ import_react.default.createElement("span", {
+        className: _className,
+        style: _object_spread({}, sizeStyle, style)
+    }, children);
+}
+// src/components/button/Button.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_react2 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/button/index.module.less
+var index_module_default2 = {
+    "button": "univer-button",
+    "buttonDefault": "univer-button-default",
+    "buttonPrimary": "univer-button-primary",
+    "buttonText": "univer-button-text",
+    "buttonLink": "univer-button-link",
+    "buttonSmall": "univer-button-small",
+    "buttonMiddle": "univer-button-middle",
+    "buttonLarge": "univer-button-large",
+    "buttonBlock": "univer-button-block"
+};
+// src/components/button/Button.tsx
+function Button(props) {
+    var children = props.children, className = props.className, style = props.style, _props_type = props.type, type = _props_type === void 0 ? "default" : _props_type, _props_size = props.size, size = _props_size === void 0 ? "middle" : _props_size, block = props.block, htmlType = props.htmlType, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onClick = props.onClick, restProps = _object_without_properties(props, [
+        "children",
+        "className",
+        "style",
+        "type",
+        "size",
+        "block",
+        "htmlType",
+        "disabled",
+        "onClick"
+    ]);
+    var _obj;
+    var _className = (0, import_clsx2.default)(index_module_default2.button, (_obj = {}, _define_property(_obj, index_module_default2.buttonPrimary, type === "primary"), _define_property(_obj, index_module_default2.buttonDefault, type === "default"), _define_property(_obj, index_module_default2.buttonText, type === "text"), _define_property(_obj, index_module_default2.buttonLink, type === "link"), _define_property(_obj, index_module_default2.buttonSmall, size === "small"), _define_property(_obj, index_module_default2.buttonMiddle, size === "middle"), _define_property(_obj, index_module_default2.buttonLarge, size === "large"), _define_property(_obj, index_module_default2.buttonBlock, block), _obj), className);
+    return /* @__PURE__ */ import_react2.default.createElement("button", _object_spread({
+        className: _className,
+        style: style,
+        type: htmlType,
+        onClick: onClick,
+        disabled: disabled
+    }, restProps), children);
+}
+// src/components/cascader-list/CascaderList.tsx
+var import_icons = require("@univerjs/icons");
+var import_clsx3 = __toESM(require("clsx"));
+var import_react3 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/cascader-list/index.module.less
+var index_module_default3 = {
+    "cascaderList": "univer-cascader-list",
+    "cascaderListBoard": "univer-cascader-list-board",
+    "cascaderListItemActive": "univer-cascader-list-item-active",
+    "cascaderListOption": "univer-cascader-list-option",
+    "cascaderListCheckMark": "univer-cascader-list-check-mark",
+    "cascaderListItem": "univer-cascader-list-item",
+    "cascaderListEmpty": "univer-cascader-list-empty"
+};
+// src/components/cascader-list/CascaderList.tsx
+function CascaderList(props) {
+    var value = props.value, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, onChange = props.onChange;
+    var activeOptions = (0, import_react3.useMemo)(function() {
+        var activeOptions2 = [
+            options
+        ];
+        value.forEach(function(item, index) {
+            var option = activeOptions2[index].find(function(option2) {
+                return option2.value === item;
+            });
+            if (option === null || option === void 0 ? void 0 : option.children) {
+                activeOptions2.push(option.children);
+            }
+        });
+        return activeOptions2;
+    }, [
+        value
+    ]);
+    function handleChange(index, v) {
+        if (v === props.value[index]) {
+            return;
+        }
+        if (props.value[index + 1]) {
+            var newValue2 = props.value.slice(0, index + 1);
+            newValue2[index] = v;
+            onChange(newValue2);
+            return;
+        }
+        var newValue = _to_consumable_array(props.value);
+        newValue[index] = v;
+        onChange(newValue);
+    }
+    return /* @__PURE__ */ import_react3.default.createElement("section", {
+        className: index_module_default3.cascaderList
+    }, activeOptions.map(function(options2, index) {
+        return options2.length ? /* @__PURE__ */ import_react3.default.createElement("ul", {
+            key: index,
+            className: index_module_default3.cascaderListBoard
+        }, options2.map(function(option) {
+            return /* @__PURE__ */ import_react3.default.createElement("li", {
+                key: option.value,
+                className: (0, import_clsx3.default)(index_module_default3.cascaderListItem, _define_property({}, index_module_default3.cascaderListItemActive, option.value === value[index]))
+            }, /* @__PURE__ */ import_react3.default.createElement("a", {
+                className: index_module_default3.cascaderListOption,
+                onClick: function() {
+                    return handleChange(index, option.value);
+                }
+            }, /* @__PURE__ */ import_react3.default.createElement("span", {
+                className: index_module_default3.cascaderListCheckMark
+            }, option.value === value[index] && /* @__PURE__ */ import_react3.default.createElement(import_icons.CheckMarkSingle, null)), /* @__PURE__ */ import_react3.default.createElement("span", null, option.label)));
+        })) : /* @__PURE__ */ import_react3.default.createElement("section", {
+            key: index,
+            className: index_module_default3.cascaderListEmpty
+        }, "无");
+    }), value.length <= 0 && /* @__PURE__ */ import_react3.default.createElement("section", {
+        className: index_module_default3.cascaderListEmpty
+    }, "无"));
+}
+// src/components/checkbox/Checkbox.tsx
+var import_clsx4 = __toESM(require("clsx"));
+var import_react4 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/checkbox/index.module.less
+var index_module_default4 = {
+    "checkbox": "univer-checkbox",
+    "checkboxTargetInput": "univer-checkbox-target-input",
+    "checkboxTargetInner": "univer-checkbox-target-inner",
+    "checkboxDisabled": "univer-checkbox-disabled",
+    "checkboxTarget": "univer-checkbox-target"
+};
+// src/components/checkbox/Checkbox.tsx
+function Checkbox(props) {
+    var children = props.children, checked = props.checked, value = props.value, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onChange = props.onChange;
+    var inputRef = (0, import_react4.useRef)(null);
+    function handleChange(e) {
+        e.stopPropagation();
+        if (!onChange || disabled) return;
+        if (typeof value !== "undefined") {
+            onChange && onChange(value);
+        } else {
+            var _inputRef_current;
+            var checked2 = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.checked;
+            onChange && onChange(checked2);
+        }
+    }
+    var _className = (0, import_clsx4.default)(index_module_default4.checkbox, _define_property({}, index_module_default4.checkboxDisabled, disabled));
+    return /* @__PURE__ */ import_react4.default.createElement("label", {
+        className: _className
+    }, /* @__PURE__ */ import_react4.default.createElement("span", {
+        className: index_module_default4.checkboxTarget
+    }, /* @__PURE__ */ import_react4.default.createElement("input", {
+        ref: inputRef,
+        className: index_module_default4.checkboxTargetInput,
+        type: "checkbox",
+        checked: checked,
+        disabled: disabled,
+        onChange: handleChange
+    }), /* @__PURE__ */ import_react4.default.createElement("span", {
+        className: index_module_default4.checkboxTargetInner
+    })), /* @__PURE__ */ import_react4.default.createElement("span", null, children));
+}
+// src/components/checkbox-group/CheckboxGroup.tsx
+var import_react5 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/checkbox-group/index.module.less
+var index_module_default5 = {
+    "checkboxGroup": "univer-checkbox-group"
+};
+// src/components/checkbox-group/CheckboxGroup.tsx
+function CheckboxGroup(props) {
+    var children = props.children, value = props.value, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onChange = props.onChange;
+    var handleChange = function(item) {
+        if (value.includes(item)) {
+            onChange(value.filter(function(i) {
+                return i !== item;
+            }));
+        } else {
+            onChange(_to_consumable_array(value).concat([
+                item
+            ]));
+        }
+    };
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
+        className: index_module_default5.checkboxGroup
+    }, import_react5.default.Children.map(children, function(child, index) {
+        if (import_react5.default.isValidElement(child)) {
+            return import_react5.default.cloneElement(child, {
+                key: index,
+                children: child.props.children,
+                value: child.props.value,
+                checked: value.includes(child.props.value),
+                disabled: disabled !== null && disabled !== void 0 ? disabled : child.props.disabled,
+                onChange: handleChange
+            });
+        }
+        return child;
+    }));
+}
+// src/components/color-picker/ColorPicker.tsx
+var import_color_picker = __toESM(require("@rc-component/color-picker"));
+var import_react6 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/color-picker/index.module.less
+var index_module_default6 = {
+    "colorPicker": "univer-color-picker",
+    "colorPickerHidden": "univer-color-picker-hidden",
+    "colorPickerPanel": "univer-color-picker-panel",
+    "colorPickerPanelDisabled": "univer-color-picker-panel-disabled",
+    "colorPickerSelect": "univer-color-picker-select",
+    "colorPickerPalette": "univer-color-picker-palette",
+    "colorPickerGradient": "univer-color-picker-gradient",
+    "colorPickerSaturation": "univer-color-picker-saturation",
+    "colorPickerHandler": "univer-color-picker-handler",
+    "colorPickerSlider": "univer-color-picker-slider",
+    "colorPickerColorBlocks": "univer-color-picker-color-blocks",
+    "colorPickerColorBlock": "univer-color-picker-color-block",
+    "colorPickerColorBlockInner": "univer-color-picker-color-block-inner",
+    "colorPickerSliderContainer": "univer-color-picker-slider-container",
+    "colorPickerSliderGroup": "univer-color-picker-slider-group",
+    "colorPickerSliderGroupDisabledAlpha": "univer-color-picker-slider-group-disabled-alpha"
+};
+// src/components/color-picker/presets.ts
+var colorPresets = [
+    "#35322B",
+    "#505050",
+    "#606060",
+    "#6F6F6F",
+    "#8B8B8B",
+    "#B2B2B2",
+    "#CCCCCC",
+    "#E5E5E5",
+    "#F5F5F5",
+    "#FFFFFF",
+    "#9D0000",
+    "#B20000",
+    "#CD0F0F",
+    "#E30909",
+    "#F30B0B",
+    "#FE4B4B",
+    "#FA7979",
+    "#FB9D9D",
+    "#FDCECE",
+    "#FEE7E7",
+    "#B24000",
+    "#CC4F10",
+    "#DF5D00",
+    "#F96800",
+    "#FB8937",
+    "#FF8C51",
+    "#FCA669",
+    "#FDC49B",
+    "#FEE1CD",
+    "#FEF0E6",
+    "#B19401",
+    "#C5A300",
+    "#D8B300",
+    "#EBC301",
+    "#F9D700",
+    "#FBE137",
+    "#FCE869",
+    "#FDF09B",
+    "#FEF7CD",
+    "#FEFBE6",
+    "#58770A",
+    "#688C0D",
+    "#7AA017",
+    "#8BBB11",
+    "#A4DC16",
+    "#BEEE44",
+    "#CEF273",
+    "#DEF6A2",
+    "#EFFBD0",
+    "#F7FDE8",
+    "#007676",
+    "#008A8A",
+    "#009E9E",
+    "#00BBBB",
+    "#1CD8D8",
+    "#2AEAEA",
+    "#76EFEF",
+    "#A3F5F5",
+    "#D1FAFA",
+    "#E8FCFC",
+    "#001F9C",
+    "#0025B7",
+    "#012BD2",
+    "#133DE3",
+    "#2F55EB",
+    "#4567ED",
+    "#738DF2",
+    "#A2B3F6",
+    "#D0D9FB",
+    "#E8ECFD",
+    "#3F0198",
+    "#510EB0",
+    "#6721CB",
+    "#7735D4",
+    "#894EDE",
+    "#9E6DE3",
+    "#AA82E3",
+    "#C7ABED",
+    "#E3D5F6",
+    "#F1EAFA",
+    "#8F0550",
+    "#A1095C",
+    "#C1026B",
+    "#D4157E",
+    "#E7258F",
+    "#F248A6",
+    "#F273B9",
+    "#F6A2D0",
+    "#FBD0E8",
+    "#FDE8F3"
+];
+// src/components/color-picker/ColorPicker.tsx
+function ColorPicker(props) {
+    var onChange = props.onChange;
+    function handleStopPropagation(e) {
+        e.stopPropagation();
+    }
+    function handleChange(color) {
+        var _ref;
+        var value = (_ref = typeof color === "string" ? color : color.toHexString()) !== null && _ref !== void 0 ? _ref : "";
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+    return /* @__PURE__ */ import_react6.default.createElement("section", null, /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", {
+        className: index_module_default6.colorPickerColorBlocks
+    }, colorPresets.map(function(color) {
+        return /* @__PURE__ */ import_react6.default.createElement(import_color_picker.ColorBlock, {
+            key: color,
+            prefixCls: index_module_default6.colorPicker,
+            color: color,
+            onClick: function() {
+                return handleChange(color);
+            }
+        });
+    }))), /* @__PURE__ */ import_react6.default.createElement("section", {
+        onClick: handleStopPropagation
+    }, /* @__PURE__ */ import_react6.default.createElement(import_color_picker.default, {
+        prefixCls: index_module_default6.colorPicker,
+        disabledAlpha: true,
+        onChangeComplete: handleChange
+    })));
+}
+// src/components/config-provider/ConfigProvider.tsx
+var import_react7 = __toESM(require("react"));
+// src/locale/en-US.ts
+var locale = {
+    design: {
+        Confirm: {
+            cancel: "cancel",
+            confirm: "ok"
+        },
+        Slider: {
+            resetTo: "Reset to"
+        }
+    }
+};
+var en_US_default = locale;
+// src/components/config-provider/ConfigProvider.tsx
+var ConfigContext = (0, import_react7.createContext)({
+    locale: en_US_default,
+    mountContainer: document.body
+});
+function ConfigProvider(props) {
+    var children = props.children, locale2 = props.locale, mountContainer = props.mountContainer;
+    var _locale;
+    if (Object.prototype.hasOwnProperty.call(locale2, "design")) {
+        _locale = locale2;
+    } else {
+        _locale = en_US_default;
+    }
+    return /* @__PURE__ */ import_react7.default.createElement(ConfigContext.Provider, {
+        value: {
+            locale: _locale,
+            mountContainer: mountContainer
+        }
+    }, children);
+}
+// src/components/confirm/Confirm.tsx
+var import_react9 = __toESM(require("react"));
+// src/components/dialog/Dialog.tsx
+var import_rc_dialog = __toESM(require("rc-dialog"));
+var import_react8 = __toESM(require("react"));
+var import_react_draggable = __toESM(require("react-draggable"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/dialog/index.module.less
+var index_module_default7 = {
+    "dialog": "univer-dialog",
+    "dialogWrap": "univer-dialog-wrap",
+    "dialogTitle": "univer-dialog-title",
+    "dialogContent": "univer-dialog-content",
+    "dialogClose": "univer-dialog-close",
+    "dialogHeader": "univer-dialog-header",
+    "dialogBody": "univer-dialog-body",
+    "dialogFooter": "univer-dialog-footer",
+    "dialogZoomEnter": "univer-dialog-zoom-enter",
+    "dialogZoomAppear": "univer-dialog-zoom-appear",
+    "dialogZoomLeave": "univer-dialog-zoom-leave",
+    "dialogZoomEnterActive": "univer-dialog-zoom-enter-active",
+    "dialogZoomAppearActive": "univer-dialog-zoom-appear-active",
+    "dialogZoomIn": "univer-dialog-zoom-in",
+    "dialogZoomLeaveActive": "univer-dialog-zoom-leave-active",
+    "dialogZoomOut": "univer-dialog-zoom-out",
+    "dialogMask": "univer-dialog-mask",
+    "dialogMaskHidden": "univer-dialog-mask-hidden",
+    "dialogFadeEnter": "univer-dialog-fade-enter",
+    "dialogFadeAppear": "univer-dialog-fade-appear",
+    "dialogFadeLeave": "univer-dialog-fade-leave",
+    "dialogFadeEnterActive": "univer-dialog-fade-enter-active",
+    "dialogFadeAppearActive": "univer-dialog-fade-appear-active",
+    "dialogFadeIn": "univer-dialog-fade-in",
+    "dialogFadeLeaveActive": "univer-dialog-fade-leave-active",
+    "dialogFadeOut": "univer-dialog-fade-out"
+};
+// src/components/dialog/Dialog.tsx
+function Dialog(props) {
+    var children = props.children, _props_visible = props.visible, visible = _props_visible === void 0 ? false : _props_visible, title = props.title, _props_draggable = props.draggable, draggable = _props_draggable === void 0 ? false : _props_draggable, closeIcon = props.closeIcon, footer = props.footer, onClose = props.onClose;
+    var _ref = _sliced_to_array((0, import_react8.useState)(false), 2), dragDisabled = _ref[0], setDragDisabled = _ref[1];
+    var mountContainer = (0, import_react8.useContext)(ConfigContext).mountContainer;
+    var TitleIfDraggable = draggable ? /* @__PURE__ */ import_react8.default.createElement("div", {
+        style: {
+            width: "100%",
+            cursor: "pointer"
+        },
+        onMouseOver: function() {
+            if (dragDisabled) {
+                setDragDisabled(false);
+            }
+        },
+        onMouseOut: function() {
+            setDragDisabled(true);
+        },
+        onFocus: function() {},
+        onBlur: function() {}
+    }, title) : title;
+    var modalRender = function(modal) {
+        return draggable ? /* @__PURE__ */ import_react8.default.createElement(import_react_draggable.default, {
+            disabled: dragDisabled
+        }, modal) : modal;
+    };
+    return /* @__PURE__ */ import_react8.default.createElement(import_rc_dialog.default, {
+        prefixCls: index_module_default7.dialog,
+        getContainer: function() {
+            return mountContainer;
+        },
+        visible: visible,
+        title: TitleIfDraggable,
+        modalRender: modalRender,
+        closeIcon: closeIcon,
+        footer: footer,
+        onClose: onClose
+    }, children);
+}
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/confirm/index.module.less
+var index_module_default8 = {
+    "confirmFooter": "univer-confirm-footer"
+};
+// src/components/confirm/Confirm.tsx
+function Confirm(props) {
+    var children = props.children, _props_visible = props.visible, visible = _props_visible === void 0 ? false : _props_visible, title = props.title, onClose = props.onClose, onConfirm = props.onConfirm;
+    var _ref = (0, import_react9.useContext)(ConfigContext), locale2 = _ref.locale;
+    function Footer() {
+        return /* @__PURE__ */ import_react9.default.createElement("footer", {
+            className: index_module_default8.confirmFooter
+        }, /* @__PURE__ */ import_react9.default.createElement(Button, {
+            onClick: onClose
+        }, locale2.design.Confirm.cancel), /* @__PURE__ */ import_react9.default.createElement(Button, {
+            type: "primary",
+            onClick: onConfirm
+        }, locale2.design.Confirm.confirm));
+    }
+    return /* @__PURE__ */ import_react9.default.createElement(Dialog, {
+        visible: visible,
+        title: title,
+        footer: /* @__PURE__ */ import_react9.default.createElement(Footer, null),
+        onClose: onClose
+    }, children);
+}
+// src/components/container/Container.tsx
+var import_react10 = __toESM(require("react"));
+var Container = (0, import_react10.forwardRef)(function(props, ref) {
+    var children = props.children, className = props.className, style = props.style, onClick = props.onClick, onContextMenu = props.onContextMenu;
+    return /* @__PURE__ */ import_react10.default.createElement("section", {
+        ref: ref,
+        className: className,
+        style: style,
+        onClick: onClick,
+        onContextMenu: onContextMenu
+    }, children);
+});
+// src/components/dropdown/Dropdown.tsx
+var import_rc_dropdown = __toESM(require("rc-dropdown"));
+var import_react11 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/dropdown/index.module.less
+var index_module_default9 = {
+    "dropdown": "univer-dropdown",
+    "dropdownHidden": "univer-dropdown-hidden",
+    "dropdownSlideUpEnter": "univer-dropdown-slide-up-enter",
+    "dropdownSlideUpAppear": "univer-dropdown-slide-up-appear",
+    "dropdownSlideUpLeave": "univer-dropdown-slide-up-leave",
+    "dropdownSlideUpEnterActive": "univer-dropdown-slide-up-enter-active",
+    "dropdownPlacementBottomLeft": "univer-dropdown-placement-bottomLeft",
+    "dropdownSlideUpAppearActive": "univer-dropdown-slide-up-appear-active",
+    "dropdownPlacementBottomCenter": "univer-dropdown-placement-bottomCenter",
+    "dropdownPlacementBottomRight": "univer-dropdown-placement-bottomRight",
+    "dropdownSlideUpIn": "univer-dropdown-slide-up-in",
+    "dropdownPlacementTopLeft": "univer-dropdown-placement-topLeft",
+    "dropdownPlacementTopCenter": "univer-dropdown-placement-topCenter",
+    "dropdownPlacementTopRight": "univer-dropdown-placement-topRight",
+    "dropdownSlideDownIn": "univer-dropdown-slide-down-in",
+    "dropdownSlideUpLeaveActive": "univer-dropdown-slide-up-leave-active",
+    "dropdownSlideUpOut": "univer-dropdown-slide-up-out",
+    "dropdownSlideDownOut": "univer-dropdown-slide-down-out"
+};
+// src/components/dropdown/Dropdown.tsx
+function Dropdown(props) {
+    var _props_trigger = props.trigger, trigger = _props_trigger === void 0 ? [
+        "click"
+    ] : _props_trigger, placement = props.placement, children = props.children, overlay = props.overlay, _props_alignPoint = props.alignPoint, alignPoint = _props_alignPoint === void 0 ? false : _props_alignPoint, align = props.align, onVisibleChange = props.onVisibleChange;
+    var mountContainer = (0, import_react11.useContext)(ConfigContext).mountContainer;
+    return /* @__PURE__ */ import_react11.default.createElement(import_rc_dropdown.default, _object_spread_props(_object_spread({}, props), {
+        prefixCls: index_module_default9.dropdown,
+        getPopupContainer: function() {
+            return mountContainer;
+        },
+        trigger: trigger,
+        animation: "slide-up",
+        placement: placement,
+        overlay: overlay,
+        alignPoint: alignPoint,
+        align: align,
+        onVisibleChange: onVisibleChange
+    }), children);
+}
+// src/components/input/Input.tsx
+var import_icons2 = require("@univerjs/icons");
+var import_clsx5 = __toESM(require("clsx"));
+var import_rc_input = __toESM(require("rc-input"));
+var import_react12 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/input/index.module.less
+var index_module_default10 = {
+    "input": "univer-input",
+    "inputAffixWrapper": "univer-input-affix-wrapper",
+    "inputAffixWrapperMini": "univer-input-affix-wrapper-mini",
+    "inputAffixWrapperSmall": "univer-input-affix-wrapper-small",
+    "inputAffixWrapperMiddle": "univer-input-affix-wrapper-middle",
+    "inputAffixWrapperLarge": "univer-input-affix-wrapper-large",
+    "inputAffixWrapperDisabled": "univer-input-affix-wrapper-disabled",
+    "inputSuffix": "univer-input-suffix",
+    "inputClearIcon": "univer-input-clear-icon",
+    "inputClearIconHidden": "univer-input-clear-icon-hidden"
+};
+// src/components/input/Input.tsx
+function Input(props) {
+    var affixWrapperStyle = props.affixWrapperStyle, _props_type = props.type, type = _props_type === void 0 ? "text" : _props_type, placeholder = props.placeholder, value = props.value, _props_size = props.size, size = _props_size === void 0 ? "middle" : _props_size, allowClear = props.allowClear, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onClick = props.onClick, onKeyDown = props.onKeyDown, onChange = props.onChange;
+    function handleChange(e) {
+        var _e_target = e.target, value2 = _e_target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value2);
+    }
+    var _obj;
+    var _className = (0, import_clsx5.default)((_obj = {}, _define_property(_obj, index_module_default10.inputAffixWrapperMini, size === "mini"), _define_property(_obj, index_module_default10.inputAffixWrapperSmall, size === "small"), _define_property(_obj, index_module_default10.inputAffixWrapperMiddle, size === "middle"), _define_property(_obj, index_module_default10.inputAffixWrapperLarge, size === "large"), _obj));
+    return /* @__PURE__ */ import_react12.default.createElement(import_rc_input.default, {
+        prefixCls: index_module_default10.input,
+        classNames: {
+            affixWrapper: _className
+        },
+        styles: {
+            affixWrapper: affixWrapperStyle
+        },
+        type: type,
+        placeholder: placeholder,
+        value: value,
+        disabled: disabled,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        onChange: handleChange,
+        allowClear: {
+            clearIcon: allowClear ? /* @__PURE__ */ import_react12.default.createElement(import_icons2.CloseSingle, null) : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null)
+        }
+    });
+}
+// src/components/input-number/InputNumber.tsx
+var import_rc_input_number = __toESM(require("rc-input-number"));
+var import_react13 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/input-number/index.module.less
+var index_module_default11 = {
+    "inputNumber": "univer-input-number",
+    "inputNumberFocused": "univer-input-number-focused",
+    "inputNumberHandlerUp": "univer-input-number-handler-up",
+    "inputNumberHandlerWrap": "univer-input-number-handler-wrap",
+    "inputNumberHandler": "univer-input-number-handler",
+    "inputNumberHandlerUpInner": "univer-input-number-handler-up-inner",
+    "inputNumberHandlerDownInner": "univer-input-number-handler-down-inner",
+    "inputNumberDisabled": "univer-input-number-disabled",
+    "inputNumberInputWrap": "univer-input-number-input-wrap",
+    "inputNumberInput": "univer-input-number-input",
+    "inputNumberHandlerDown": "univer-input-number-handler-down",
+    "inputNumberHandlerDownDisabled": "univer-input-number-handler-down-disabled",
+    "inputNumberHandlerUpDisabled": "univer-input-number-handler-up-disabled"
+};
+// src/components/input-number/InputNumber.tsx
+function InputNumber(props) {
+    var className = props.className, value = props.value, max = props.max, min = props.min, _props_step = props.step, step = _props_step === void 0 ? 1 : _props_step, precision = props.precision, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_controls = props.controls, controls = _props_controls === void 0 ? true : _props_controls, onClick = props.onClick, onKeyDown = props.onKeyDown, onChange = props.onChange, onPressEnter = props.onPressEnter;
+    function handleChange(value2) {
+        if (value2 !== null) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value2);
+        }
+    }
+    return /* @__PURE__ */ import_react13.default.createElement(import_rc_input_number.default, {
+        prefixCls: index_module_default11.inputNumber,
+        className: className,
+        value: value,
+        max: max,
+        min: min,
+        step: step,
+        precision: precision,
+        disabled: disabled,
+        controls: controls,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        onChange: handleChange,
+        onPressEnter: onPressEnter
+    });
+}
+// src/components/menu/Menu.tsx
+var import_rc_menu = __toESM(require("rc-menu"));
+var import_react14 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/menu/index.module.less
+var index_module_default12 = {
+    "menu": "univer-menu",
+    "menuVertical": "univer-menu-vertical",
+    "menuHidden": "univer-menu-hidden",
+    "menuSubmenuHidden": "univer-menu-submenu-hidden",
+    "menuItemGroup": "univer-menu-item-group",
+    "menuItemGroupList": "univer-menu-item-group-list",
+    "menuItemGroupTitle": "univer-menu-item-group-title",
+    "menuItemActive": "univer-menu-item-active",
+    "menuSubmenuActive": "univer-menu-submenu-active",
+    "menuItemSelected": "univer-menu-item-selected",
+    "menuSubmenuSelected": "univer-menu-submenu-selected",
+    "menuSubmenu": "univer-menu-submenu",
+    "menuHorizontal": "univer-menu-horizontal",
+    "menuSub": "univer-menu-sub",
+    "menuVerticalLeft": "univer-menu-vertical-left",
+    "menuVerticalRight": "univer-menu-vertical-right",
+    "menuItem": "univer-menu-item",
+    "menuItemDisabled": "univer-menu-item-disabled",
+    "menuSubmenuDisabled": "univer-menu-submenu-disabled",
+    "menuSubmenuPopup": "univer-menu-submenu-popup",
+    "submenuTitleWrapper": "univer-submenu-title-wrapper",
+    "menuSubmenuTitle": "univer-menu-submenu-title",
+    "menuSubmenuTitleMoreIcon": "univer-menu-submenu-title-more-icon",
+    "menuItemMoreIcon": "univer-menu-item-more-icon",
+    "menuInline": "univer-menu-inline",
+    "menuSubmenuArrow": "univer-menu-submenu-arrow",
+    "menuOpenSlideUpEnter": "univer-menu-open-slide-up-enter",
+    "menuOpenSlideUpAppear": "univer-menu-open-slide-up-appear",
+    "menuOpenSlideUpLeave": "univer-menu-open-slide-up-leave",
+    "menuOpenSlideUpEnterActive": "univer-menu-open-slide-up-enter-active",
+    "menuOpenSlideUpAppearActive": "univer-menu-open-slide-up-appear-active",
+    "menuOpenSlideUpIn": "univer-menu-open-slide-up-in",
+    "menuOpenSlideUpLeaveActive": "univer-menu-open-slide-up-leave-active",
+    "menuOpenSlideUpOut": "univer-menu-open-slide-up-out",
+    "menuOpenZoomEnter": "univer-menu-open-zoom-enter",
+    "menuOpenZoomAppear": "univer-menu-open-zoom-appear",
+    "menuOpenZoomLeave": "univer-menu-open-zoom-leave",
+    "menuOpenZoomEnterActive": "univer-menu-open-zoom-enter-active",
+    "menuOpenZoomAppearActive": "univer-menu-open-zoom-appear-active",
+    "menuOpenZoomIn": "univer-menu-open-zoom-in",
+    "menuOpenZoomLeaveActive": "univer-menu-open-zoom-leave-active",
+    "menuOpenZoomOut": "univer-menu-open-zoom-out"
+};
+// src/components/menu/Menu.tsx
+function Menu(props) {
+    var mountContainer = (0, import_react14.useContext)(ConfigContext).mountContainer;
+    return import_react14.default.cloneElement(/* @__PURE__ */ import_react14.default.createElement(import_rc_menu.default, {
+        prefixCls: index_module_default12.menu,
+        getPopupContainer: function() {
+            return mountContainer;
+        }
+    }), _object_spread({}, props));
+}
+function MenuItem(props) {
+    return import_react14.default.cloneElement(/* @__PURE__ */ import_react14.default.createElement(import_rc_menu.MenuItem, null), _object_spread({}, props));
+}
+function SubMenu(props) {
+    return import_react14.default.cloneElement(/* @__PURE__ */ import_react14.default.createElement(import_rc_menu.SubMenu, null), _object_spread({}, props));
+}
+function MenuItemGroup(props) {
+    return import_react14.default.cloneElement(/* @__PURE__ */ import_react14.default.createElement(import_rc_menu.MenuItemGroup, null), _object_spread({}, props));
+}
+// src/components/message/Message.tsx
+var import_icons3 = require("@univerjs/icons");
+var import_render = require("rc-util/lib/React/render");
+var import_react15 = __toESM(require("react"));
+var import_react_transition_group = require("react-transition-group");
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/message/index.module.less
+var index_module_default13 = {
+    "message": "univer-message",
+    "messageItem": "univer-message-item",
+    "enterActive": "univer-enter-active",
+    "enterDone": "univer-enter-done",
+    "exit": "univer-exit",
+    "exitActive": "univer-exit-active",
+    "messageIcon": "univer-message-icon",
+    "messageIconSuccess": "univer-message-icon-success",
+    "messageIconWarning": "univer-message-icon-warning",
+    "messageIconError": "univer-message-icon-error",
+    "messageContent": "univer-message-content"
+};
+// src/components/message/Message.tsx
+var MessageType = /* @__PURE__ */ function(MessageType2) {
+    MessageType2["Success"] = "success";
+    MessageType2["Warning"] = "warning";
+    MessageType2["Error"] = "error";
+    return MessageType2;
+}(MessageType || {});
+var _obj;
+var iconMap = (_obj = {}, _define_property(_obj, "success" /* Success */ , /* @__PURE__ */ import_react15.default.createElement(import_icons3.SuccessSingle, {
+    className: index_module_default13.messageIconSuccess
+})), _define_property(_obj, "warning" /* Warning */ , /* @__PURE__ */ import_react15.default.createElement(import_icons3.WarningSingle, {
+    className: index_module_default13.messageIconWarning
+})), _define_property(_obj, "error" /* Error */ , /* @__PURE__ */ import_react15.default.createElement(import_icons3.ErrorSingle, {
+    className: index_module_default13.messageIconError
+})), _obj);
+var MessageItem = function(props) {
+    var type = props.type, content = props.content;
+    var messageElement = /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: index_module_default13.messageItem
+    }, /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: index_module_default13.messageContent
+    }, /* @__PURE__ */ import_react15.default.createElement("span", {
+        className: index_module_default13.messageIcon
+    }, iconMap[type]), /* @__PURE__ */ import_react15.default.createElement("span", null, content)));
+    return messageElement;
+};
+var MessageContainer = function(props) {
+    var messages = props.messages;
+    return /* @__PURE__ */ import_react15.default.createElement(import_react_transition_group.TransitionGroup, {
+        className: index_module_default13.message
+    }, messages.map(function(message) {
+        return /* @__PURE__ */ import_react15.default.createElement(import_react_transition_group.CSSTransition, {
+            key: message.key,
+            timeout: 200,
+            classNames: {
+                enterActive: index_module_default13.enterActive,
+                enterDone: index_module_default13.enterDone,
+                exitActive: index_module_default13.exit,
+                exitDone: index_module_default13.exitActive
+            }
+        }, /* @__PURE__ */ import_react15.default.createElement(MessageItem, _object_spread({}, message)));
+    }));
+};
+var Message = /*#__PURE__*/ function() {
+    function Message(container) {
+        _class_call_check(this, Message);
+        _define_property(this, "_div", void 0);
+        _define_property(this, "_messages", []);
+        this._div = document.createElement("div");
+        container.appendChild(this._div);
+        this.render();
+    }
+    _create_class(Message, [
+        {
+            key: "append",
+            value: function append(type, options) {
+                var _this = this;
+                var content = options.content, _options_delay = options.delay, delay = _options_delay === void 0 ? 3e3 : _options_delay;
+                var key = Date.now();
+                this._messages.push({
+                    key: key,
+                    type: type,
+                    content: content
+                });
+                setTimeout(function() {
+                    _this.teardown(key);
+                }, delay);
+                this.render();
+            }
+        },
+        {
+            key: "teardown",
+            value: function teardown(key) {
+                this._messages = this._messages.filter(function(message) {
+                    return message.key !== key;
+                });
+                this.render();
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                (0, import_render.render)(/* @__PURE__ */ import_react15.default.createElement(MessageContainer, {
+                    messages: this._messages
+                }), this._div);
+            }
+        },
+        {
+            key: "success",
+            value: function success(options) {
+                this.append("success" /* Success */ , options);
+            }
+        },
+        {
+            key: "warning",
+            value: function warning(options) {
+                this.append("warning" /* Warning */ , options);
+            }
+        },
+        {
+            key: "error",
+            value: function error(options) {
+                this.append("error" /* Error */ , options);
+            }
+        }
+    ]);
+    return Message;
+}();
+// src/components/popup/Popup.tsx
+var import_react16 = __toESM(require("react"));
+var import_react_transition_group2 = require("react-transition-group");
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/popup/index.module.less
+var index_module_default14 = {
+    "popup": "univer-popup",
+    "popupEnter": "univer-popup-enter",
+    "popupEnterActive": "univer-popup-enter-active",
+    "popupSlideUpIn": "univer-popup-slide-up-in",
+    "popupExit": "univer-popup-exit",
+    "popupSlideUpOut": "univer-popup-slide-up-out",
+    "popupExitActive": "univer-popup-exit-active"
+};
+// src/components/popup/Popup.tsx
+function Popup(props) {
+    var children = props.children, _props_visible = props.visible, visible = _props_visible === void 0 ? false : _props_visible, _props_offset = props.offset, offset = _props_offset === void 0 ? [
+        0,
+        0
+    ] : _props_offset;
+    var nodeRef = (0, import_react16.useRef)(null);
+    var _ref = _sliced_to_array((0, import_react16.useState)(offset), 2), realoffset = _ref[0], setRealOffset = _ref[1];
+    (0, import_react16.useEffect)(function() {
+        if (!visible) {
+            setRealOffset([
+                -9999,
+                -9999
+            ]);
+            return;
+        }
+        var _offset = _sliced_to_array(offset, 2), left = _offset[0], top = _offset[1];
+        var _nodeRef_current = nodeRef.current, clientWidth = _nodeRef_current.clientWidth, clientHeight = _nodeRef_current.clientHeight;
+        var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+        var x = left + clientWidth > innerWidth ? innerWidth - clientWidth : left;
+        var y = top + clientHeight > innerHeight ? innerHeight - clientHeight : top;
+        setRealOffset([
+            x,
+            y
+        ]);
+    }, [
+        offset,
+        visible
+    ]);
+    function preventDefault(event) {
+        event.preventDefault();
+    }
+    return /* @__PURE__ */ import_react16.default.createElement(import_react_transition_group2.CSSTransition, {
+        in: visible,
+        nodeRef: nodeRef,
+        timeout: 300,
+        classNames: {
+            enter: index_module_default14.popupEnter,
+            enterActive: index_module_default14.popupEnterActive,
+            enterDone: index_module_default14.popupEnterDone,
+            exitActive: index_module_default14.popupExit,
+            exitDone: index_module_default14.popupExitActive
+        }
+    }, /* @__PURE__ */ import_react16.default.createElement("section", {
+        ref: nodeRef,
+        className: index_module_default14.popup,
+        style: {
+            left: realoffset[0],
+            top: realoffset[1]
+        },
+        onContextMenu: preventDefault
+    }, children));
+}
+// src/components/radio/Radio.tsx
+var import_clsx6 = __toESM(require("clsx"));
+var import_react17 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/radio/index.module.less
+var index_module_default15 = {
+    "radio": "univer-radio",
+    "radioTargetInput": "univer-radio-target-input",
+    "radioTargetInner": "univer-radio-target-inner",
+    "radioDisabled": "univer-radio-disabled",
+    "radioTarget": "univer-radio-target"
+};
+// src/components/radio/Radio.tsx
+function Radio(props) {
+    var children = props.children, checked = props.checked, value = props.value, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onChange = props.onChange;
+    var inputRef = (0, import_react17.useRef)(null);
+    function handleChange(e) {
+        e.stopPropagation();
+        if (!onChange || disabled) return;
+        if (typeof value !== "undefined") {
+            onChange && onChange(value);
+        } else {
+            var _inputRef_current;
+            var checked2 = inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.checked;
+            onChange && onChange(checked2);
+        }
+    }
+    var _className = (0, import_clsx6.default)(index_module_default15.radio, _define_property({}, index_module_default15.radioDisabled, disabled));
+    return /* @__PURE__ */ import_react17.default.createElement("label", {
+        className: _className
+    }, /* @__PURE__ */ import_react17.default.createElement("span", {
+        className: index_module_default15.radioTarget
+    }, /* @__PURE__ */ import_react17.default.createElement("input", {
+        ref: inputRef,
+        className: index_module_default15.radioTargetInput,
+        type: "radio",
+        checked: checked,
+        disabled: disabled,
+        onChange: handleChange
+    }), /* @__PURE__ */ import_react17.default.createElement("span", {
+        className: index_module_default15.radioTargetInner
+    })), /* @__PURE__ */ import_react17.default.createElement("span", null, children));
+}
+// src/components/radio-group/RadioGroup.tsx
+var import_react18 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/radio-group/index.module.less
+var index_module_default16 = {
+    "radioGroup": "univer-radio-group"
+};
+// src/components/radio-group/RadioGroup.tsx
+function RadioGroup(props) {
+    var children = props.children, value = props.value, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, onChange = props.onChange;
+    var handleChange = function(value2) {
+        onChange(value2);
+    };
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
+        className: index_module_default16.radioGroup
+    }, import_react18.default.Children.map(children, function(child, index) {
+        if (import_react18.default.isValidElement(child)) {
+            return import_react18.default.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;
+    }));
+}
+// src/components/scrollbar/Scrollbar.tsx
+var import_react19 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/scrollbar/index.module.less
+var index_module_default17 = {
+    "scrollbarContainer": "univer-scrollbar-container",
+    "scrollbarBar": "univer-scrollbar-bar",
+    "scrollbarBarThumb": "univer-scrollbar-bar-thumb",
+    "scrollbarContent": "univer-scrollbar-content"
+};
+// src/components/scrollbar/Scrollbar.tsx
+function Scrollbar(props) {
+    var children = props.children;
+    var _ref = _sliced_to_array((0, import_react19.useState)(false), 2), isDragging = _ref[0], setIsDragging = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react19.useState)(0), 2), initialScrollTop = _ref1[0], setInitialScrollTop = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react19.useState)(0), 2), scrollPositionY = _ref2[0], setScrollPositionY = _ref2[1];
+    var handleThumbMousedown = (0, import_react19.useCallback)(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        setScrollPositionY(e.clientY);
+        setInitialScrollTop(contentRef.current.scrollTop);
+    }, []);
+    var handleThumbMouseup = (0, import_react19.useCallback)(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragging) {
+            setIsDragging(false);
+        }
+    }, [
+        isDragging
+    ]);
+    var handleThumbMousemove = (0, import_react19.useCallback)(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDragging) {
+            var _contentRef_current = contentRef.current, contentScrollHeight = _contentRef_current.scrollHeight, contentOffsetHeight = _contentRef_current.offsetHeight;
+            var thumbHeight2 = contentOffsetHeight * (contentOffsetHeight / contentScrollHeight);
+            var deltaY = (e.clientY - scrollPositionY) * (contentOffsetHeight / thumbHeight2);
+            var scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+            contentRef.current.scrollTop = scrollTop;
+        }
+    }, [
+        isDragging
+    ]);
+    (0, import_react19.useEffect)(function() {
+        document.addEventListener("mousemove", handleThumbMousemove);
+        document.addEventListener("mouseup", handleThumbMouseup);
+        document.addEventListener("mouseleave", handleThumbMouseup);
+        return function() {
+            document.removeEventListener("mousemove", handleThumbMousemove);
+            document.removeEventListener("mouseup", handleThumbMouseup);
+            document.removeEventListener("mouseleave", handleThumbMouseup);
+        };
+    }, [
+        handleThumbMousemove,
+        handleThumbMouseup
+    ]);
+    var containerRef = (0, import_react19.useRef)(null);
+    var contentRef = (0, import_react19.useRef)(null);
+    var _ref3 = _sliced_to_array((0, import_react19.useState)(0), 2), thumbHeight = _ref3[0], setThumbHeight = _ref3[1];
+    var _ref4 = _sliced_to_array((0, import_react19.useState)(0), 2), thumbTop = _ref4[0], setThumbTop = _ref4[1];
+    (0, import_react19.useEffect)(function() {
+        var observer = new ResizeObserver(function() {
+            var timer = requestIdleCallback(function() {
+                if (!timer) return;
+                var _containerRef_current_getBoundingClientRect = containerRef.current.getBoundingClientRect(), containerHeight = _containerRef_current_getBoundingClientRect.height;
+                var scrollHeight = contentRef.current.scrollHeight;
+                setThumbHeight(containerHeight / scrollHeight * 100);
+                timer = void 0;
+            });
+        });
+        observer.observe(document.body);
+        contentRef.current.addEventListener("scroll", function(e) {
+            var _e_target = e.target, scrollTop = _e_target.scrollTop, scrollHeight = _e_target.scrollHeight;
+            var thumbTop2 = scrollTop / scrollHeight * 100;
+            setThumbTop(thumbTop2);
+        });
+        return function() {
+            observer.unobserve(document.body);
+        };
+    }, []);
+    function handleJumpPosition(e) {
+        var _contentRef_current = contentRef.current, contentScrollHeight = _contentRef_current.scrollHeight, contentOffsetHeight = _contentRef_current.offsetHeight;
+        var thumbHeight2 = contentOffsetHeight * (contentOffsetHeight / contentScrollHeight);
+        var deltaY = (e.clientY - scrollPositionY) * (contentOffsetHeight / thumbHeight2);
+        var scrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
+        contentRef.current.scrollTo({
+            top: scrollTop,
+            behavior: "smooth"
+        });
+    }
+    return /* @__PURE__ */ import_react19.default.createElement("div", {
+        ref: containerRef,
+        className: index_module_default17.scrollbarContainer
+    }, /* @__PURE__ */ import_react19.default.createElement("div", _object_spread({
+        className: index_module_default17.scrollbarContent,
+        ref: contentRef
+    }, props), children), thumbHeight < 100 && thumbHeight > 0 && /* @__PURE__ */ import_react19.default.createElement("div", {
+        className: index_module_default17.scrollbarBar,
+        role: "scrollbar",
+        onClick: handleJumpPosition
+    }, /* @__PURE__ */ import_react19.default.createElement("div", {
+        className: index_module_default17.scrollbarBarThumb,
+        style: {
+            height: "".concat(thumbHeight, "%"),
+            top: "".concat(thumbTop, "%")
+        },
+        onMouseDown: handleThumbMousedown
+    })));
+}
+// src/components/select/Select.tsx
+var import_icons4 = require("@univerjs/icons");
+var import_rc_select = __toESM(require("rc-select"));
+var import_react20 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/select/index.module.less
+var index_module_default18 = {
+    "select": "univer-select",
+    "selectDisabled": "univer-select-disabled",
+    "selectSelector": "univer-select-selector",
+    "selectShowArrow": "univer-select-show-arrow",
+    "selectLoading": "univer-select-loading",
+    "selectArrowIcon": "univer-select-arrow-icon",
+    "selectLoadingIcon": "univer-select-loading-icon",
+    "selectSelectionPlaceholder": "univer-select-selection-placeholder",
+    "selectSelectionSearchInput": "univer-select-selection-search-input",
+    "selectSingle": "univer-select-single",
+    "selectSelectionSearch": "univer-select-selection-search",
+    "selectSelectionItem": "univer-select-selection-item",
+    "selectCustomizeInput": "univer-select-customize-input",
+    "selectMultiple": "univer-select-multiple",
+    "selectSelectionItemDisabled": "univer-select-selection-item-disabled",
+    "selectSelectionOverflow": "univer-select-selection-overflow",
+    "selectSelectionOverflowItem": "univer-select-selection-overflow-item",
+    "selectSelectionSearchMirror": "univer-select-selection-search-mirror",
+    "selectAllowClear": "univer-select-allow-clear",
+    "selectClear": "univer-select-clear",
+    "selectArrow": "univer-select-arrow",
+    "selectFocused": "univer-select-focused",
+    "selectDropdown": "univer-select-dropdown",
+    "selectDropdownHidden": "univer-select-dropdown-hidden",
+    "selectItem": "univer-select-item",
+    "selectItemGroup": "univer-select-item-group",
+    "selectItemOption": "univer-select-item-option",
+    "selectItemOptionState": "univer-select-item-option-state",
+    "selectItemOptionActive": "univer-select-item-option-active",
+    "selectItemOptionDisabled": "univer-select-item-option-disabled",
+    "selectItemEmpty": "univer-select-item-empty",
+    "selectSelectionChoiceZoom": "univer-select-selection__choice-zoom",
+    "selectSelectionChoiceZoomAppear": "univer-select-selection__choice-zoom-appear",
+    "selectSelectionChoiceZoomAppearActive": "univer-select-selection__choice-zoom-appear-active",
+    "selectSelectionChoiceZoomLeave": "univer-select-selection__choice-zoom-leave",
+    "selectSelectionChoiceZoomLeaveActive": "univer-select-selection__choice-zoom-leave-active",
+    "selectDropdownSlideUpEnter": "univer-select-dropdown-slide-up-enter",
+    "selectDropdownSlideUpAppear": "univer-select-dropdown-slide-up-appear",
+    "selectDropdownSlideUpLeave": "univer-select-dropdown-slide-up-leave",
+    "selectDropdownSlideUpEnterActive": "univer-select-dropdown-slide-up-enter-active",
+    "selectDropdownPlacementBottomLeft": "univer-select-dropdown-placement-bottomLeft",
+    "selectDropdownSlideUpAppearActive": "univer-select-dropdown-slide-up-appear-active",
+    "selectDropdownPlacementBottomRight": "univer-select-dropdown-placement-bottomRight",
+    "selectDropdownSlideUpIn": "univer-select-dropdown-slide-up-in",
+    "selectDropdownSlideUpLeaveActive": "univer-select-dropdown-slide-up-leave-active",
+    "selectDropdownSlideUpOut": "univer-select-dropdown-slide-up-out",
+    "selectDropdownPlacementTopLeft": "univer-select-dropdown-placement-topLeft",
+    "selectDropdownPlacementTopRight": "univer-select-dropdown-placement-topRight",
+    "selectDropdownSlideDownIn": "univer-select-dropdown-slide-down-in",
+    "selectDropdownSlideDownOut": "univer-select-dropdown-slide-down-out"
+};
+// src/components/select/Select.tsx
+function Select(props) {
+    var value = props.value, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, onChange = props.onChange;
+    var mountContainer = (0, import_react20.useContext)(ConfigContext).mountContainer;
+    return /* @__PURE__ */ import_react20.default.createElement(import_rc_select.default, {
+        prefixCls: index_module_default18.select,
+        getPopupContainer: function() {
+            return mountContainer;
+        },
+        options: options,
+        value: value,
+        menuItemSelectedIcon: null,
+        suffixIcon: /* @__PURE__ */ import_react20.default.createElement(import_icons4.MoreDownSingle, null),
+        onChange: onChange
+    });
+}
+// src/components/select-list/SelectList.tsx
+var import_icons5 = require("@univerjs/icons");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react21 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/select-list/index.module.less
+var index_module_default19 = {
+    "selectList": "univer-select-list",
+    "selectListItem": "univer-select-list-item",
+    "selectListItemIcon": "univer-select-list-item-icon",
+    "selectListItemSelect": "univer-select-list-item-select"
+};
+// src/components/select-list/SelectList.tsx
+function SelectList(props) {
+    var value = props.value, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_hideCheckMark = props.hideCheckMark, hideCheckMark = _props_hideCheckMark === void 0 ? false : _props_hideCheckMark, onChange = props.onChange;
+    function handleSelect(value2) {
+        onChange(value2);
+    }
+    return /* @__PURE__ */ import_react21.default.createElement("ul", {
+        className: index_module_default19.selectList
+    }, options.map(function(option, index) {
+        return /* @__PURE__ */ import_react21.default.createElement("li", {
+            key: index,
+            className: (0, import_clsx7.default)(index_module_default19.selectListItem, _define_property({}, index_module_default19.selectListItemSelect, value === option.value))
+        }, /* @__PURE__ */ import_react21.default.createElement("a", {
+            onClick: function() {
+                return handleSelect(option.value);
+            }
+        }, !hideCheckMark && /* @__PURE__ */ import_react21.default.createElement("span", {
+            className: index_module_default19.selectListItemIcon
+        }, value === option.value && /* @__PURE__ */ import_react21.default.createElement(import_icons5.CheckMarkSingle, null)), /* @__PURE__ */ import_react21.default.createElement("span", {
+            style: {
+                color: option.color
+            }
+        }, option.label)));
+    }));
+}
+// src/components/slider/Slider.tsx
+var import_icons6 = require("@univerjs/icons");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react23 = __toESM(require("react"));
+// src/components/tooltip/Tooltip.tsx
+var import_rc_tooltip = __toESM(require("rc-tooltip"));
+var import_react22 = __toESM(require("react"));
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/tooltip/index.module.less
+var index_module_default20 = {
+    "tooltip": "univer-tooltip",
+    "tooltipHidden": "univer-tooltip-hidden",
+    "tooltipPlacementTop": "univer-tooltip-placement-top",
+    "tooltipPlacementRight": "univer-tooltip-placement-right",
+    "tooltipPlacementBottom": "univer-tooltip-placement-bottom",
+    "tooltipPlacementLeft": "univer-tooltip-placement-left",
+    "tooltipArrow": "univer-tooltip-arrow",
+    "tooltipPlacementTopLeft": "univer-tooltip-placement-topLeft",
+    "tooltipPlacementTopRight": "univer-tooltip-placement-topRight",
+    "tooltipInner": "univer-tooltip-inner"
+};
+// src/components/tooltip/placements.tsx
+var autoAdjustOverflowTopBottom = {
+    shiftX: 0,
+    adjustY: 1
+};
+var autoAdjustOverflowLeftRight = {
+    adjustX: 1,
+    shiftY: true
+};
+var targetOffset = [
+    0,
+    0
+];
+var placements = {
+    left: {
+        points: [
+            "cr",
+            "cl"
+        ],
+        overflow: autoAdjustOverflowLeftRight,
+        offset: [
+            -4,
+            0
+        ],
+        targetOffset: targetOffset
+    },
+    right: {
+        points: [
+            "cl",
+            "cr"
+        ],
+        overflow: autoAdjustOverflowLeftRight,
+        offset: [
+            4,
+            0
+        ],
+        targetOffset: targetOffset
+    },
+    top: {
+        points: [
+            "bc",
+            "tc"
+        ],
+        overflow: autoAdjustOverflowTopBottom,
+        offset: [
+            0,
+            -4
+        ],
+        targetOffset: targetOffset
+    },
+    bottom: {
+        points: [
+            "tc",
+            "bc"
+        ],
+        overflow: autoAdjustOverflowTopBottom,
+        offset: [
+            0,
+            4
+        ],
+        targetOffset: targetOffset
+    }
+};
+// src/components/tooltip/Tooltip.tsx
+var Tooltip = function(props) {
+    var children = props.children, _props_placement = props.placement, placement = _props_placement === void 0 ? "top" : _props_placement, title = props.title;
+    var mountContainer = (0, import_react22.useContext)(ConfigContext).mountContainer;
+    return /* @__PURE__ */ import_react22.default.createElement(import_rc_tooltip.default, {
+        prefixCls: index_module_default20.tooltip,
+        getTooltipContainer: function() {
+            return mountContainer;
+        },
+        overlay: /* @__PURE__ */ import_react22.default.createElement("div", {
+            className: index_module_default20.tooltipContent
+        }, typeof title === "function" ? title() : title),
+        builtinPlacements: placements,
+        placement: placement,
+        mouseEnterDelay: 0.2,
+        showArrow: true,
+        destroyTooltipOnHide: true
+    }, children);
+};
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/components/slider/index.module.less
+var index_module_default21 = {
+    "sliderWidth": "116",
+    "sliderHandleSize": "12",
+    "slider": "univer-slider",
+    "sliderRail": "univer-slider-rail",
+    "sliderInnerRail": "univer-slider-inner-rail",
+    "sliderHandle": "univer-slider-handle",
+    "sliderResetPoint": "univer-slider-reset-point",
+    "sliderValue": "univer-slider-value",
+    "dropdownOpen": "univer-dropdown-open",
+    "sliderShortcuts": "univer-slider-shortcuts",
+    "sliderShortcut": "univer-slider-shortcut",
+    "sliderShortcutIcon": "univer-slider-shortcut-icon",
+    "sliderShortcutActive": "univer-slider-shortcut-active"
+};
+// src/components/slider/Slider.tsx
+function Slider(props) {
+    var value = props.value, _props_min = props.min, min = _props_min === void 0 ? 0 : _props_min, _props_max = props.max, max = _props_max === void 0 ? 400 : _props_max, _props_resetPoint = props.resetPoint, resetPoint = _props_resetPoint === void 0 ? 100 : _props_resetPoint, shortcuts = props.shortcuts, onChange = props.onChange;
+    var sliderInnerRailRef = (0, import_react23.useRef)(null);
+    var _ref = (0, import_react23.useContext)(ConfigContext), locale2 = _ref.locale;
+    function handleReset() {
+        onChange && onChange(resetPoint);
+    }
+    function handleStep(offset2) {
+        var result = value + offset2;
+        if (value + offset2 <= min) {
+            result = min;
+        } else if (value + offset2 >= max) {
+            result = max;
+        }
+        onChange && onChange(result);
+    }
+    var offset = (0, import_react23.useMemo)(function() {
+        if (value <= resetPoint) {
+            var ratio = 50 / (resetPoint - min);
+            return (value - min) * ratio;
+        }
+        if (value <= max) {
+            return resetPoint * 0.5 + (value - resetPoint) / (max - resetPoint) * 50;
+        }
+    }, [
+        min,
+        max,
+        resetPoint,
+        value
+    ]);
+    function handleMouseDown(e) {
+        e.preventDefault();
+        var rail = sliderInnerRailRef.current;
+        var isDragging = true;
+        function onMouseMove(e2) {
+            if (isDragging) {
+                var pureOffsetX = e2.clientX - rail.getBoundingClientRect().x;
+                var offsetX = pureOffsetX;
+                if (offsetX <= 0) {
+                    offsetX = 0;
+                } else if (offsetX >= index_module_default21.sliderWidth) {
+                    offsetX = index_module_default21.sliderWidth;
+                }
+                var ratio = offsetX / index_module_default21.sliderWidth;
+                var result = 0;
+                if (ratio <= 0.5) {
+                    result = min + ratio * (resetPoint - min) * 2;
+                } else {
+                    result = resetPoint + (ratio - 0.5) * (max - resetPoint) * 2;
+                }
+                onChange && onChange(Math.ceil(result));
+            }
+        }
+        function onMouseUp() {
+            isDragging = false;
+            document.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        }
+        function onMouseOut(e2) {
+            e2.relatedTarget === null && onMouseUp();
+        }
+        document.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+        window.addEventListener("mouseout", onMouseOut);
+    }
+    return /* @__PURE__ */ import_react23.default.createElement("div", {
+        className: index_module_default21.slider
+    }, /* @__PURE__ */ import_react23.default.createElement(Button, {
+        type: "text",
+        size: "small",
+        disabled: value <= min,
+        onClick: function() {
+            return handleStep(-10);
+        }
+    }, /* @__PURE__ */ import_react23.default.createElement(import_icons6.ReduceSingle, null)), /* @__PURE__ */ import_react23.default.createElement("div", {
+        className: index_module_default21.sliderRail
+    }, /* @__PURE__ */ import_react23.default.createElement("div", {
+        ref: sliderInnerRailRef,
+        role: "track",
+        className: index_module_default21.sliderInnerRail
+    }, /* @__PURE__ */ import_react23.default.createElement(Tooltip, {
+        title: "".concat(locale2.design.Slider.resetTo, " ").concat(resetPoint, "%")
+    }, /* @__PURE__ */ import_react23.default.createElement("a", {
+        className: index_module_default21.sliderResetPoint,
+        role: "reset button",
+        onClick: handleReset
+    })), /* @__PURE__ */ import_react23.default.createElement("div", {
+        className: index_module_default21.sliderHandle,
+        role: "handle",
+        style: {
+            left: "".concat(offset, "%")
+        },
+        onMouseDown: handleMouseDown
+    }))), /* @__PURE__ */ import_react23.default.createElement(Button, {
+        type: "text",
+        size: "small",
+        disabled: value >= max,
+        onClick: function() {
+            return handleStep(10);
+        }
+    }, /* @__PURE__ */ import_react23.default.createElement(import_icons6.IncreaseSingle, null)), /* @__PURE__ */ import_react23.default.createElement(Dropdown, {
+        placement: "topLeft",
+        overlay: /* @__PURE__ */ import_react23.default.createElement("div", {
+            className: index_module_default21.sliderShortcuts
+        }, shortcuts === null || shortcuts === void 0 ? void 0 : shortcuts.map(function(item) {
+            return /* @__PURE__ */ import_react23.default.createElement("a", {
+                key: item,
+                className: (0, import_clsx8.default)(index_module_default21.sliderShortcut, item === value ? index_module_default21.sliderShortcutActive : ""),
+                onClick: function() {
+                    return onChange && onChange(item);
+                }
+            }, item === value && /* @__PURE__ */ import_react23.default.createElement("span", {
+                className: index_module_default21.sliderShortcutIcon
+            }, "✔"), /* @__PURE__ */ import_react23.default.createElement("span", null, item, "%"));
+        }))
+    }, /* @__PURE__ */ import_react23.default.createElement("a", {
+        className: index_module_default21.sliderValue
+    }, value, "%")));
+}
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/themes/default.module.less
+var default_module_default = {
+    "red50": "#fee7e7",
+    "red100": "#fdcece",
+    "red200": "#fb9d9d",
+    "red300": "#fa7979",
+    "red400": "#fe4b4b",
+    "red500": "#f30b0b",
+    "red600": "#e30909",
+    "red700": "#cd0f0f",
+    "red800": "#b20000",
+    "red900": "#9d0000",
+    "orange50": "#fef0e6",
+    "orange100": "#fee1cd",
+    "orange200": "#fdc49b",
+    "orange300": "#fca669",
+    "orange400": "#ff8c51",
+    "orange500": "#fb8937",
+    "orange600": "#f96800",
+    "orange700": "#df5d00",
+    "orange800": "#cc4f10",
+    "orange900": "#b24000",
+    "gold50": "#fef6e6",
+    "gold100": "#feeecd",
+    "gold200": "#fddc9b",
+    "gold300": "#fccb69",
+    "gold400": "#ffbd37",
+    "gold500": "#faad14",
+    "gold600": "#e59b07",
+    "gold700": "#c68400",
+    "gold800": "#a97100",
+    "gold900": "#8f5f00",
+    "yellow50": "#fefbe6",
+    "yellow100": "#fef7cd",
+    "yellow200": "#fdf09b",
+    "yellow300": "#fce869",
+    "yellow400": "#fbe137",
+    "yellow500": "#f9d700",
+    "yellow600": "#ebc301",
+    "yellow700": "#d8b300",
+    "yellow800": "#c5a300",
+    "yellow900": "#b19401",
+    "verdancy50": "#f7fde8",
+    "verdancy100": "#effbd0",
+    "verdancy200": "#def6a2",
+    "verdancy300": "#cef273",
+    "verdancy400": "#beee44",
+    "verdancy500": "#a4dc16",
+    "verdancy600": "#8bbb11",
+    "verdancy700": "#7aa017",
+    "verdancy800": "#688c0d",
+    "verdancy900": "#58770a",
+    "green50": "#effce8",
+    "green100": "#dff9d2",
+    "green200": "#bff3a5",
+    "green300": "#9fed78",
+    "green400": "#7fe74b",
+    "green500": "#59d01e",
+    "green600": "#49b811",
+    "green700": "#409f11",
+    "green800": "#398712",
+    "green900": "#317310",
+    "jiqing50": "#e8fcfc",
+    "jiqing100": "#d1fafa",
+    "jiqing200": "#a3f5f5",
+    "jiqing300": "#76efef",
+    "jiqing400": "#2aeaea",
+    "jiqing500": "#1cd8d8",
+    "jiqing600": "#00bbbb",
+    "jiqing700": "#009e9e",
+    "jiqing800": "#008a8a",
+    "jiqing900": "#007676",
+    "blue50": "#e5f3ff",
+    "blue100": "#cce6ff",
+    "blue200": "#99ceff",
+    "blue300": "#66b5ff",
+    "blue400": "#339cff",
+    "blue500": "#188fff",
+    "blue600": "#0081fa",
+    "blue700": "#0072de",
+    "blue800": "#0063c0",
+    "blue900": "#0053a0",
+    "hyacinth50": "#e8ecfd",
+    "hyacinth100": "#d0d9fb",
+    "hyacinth200": "#a2b3f6",
+    "hyacinth300": "#738df2",
+    "hyacinth400": "#4567ed",
+    "hyacinth500": "#2f55eb",
+    "hyacinth600": "#133de3",
+    "hyacinth700": "#012bd2",
+    "hyacinth800": "#0025b7",
+    "hyacinth900": "#001f9c",
+    "purple50": "#f1eafa",
+    "purple100": "#e3d5f6",
+    "purple200": "#c7abed",
+    "purple300": "#aa82e3",
+    "purple400": "#9e6de3",
+    "purple500": "#894ede",
+    "purple600": "#7735d4",
+    "purple700": "#6721cb",
+    "purple800": "#510eb0",
+    "purple900": "#3f0198",
+    "magenta50": "#fde8f3",
+    "magenta100": "#fbd0e8",
+    "magenta200": "#f6a2d0",
+    "magenta300": "#f273b9",
+    "magenta400": "#f248a6",
+    "magenta500": "#e7258f",
+    "magenta600": "#d4157e",
+    "magenta700": "#c1026b",
+    "magenta800": "#a1095c",
+    "magenta900": "#8f0550",
+    "grey50": "#f9f9f9",
+    "grey100": "#f5f5f5",
+    "grey200": "#e5e5e5",
+    "grey300": "#e8e8e8",
+    "grey400": "#cccccc",
+    "grey500": "#b2b2b2",
+    "grey600": "#999999",
+    "grey700": "#8b8b8b",
+    "grey800": "#7d7d7d",
+    "grey900": "#6f6f6f",
+    "grey950": "#606060",
+    "grey1000": "#505050",
+    "colorBlack": "#35322b",
+    "colorWhite": "#ffffff",
+    "boxShadowBase": "0 4px 12px rgba(53, 50, 43, 0.08)",
+    "boxShadowLg": "0 4px 24px 0 rgba(53, 50, 43, 0.08)",
+    "bgColor": "#f5f5f5",
+    "bgColorHover": "#e8e8e8",
+    "bgColorSecondary": "#ffffff",
+    "textColor": "#35322b",
+    "textColorSecondary": "#999999",
+    "textColorTertiary": "#e5e5e5",
+    "borderColor": "#e5e5e5",
+    "scrollbarColor": "#cccccc",
+    "scrollbarColorHover": "#b2b2b2",
+    "scrollbarColorActive": "#999999",
+    "borderRadiusBase": "4px",
+    "borderRadiusLg": "8px",
+    "borderRadiusXl": "12px",
+    "marginXl": "24px",
+    "marginLg": "20px",
+    "marginBase": "16px",
+    "marginSm": "12px",
+    "marginXs": "8px",
+    "marginXxs": "4px",
+    "paddingXl": "20px",
+    "paddingLg": "16px",
+    "paddingBase": "12px",
+    "paddingSm": "8px",
+    "paddingXs": "4px",
+    "fontSizeXxl": "20px",
+    "fontSizeXl": "18px",
+    "fontSizeLg": "16px",
+    "fontSizeBase": "15px",
+    "fontSizeSm": "14px",
+    "fontSizeXs": "13px",
+    "fontSizeXxs": "12px",
+    "breakpointXs": "768px",
+    "breakpointSm": "1024px",
+    "breakpointBase": "1280px",
+    "breakpointLg": "1536px",
+    "infoColor": "#339cff",
+    "successColor": "#59d01e",
+    "warningColor": "#ffbd37",
+    "errorColor": "#fe4b4b",
+    "primaryColor": "#0072de",
+    "primaryColorHover": "#0081fa",
+    "linkColor": "#188fff",
+    "loopColor1": "#9e6de3",
+    "loopColor2": "#49b811",
+    "loopColor3": "#188fff",
+    "loopColor4": "#ffbd37",
+    "loopColor5": "#f273b9",
+    "loopColor6": "#00bbbb",
+    "loopColor7": "#ff8c51",
+    "loopColor8": "#7d7d7d",
+    "loopColor9": "#2f55eb",
+    "loopColor10": "#fa7979",
+    "loopColor11": "#8bbb11",
+    "loopColor12": "#d8b300"
+};
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/themes/green.module.less
+var green_module_default = {
+    "red50": "#fee7e7",
+    "red100": "#fdcece",
+    "red200": "#fb9d9d",
+    "red300": "#fa7979",
+    "red400": "#fe4b4b",
+    "red500": "#f30b0b",
+    "red600": "#e30909",
+    "red700": "#cd0f0f",
+    "red800": "#b20000",
+    "red900": "#9d0000",
+    "orange50": "#fef0e6",
+    "orange100": "#fee1cd",
+    "orange200": "#fdc49b",
+    "orange300": "#fca669",
+    "orange400": "#ff8c51",
+    "orange500": "#fb8937",
+    "orange600": "#f96800",
+    "orange700": "#df5d00",
+    "orange800": "#cc4f10",
+    "orange900": "#b24000",
+    "gold50": "#fef6e6",
+    "gold100": "#feeecd",
+    "gold200": "#fddc9b",
+    "gold300": "#fccb69",
+    "gold400": "#ffbd37",
+    "gold500": "#faad14",
+    "gold600": "#e59b07",
+    "gold700": "#c68400",
+    "gold800": "#a97100",
+    "gold900": "#8f5f00",
+    "yellow50": "#fefbe6",
+    "yellow100": "#fef7cd",
+    "yellow200": "#fdf09b",
+    "yellow300": "#fce869",
+    "yellow400": "#fbe137",
+    "yellow500": "#f9d700",
+    "yellow600": "#ebc301",
+    "yellow700": "#d8b300",
+    "yellow800": "#c5a300",
+    "yellow900": "#b19401",
+    "verdancy50": "#f7fde8",
+    "verdancy100": "#effbd0",
+    "verdancy200": "#def6a2",
+    "verdancy300": "#cef273",
+    "verdancy400": "#beee44",
+    "verdancy500": "#a4dc16",
+    "verdancy600": "#8bbb11",
+    "verdancy700": "#7aa017",
+    "verdancy800": "#688c0d",
+    "verdancy900": "#58770a",
+    "green50": "#effce8",
+    "green100": "#dff9d2",
+    "green200": "#bff3a5",
+    "green300": "#9fed78",
+    "green400": "#7fe74b",
+    "green500": "#59d01e",
+    "green600": "#49b811",
+    "green700": "#409f11",
+    "green800": "#398712",
+    "green900": "#317310",
+    "jiqing50": "#e8fcfc",
+    "jiqing100": "#d1fafa",
+    "jiqing200": "#a3f5f5",
+    "jiqing300": "#76efef",
+    "jiqing400": "#2aeaea",
+    "jiqing500": "#1cd8d8",
+    "jiqing600": "#00bbbb",
+    "jiqing700": "#009e9e",
+    "jiqing800": "#008a8a",
+    "jiqing900": "#007676",
+    "blue50": "#e5f3ff",
+    "blue100": "#cce6ff",
+    "blue200": "#99ceff",
+    "blue300": "#66b5ff",
+    "blue400": "#339cff",
+    "blue500": "#188fff",
+    "blue600": "#0081fa",
+    "blue700": "#0072de",
+    "blue800": "#0063c0",
+    "blue900": "#0053a0",
+    "hyacinth50": "#e8ecfd",
+    "hyacinth100": "#d0d9fb",
+    "hyacinth200": "#a2b3f6",
+    "hyacinth300": "#738df2",
+    "hyacinth400": "#4567ed",
+    "hyacinth500": "#2f55eb",
+    "hyacinth600": "#133de3",
+    "hyacinth700": "#012bd2",
+    "hyacinth800": "#0025b7",
+    "hyacinth900": "#001f9c",
+    "purple50": "#f1eafa",
+    "purple100": "#e3d5f6",
+    "purple200": "#c7abed",
+    "purple300": "#aa82e3",
+    "purple400": "#9e6de3",
+    "purple500": "#894ede",
+    "purple600": "#7735d4",
+    "purple700": "#6721cb",
+    "purple800": "#510eb0",
+    "purple900": "#3f0198",
+    "magenta50": "#fde8f3",
+    "magenta100": "#fbd0e8",
+    "magenta200": "#f6a2d0",
+    "magenta300": "#f273b9",
+    "magenta400": "#f248a6",
+    "magenta500": "#e7258f",
+    "magenta600": "#d4157e",
+    "magenta700": "#c1026b",
+    "magenta800": "#a1095c",
+    "magenta900": "#8f0550",
+    "grey50": "#f9f9f9",
+    "grey100": "#f5f5f5",
+    "grey200": "#e5e5e5",
+    "grey300": "#e8e8e8",
+    "grey400": "#cccccc",
+    "grey500": "#b2b2b2",
+    "grey600": "#999999",
+    "grey700": "#8b8b8b",
+    "grey800": "#7d7d7d",
+    "grey900": "#6f6f6f",
+    "grey950": "#606060",
+    "grey1000": "#505050",
+    "colorBlack": "#35322b",
+    "colorWhite": "#ffffff",
+    "boxShadowBase": "0 4px 12px rgba(53, 50, 43, 0.08)",
+    "boxShadowLg": "0 4px 24px 0 rgba(53, 50, 43, 0.08)",
+    "bgColor": "#f5f5f5",
+    "bgColorHover": "#e8e8e8",
+    "bgColorSecondary": "#ffffff",
+    "textColor": "#35322b",
+    "textColorSecondary": "#999999",
+    "textColorTertiary": "#e5e5e5",
+    "borderColor": "#e5e5e5",
+    "scrollbarColor": "#cccccc",
+    "scrollbarColorHover": "#b2b2b2",
+    "scrollbarColorActive": "#999999",
+    "borderRadiusBase": "4px",
+    "borderRadiusLg": "8px",
+    "borderRadiusXl": "12px",
+    "marginXl": "24px",
+    "marginLg": "20px",
+    "marginBase": "16px",
+    "marginSm": "12px",
+    "marginXs": "8px",
+    "marginXxs": "4px",
+    "paddingXl": "20px",
+    "paddingLg": "16px",
+    "paddingBase": "12px",
+    "paddingSm": "8px",
+    "paddingXs": "4px",
+    "fontSizeXxl": "20px",
+    "fontSizeXl": "18px",
+    "fontSizeLg": "16px",
+    "fontSizeBase": "15px",
+    "fontSizeSm": "14px",
+    "fontSizeXs": "13px",
+    "fontSizeXxs": "12px",
+    "breakpointXs": "768px",
+    "breakpointSm": "1024px",
+    "breakpointBase": "1280px",
+    "breakpointLg": "1536px",
+    "infoColor": "#339cff",
+    "successColor": "#59d01e",
+    "warningColor": "#ffbd37",
+    "errorColor": "#fe4b4b",
+    "primaryColor": "#409f11",
+    "primaryColorHover": "#49b811",
+    "linkColor": "#188fff",
+    "loopColor1": "#9e6de3",
+    "loopColor2": "#49b811",
+    "loopColor3": "#188fff",
+    "loopColor4": "#ffbd37",
+    "loopColor5": "#f273b9",
+    "loopColor6": "#00bbbb",
+    "loopColor7": "#ff8c51",
+    "loopColor8": "#7d7d7d",
+    "loopColor9": "#2f55eb",
+    "loopColor10": "#fa7979",
+    "loopColor11": "#8bbb11",
+    "loopColor12": "#d8b300"
+};
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/design/src/themes/theme-root.module.less
+var theme_root_module_default = {
+    "theme": "univer-theme"
+};
+// src/themes/theme.ts
+function convertToDashCase(input) {
+    var dashCase = input.replace(/([A-Z])/g, function(match) {
+        return "-".concat(match.toLowerCase());
+    }).replace(/(\d+)/g, "-$1");
+    return "--".concat(dashCase);
+}
+function convertHexToRgb(input) {
+    if (input.startsWith("#")) {
+        var hex = input.replace("#", "");
+        var r = parseInt(hex.substring(0, 2), 16);
+        var g = parseInt(hex.substring(2, 4), 16);
+        var b = parseInt(hex.substring(4, 6), 16);
+        return "".concat(r, ", ").concat(g, ", ").concat(b);
+    }
+    return input;
+}
+var Theme = /*#__PURE__*/ function() {
+    function Theme() {
+        _class_call_check(this, Theme);
+        _define_property(this, "_styleSheet", null);
+        _define_property(this, "_themeRootName", theme_root_module_default.theme);
+        var $style = document.createElement("style");
+        $style.id = this._themeRootName;
+        document.head.appendChild($style);
+        this._styleSheet = $style;
+    }
+    _create_class(Theme, [
+        {
+            key: "setTheme",
+            value: function setTheme(root, theme) {
+                if (!this._styleSheet) return;
+                root.classList.remove(this._themeRootName);
+                root.classList.add(this._themeRootName);
+                this._styleSheet.innerHTML = "";
+                this._styleSheet.innerHTML = ".".concat(this._themeRootName, " {").concat(Object.keys(theme).map(function(key) {
+                    return "".concat(convertToDashCase(key), ": ").concat(convertHexToRgb(theme[key]), ";");
+                }).join(""), "}");
+            }
+        }
+    ]);
+    return Theme;
+}();
+var themeInstance = new Theme();