deepsea-components 5.15.22 → 5.15.24

package/dist/components/Flow.js

@@ -1,10 +1,10 @@
 "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 { jsx } from "react/jsx-runtime";
+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) {
     if ("number" == typeof gap) return [
         gap,
@@ -44,8 +44,8 @@ function ManualFlow(props) {
     rowGap ??= gap;
     columnGap ??= gap;
     const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
-    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(()=>getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(()=>getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
+    const ele = useRef(null);
     const contentRows = Math.ceil(data.length / columnCount);
     const contentShownRows = "number" == typeof maxRows ? Math.min(contentRows, maxRows) : contentRows;
     const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
@@ -61,10 +61,10 @@ function ManualFlow(props) {
         if ("number" != typeof maxRows) return false;
         return index >= maxRows * columnCount;
     }
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(element, ()=>ele.current, [
+    useImperativeHandle(element, ()=>ele.current, [
         ele.current
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useEffect(()=>{
         function task() {
             setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
         }
@@ -78,7 +78,7 @@ function ManualFlow(props) {
         minColumnGap,
         maxColumnGap
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useEffect(()=>{
         onSizeChange?.({
             width,
             height,
@@ -104,41 +104,41 @@ function ManualFlow(props) {
         itemHeight,
         maxRows
     ]);
-    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: relative;
-                    height: var(--height);
-                    overflow: hidden;
+        className: clsx(css`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
                 `, className),
-        style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
-            height: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(height)
+        style: transformCSSVariable({
+            height: px(height)
         }, style),
         ...rest,
-        children: data.map((item, index, arr)=>/*#__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)`
-                            position: absolute;
-                            width: var(--width);
-                            height: var(--height);
-                            transition: var(--transition);
-                            left: 0;
-                            top: 0;
-                            transform: translate(var(--left), var(--top));
+        children: data.map((item, index, arr)=>/*#__PURE__*/ jsx("div", {
+                className: clsx(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, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
-                    width: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(itemWidth),
-                    height: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(itemHeight),
+                style: transformCSSVariable({
+                    width: px(itemWidth),
+                    height: px(itemHeight),
                     transition: 0 === transitionDuration ? "none" : `all ${transitionDuration || 400}ms`,
-                    left: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(getPosition(index).left),
-                    top: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.px)(getPosition(index).top)
+                    left: px(getPosition(index).left),
+                    top: px(getPosition(index).top)
                 }, wrapperStyle),
-                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)`
-                                width: 100%;
-                                height: 100%;
-                                display: var(--display);
+                children: /*#__PURE__*/ jsx("div", {
+                    className: clsx(css`
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
                             `, containerClassName),
-                    style: (0, __WEBPACK_EXTERNAL_MODULE__utils_index_js_6619c453__.transformCSSVariable)({
+                    style: transformCSSVariable({
                         display: getHidden(index) ? "none" : "block"
                     }, containerStyle),
                     children: render(item, index, arr)
@@ -148,18 +148,18 @@ function ManualFlow(props) {
 }
 function Flow(props) {
     const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props;
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const size = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ele);
-    const width = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(size?.width || 0);
+    const ele = useRef(null);
+    const size = useSize(ele);
+    const width = useRef(size?.width || 0);
     if (size && 0 !== size.width) width.current = size.width;
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(element, ()=>ele.current, [
+    useImperativeHandle(element, ()=>ele.current, [
         ele.current
     ]);
-    if (0 === width.current) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    if (0 === width.current) return /*#__PURE__*/ jsx("div", {
         ref: ele,
         ...rest
     });
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ManualFlow, {
+    return /*#__PURE__*/ jsx(ManualFlow, {
         element: ele,
         ...props,
         width: width.current

package/dist/components/FormLabel.cjs

@@ -25,9 +25,9 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    FormLabelConfigContext: ()=>FormLabelConfigContext,
     FormLabel: ()=>FormLabel,
-    FormLabelConfigProvider: ()=>FormLabelConfigProvider
+    FormLabelConfigProvider: ()=>FormLabelConfigProvider,
+    FormLabelConfigContext: ()=>FormLabelConfigContext
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
@@ -50,7 +50,7 @@ const FormLabel = (props)=>{
                     color: "transparent",
                     userSelect: "none"
                 },
-                children: " "
+                children: "\u2002"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 style: {

package/dist/components/FormLabel.js

@@ -1,8 +1,8 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const FormLabelConfigContext = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createContext)({});
-const FormLabelConfigProvider = ({ width, before, children })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormLabelConfigContext.Provider, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createContext, useContext } from "react";
+const FormLabelConfigContext = /*#__PURE__*/ createContext({});
+const FormLabelConfigProvider = ({ width, before, children })=>/*#__PURE__*/ jsx(FormLabelConfigContext.Provider, {
         value: {
             width,
             before
@@ -10,19 +10,19 @@ const FormLabelConfigProvider = ({ width, before, children })=>/*#__PURE__*/ (0,
         children: children
     });
 const FormLabel = (props)=>{
-    const { width: _width, before: _before } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(FormLabelConfigContext);
+    const { width: _width, before: _before } = useContext(FormLabelConfigContext);
     const { style, width = _width, before = _before, ...rest } = props;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            !!before && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            !!before && /*#__PURE__*/ jsx("div", {
                 style: {
                     width: 11,
                     color: "transparent",
                     userSelect: "none"
                 },
-                children: " "
+                children: "\u2002"
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            /*#__PURE__*/ jsx("div", {
                 style: {
                     width,
                     textAlign: "justify",

package/dist/components/HlsPlayer.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_hls_js_a9a66012__ from "hls.js";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const HlsPlayer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx } from "react/jsx-runtime";
+import hls_0 from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+const HlsPlayer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { src, ...rest } = props;
-    const video = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>video.current, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    const video = useRef(null);
+    useImperativeHandle(ref, ()=>video.current, []);
+    useEffect(()=>{
         const { current: player } = video;
         if (!player || !src) return;
         if (player.canPlayType("application/vnd.apple.mpegurl")) {
             player.src = src;
             return;
         }
-        if (__WEBPACK_EXTERNAL_MODULE_hls_js_a9a66012__["default"].isSupported()) {
-            const hls = new __WEBPACK_EXTERNAL_MODULE_hls_js_a9a66012__["default"]();
+        if (hls_0.isSupported()) {
+            const hls = new hls_0();
             hls.loadSource(src);
             hls.attachMedia(player);
             return ()=>{
@@ -24,7 +24,7 @@ const HlsPlayer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef
     }, [
         src
     ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("video", {
+    return /*#__PURE__*/ jsx("video", {
         ref: video,
         ...rest
     });

package/dist/components/IconFileType.cjs

@@ -24,11 +24,11 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    IconFileTypeText: ()=>IconFileTypeText,
-    IconFileTypeBase: ()=>IconFileTypeBase,
-    IconFileTypePage: ()=>IconFileTypePage,
     IconFileType: ()=>IconFileType,
-    IconFileTypeDogEar: ()=>IconFileTypeDogEar
+    IconFileTypeDogEar: ()=>IconFileTypeDogEar,
+    IconFileTypeBase: ()=>IconFileTypeBase,
+    IconFileTypeText: ()=>IconFileTypeText,
+    IconFileTypePage: ()=>IconFileTypePage
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const GOLD = (Math.sqrt(5) - 1) / 2;

package/dist/components/IconFileType.js

@@ -1,16 +1,16 @@
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 const GOLD = (Math.sqrt(5) - 1) / 2;
 const GOLD_T = Math.sqrt(1 - GOLD * GOLD);
 const HANDLE_LENGTH = (1 - GOLD) * GOLD_T;
 const FileTypeSize = 512;
-const IconFileTypeBase = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
+const IconFileTypeBase = (props)=>/*#__PURE__*/ jsx("svg", {
         viewBox: `${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`,
         ...props
     });
 const IconFileTypePage = ({ pageColor = "#f31260", pageWidth = 0.75 * FileTypeSize, pageBessel = 0.75 * FileTypeSize * GOLD, ...rest })=>{
     const radius = pageBessel * (1 - GOLD);
     const offset = pageBessel * HANDLE_LENGTH;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+    return /*#__PURE__*/ jsx("path", {
         d: `M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
 L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
 L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
@@ -26,14 +26,14 @@ Z
         ...rest
     });
 };
-const IconFileTypeDogEar = ({ pageWidth, dogEarColor = "rgba(0, 0, 0, 0.25)", dogEarSize = pageWidth * (1 - GOLD), ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
+const IconFileTypeDogEar = ({ pageWidth, dogEarColor = "rgba(0, 0, 0, 0.25)", dogEarSize = pageWidth * (1 - GOLD), ...rest })=>/*#__PURE__*/ jsx("path", {
         d: `M ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2)}
 L ${pageWidth / 2} ${-(FileTypeSize / 2 - dogEarSize)}
 L ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2 - dogEarSize)}`,
         fill: dogEarColor,
         ...rest
     });
-const IconFileTypeText = ({ textColor = "#ffffff", textFontSize = 0.25 * FileTypeSize, textFontWeight = "bold", textFontFamily, textX = 0, textY = 0.25 * FileTypeSize, ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("text", {
+const IconFileTypeText = ({ textColor = "#ffffff", textFontSize = 0.25 * FileTypeSize, textFontWeight = "bold", textFontFamily, textX = 0, textY = 0.25 * FileTypeSize, ...rest })=>/*#__PURE__*/ jsx("text", {
         textAnchor: "middle",
         fill: textColor,
         x: textX,
@@ -43,20 +43,20 @@ const IconFileTypeText = ({ textColor = "#ffffff", textFontSize = 0.25 * FileTyp
         fontFamily: textFontFamily,
         ...rest
     });
-const IconFileType = ({ pageColor, pageWidth = 0.75 * FileTypeSize, pageBessel, dogEarColor, dogEarSize, textColor, textFontSize, textFontWeight, textFontFamily, textX, textY, children, ...rest })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(IconFileTypeBase, {
+const IconFileType = ({ pageColor, pageWidth = 0.75 * FileTypeSize, pageBessel, dogEarColor, dogEarSize, textColor, textFontSize, textFontWeight, textFontFamily, textX, textY, children, ...rest })=>/*#__PURE__*/ jsxs(IconFileTypeBase, {
         ...rest,
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypePage, {
+            /*#__PURE__*/ jsx(IconFileTypePage, {
                 pageColor: pageColor,
                 pageWidth: pageWidth,
                 pageBessel: pageBessel
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypeDogEar, {
+            /*#__PURE__*/ jsx(IconFileTypeDogEar, {
                 pageWidth: pageWidth,
                 dogEarColor: dogEarColor,
                 dogEarSize: dogEarSize
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconFileTypeText, {
+            /*#__PURE__*/ jsx(IconFileTypeText, {
                 textColor: textColor,
                 textFontSize: textFontSize,
                 textFontWeight: textFontWeight,

package/dist/components/InfiniteScroll.cjs

@@ -85,9 +85,9 @@ const InfiniteScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardR
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: wrapper,
-        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    position: relative;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    position: relative;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
                 `, className),
         onMouseEnter: enter,
         onMouseLeave: leave,
@@ -102,22 +102,22 @@ const InfiniteScroll = /*#__PURE__*/ (0, external_react_namespaceObject.forwardR
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     ref: container,
-                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
+                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
                         `, containerClassName),
                     style: containerStyle,
                     children: children
                 }),
                 overflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                     ref: container,
-                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                                position: absolute;
-                                right: 0;
-                                bottom: 0;
-                                ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
+                    className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                                position: absolute;
+                                right: 0;
+                                bottom: 0;
+                                ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
                             `, containerClassName),
                     style: containerStyle,
                     children: children

package/dist/components/InfiniteScroll.js

@@ -1,25 +1,25 @@
 "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";
-const InfiniteScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+import { jsx, jsxs } from "react/jsx-runtime";
+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;
-    const wrapper = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const wrapperSize = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(wrapper);
-    const ele = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>wrapper.current, [
+    const wrapper = useRef(null);
+    const wrapperSize = useSize(wrapper);
+    const ele = useRef(null);
+    useImperativeHandle(ref, ()=>wrapper.current, [
         wrapper.current
     ]);
-    const container = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const containerSize = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(container);
+    const container = useRef(null);
+    const containerSize = useSize(container);
     function bigger(containerSize, wrapperSize) {
         return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize;
     }
     const overflow = wrapperSize && containerSize ? "vertical" === direction ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width) : false;
-    const animation = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    const animation = useRef(void 0);
+    useEffect(()=>{
         if (!wrapperSize || !containerSize || !overflow) return;
         animation.current = ele.current?.animate({
             transform: "vertical" === direction ? [
@@ -49,22 +49,22 @@ const InfiniteScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwa
         if (pauseOnHover) animation.current?.play();
         onMouseLeave?.(e);
     }
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+    useEffect(()=>{
         if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play();
     }, [
         animation.current,
         pauseOnHover
     ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    return /*#__PURE__*/ jsx("div", {
         ref: wrapper,
-        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                    position: relative;
-                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
+        className: clsx(css`
+                    position: relative;
+                    ${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
                 `, className),
         onMouseEnter: enter,
         onMouseLeave: leave,
         ...rest,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        children: /*#__PURE__*/ jsxs("div", {
             ref: ele,
             style: {
                 position: "absolute",
@@ -72,24 +72,24 @@ const InfiniteScroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwa
                 height: "horizontal" === direction ? "100%" : containerSize && (overflow ? 2 * containerSize.height + gap : containerSize.width)
             },
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                /*#__PURE__*/ jsx("div", {
                     ref: container,
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
+                    className: clsx(css`
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
                         `, containerClassName),
                     style: containerStyle,
                     children: children
                 }),
-                overflow && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                overflow && /*#__PURE__*/ jsx("div", {
                     ref: container,
-                    className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.css)`
-                                position: absolute;
-                                right: 0;
-                                bottom: 0;
-                                ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
+                    className: clsx(css`
+                                position: absolute;
+                                right: 0;
+                                bottom: 0;
+                                ${"vertical" === direction ? "width: 100%;" : "height: 100%;"}
                             `, containerClassName),
                     style: containerStyle,
                     children: children

package/dist/components/InputFile.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 { useState } from "react";
 async function getFileData(file, type) {
     const fileReader = new FileReader();
     switch(type){
@@ -27,7 +27,7 @@ async function getFileData(file, type) {
 }
 function InputFile(props) {
     const { multiple = false, type = "file", onChange: _onChange, disabled: _disabled, clearAfterChange, onValueChange, onFileChange, ...rest } = props;
-    const [disabled, setDisabled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [disabled, setDisabled] = useState(false);
     async function onChange(e) {
         _onChange?.(e);
         const input = e.target;
@@ -54,7 +54,7 @@ function InputFile(props) {
             setDisabled(false);
         }
     }
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+    return /*#__PURE__*/ jsx("input", {
         disabled: disabled || _disabled,
         type: "file",
         multiple: multiple,

package/dist/components/InputFileButton.js

@@ -1,13 +1,13 @@
 "use client"
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__ from "./InputFile.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, createElement, useImperativeHandle, useRef, useState } from "react";
+import { InputFile, getFileData } from "./InputFile.js";
 function InputFileButton(props) {
     const { as = "button", onClick: _onClick, inputProps = {}, accept, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, type = "file", multiple, onValueChange, onFileChange, clearAfterChange, ...rest } = props;
     const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
-    const [disabled, setDisabled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
-    const input = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>input.current, [
+    const [disabled, setDisabled] = useState(false);
+    const input = useRef(null);
+    useImperativeHandle(ref, ()=>input.current, [
         input.current
     ]);
     function onClick(e) {
@@ -26,7 +26,7 @@ function InputFileButton(props) {
                 const files2 = Array.from(files);
                 const values = [];
                 for (const file of files2){
-                    const value = await (0, __WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.getFileData)(file, type);
+                    const value = await getFileData(file, type);
                     values.push(value);
                 }
                 onFileChange?.(files2);
@@ -34,7 +34,7 @@ function InputFileButton(props) {
             } else {
                 const file = files[0];
                 onFileChange?.(file);
-                onValueChange?.(await (0, __WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.getFileData)(file, type));
+                onValueChange?.(await getFileData(file, type));
             }
         } finally{
             setDisabled(false);
@@ -45,9 +45,9 @@ function InputFileButton(props) {
         if (disabled || !dragFile) return;
         e.preventDefault();
     }
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.InputFile, {
+            /*#__PURE__*/ jsx(InputFile, {
                 ref: input,
                 disabled: disabled || _disabled || __disabled,
                 style: {
@@ -62,7 +62,7 @@ function InputFileButton(props) {
                 clearAfterChange: clearAfterChange,
                 ...restInputProps
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createElement)(as, {
+            /*#__PURE__*/ createElement(as, {
                 disabled: disabled || _disabled,
                 onClick,
                 onDrop,

package/dist/components/LoopSwiper.cjs

@@ -68,39 +68,39 @@ 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)`
-                    @keyframes deepsea-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-horizontal-loop-swipe {
-                        from {
-                            transform: translateX(0);
-                        }
-                        to {
-                            transform: translateX(100%);
-                        }
-                    }
-                    @keyframes deepsea-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(-100%);
-                        }
-                    }
-                    @keyframes deepsea-reverse-vertical-loop-swipe {
-                        from {
-                            transform: translateY(0);
-                        }
-                        to {
-                            transform: translateY(100%);
-                        }
-                    }
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    @keyframes deepsea-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(100%);
+                        }
+                    }
+                    @keyframes deepsea-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(100%);
+                        }
+                    }
                 `, className),
         style: {
             display: "flex",