deepsea-components 5.15.23 → 5.15.25

package/README.md

@@ -1,23 +1,23 @@
-# deepsea-components
-
-[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-
-## Install
-
-```bash
-$ yarn install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# deepsea-components
+
+[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+
+## Install
+
+```bash
+$ yarn install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/components/AutoFit.cjs

@@ -92,12 +92,12 @@ const AutoFit = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((pr
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ele,
-        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    position: absolute;
-                    transform: var(--transform);
-                    transform-origin: top left;
-                    width: var(--width);
-                    height: var(--height);
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    position: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
                 `, className),
         style: (0, index_cjs_namespaceObject.transformCSSVariable)({
             transform,

package/dist/components/AutoFit.js

@@ -1,20 +1,20 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__ from "@emotion/css";
-import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__ from "../utils/index.js";
-const AutoFit = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+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)=>{
     const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props;
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const [show, setShow] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
-    const [transform, setTransform] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
-    const [width, setWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
-    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, [
+    const ele = useRef(null);
+    const [show, setShow] = useState(false);
+    const [transform, setTransform] = useState(void 0);
+    const [width, setWidth] = useState(void 0);
+    const [height, setHeight] = useState(void 0);
+    useImperativeHandle(ref, ()=>ele.current, [
         ele.current
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+    useLayoutEffect(()=>{
         const element = ele.current;
         const parent = element?.parentElement;
         if (!element || !parent) return;
@@ -24,18 +24,18 @@ const AutoFit = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(
             if ("horizontal" === direction) {
                 const scale = contentRect.width / designWidth;
                 setTransform(`scale(${scale})`);
-                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designWidth));
-                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(contentRect.height / scale));
+                setWidth(px(designWidth));
+                setHeight(px(contentRect.height / scale));
             } else if ("vertical" === direction) {
                 const scale = contentRect.height / designHeight;
                 setTransform(`scale(${scale})`);
-                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(contentRect.width / scale));
-                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designHeight));
+                setWidth(px(contentRect.width / scale));
+                setHeight(px(designHeight));
             } else {
                 const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight);
                 setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`);
-                setWidth((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designWidth));
-                setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(designHeight));
+                setWidth(px(designWidth));
+                setHeight(px(designHeight));
             }
             setShow(true);
         }
@@ -48,7 +48,7 @@ const AutoFit = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(
         designHeight,
         direction
     ]);
-    if ("development" === process.env.NODE_ENV) (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    if ("development" === process.env.NODE_ENV) useEffect(()=>{
         const parent = ele.current?.parentElement;
         if (!parent) return;
         const style = getComputedStyle(parent);
@@ -56,22 +56,22 @@ const AutoFit = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(
     }, [
         ele.current?.parentElement
     ]);
-    if (!show) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    if (!show) return /*#__PURE__*/ jsx("div", {
         ref: ele,
         style: {
             display: "none"
         }
     });
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    return /*#__PURE__*/ jsx("div", {
         ref: ele,
-        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                    position: absolute;
-                    transform: var(--transform);
-                    transform-origin: top left;
-                    width: var(--width);
-                    height: var(--height);
+        className: clsx(css`
+                    position: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
                 `, className),
-        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+        style: transformCSSVariable({
             transform,
             width,
             height

package/dist/components/AutoScroll.cjs

@@ -101,13 +101,13 @@ const AutoScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
         onMouseLeave: onContainerMouseLeave,
         ...rest,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
+            className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
                     `, containerClassName),
             style: (0, index_cjs_namespaceObject.transformCSSVariable)({
                 gap: (0, index_cjs_namespaceObject.px)(gap)

package/dist/components/AutoScroll.js

@@ -1,31 +1,31 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__ from "@emotion/css";
-import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__ from "../utils/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Scroll_js_70befd9e__ from "./Scroll.js";
-const AutoScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+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";
+const AutoScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
-    const bar = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const timeout = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const size = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ele);
-    const pausedRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(false);
-    const pausedProps = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(paused);
+    const bar = useRef(null);
+    const timeout = useRef(void 0);
+    const ele = useRef(null);
+    const size = useSize(ele);
+    const pausedRef = useRef(false);
+    const pausedProps = useRef(paused);
     pausedProps.current = paused;
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useImperativeHandle(ref, ()=>ele.current, []);
+    useImperativeHandle(scrollbar, ()=>bar.current, []);
+    useEffect(()=>{
         if (playOnMouseEnter) pausedRef.current = false;
     }, [
         playOnMouseEnter
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useEffect(()=>{
         if (!size || 0 === count) return;
         const { height } = size;
-        const range = (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.getArray)(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+        const range = getArray(count, (index)=>(itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
         const scrollHeight = range[range.length - 1];
         if (height >= scrollHeight) return;
         function scroll(target) {
@@ -66,23 +66,23 @@ const AutoScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRe
         pausedRef.current = false;
         onMouseLeave?.(e);
     }
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Scroll_js_70befd9e__.Scroll, {
+    return /*#__PURE__*/ jsx(Scroll, {
         ref: ele,
         scrollbar: bar,
         onMouseEnter: onContainerMouseEnter,
         onMouseLeave: onContainerMouseLeave,
         ...rest,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-            className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--gap, 0);
-                        & > * {
-                            flex: none;
-                        }
+        children: /*#__PURE__*/ jsx("div", {
+            className: clsx(css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
                     `, containerClassName),
-            style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
-                gap: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(gap)
+            style: transformCSSVariable({
+                gap: px(gap)
             }, containerStyle),
             children: children
         })

package/dist/components/AutoSizeTextarea.cjs

@@ -53,10 +53,10 @@ const AutoSizeTextArea = /*#__PURE__*/ (0, external_react_namespaceObject.forwar
     }, []);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
         ref: ele,
-        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    height: var(--height);
-                    resize: none;
-                    overflow-y: hidden;
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
                 `, className),
         style: (0, index_cjs_namespaceObject.transformCSSVariable)({
             height

package/dist/components/AutoSizeTextarea.js

@@ -1,19 +1,19 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__ from "@emotion/css";
-import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__ from "../utils/index.js";
-const AutoSizeTextArea = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+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;
-    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(void 0);
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+    const [height, setHeight] = useState(void 0);
+    const ele = useRef(null);
+    useImperativeHandle(ref, ()=>ele.current, []);
+    useLayoutEffect(()=>{
         const textarea = ele.current;
         function resizeTextarea() {
             setHeight("auto");
-            setHeight((0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight));
+            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight));
         }
         resizeTextarea();
         textarea.addEventListener("input", resizeTextarea);
@@ -23,14 +23,14 @@ const AutoSizeTextArea = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.for
             textarea.removeEventListener("change", resizeTextarea);
         };
     }, []);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("textarea", {
+    return /*#__PURE__*/ jsx("textarea", {
         ref: ele,
-        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                    height: var(--height);
-                    resize: none;
-                    overflow-y: hidden;
+        className: clsx(css`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
                 `, className),
-        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+        style: transformCSSVariable({
             height
         }, style),
         ...rest

package/dist/components/CircleText.js

@@ -1,6 +1,6 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
 const CircleText = (props)=>{
     const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
     const unitAngle = 2 * Math.atan(width / 2 / radius);
@@ -15,8 +15,8 @@ const CircleText = (props)=>{
     }
     const words = "function" == typeof separator ? separator(children) : children.split(separator ?? "");
     if (reverse) words.reverse();
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
-        children: words.map((w, idx)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: words.map((w, idx)=>/*#__PURE__*/ jsx("span", {
                 style: {
                     position: "absolute",
                     ...style,

package/dist/components/CopyButton.cjs

@@ -34,8 +34,8 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    Event: ()=>external_clipboard_namespaceObject.Event,
-    CopyButton: ()=>CopyButton
+    CopyButton: ()=>CopyButton,
+    Event: ()=>external_clipboard_namespaceObject.Event
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_clipboard_namespaceObject = require("clipboard");

package/dist/components/CopyButton.js

@@ -1,27 +1,26 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE_clipboard__ from "clipboard";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
-const CopyButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+import clipboard_0, { Event } from "clipboard";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useLatest } from "soda-hooks";
+const CopyButton = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const onCopySuccess = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useLatest)(_onCoptSuccess);
-    const onCopyError = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useLatest)(_onCopyError);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>ele.current, [
+    const ele = useRef(null);
+    const onCopySuccess = useLatest(_onCoptSuccess);
+    const onCopyError = useLatest(_onCopyError);
+    useImperativeHandle(ref, ()=>ele.current, [
         ele.current
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        const clipboard = new __WEBPACK_EXTERNAL_MODULE_clipboard__["default"](ele.current);
+    useEffect(()=>{
+        const clipboard = new clipboard_0(ele.current);
         clipboard.on("success", (event)=>onCopySuccess.current?.(event));
         clipboard.on("error", (event)=>onCopyError.current?.(event));
         return ()=>clipboard.destroy();
     }, []);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+    return /*#__PURE__*/ jsx("button", {
         ref: ele,
         ...rest,
         "data-clipboard-text": text
     });
 });
-var __webpack_exports__Event = __WEBPACK_EXTERNAL_MODULE_clipboard__.Event;
-export { CopyButton, __webpack_exports__Event as Event };
+export { CopyButton, Event };

package/dist/components/Echart.cjs

@@ -26,8 +26,8 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     Pie: ()=>Pie,
-    Bar: ()=>Bar,
-    Line: ()=>Line
+    Line: ()=>Line,
+    Bar: ()=>Bar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_echarts_namespaceObject = require("echarts");

package/dist/components/Echart.js

@@ -1,29 +1,29 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE_echarts__ from "echarts";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const Echart = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+import { init } from "echarts";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+const Echart = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { width, height, option, chart, ...rest } = props;
-    const container = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const chartRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+    const container = useRef(null);
+    const chartRef = useRef(null);
+    useLayoutEffect(()=>{
         const ele = container.current;
-        chartRef.current = (0, __WEBPACK_EXTERNAL_MODULE_echarts__.init)(ele, option, {
+        chartRef.current = init(ele, option, {
             width,
             height
         });
         return ()=>chartRef.current?.dispose();
     }, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>container.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(chart, ()=>chartRef.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useImperativeHandle(ref, ()=>container.current, []);
+    useImperativeHandle(chart, ()=>chartRef.current, []);
+    useEffect(()=>{
         chartRef.current?.setOption(option);
         chartRef.current?.resize({
             width,
             height
         });
     });
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    return /*#__PURE__*/ jsx("div", {
         ref: container,
         ...rest
     });

package/dist/components/Flow.cjs

@@ -25,10 +25,10 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    Flow: ()=>Flow,
-    getGapCountAndSize: ()=>getGapCountAndSize,
     getGapRange: ()=>getGapRange,
-    ManualFlow: ()=>ManualFlow
+    getGapCountAndSize: ()=>getGapCountAndSize,
+    ManualFlow: ()=>ManualFlow,
+    Flow: ()=>Flow
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const css_namespaceObject = require("@emotion/css");
@@ -137,24 +137,24 @@ function ManualFlow(props) {
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ele,
-        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    position: relative;
-                    height: var(--height);
-                    overflow: hidden;
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
                 `, className),
         style: (0, index_cjs_namespaceObject.transformCSSVariable)({
             height: (0, index_cjs_namespaceObject.px)(height)
         }, style),
         ...rest,
         children: data.map((item, index, arr)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                            position: absolute;
-                            width: var(--width);
-                            height: var(--height);
-                            transition: var(--transition);
-                            left: 0;
-                            top: 0;
-                            transform: translate(var(--left), var(--top));
+                className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                            position: absolute;
+                            width: var(--width);
+                            height: var(--height);
+                            transition: var(--transition);
+                            left: 0;
+                            top: 0;
+                            transform: translate(var(--left), var(--top));
                         `, wrapperClassName),
                 style: (0, index_cjs_namespaceObject.transformCSSVariable)({
                     width: (0, index_cjs_namespaceObject.px)(itemWidth),
@@ -164,10 +164,10 @@ function ManualFlow(props) {
                     top: (0, index_cjs_namespaceObject.px)(getPosition(index).top)
                 }, wrapperStyle),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                                width: 100%;
-                                height: 100%;
-                                display: var(--display);
+                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
                             `, containerClassName),
                     style: (0, index_cjs_namespaceObject.transformCSSVariable)({
                         display: getHidden(index) ? "none" : "block"