deepsea-components 5.17.3 → 5.17.5

package/dist/components/AutoFit.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     AutoFit: ()=>AutoFit
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const AutoFit = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     var _ele_current;

package/dist/components/AutoFit.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { px, transformCSSVariable } from "../utils/index.js";
 const AutoFit = /*#__PURE__*/ forwardRef((props, ref)=>{
     var _ele_current;

package/dist/components/AutoScroll.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     AutoScroll: ()=>AutoScroll
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const external_Scroll_cjs_namespaceObject = require("./Scroll.cjs");

package/dist/components/AutoScroll.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx, getArray } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useSize } from "soda-hooks";
 import { px, transformCSSVariable } from "../utils/index.js";
 import { Scroll } from "./Scroll.js";

package/dist/components/AutoSizeTextarea.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     AutoSizeTextArea: ()=>AutoSizeTextArea
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const AutoSizeTextArea = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { className, style, ...rest } = props;

package/dist/components/AutoSizeTextarea.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { px, transformCSSVariable } from "../utils/index.js";
 const AutoSizeTextArea = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { className, style, ...rest } = props;

package/dist/components/CopyButton.cjs

@@ -38,9 +38,9 @@ __webpack_require__.d(__webpack_exports__, {
     Event: ()=>external_clipboard_namespaceObject.Event
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const external_clipboard_namespaceObject = require("clipboard");
 var external_clipboard_default = /*#__PURE__*/ __webpack_require__.n(external_clipboard_namespaceObject);
-const external_react_namespaceObject = require("react");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const CopyButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;

package/dist/components/CopyButton.d.ts

@@ -1,5 +1,5 @@
-import { Event } from "clipboard";
 import { ComponentPropsWithoutRef } from "react";
+import { Event } from "clipboard";
 export { Event } from "clipboard";
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string;

package/dist/components/CopyButton.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import clipboard_0, { Event } from "clipboard";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import clipboard_0, { Event } from "clipboard";
 import { useLatest } from "soda-hooks";
 const CopyButton = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;

package/dist/components/DraggableGrid.cjs

@@ -36,8 +36,8 @@ __webpack_require__.d(__webpack_exports__, {
     DraggableGrid: ()=>DraggableGrid
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const external_DraggableGrid_module_cjs_namespaceObject = require("./DraggableGrid.module.cjs");
 var external_DraggableGrid_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_DraggableGrid_module_cjs_namespaceObject);

package/dist/components/DraggableGrid.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { clsx, getArray, isNullable } from "deepsea-tools";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { clsx, getArray, isNullable } from "deepsea-tools";
 import { useDragMove } from "soda-hooks";
 import DraggableGrid_module from "./DraggableGrid.module.js";
 function isTheSameArray(a, b) {

package/dist/components/Echart.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
     Bar: ()=>Bar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_echarts_namespaceObject = require("echarts");
 const external_react_namespaceObject = require("react");
+const external_echarts_namespaceObject = require("echarts");
 const Echart = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { width, height, option, chart, ...rest } = props;
     const container = (0, external_react_namespaceObject.useRef)(null);

package/dist/components/Echart.d.ts

@@ -1,5 +1,5 @@
-import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
 import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from "react";
+import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
 export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
 export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
 export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;

package/dist/components/Echart.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { init } from "echarts";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { init } from "echarts";
 const Echart = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { width, height, option, chart, ...rest } = props;
     const container = useRef(null);

package/dist/components/Flow.cjs

@@ -31,9 +31,9 @@ __webpack_require__.d(__webpack_exports__, {
     Flow: ()=>Flow
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 function getGapRange(gap) {

package/dist/components/Flow.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useSize } from "soda-hooks";
 import { px, transformCSSVariable } from "../utils/index.js";
 function getGapRange(gap) {

package/dist/components/HlsPlayer.cjs

@@ -37,9 +37,9 @@ __webpack_require__.d(__webpack_exports__, {
     HlsPlayer: ()=>HlsPlayer
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const external_hls_js_namespaceObject = require("hls.js");
 var external_hls_js_default = /*#__PURE__*/ __webpack_require__.n(external_hls_js_namespaceObject);
-const external_react_namespaceObject = require("react");
 const HlsPlayer = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { src, ...rest } = props;
     const video = (0, external_react_namespaceObject.useRef)(null);

package/dist/components/HlsPlayer.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import hls_0 from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import hls_0 from "hls.js";
 const HlsPlayer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { src, ...rest } = props;
     const video = useRef(null);

package/dist/components/InfiniteScroll.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     InfiniteScroll: ()=>InfiniteScroll
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const InfiniteScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props;

package/dist/components/InfiniteScroll.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useSize } from "soda-hooks";
 const InfiniteScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props;

package/dist/components/LoopSwiper.cjs

@@ -28,11 +28,10 @@ __webpack_require__.d(__webpack_exports__, {
     LoopSwiper: ()=>LoopSwiper
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
-const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
-    const { className, style, children, direction, period, reverse, gap, ...rest } = props;
+const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
     const wrapper = (0, external_react_namespaceObject.useRef)(null);
     const container = (0, external_react_namespaceObject.useRef)(null);
     const [swiper, setSwiper] = (0, external_react_namespaceObject.useState)(false);
@@ -69,75 +68,81 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         ref: wrapper,
         className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(-100%);
+                            transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(100%);
+                            transform: translateX(calc(100% + ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(-100%);
+                            transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(100%);
+                            transform: translateY(calc(100% + ${gap}px));
                         }
                     }
-                `, className),
-        style: {
-            display: "flex",
-            flexDirection,
-            gap,
-            ...style
-        },
+
+                    ${pauseOnHover ? `&:hover > * {
+                        animation-play-state: paused;
+                    }` : ""}
+                `, className, rootClassName),
         ...rest,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 ref: container,
-                style: {
-                    display: "flex",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount
-                },
+                className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                        display: flex;
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `, containerClassName),
                 children: children
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                style: {
-                    display: swiper ? "flex" : "none",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount
-                },
+                className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                        display: ${swiper ? "flex" : "none"};
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `, mirrorClassName),
                 children: children
             })
         ]
     });
-});
+};
 exports.LoopSwiper = __webpack_exports__.LoopSwiper;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "LoopSwiper"

