refactor: refactor InputNumber (#5032)

Co-authored-by: GitHub Actions <actions@github.com>

common/shared/package.json

@@ -44,8 +44,8 @@
     },
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",
-        "@univerjs/icons": "^0.2.35",
-        "@univerjs/icons-svg": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
+        "@univerjs/icons-svg": "^0.3.2",
         "@univerjs/protocol": "0.1.45"
     }
 }

examples/package.json

@@ -35,7 +35,7 @@
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
         "@univerjs/find-replace": "workspace:*",
-        "@univerjs/icons": "0.2.35",
+        "@univerjs/icons": "0.3.2",
         "@univerjs/mockdata": "workspace:*",
         "@univerjs/network": "workspace:*",
         "@univerjs/rpc": "workspace:*",

packages-experimental/action-recorder/package.json

@@ -68,7 +68,7 @@
     "dependencies": {
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-filter": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages-experimental/action-recorder/src/views/components/RecorderPanel.tsx

@@ -67,9 +67,9 @@ function RecordPanelImpl() {
             </div>
             <div className={styles.actionRecorderPanelTitle}>{titleText}</div>
             <div className={styles.actionRecorderPanelActions}>
-                <Button size="small" onClick={recording ? stopRecording : closePanel}>{ recording ? 'Cancel' : 'Close' }</Button>
-                <Button variant="primary" size="small" onClick={recording ? completeRecording : () => startRecording()}>{ recording ? 'Save' : 'Start' }</Button>
-                { !recording && <Button variant="primary" size="small" onClick={() => startRecording(true)}>Start(N)</Button>}
+                <Button onClick={recording ? stopRecording : closePanel}>{ recording ? 'Cancel' : 'Close' }</Button>
+                <Button variant="primary" onClick={recording ? completeRecording : () => startRecording()}>{ recording ? 'Save' : 'Start' }</Button>
+                { !recording && <Button variant="primary" onClick={() => startRecording(true)}>Start(N)</Button>}
             </div>
         </div>
     );

packages-experimental/debugger/package.json

@@ -68,7 +68,7 @@
         "@univerjs/docs-drawing-ui": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/mockdata": "workspace:*",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-drawing-ui": "workspace:*",

packages-experimental/uni-formula-ui/package.json

@@ -71,7 +71,7 @@
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/rpc": "workspace:*",
         "@univerjs/sheets-formula": "workspace:*",
         "@univerjs/sheets-formula-ui": "workspace:*",

packages-experimental/uni-sheets-ui/package.json

@@ -64,7 +64,7 @@
         "@univerjs/design": "workspace:*",
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-drawing-ui": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages-experimental/uni-slides-ui/package.json

@@ -62,7 +62,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/slides-ui": "workspace:*",
         "@univerjs/ui": "workspace:*",
         "@univerjs/uniui": "workspace:*"

packages-experimental/uniui/package.json

@@ -65,7 +65,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",
         "@univerjs/ui": "workspace:*",

packages/design/package.json

@@ -74,13 +74,12 @@
         "@radix-ui/react-slot": "^1.2.0",
         "@radix-ui/react-tooltip": "^1.2.0",
         "@rc-component/trigger": "^2.2.6",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
         "rc-dialog": "^9.6.0",
         "rc-dropdown": "^4.2.1",
-        "rc-input-number": "^9.3.0",
         "rc-menu": "^9.16.0",
         "rc-picker": "^4.9.0",
         "rc-select": "^14.16.4",

packages/design/src/components/avatar/__tests__/index.spec.tsx

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { afterEach, describe, expect, it } from 'vitest';
 import { cleanup, render } from '@testing-library/react';
-import React from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
 
 import { Avatar } from '../Avatar';
 

packages/design/src/components/input-number/InputNumber.stories.tsx

@@ -33,8 +33,10 @@ export const InputNumberBasic = {
     render() {
         return (
             <>
-                <InputNumber />
-                <InputNumber precision={0} />
+                <div>
+                    <InputNumber />
+                    <InputNumber precision={0} />
+                </div>
             </>
         );
     },
@@ -42,12 +44,24 @@ export const InputNumberBasic = {
 
 export const InputNumberDisabled = {
     render() {
-        return <InputNumber disabled />;
+        return (
+            <>
+                <div>
+                    <InputNumber disabled />
+                </div>
+            </>
+        );
     },
 };
 
 export const InputNumberHideControls = {
     render() {
-        return <InputNumber controls={false} />;
+        return (
+            <>
+                <div>
+                    <InputNumber controls={false} />
+                </div>
+            </>
+        );
     },
 };

packages/design/src/components/input-number/InputNumber.tsx

@@ -14,142 +14,328 @@
  * limitations under the License.
  */
 
-import type { InputNumberProps } from 'rc-input-number';
-import RcInputNumber from 'rc-input-number';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { clsx } from '../../helper/clsx';
+import { Button } from '../button/Button';
+import { Input } from '../input/Input';
 
-import styles from './index.module.less';
-
-export interface IInputNumberProps {
-    /**
-     * The className of the input
-     */
-    className?: string;
-
-    /**
-     * The input content value
-     */
-    value?: number | null;
-
-    /**
-     * The maximum value of the input
-     */
-    max?: number;
-
-    /**
-     * The minimum value of the input
-     */
+export interface IInputNumberProps
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
+    value?: number;
+    defaultValue?: number;
     min?: number;
-
-    /**
-     * The step of the input
-     * @default 1
-     */
+    max?: number;
     step?: number;
-
-    /**
-     * The precision of the input
-     */
     precision?: number;
-
-    /**
-     * Whether the input is disabled
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Whether to show the up and down buttons
-     * @default true
-     */
+    formatter?: (value: string | number | undefined) => string;
+    parser?: (displayValue: string | undefined) => string;
     controls?: boolean;
-
-    /**
-     * Callback when user click
-     * @param e
-     */
-    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-
-    /**
-     * Callback when user focus
-     * @param e
-     */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-
-    /**
-     * Callback when user blur
-     * @param e
-     */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-
-    /**
-     * Callback when user press a key
-     * @param e
-     */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-
-    /**
-     * Callback when user input
-     * @param value
-     */
+    className?: string;
+    inputClassName?: string;
+    controlsClassName?: string;
     onChange?: (value: number | null) => void;
-
-    /**
-     * Callback when user press enter
-     * @param e
-     */
-    onPressEnter?: InputNumberProps['onPressEnter'];
-
-    /**
-     * The classNames of the input
-     */
-    classNames?: InputNumberProps['classNames'];
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
-export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>((props, ref) => {
-    const {
-        className,
-        value,
-        max,
-        min,
-        step = 1,
-        precision,
-        disabled = false,
-        controls = true,
-        onClick,
-        onKeyDown,
-        onChange,
-        onPressEnter,
-        onBlur,
-        onFocus,
-        classNames,
-    } = props;
+export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
+    (
+        {
+            value,
+            defaultValue,
+            min = Number.MIN_SAFE_INTEGER,
+            max = Number.MAX_SAFE_INTEGER,
+            step = 1,
+            precision,
+            formatter,
+            parser,
+            controls = true,
+            className,
+            inputClassName,
+            controlsClassName,
+            disabled,
+            onChange,
+            onKeyDown,
+        },
+        ref
+    ) => {
+        const [internalValue, setInternalValue] = useState<number | null>(
+            value !== undefined ? value : defaultValue !== undefined ? defaultValue : null
+        );
+        const lastValidValueRef = useRef<number | null>(internalValue);
+        const [inputValue, setInputValue] = useState<string>(formatValue(internalValue));
+        const inputRef = useRef<HTMLInputElement>(null);
+        const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
+        const longPressIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
-    function handleChange(value: number | null) {
-        if (value !== null) {
-            onChange?.(value);
+        const mergedRef = (node: HTMLInputElement) => {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(node);
+                } else {
+                    ref.current = node;
+                }
+            }
+            inputRef.current = node;
+        };
+
+        // Update internal value when value prop changes
+        useEffect(() => {
+            if (value !== undefined) {
+                setInternalValue(value);
+                lastValidValueRef.current = value;
+                setInputValue(formatValue(value));
+            }
+        }, [value]);
+
+        // 当内部值变化时,如果是有效值则更新lastValidValue
+        useEffect(() => {
+            if (internalValue !== null) {
+                lastValidValueRef.current = internalValue;
+            }
+        }, [internalValue]);
+
+        // Clean up timers when component unmounts
+        useEffect(() => {
+            return () => {
+                if (longPressTimerRef.current) {
+                    clearTimeout(longPressTimerRef.current);
+                }
+                if (longPressIntervalRef.current) {
+                    clearInterval(longPressIntervalRef.current);
+                }
+            };
+        }, []);
+
+        function formatValue(val: number | null): string {
+            if (val === null || val === undefined) return '';
+
+            let formattedValue: string | number = val;
+
+            // Apply precision
+            if (precision !== undefined) {
+                formattedValue = Number(val).toFixed(precision);
+            }
+
+            // Apply custom formatter
+            if (formatter) {
+                return formatter(formattedValue);
+            }
+
+            return String(formattedValue);
         }
-    }
 
-    return (
-        <RcInputNumber
-            ref={ref}
-            prefixCls={styles.inputNumber}
-            className={className}
-            classNames={classNames}
-            value={value}
-            max={max}
-            min={min}
-            step={step}
-            precision={precision}
-            disabled={disabled}
-            controls={controls}
-            onClick={onClick}
-            onKeyDown={onKeyDown}
-            onChange={handleChange}
-            onPressEnter={onPressEnter}
-            onFocus={onFocus}
-            onBlur={onBlur}
-        />
-    );
-});
+        function parseValue(val: string): number | null {
+            if (!val) return null;
+
+            let parsedValue = val;
+
+            if (parser) {
+                parsedValue = parser(val);
+            }
+
+            try {
+                const cleanedValue = parsedValue.replace(/[^\d.-]/g, '');
+
+                const parts = cleanedValue.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: number;
+                if (precision !== undefined) {
+                    const factor = 10 ** precision;
+                    const roundedNum = Math.round(num * factor) / factor;
+
+                    const numStr = roundedNum.toString();
+                    if (numStr.includes('e')) {
+                        result = Number.parseFloat(roundedNum.toFixed(precision));
+                    } else {
+                        result = roundedNum;
+                    }
+                } else {
+                    const numStr = num.toString();
+                    if (numStr.includes('e')) {
+                        result = Number.parseFloat(num.toFixed(16).replace(/\.?0+$/, ''));
+                    } else {
+                        result = num;
+                    }
+                }
+
+                if (max !== undefined && result > max) {
+                    result = max;
+                }
+                if (min !== undefined && result < min) {
+                    result = min;
+                }
+
+                return result;
+            } catch (e) {
+                return null;
+            }
+        }
+
+        function handleInputChange(value: string) {
+            setInputValue(value);
+
+            const parsedValue = parseValue(value);
+            setInternalValue(parsedValue);
+
+            if (onChange) {
+                onChange(parsedValue);
+            }
+        }
+
+        function handleBlur() {
+            // If the input is empty or invalid, restore the last valid value
+            if (internalValue === null) {
+                const valueToRestore = lastValidValueRef.current;
+                setInternalValue(valueToRestore);
+                setInputValue(formatValue(valueToRestore));
+
+                if (onChange) {
+                    onChange(valueToRestore);
+                }
+                return;
+            }
+
+            // When blurring, format the value properly
+            let valueInRange = internalValue;
+
+            // Apply min/max constraints
+            if (max !== undefined && valueInRange > max) {
+                valueInRange = max;
+            }
+            if (min !== undefined && valueInRange < min) {
+                valueInRange = min;
+            }
+
+            if (valueInRange !== internalValue) {
+                setInternalValue(valueInRange);
+                setInputValue(formatValue(valueInRange));
+
+                if (onChange) {
+                    onChange(valueInRange);
+                }
+            } else {
+                // Just ensure the display is formatted correctly
+                setInputValue(formatValue(internalValue));
+            }
+        }
+
+        function handleStep(isUp: boolean) {
+            if (disabled) return;
+
+            const stepValue = isUp ? step : -step;
+            // When internalValue is null, use 0 as the base value or the last valid value
+            const currentValue = internalValue !== null ? internalValue : (lastValidValueRef.current !== null ? lastValidValueRef.current : 0);
+            let newValue = currentValue + stepValue;
+
+            // Apply min/max constraints
+            if (max !== undefined && newValue > max) {
+                newValue = max;
+            }
+            if (min !== undefined && newValue < min) {
+                newValue = min;
+            }
+
+            // If we've hit a limit, don't change the value
+            if (newValue === currentValue) return;
+
+            setInternalValue(newValue);
+            lastValidValueRef.current = newValue;
+            setInputValue(formatValue(newValue));
+
+            if (onChange) {
+                onChange(newValue);
+            }
+        }
+
+        // Handle key down events for arrow keys
+        function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+            if (disabled) return;
+
+            onKeyDown?.(e);
+
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                handleStep(true);
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                handleStep(false);
+            }
+        }
+
+        function handleClick(isUp: boolean) {
+            if (disabled) return;
+
+            handleStep(isUp);
+
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }
+
+        return (
+            <div className={clsx('univer-inline-block', className)}>
+                <div className="univer-relative univer-w-full">
+                    <Input
+                        ref={mergedRef}
+                        className={clsx('univer-box-border', inputClassName)}
+                        value={inputValue}
+                        disabled={disabled}
+                        onChange={handleInputChange}
+                        onBlur={handleBlur}
+                        onKeyDown={handleKeyDown}
+                    />
+
+                    {controls && (
+                        <div
+                            className={clsx(
+                                `
+                                  univer-absolute univer-right-px univer-top-px univer-box-border univer-flex
+                                  univer-h-[calc(100%-2px)] univer-w-6 univer-flex-col univer-border univer-border-y-0
+                                  univer-border-l univer-border-r-0 univer-border-solid univer-border-gray-200
+                                  univer-border-l-gray-200
+                                `,
+                                controlsClassName
+                            )}
+                        >
+                            <Button
+                                className={`
+                                  univer-relative !univer-h-1/2 univer-w-full univer-rounded-none univer-rounded-tr-md
+                                  univer-border-none !univer-bg-transparent univer-text-xs
+                                  after:univer-absolute after:-univer-bottom-px after:univer-block after:univer-h-px
+                                  after:univer-w-full after:univer-bg-gray-200 after:univer-content-['']
+                                `}
+                                tabIndex={-1}
+                                disabled={disabled || (max !== undefined && internalValue !== null && internalValue >= max)}
+                                onClick={() => handleClick(true)}
+                            >
+                                +
+                            </Button>
+                            <Button
+                                className={`
+                                  !univer-h-1/2 univer-w-full univer-rounded-none univer-rounded-br-md
+                                  univer-border-none !univer-bg-transparent univer-text-xs
+                                `}
+                                tabIndex={-1}
+                                disabled={disabled || (min !== undefined && internalValue !== null && internalValue <= min)}
+                                onClick={() => handleClick(false)}
+                            >
+                                -
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+);

packages/design/src/components/input-number/index.module.less

@@ -1,142 +0,0 @@
-.input-number {
-    display: inline-block;
-
-    // Should not exceed its parent's height.
-    max-height: 100%;
-    height: 34px;
-    margin: 0;
-    padding: 0;
-
-    font-size: 12px;
-    vertical-align: middle;
-
-    background-color: rgb(var(--bg-color-secondary));
-    border: 1px solid rgb(var(--border-color));
-    border-radius: var(--border-radius-base);
-
-    transition: all 0.3s;
-
-    &-focused,
-    &:hover {
-        border-color: rgb(var(--primary-color));
-
-        .input-number-handler-up,
-        .input-number-handler-wrap {
-            border-color: rgb(var(--primary-color));
-        }
-    }
-
-    // &-out-of-range {
-    //     .input-number-input {
-    //         color: rgb(var(--error-color));
-    //     }
-    // }
-
-    &-handler {
-        touch-action: none;
-        cursor: pointer;
-
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-        text-align: center;
-    }
-
-    &-handler-up-inner,
-    &-handler-down-inner {
-        user-select: none;
-        color: rgb(var(--text-color));
-    }
-
-    &-disabled:hover {
-        cursor: not-allowed;
-        border-color: rgb(var(--border-color));
-
-        .input-number-handler-up,
-        .input-number-handler-wrap {
-            border-color: rgb(var(--border-color));
-        }
-    }
-
-    &-input-wrap {
-        overflow: hidden;
-        height: 100%;
-    }
-
-    &-input {
-        width: 100%;
-        height: 100%;
-        padding: 0;
-
-        line-height: 34px;
-        color: rgb(var(--text-color));
-        text-align: center;
-
-        border: 0;
-        border-radius: var(--border-radius-base);
-        outline: 0;
-
-        transition: all 0.15s;
-    }
-
-    &-handler-wrap {
-        float: right;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        width: 20px;
-        height: 100%;
-
-        border-left: 1px solid rgb(var(--border-color));
-
-        transition: all 0.3s;
-    }
-
-    &-handler-up {
-        border-bottom: 1px solid rgb(var(--border-color));
-        transition: all 0.15s;
-
-        &-inner {
-            &::after {
-                content: '+';
-            }
-        }
-    }
-
-    &-handler-down {
-        transition: all 0.15s;
-
-        &-inner {
-            &::after {
-                content: '-';
-            }
-        }
-    }
-
-    .handler-disabled() {
-        opacity: 0.3;
-
-        &:hover {
-            color: #999;
-            border-color: rgb(var(--grey-200));
-        }
-    }
-
-    &-handler-down-disabled,
-    &-handler-up-disabled {
-        .handler-disabled();
-    }
-
-    &-disabled {
-        .input-number-input {
-            cursor: not-allowed;
-        }
-
-        .input-number-handler {
-            .handler-disabled();
-        }
-    }
-}

packages/design/src/components/input/Input.tsx

@@ -14,20 +14,43 @@
  * limitations under the License.
  */
 
+import type { VariantProps } from 'class-variance-authority';
 import { CloseSingle } from '@univerjs/icons';
-import React from 'react';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
 import { clsx } from '../../helper/clsx';
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'> {
+export const inputVariants = cva(
+    `
+      univer-box-border univer-w-full univer-rounded-md univer-border univer-border-solid univer-border-gray-200
+      univer-bg-white univer-transition-colors univer-duration-200
+      focus:univer-border-primary-500 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-500/20
+      placeholder:univer-text-gray-400
+    `,
+    {
+        variants: {
+            size: {
+                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',
+        },
+    }
+);
+
+export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'>,
+    VariantProps<typeof inputVariants> {
     autoFocus?: boolean;
     className?: string;
     style?: React.CSSProperties;
-    type?: 'text' | 'password';
+    type?: HTMLInputElement['type'];
     placeholder?: string;
     value?: string;
-    size?: 'small' | 'middle' | 'large';
     allowClear?: boolean;
     disabled?: boolean;
     onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -35,90 +58,77 @@ export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'> {
     onChange?: (value: string) => void;
 }
 
-export const Input = ({
-    autoFocus = false,
-    className,
-    style,
-    type = 'text',
-    placeholder,
-    value,
-    size = 'small',
-    allowClear = false,
-    disabled = false,
-    onClick,
-    onKeyDown,
-    onChange,
-    onFocus,
-    onBlur,
-    ...props
-}: IInputProps) => {
-    const sizeClasses = {
-        small: 'univer-h-8 univer-text-sm univer-px-2',
-        middle: 'univer-h-10 univer-text-base univer-px-3',
-        large: 'univer-h-12 univer-text-lg univer-px-4',
-    };
+export const Input = forwardRef<HTMLInputElement, IInputProps>(
+    ({
+        autoFocus = false,
+        className,
+        style,
+        type = 'text',
+        placeholder,
+        value,
+        size = 'small',
+        allowClear = false,
+        disabled = false,
+        onClick,
+        onKeyDown,
+        onChange,
+        onFocus,
+        onBlur,
+        ...props
+    }, ref) => {
+        const handleClear = (e: React.MouseEvent) => {
+            e.stopPropagation();
+            onChange?.('');
+        };
 
-    const handleClear = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onChange?.('');
-    };
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            onChange?.(e.target.value);
+        };
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        onChange?.(e.target.value);
-    };
-
-    return (
-        <div
-            className={clsx(
-                'univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md',
-                disabled && 'univer-cursor-not-allowed univer-opacity-50',
-                className
-            )}
-            style={style}
-        >
-            <input
-                type={type}
+        return (
+            <div
                 className={clsx(
-                    `
-                      univer-box-border univer-w-full univer-rounded-md univer-border univer-border-solid
-                      univer-border-gray-300 univer-bg-white
-                    `,
-                    'univer-transition-colors univer-duration-200',
-                    'placeholder:univer-text-gray-400',
-                    `
-                      focus:univer-border-blue-500 focus:univer-outline-none focus:univer-ring-2
-                      focus:univer-ring-blue-500/20
-                    `,
-                    disabled && 'univer-cursor-not-allowed univer-bg-gray-50',
-                    allowClear && 'univer-pr-8',
-                    sizeClasses[size]
+                    'univer-relative univer-inline-flex univer-w-full univer-items-center univer-rounded-md',
+                    disabled && 'univer-cursor-not-allowed univer-opacity-50',
+                    className
                 )}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                onClick={onClick}
-                onKeyDown={onKeyDown}
-                onChange={handleChange}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...props}
-            />
-            {allowClear && value && !disabled && (
-                <button
-                    type="button"
-                    onClick={handleClear}
-                    className={`
-                      univer-absolute univer-right-2 univer-flex 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
-                      focus:univer-outline-none
-                      hover:univer-text-gray-500
-                    `}
-                >
-                    <CloseSingle className="univer-size-4" />
-                </button>
-            )}
-        </div>
-    );
-};
+                style={style}
+            >
+                <input
+                    ref={ref}
+                    type={type}
+                    className={clsx(
+                        inputVariants({ size }),
+                        disabled && 'univer-cursor-not-allowed univer-bg-gray-50',
+                        allowClear && 'univer-pr-8'
+                    )}
+                    placeholder={placeholder}
+                    value={value}
+                    disabled={disabled}
+                    autoFocus={autoFocus}
+                    onClick={onClick}
+                    onKeyDown={onKeyDown}
+                    onChange={handleChange}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    {...props}
+                />
+                {allowClear && value && !disabled && (
+                    <button
+                        type="button"
+                        onClick={handleClear}
+                        className={`
+                          univer-absolute univer-right-2 univer-flex 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
+                          focus:univer-outline-none
+                          hover:univer-text-gray-500
+                        `}
+                    >
+                        <CloseSingle className="univer-size-4" />
+                    </button>
+                )}
+            </div>
+        );
+    }
+);

packages/design/src/components/message/Message.tsx

@@ -38,10 +38,17 @@ export interface IMessageProps {
 
 const iconMap = {
     [MessageType.Success]: <SuccessSingle className="univer-text-green-500" />,
-    [MessageType.Info]: <InfoSingle className="univer-text-indigo-600 dark:univer-text-primary-500" />,
+    [MessageType.Info]: (
+        <InfoSingle
+            className={`
+              univer-text-indigo-600
+              dark:univer-text-primary-500
+            `}
+        />
+    ),
     [MessageType.Warning]: <WarningSingle className="univer-text-yellow-400" />,
     [MessageType.Error]: <ErrorSingle className="univer-text-red-500" />,
-    [MessageType.Loading]: <Loading className="univer-text-yellow-400 univer-animate-spin" />,
+    [MessageType.Loading]: <Loading className="univer-animate-spin univer-text-yellow-400" />,
 };
 
 const Message = ({ content, type = MessageType.Info }: IMessageProps) => {

packages/docs-drawing-ui/package.json

@@ -74,7 +74,7 @@
         "@univerjs/drawing": "workspace:*",
         "@univerjs/drawing-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/docs-hyper-link-ui/package.json

@@ -72,7 +72,7 @@
         "@univerjs/docs-hyper-link": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/docs-quick-insert-ui/package.json

@@ -75,7 +75,7 @@
         "@univerjs/drawing": "workspace:*",
         "@univerjs/drawing-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/docs-thread-comment-ui/package.json

@@ -64,7 +64,7 @@
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/thread-comment": "workspace:*",
         "@univerjs/thread-comment-ui": "workspace:*",
         "@univerjs/ui": "workspace:*"

packages/docs-ui/package.json

@@ -84,7 +84,7 @@
         "@univerjs/docs": "workspace:*",
         "@univerjs/drawing": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/drawing-ui/package.json

@@ -70,7 +70,7 @@
         "@univerjs/design": "workspace:*",
         "@univerjs/drawing": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/drawing-ui/src/views/panel/DrawingArrange.tsx

@@ -84,7 +84,7 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
             </div>
             <div className={styles.imageCommonPanelRow}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <MoveUpSingle />
                             {localeService.t('image-panel.arrange.forward')}
@@ -93,7 +93,7 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
                     </Button>
                 </div>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <MoveDownSingle />
                             {localeService.t('image-panel.arrange.backward')}
@@ -104,7 +104,7 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
             </div>
             <div className={styles.imageCommonPanelRow}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <TopmostSingle />
                             {localeService.t('image-panel.arrange.front')}
@@ -112,7 +112,7 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
                     </Button>
                 </div>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <BottomSingle />
                             {localeService.t('image-panel.arrange.back')}

packages/drawing-ui/src/views/panel/DrawingGroup.tsx

@@ -195,7 +195,7 @@ export const DrawingGroup = (props: IDrawingGroupProps) => {
             </div>
             <div className={styles.imageCommonPanelRow}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
-                    <Button style={{ display: gridDisplay(groupBtnShow) }} size="small" onClick={() => { onGroupBtnClick(); }}>
+                    <Button style={{ display: gridDisplay(groupBtnShow) }} onClick={onGroupBtnClick}>
                         <span className={styles.imageCommonPanelInline}>
                             <GroupSingle />
                             {localeService.t('image-panel.group.group')}
@@ -203,7 +203,7 @@ export const DrawingGroup = (props: IDrawingGroupProps) => {
                     </Button>
                 </div>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
-                    <Button style={{ display: gridDisplay(ungroupBtnShow) }} size="small" onClick={() => { onUngroupBtnClick(); }}>
+                    <Button style={{ display: gridDisplay(ungroupBtnShow) }} onClick={onUngroupBtnClick}>
                         <span className={styles.imageCommonPanelInline}>
                             <UngroupSingle />
                             {localeService.t('image-panel.group.unGroup')}

packages/drawing-ui/src/views/panel/ImageCropper.tsx

@@ -131,7 +131,7 @@ export const ImageCropper = (props: IImageCropperProps) => {
             </div>
             <div className={clsx(styles.imageCommonPanelRow, styles.imageCommonPanelRowVertical)}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onCropperBtnClick(cropValue as CropType); }}>
+                    <Button onClick={() => { onCropperBtnClick(cropValue as CropType); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <CreateCopySingle />
                             {localeService.t('image-panel.crop.start')}

packages/find-replace/package.json

@@ -71,7 +71,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/ui": "workspace:*"
     },
     "devDependencies": {

packages/sheets-conditional-formatting-ui/package.json

@@ -73,13 +73,13 @@
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-conditional-formatting": "workspace:*",
         "@univerjs/sheets-formula-ui": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",
         "@univerjs/ui": "workspace:*",
-        "react-grid-layout": "^1.4.4",
+        "react-grid-layout": "^1.5.1",
         "react-resizable": "^3.0.5"
     },
     "devDependencies": {

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/index.tsx

@@ -25,7 +25,7 @@ import { RemoveSheetMutation, setEndForRange, SetWorksheetActiveOperation, Sheet
 import { AddCfCommand, CFRuleType, CFSubRuleType, ConditionalFormattingRuleModel, SetCfCommand } from '@univerjs/sheets-conditional-formatting';
 import { RangeSelector } from '@univerjs/sheets-formula-ui';
 import { useDependency } from '@univerjs/ui';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import styleBase from '../index.module.less';
 import { ColorScaleStyleEditor } from './ColorScale';
 import { DataBarStyleEditor } from './DataBar';
@@ -249,17 +249,28 @@ export const RuleEdit = (props: IRuleEditProps) => {
             </div>
             <div className={styleBase.title}>{localeService.t('sheet.cf.panel.styleType')}</div>
             <div className={styleBase.mTBase}>
-                <Select className={styles.width100} value={ruleType} options={options} onChange={(e) => ruleTypeSet(e)} />
+                <Select
+                    className={styles.width100}
+                    value={ruleType}
+                    options={options}
+                    onChange={(e) => ruleTypeSet(e)}
+                />
             </div>
-            <StyleEditor interceptorManager={interceptorManager} rule={props.rule?.rule as any} onChange={onStyleChange} />
+            <StyleEditor
+                interceptorManager={interceptorManager}
+                rule={props.rule?.rule as any}
+                onChange={onStyleChange}
+            />
             <div
                 className={`
                   ${styleBase.mTBase}
                   ${styles.btnList}
                 `}
             >
-                <Button size="small" onClick={handleCancel}>{localeService.t('sheet.cf.panel.cancel')}</Button>
-                <Button className={styleBase.mLSm} size="small" variant="primary" onClick={handleSubmit}>{localeService.t('sheet.cf.panel.submit')}</Button>
+                <Button onClick={handleCancel}>{localeService.t('sheet.cf.panel.cancel')}</Button>
+                <Button className={styleBase.mLSm} variant="primary" onClick={handleSubmit}>
+                    {localeService.t('sheet.cf.panel.submit')}
+                </Button>
             </div>
         </div>
     );

packages/sheets-conditional-formatting/package.json

@@ -80,7 +80,7 @@
     },
     "devDependencies": {
         "@univerjs-infra/shared": "workspace:*",
-        "@univerjs/icons-svg": "^0.2.35",
+        "@univerjs/icons-svg": "^0.3.2",
         "rxjs": "^7.8.1",
         "typescript": "^5.8.3",
         "vite": "^6.3.0",

packages/sheets-crosshair-highlight/package.json

@@ -80,7 +80,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",
         "@univerjs/ui": "workspace:*"

packages/sheets-data-validation-ui/package.json

@@ -75,7 +75,7 @@
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-data-validation": "workspace:*",
         "@univerjs/sheets-formula-ui": "workspace:*",

packages/sheets-drawing-ui/package.json

@@ -84,7 +84,7 @@
         "@univerjs/drawing": "workspace:*",
         "@univerjs/drawing-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-drawing": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages/sheets-filter-ui/package.json

@@ -69,7 +69,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/rpc": "workspace:*",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-filter": "workspace:*",

packages/sheets-formula-ui/package.json

@@ -84,7 +84,7 @@
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-formula": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages/sheets-formula-ui/src/views/more-functions/MoreFunctions.tsx

@@ -70,17 +70,17 @@ export function MoreFunctions() {
             <div className={styles.formulaMoreFunctionsOperation}>
                 {/* TODO@Dushusir: open input params after range selector refactor */}
                 {inputParams && (
-                    <Button variant="primary" size="small" onClick={handleClickNextPrev}>
+                    <Button variant="primary" onClick={handleClickNextPrev}>
                         {localeService.t('formula.moreFunctions.next')}
                     </Button>
                 )}
                 {inputParams && (
-                    <Button size="small" onClick={handleClickNextPrev}>
+                    <Button onClick={handleClickNextPrev}>
                         {localeService.t('formula.moreFunctions.prev')}
                     </Button>
                 )}
                 {selectFunction && !!workbook && (
-                    <Button variant="primary" size="small" onClick={handleConfirm}>
+                    <Button variant="primary" onClick={handleConfirm}>
                         {localeService.t('formula.moreFunctions.confirm')}
                     </Button>
                 )}

packages/sheets-formula-ui/src/views/range-selector/index.tsx

@@ -185,7 +185,7 @@ export function RangeSelectorDialog(props: IRangeSelectorDialogProps) {
                 ))}
                 {ranges.length < maxRangeCount && (
                     <div>
-                        <Button variant="link" size="small" onClick={handleRangeAdd}>
+                        <Button variant="link" onClick={handleRangeAdd}>
                             <IncreaseSingle />
                             <span>{localeService.t('rangeSelector.addAnotherRange')}</span>
                         </Button>

packages/sheets-hyper-link-ui/package.json

@@ -85,7 +85,7 @@
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-data-validation": "workspace:*",
         "@univerjs/sheets-formula-ui": "workspace:*",

packages/sheets-numfmt-ui/package.json

@@ -73,7 +73,7 @@
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-numfmt": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-numfmt": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages/sheets-numfmt-ui/src/views/components/index.tsx

@@ -129,10 +129,10 @@ export const SheetNumfmtPanel: FC<ISheetNumfmtPanelProps> = (props) => {
             </div>
 
             <div className="btn-list m-t-14 m-b-20">
-                <Button size="small" onClick={handleCancel} className="m-r-12">
+                <Button onClick={handleCancel} className="m-r-12">
                     {t('sheet.numfmt.cancel')}
                 </Button>
-                <Button variant="primary" size="small" onClick={handleConfirm}>
+                <Button variant="primary" onClick={handleConfirm}>
                     {t('sheet.numfmt.confirm')}
                 </Button>
             </div>

packages/sheets-sort-ui/package.json

@@ -69,7 +69,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-sort": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages/sheets-thread-comment-ui/package.json

@@ -69,7 +69,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-thread-comment": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",

packages/sheets-ui/package.json

@@ -86,7 +86,7 @@
         "@univerjs/engine-formula": "workspace:*",
         "@univerjs/engine-numfmt": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/protocol": "0.1.45",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/telemetry": "workspace:*",

packages/sheets-zen-editor/package.json

@@ -84,7 +84,7 @@
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/sheets": "workspace:*",
         "@univerjs/sheets-ui": "workspace:*",
         "@univerjs/ui": "workspace:*"

packages/slides-ui/package.json

@@ -74,7 +74,7 @@
         "@univerjs/docs-ui": "workspace:*",
         "@univerjs/drawing": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/slides": "workspace:*",
         "@univerjs/ui": "workspace:*"
     },

packages/slides-ui/src/components/panels/ArrangePanel.tsx

@@ -98,7 +98,7 @@ export default function ArrangePanel(props: IProps) {
             </div>
             <div className={styles.imageCommonPanelRow}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <MoveUpSingle />
                             {localeService.t('image-panel.arrange.forward')}
@@ -107,7 +107,7 @@ export default function ArrangePanel(props: IProps) {
                     </Button>
                 </div>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <MoveDownSingle />
                             {localeService.t('image-panel.arrange.backward')}
@@ -118,7 +118,7 @@ export default function ArrangePanel(props: IProps) {
             </div>
             <div className={styles.imageCommonPanelRow}>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <TopmostSingle />
                             {localeService.t('image-panel.arrange.front')}
@@ -127,7 +127,7 @@ export default function ArrangePanel(props: IProps) {
                     </Button>
                 </div>
                 <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
-                    <Button size="small" onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
+                    <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
                         <span className={styles.imageCommonPanelInline}>
                             <BottomSingle />
                             {localeService.t('image-panel.arrange.back')}

packages/thread-comment-ui/package.json

@@ -69,7 +69,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@univerjs/thread-comment": "workspace:*",
         "@univerjs/ui": "workspace:*"
     },

packages/ui/package.json

@@ -83,7 +83,7 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@univerjs/engine-render": "workspace:*",
-        "@univerjs/icons": "^0.2.35",
+        "@univerjs/icons": "^0.3.2",
         "@wendellhu/redi": "0.17.1",
         "localforage": "^1.10.0",
         "rc-notification": "^5.6.2"

packages/ui/src/components/font-size/FontSize.tsx

@@ -45,7 +45,9 @@ export const FontSize = (props: IFontSizeProps) => {
             <InputNumber
                 className={`
                   univer-block univer-h-6 univer-border-none univer-bg-transparent univer-leading-6
-                  [&_input]:univer-bg-transparent [&_input]:univer-text-[13px]
+                  [&_input:focus]:!univer-ring-0
+                  [&_input]:univer-h-6 [&_input]:univer-w-7 [&_input]:univer-border-none [&_input]:univer-bg-transparent
+                  [&_input]:univer-p-0 [&_input]:univer-text-[13px]
                 `}
                 value={_value}
                 controls={false}

packages/ui/src/components/slider/Slider.tsx

@@ -164,7 +164,7 @@ export function Slider(props: ISliderProps) {
                 [styles.sliderDisabled]: disabled,
             })}
         >
-            <Button variant="text" size="small" disabled={value <= min || disabled} onClick={() => handleStep(-10)}>
+            <Button variant="text" disabled={value <= min || disabled} onClick={() => handleStep(-10)}>
                 <ReduceSingle />
             </Button>
 
@@ -194,7 +194,7 @@ export function Slider(props: ISliderProps) {
                 </div>
             </div>
 
-            <Button variant="text" size="small" disabled={value >= max || disabled} onClick={() => handleStep(10)}>
+            <Button variant="text" disabled={value >= max || disabled} onClick={() => handleStep(10)}>
                 <IncreaseSingle />
             </Button>
 

packages/uniscript/src/views/components/ScriptEditorPanel.tsx

@@ -94,7 +94,7 @@ export function ScriptEditorPanel() {
                 <div ref={editorContainerRef} />
             </div>
             <div className="univer-mt-2.5">
-                <Button variant="primary" size="small" onClick={startExecution}>
+                <Button variant="primary" onClick={startExecution}>
                     {localeService.t('script-panel.panel.execute')}
                 </Button>
             </div>

pnpm-lock.yaml

@@ -181,11 +181,11 @@ importers:
         specifier: ^11.0.4
         version: 11.0.4
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/icons-svg':
-        specifier: ^0.2.35
-        version: 0.2.35
+        specifier: ^0.3.2
+        version: 0.3.2
       '@univerjs/protocol':
         specifier: 0.1.45
         version: 0.1.45(@grpc/grpc-js@1.10.9)(rxjs@7.8.1)
@@ -335,8 +335,8 @@ importers:
         specifier: workspace:*
         version: link:../packages/find-replace
       '@univerjs/icons':
-        specifier: 0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: 0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/mockdata':
         specifier: workspace:*
         version: link:../mockdata
@@ -595,8 +595,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/design
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../../packages/sheets
@@ -653,8 +653,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/mockdata':
         specifier: workspace:*
         version: link:../../mockdata
@@ -808,8 +808,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/rpc':
         specifier: workspace:*
         version: link:../../packages/rpc
@@ -869,8 +869,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/docs-ui
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../../packages/sheets
@@ -924,8 +924,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/slides-ui':
         specifier: workspace:*
         version: link:../../packages/slides-ui
@@ -979,8 +979,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../../packages/sheets
@@ -1141,8 +1141,8 @@ importers:
         specifier: ^2.2.6
         version: 2.2.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -1158,9 +1158,6 @@ importers:
       rc-dropdown:
         specifier: ^4.2.1
         version: 4.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      rc-input-number:
-        specifier: ^9.3.0
-        version: 9.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       rc-menu:
         specifier: ^9.16.0
         version: 9.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -1303,8 +1300,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1377,8 +1374,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1481,8 +1478,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1527,8 +1524,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/thread-comment':
         specifier: workspace:*
         version: link:../thread-comment
@@ -1582,8 +1579,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1662,8 +1659,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1800,8 +1797,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/ui':
         specifier: workspace:*
         version: link:../ui
@@ -1959,8 +1956,8 @@ importers:
         specifier: workspace:*
         version: link:../../common/shared
       '@univerjs/icons-svg':
-        specifier: ^0.2.35
-        version: 0.2.35
+        specifier: ^0.3.2
+        version: 0.3.2
       rxjs:
         specifier: ^7.8.1
         version: 7.8.1
@@ -1989,8 +1986,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2010,8 +2007,8 @@ importers:
         specifier: '19'
         version: 19.0.0(react@19.0.0)
       react-grid-layout:
-        specifier: ^1.4.4
-        version: 1.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^1.5.1
+        version: 1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-resizable:
         specifier: ^3.0.5
         version: 3.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -2059,8 +2056,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2157,8 +2154,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2255,8 +2252,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2341,8 +2338,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/rpc':
         specifier: workspace:*
         version: link:../rpc
@@ -2479,8 +2476,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2602,8 +2599,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2697,8 +2694,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2777,8 +2774,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-formula
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2866,8 +2863,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -2936,8 +2933,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/protocol':
         specifier: 0.1.45
         version: 0.1.45(@grpc/grpc-js@1.10.9)(rxjs@7.8.1)
@@ -2997,8 +2994,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/sheets':
         specifier: workspace:*
         version: link:../sheets
@@ -3080,8 +3077,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/slides':
         specifier: workspace:*
         version: link:../slides
@@ -3173,8 +3170,8 @@ importers:
         specifier: workspace:*
         version: link:../docs-ui
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@univerjs/thread-comment':
         specifier: workspace:*
         version: link:../thread-comment
@@ -3222,8 +3219,8 @@ importers:
         specifier: workspace:*
         version: link:../engine-render
       '@univerjs/icons':
-        specifier: ^0.2.35
-        version: 0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        specifier: ^0.3.2
+        version: 0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@wendellhu/redi':
         specifier: 0.17.1
         version: 0.17.1
@@ -3590,10 +3587,6 @@ packages:
     resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.25.0':
-    resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.25.4':
     resolution: {integrity: sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==}
     engines: {node: '>=6.9.0'}
@@ -4834,10 +4827,6 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
-  '@rc-component/mini-decimal@1.1.0':
-    resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
-    engines: {node: '>=8.x'}
-
   '@rc-component/portal@1.1.2':
     resolution: {integrity: sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==}
     engines: {node: '>=8.x'}
@@ -5585,11 +5574,11 @@ packages:
     resolution: {integrity: sha512-aEhgas7aJ6vZnNFC7K4/vMGDGyOiqWcYZPpIWrTKuTAlsvDNKy2GFDqh9smL+iq069ZvR0YzEeq0B8NJlLzjFA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@univerjs/icons-svg@0.2.35':
-    resolution: {integrity: sha512-fsILbeD9RGdqeDb8ga+VqhNSAEWhLnodYPEjP3eOZbJTHm070f0DUX8SiuaaVchkvrQNIVUW4KTLdoK5HX2f5Q==}
+  '@univerjs/icons-svg@0.3.2':
+    resolution: {integrity: sha512-MCEcqWvsqjBOQsDPql9l4se4cH1DrZYrUH5tAOjCUYPeZsE/ylZp0khm6su3U+1gyPSUYkbR52IwdIg2QF6TRw==}
 
-  '@univerjs/icons@0.2.35':
-    resolution: {integrity: sha512-FEY22AUd0KwL1NpHL4hS0STJC0Mw2sWzCUlI0PC2Nyq104KR3CfsGhSsuhPgHmz2yov9GoEospVqadMO9QPuaA==}
+  '@univerjs/icons@0.3.2':
+    resolution: {integrity: sha512-QngW2B7xj1FAEmHkgNKL8cKdq9nCUPlAA1C50ZZn3FlYwvX3d+miP7AcRXT5wJIiNO1G1Q6KLVDg9ehXpNeAjw==}
     peerDependencies:
       react: '19'
       react-dom: '19'
@@ -9808,18 +9797,6 @@ packages:
       react: '19'
       react-dom: '19'
 
-  rc-input-number@9.3.0:
-    resolution: {integrity: sha512-JQ363ywqRyxwgVxpg2z2kja3CehTpYdqR7emJ/6yJjRdbvo+RvfE83fcpBCIJRq3zLp8SakmEXq60qzWyZ7Usw==}
-    peerDependencies:
-      react: '19'
-      react-dom: '19'
-
-  rc-input@1.6.3:
-    resolution: {integrity: sha512-wI4NzuqBS8vvKr8cljsvnTUqItMfG1QbJoxovCgL+DX4eVUcHIjVwharwevIxyy7H/jbLryh+K7ysnJr23aWIA==}
-    peerDependencies:
-      react: '19'
-      react-dom: '19'
-
   rc-menu@9.16.0:
     resolution: {integrity: sha512-vAL0yqPkmXWk3+YKRkmIR8TYj3RVdEt3ptG2jCJXWNAvQbT0VJJdRyHZ7kG/l1JsZlB+VJq/VcYOo69VR4oD+w==}
     peerDependencies:
@@ -9971,12 +9948,6 @@ packages:
       react: '19'
       react-dom: '19'
 
-  react-grid-layout@1.4.4:
-    resolution: {integrity: sha512-7+Lg8E8O8HfOH5FrY80GCIR1SHTn2QnAYKh27/5spoz+OHhMmEhU/14gIkRzJOtympDPaXcVRX/nT1FjmeOUmQ==}
-    peerDependencies:
-      react: '19'
-      react-dom: '19'
-
   react-grid-layout@1.5.1:
     resolution: {integrity: sha512-4Fr+kKMk0+m1HL/BWfHxi/lRuaOmDNNKQDcu7m12+NEYcen20wIuZFo789u3qWCyvUsNUxCiyf0eKq4WiJSNYw==}
     peerDependencies:
@@ -11617,10 +11588,6 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/runtime@7.25.0':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
   '@babel/runtime@7.25.4':
     dependencies:
       regenerator-runtime: 0.14.1
@@ -12954,10 +12921,6 @@ snapshots:
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@rc-component/mini-decimal@1.1.0':
-    dependencies:
-      '@babel/runtime': 7.26.0
-
   '@rc-component/portal@1.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -13820,9 +13783,9 @@ snapshots:
       '@typescript-eslint/types': 8.30.1
       eslint-visitor-keys: 4.2.0
 
-  '@univerjs/icons-svg@0.2.35': {}
+  '@univerjs/icons-svg@0.3.2': {}
 
-  '@univerjs/icons@0.2.35(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@univerjs/icons@0.3.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
@@ -18640,24 +18603,6 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
-  rc-input-number@9.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
-    dependencies:
-      '@babel/runtime': 7.26.0
-      '@rc-component/mini-decimal': 1.1.0
-      classnames: 2.5.1
-      rc-input: 1.6.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      rc-util: 5.43.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-
-  rc-input@1.6.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
-    dependencies:
-      '@babel/runtime': 7.25.0
-      classnames: 2.5.1
-      rc-util: 5.43.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-
   rc-menu@9.16.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@babel/runtime': 7.26.0
@@ -18846,17 +18791,6 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
-  react-grid-layout@1.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
-    dependencies:
-      clsx: 2.1.1
-      fast-equals: 4.0.3
-      prop-types: 15.8.1
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-      react-draggable: 4.4.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react-resizable: 3.0.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      resize-observer-polyfill: 1.5.1
-
   react-grid-layout@1.5.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       clsx: 2.1.1