package/dist/components/LoopSwiper.d.ts

@@ -1,9 +1,16 @@
-import { CSSProperties, HTMLAttributes } from "react";
-export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+import { ComponentProps, FC } from "react";
+export interface LoopSwiperClassNames {
+    root?: string;
+    container?: string;
+    mirror?: string;
+}
+export interface LoopSwiperProps extends ComponentProps<"div"> {
+    classNames?: LoopSwiperClassNames;
     direction?: "horizontal" | "vertical";
     reverse?: boolean;
     period: number;
-    gap?: CSSProperties["gap"];
+    pauseOnHover?: boolean;
+    gap?: number;
 }
 /** 循环播放组件 */
-export declare const LoopSwiper: import("react").ForwardRefExoticComponent<LoopSwiperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LoopSwiper: FC<LoopSwiperProps>;

package/dist/components/LoopSwiper.js

@@ -1,10 +1,9 @@
 "use client"
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { className, style, children, direction, period, reverse, gap, ...rest } = props;
+const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
     const wrapper = useRef(null);
     const container = useRef(null);
     const [swiper, setSwiper] = useState(false);
@@ -41,73 +40,79 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
     return /*#__PURE__*/ jsxs("div", {
         ref: wrapper,
         className: clsx(css`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(-100%);
+                            transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(100%);
+                            transform: translateX(calc(100% + ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(-100%);
+                            transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(100%);
+                            transform: translateY(calc(100% + ${gap}px));
                         }
                     }
-                `, className),
-        style: {
-            display: "flex",
-            flexDirection,
-            gap,
-            ...style
-        },
+
+                    ${pauseOnHover ? `&:hover > * {
+                        animation-play-state: paused;
+                    }` : ""}
+                `, className, rootClassName),
         ...rest,
         children: [
             /*#__PURE__*/ jsx("div", {
                 ref: container,
-                style: {
-                    display: "flex",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount
-                },
+                className: clsx(css`
+                        display: flex;
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `, containerClassName),
                 children: children
             }),
             /*#__PURE__*/ jsx("div", {
-                style: {
-                    display: swiper ? "flex" : "none",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount
-                },
+                className: clsx(css`
+                        display: ${swiper ? "flex" : "none"};
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `, mirrorClassName),
                 children: children
             })
         ]
     });
-});
+};
 export { LoopSwiper };

package/dist/components/ReadSheet.d.ts

@@ -1,5 +1,5 @@
-import { WorkBookData, WorkSheetData } from "deepsea-tools";
 import { FC } from "react";
+import { WorkBookData, WorkSheetData } from "deepsea-tools";
 import { InputFileProps } from "./InputFile";
 export interface ReadSheetProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
     onValueChange?: <Sheet = WorkSheetData>(data: WorkBookData<Sheet>) => void;

package/dist/components/Scroll.cjs

@@ -71,9 +71,9 @@ var __webpack_exports__ = {};
         Scrollbar: ()=>smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default.a
     });
     var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("react/jsx-runtime");
-    var _emotion_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("@emotion/css");
-    var deepsea_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("deepsea-tools");
-    var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("react");
+    var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("react");
+    var _emotion_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("@emotion/css");
+    var deepsea_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("deepsea-tools");
     var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("smooth-scrollbar");
     var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/ __webpack_require__.n(smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__);
     var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("@/utils");
@@ -87,21 +87,21 @@ var __webpack_exports__ = {};
         return smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_3__.forwardRef)((props, ref)=>{
+    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref)=>{
         const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
         const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
-        const ele = (0, react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
-        const bar = (0, react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useLayoutEffect)(()=>{
+        const ele = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        const bar = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(()=>{
             bar.current = smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default().init(ele.current, scrollbarOptions);
             return ()=>{
                 var _bar_current;
                 return null == (_bar_current = bar.current) ? void 0 : _bar_current.destroy();
             };
         }, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useImperativeHandle)(ref, ()=>ele.current, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(()=>{
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, ()=>ele.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
             var _bar_current;
             if (!onScrollbar) return;
             null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbar);
@@ -114,7 +114,7 @@ var __webpack_exports__ = {};
         ]);
         return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
             ref: ele,
-            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_2__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_1__.css)`
+            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
                     .scrollbar-track.scrollbar-track-x {
                         ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
                     }

package/dist/components/Scroll.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import smooth_scrollbar from "smooth-scrollbar";
 import { px, transformCSSVariable } from "../utils/index.js";
 export * from "smooth-scrollbar/interfaces";

package/dist/components/ScrollMask.cjs

@@ -36,8 +36,8 @@ __webpack_require__.d(__webpack_exports__, {
     ScrollMask: ()=>ScrollMask
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const external_ScrollMask_module_cjs_namespaceObject = require("./ScrollMask.module.cjs");
 var external_ScrollMask_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_ScrollMask_module_cjs_namespaceObject);

package/dist/components/ScrollMask.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { clsx, isNonNullable } from "deepsea-tools";
 import { useRef } from "react";
+import { clsx, isNonNullable } from "deepsea-tools";
 import { useSize } from "soda-hooks";
 import ScrollMask_module from "./ScrollMask.module.js";
 const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{

package/dist/components/SectionRing.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     SectionRing: ()=>SectionRing
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const SectionRing = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
     const s = 2 * Math.PI / c - a;

package/dist/components/SectionRing.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { drawArc } from "deepsea-tools";
 import { forwardRef } from "react";
+import { drawArc } from "deepsea-tools";
 const SectionRing = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
     const s = 2 * Math.PI / c - a;

package/dist/components/Skeleton.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     Skeleton: ()=>Skeleton
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { className, children, loading = null == children, ...rest } = props;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/Skeleton.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef } from "react";
 const Skeleton = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { className, children, loading = null == children, ...rest } = props;
     return /*#__PURE__*/ jsx("div", {

package/dist/components/TransitionNum.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     TransitionNum: ()=>TransitionNum
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const TransitionNum = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { children: num, period, numToStr, ins, ...rest } = props;
     if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("目标数字必须是整数，周期必须是正整数");

package/dist/components/TransitionNum.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { setFrameInterval } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { setFrameInterval } from "deepsea-tools";
 const TransitionNum = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children: num, period, numToStr, ins, ...rest } = props;
     if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("目标数字必须是整数，周期必须是正整数");

package/dist/components/Trapezium.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     Trapezium: ()=>Trapezium
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const Trapezium = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { top, bottom, height, borderRadius, className, style, ...rest } = props;

package/dist/components/Trapezium.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef } from "react";
 import { px, transformCSSVariable } from "../utils/index.js";
 const Trapezium = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { top, bottom, height, borderRadius, className, style, ...rest } = props;

package/dist/components/Unify.cjs

@@ -29,8 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
     UnifyConfigProvider: ()=>UnifyConfigProvider
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const UnifyConfigContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({});
 const UnifyConfigProvider = ({ className, style, children })=>{
     const { className: _className, style: _style } = (0, external_react_namespaceObject.useContext)(UnifyConfigContext);

package/dist/components/Unify.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "deepsea-tools";
 import { createContext, createElement, useContext } from "react";
+import { clsx } from "deepsea-tools";
 const UnifyConfigContext = /*#__PURE__*/ createContext({});
 const UnifyConfigProvider = ({ className, style, children })=>{
     const { className: _className, style: _style } = useContext(UnifyConfigContext);

package/dist/components/WriteSheet.cjs

@@ -27,8 +27,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     WriteSheet: ()=>WriteSheet
 });
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 function WriteSheet(props) {
     const { as, excel, onClick: _onClick, ...rest } = props;
     function onClick(e) {

package/dist/components/WriteSheet.d.ts

@@ -1,5 +1,5 @@
-import { WriteSheetParams } from "deepsea-tools";
 import { ComponentProps, JSX, JSXElementConstructor } from "react";
+import { WriteSheetParams } from "deepsea-tools";
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS;
     excel?: WriteSheetParams;

package/dist/components/WriteSheet.js

@@ -1,6 +1,6 @@
 "use client"
-import { writeSheet } from "deepsea-tools";
 import { createElement } from "react";
+import { writeSheet } from "deepsea-tools";
 function WriteSheet(props) {
     const { as, excel, onClick: _onClick, ...rest } = props;
     function onClick(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.3",
+  "version": "5.17.5",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,8 +40,8 @@
     "echarts": "^6.0.0",
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
-    "soda-hooks": "6.15.2",
-    "deepsea-tools": "5.42.4"
+    "deepsea-tools": "5.42.4",
+    "soda-hooks": "6.15.2"
   },
   "devDependencies": {
     "typescript": "^5.9.3"

package/src/components/AutoFit.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/AutoScroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 import { useSize } from "soda-hooks"

package/src/components/AutoSizeTextarea.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/CopyButton.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import ClipboardJS, { Event } from "clipboard"
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import ClipboardJS, { Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 
 export { Event } from "clipboard"

package/src/components/DraggableGrid.tsx

@@ -1,5 +1,5 @@
-import { clsx, getArray, isNullable } from "deepsea-tools"
 import { CSSProperties, ComponentProps, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { clsx, getArray, isNullable } from "deepsea-tools"
 import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"

package/src/components/Echart.tsx

@@ -1,5 +1,16 @@
 "use client"
 
+import {
+    ComponentPropsWithoutRef,
+    ForwardRefExoticComponent,
+    ForwardedRef,
+    RefAttributes,
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useLayoutEffect,
+    useRef,
+} from "react"
 import {
     BarSeriesOption,
     ComposeOption,
@@ -12,17 +23,6 @@ import {
     TooltipComponentOption,
     init,
 } from "echarts"
-import {
-    ComponentPropsWithoutRef,
-    ForwardRefExoticComponent,
-    ForwardedRef,
-    RefAttributes,
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useLayoutEffect,
-    useRef,
-} from "react"
 
 export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
 

package/src/components/Flow.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"

package/src/components/HlsPlayer.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import Hls from "hls.js"
 import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import Hls from "hls.js"
 
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string

package/src/components/InfiniteScroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { useSize } from "soda-hooks"
 
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {

package/src/components/LoopSwiper.tsx

@@ -1,19 +1,37 @@
 "use client"
 
+import { CSSProperties, ComponentProps, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
 
-export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+export interface LoopSwiperClassNames {
+    root?: string
+    container?: string
+    mirror?: string
+}
+
+export interface LoopSwiperProps extends ComponentProps<"div"> {
+    classNames?: LoopSwiperClassNames
     direction?: "horizontal" | "vertical"
     reverse?: boolean
     period: number
-    gap?: CSSProperties["gap"]
+    pauseOnHover?: boolean
+    gap?: number
 }
 
 /** 循环播放组件 */
-export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {
-    const { className, style, children, direction, period, reverse, gap, ...rest } = props
+export const LoopSwiper: FC<LoopSwiperProps> = ({
+    ref,
+    className,
+    classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {},
+    children,
+    direction,
+    period,
+    reverse,
+    pauseOnHover = true,
+    gap = 0,
+    ...rest
+}) => {
     const wrapper = useRef<HTMLDivElement>(null)
     const container = useRef<HTMLDivElement>(null)
     const [swiper, setSwiper] = useState(false)
@@ -42,6 +60,7 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
         let wrapperHeight = 0
         let containerWidth = 0
         let containerHeight = 0
+
         const observer = new ResizeObserver(entries => {
             entries.forEach(entry => {
                 if (entry.target === wrapperEle) {
@@ -52,8 +71,10 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
                     containerHeight = entry.contentRect.height
                 }
             })
+
             setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)
         })
+
         observer.observe(wrapperEle)
         observer.observe(containerEle)
     }, [])
@@ -63,63 +84,91 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
             ref={wrapper}
             className={clsx(
                 css`
+                    display: flex;
+                    flex-direction: ${flexDirection};
+                    gap: ${gap}px;
+                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+
                     @keyframes deepsea-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(-100%);
+                            transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-horizontal-loop-swipe {
                         from {
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(100%);
+                            transform: translateX(calc(100% + ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(-100%);
+                            transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
+
                     @keyframes deepsea-reverse-vertical-loop-swipe {
                         from {
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(100%);
+                            transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+
+                    ${pauseOnHover
+                        ? `&:hover > * {
+                        animation-play-state: paused;
+                    }`
+                        : ""}
                 `,
                 className,
+                rootClassName,
             )}
-            style={{ display: "flex", flexDirection, gap, ...style }}
             {...rest}
         >
             <div
                 ref={container}
-                style={{ display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}
+                className={clsx(
+                    css`
+                        display: flex;
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `,
+                    containerClassName,
+                )}
             >
                 {children}
             </div>
             <div
-                style={{
-                    display: swiper ? "flex" : "none",
-                    flexDirection,
-                    gap,
-                    animationName,
-                    animationTimingFunction,
-                    animationDuration,
-                    animationIterationCount,
-                }}
+                className={clsx(
+                    css`
+                        display: ${swiper ? "flex" : "none"};
+                        flex-direction: ${flexDirection};
+                        gap: ${gap}px;
+                        animation-name: ${animationName};
+                        animation-timing-function: ${animationTimingFunction};
+                        animation-duration: ${animationDuration};
+                        animation-iteration-count: ${animationIterationCount};
+                    `,
+                    mirrorClassName,
+                )}
             >
                 {children}
             </div>
         </div>
     )
-})
+}

package/src/components/ReadSheet.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
 import { FC } from "react"
+import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
 
 import { InputFile, InputFileProps } from "./InputFile"
 

package/src/components/Scroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces"
 

package/src/components/ScrollMask.tsx

@@ -1,5 +1,5 @@
-import { clsx, isNonNullable } from "deepsea-tools"
 import { CSSProperties, ComponentProps, FC, useRef } from "react"
+import { clsx, isNonNullable } from "deepsea-tools"
 import { useSize } from "soda-hooks"
 
 import styles from "./ScrollMask.module.css"

package/src/components/SectionRing.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DrawArcOptions, drawArc } from "deepsea-tools"
 import { HTMLAttributes, forwardRef } from "react"
+import { DrawArcOptions, drawArc } from "deepsea-tools"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number

package/src/components/Skeleton.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { HTMLAttributes, forwardRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
 
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean

package/src/components/TransitionNum.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { setFrameInterval } from "deepsea-tools"
 import { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { setFrameInterval } from "deepsea-tools"
 
 export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** 当前数字 */

package/src/components/Trapezium.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { HTMLAttributes, forwardRef } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { HTMLAttributes, forwardRef } from "react"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/Unify.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { clsx } from "deepsea-tools"
 import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
+import { clsx } from "deepsea-tools"
 
 export interface UnifyConfig {
     className?: string

package/src/components/WriteSheet.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { WriteSheetParams, writeSheet } from "deepsea-tools"
 import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
+import { WriteSheetParams, writeSheet } from "deepsea-tools"
 
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS