deepsea-components 5.11.6 → 5.12.0

package/dist/components/InputFileButton.cjs

@@ -0,0 +1,109 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    InputFileButton: ()=>InputFileButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_InputFile_cjs_namespaceObject = require("./InputFile.cjs");
+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, external_react_namespaceObject.useState)(false);
+    const input = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>input.current, [
+        input.current
+    ]);
+    function onClick(e) {
+        input.current?.click();
+        _onClick?.(e);
+    }
+    async function onDrop(e) {
+        _onDrop?.(e);
+        if (disabled || !dragFile) return;
+        e.preventDefault();
+        const { files } = e.dataTransfer;
+        if (!files || 0 === files.length) return;
+        setDisabled(true);
+        try {
+            if (multiple) {
+                const files2 = Array.from(files);
+                const values = [];
+                for (const file of files2){
+                    const value = await (0, external_InputFile_cjs_namespaceObject.getFileData)(file, type);
+                    values.push(value);
+                }
+                onFileChange?.(files2);
+                onValueChange?.(values);
+            } else {
+                const file = files[0];
+                onFileChange?.(file);
+                onValueChange?.(await (0, external_InputFile_cjs_namespaceObject.getFileData)(file, type));
+            }
+        } finally{
+            setDisabled(false);
+        }
+    }
+    function onDragOver(e) {
+        _onDragOver?.(e);
+        if (disabled || !dragFile) return;
+        e.preventDefault();
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_InputFile_cjs_namespaceObject.InputFile, {
+                ref: input,
+                disabled: disabled || _disabled || __disabled,
+                style: {
+                    display: "none",
+                    ...style
+                },
+                multiple: multiple,
+                accept: accept,
+                type: type,
+                onValueChange: onValueChange,
+                onFileChange: onFileChange,
+                clearAfterChange: clearAfterChange,
+                ...restInputProps
+            }),
+            /*#__PURE__*/ (0, external_react_namespaceObject.createElement)(as, {
+                disabled: disabled || _disabled,
+                onClick,
+                onDrop,
+                onDragOver,
+                ...rest
+            })
+        ]
+    });
+}
+exports.InputFileButton = __webpack_exports__.InputFileButton;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "InputFileButton"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/InputFileButton.js

@@ -0,0 +1,75 @@
+"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";
+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, [
+        input.current
+    ]);
+    function onClick(e) {
+        input.current?.click();
+        _onClick?.(e);
+    }
+    async function onDrop(e) {
+        _onDrop?.(e);
+        if (disabled || !dragFile) return;
+        e.preventDefault();
+        const { files } = e.dataTransfer;
+        if (!files || 0 === files.length) return;
+        setDisabled(true);
+        try {
+            if (multiple) {
+                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);
+                    values.push(value);
+                }
+                onFileChange?.(files2);
+                onValueChange?.(values);
+            } else {
+                const file = files[0];
+                onFileChange?.(file);
+                onValueChange?.(await (0, __WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.getFileData)(file, type));
+            }
+        } finally{
+            setDisabled(false);
+        }
+    }
+    function onDragOver(e) {
+        _onDragOver?.(e);
+        if (disabled || !dragFile) return;
+        e.preventDefault();
+    }
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.InputFile, {
+                ref: input,
+                disabled: disabled || _disabled || __disabled,
+                style: {
+                    display: "none",
+                    ...style
+                },
+                multiple: multiple,
+                accept: accept,
+                type: type,
+                onValueChange: onValueChange,
+                onFileChange: onFileChange,
+                clearAfterChange: clearAfterChange,
+                ...restInputProps
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createElement)(as, {
+                disabled: disabled || _disabled,
+                onClick,
+                onDrop,
+                onDragOver,
+                ...rest
+            })
+        ]
+    });
+}
+export { InputFileButton };

package/dist/components/LoopSwiper.cjs

@@ -0,0 +1,147 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__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 LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { className, style, children, direction, period, reverse, gap, ...rest } = props;
+    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);
+    const directionRef = (0, external_react_namespaceObject.useRef)(direction);
+    directionRef.current = direction;
+    const flexDirection = "vertical" === direction ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
+    const animationName = swiper ? "vertical" === direction ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
+    const animationDuration = `${period}ms`;
+    const animationTimingFunction = "linear";
+    const animationIterationCount = "infinite";
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>wrapper.current, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const wrapperEle = wrapper.current;
+        const containerEle = container.current;
+        let wrapperWidth = 0;
+        let wrapperHeight = 0;
+        let containerWidth = 0;
+        let containerHeight = 0;
+        const observer = new ResizeObserver((entries)=>{
+            entries.forEach((entry)=>{
+                if (entry.target === wrapperEle) {
+                    wrapperWidth = entry.contentRect.width;
+                    wrapperHeight = entry.contentRect.height;
+                } else if (entry.target === containerEle) {
+                    containerWidth = entry.contentRect.width;
+                    containerHeight = entry.contentRect.height;
+                }
+            });
+            setSwiper("vertical" === directionRef.current ? containerHeight > wrapperHeight : containerWidth > wrapperWidth);
+        });
+        observer.observe(wrapperEle);
+        observer.observe(containerEle);
+    }, []);
+    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),
+        style: {
+            display: "flex",
+            flexDirection,
+            gap,
+            ...style
+        },
+        ...rest,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: container,
+                style: {
+                    display: "flex",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount
+                },
+                children: children
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    display: swiper ? "flex" : "none",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount
+                },
+                children: children
+            })
+        ]
+    });
+});
+exports.LoopSwiper = __webpack_exports__.LoopSwiper;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "LoopSwiper"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/LoopSwiper.js

@@ -0,0 +1,113 @@
+"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__emotion_css_bfcd1b5d__ from "@emotion/css";
+import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
+const LoopSwiper = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { className, style, children, direction, period, reverse, gap, ...rest } = props;
+    const wrapper = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const container = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [swiper, setSwiper] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const directionRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(direction);
+    directionRef.current = direction;
+    const flexDirection = "vertical" === direction ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
+    const animationName = swiper ? "vertical" === direction ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
+    const animationDuration = `${period}ms`;
+    const animationTimingFunction = "linear";
+    const animationIterationCount = "infinite";
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle)(ref, ()=>wrapper.current, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        const wrapperEle = wrapper.current;
+        const containerEle = container.current;
+        let wrapperWidth = 0;
+        let wrapperHeight = 0;
+        let containerWidth = 0;
+        let containerHeight = 0;
+        const observer = new ResizeObserver((entries)=>{
+            entries.forEach((entry)=>{
+                if (entry.target === wrapperEle) {
+                    wrapperWidth = entry.contentRect.width;
+                    wrapperHeight = entry.contentRect.height;
+                } else if (entry.target === containerEle) {
+                    containerWidth = entry.contentRect.width;
+                    containerHeight = entry.contentRect.height;
+                }
+            });
+            setSwiper("vertical" === directionRef.current ? containerHeight > wrapperHeight : containerWidth > wrapperWidth);
+        });
+        observer.observe(wrapperEle);
+        observer.observe(containerEle);
+    }, []);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        ref: wrapper,
+        className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)((0, __WEBPACK_EXTERNAL_MODULE__emotion_css_bfcd1b5d__.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",
+            flexDirection,
+            gap,
+            ...style
+        },
+        ...rest,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ref: container,
+                style: {
+                    display: "flex",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount
+                },
+                children: children
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: {
+                    display: swiper ? "flex" : "none",
+                    flexDirection,
+                    gap,
+                    animationName,
+                    animationTimingFunction,
+                    animationDuration,
+                    animationIterationCount
+                },
+                children: children
+            })
+        ]
+    });
+});
+export { LoopSwiper };

package/dist/components/ReadExcel.cjs

@@ -0,0 +1,48 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ReadExcel: ()=>ReadExcel
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
+const external_InputFile_cjs_namespaceObject = require("./InputFile.cjs");
+const ReadExcel = (props)=>{
+    const { onValueChange, ...rest } = props;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_InputFile_cjs_namespaceObject.InputFile, {
+        accept: ".xlsx",
+        type: "arrayBuffer",
+        onValueChange: (data)=>onValueChange?.((0, external_deepsea_tools_namespaceObject.readExcel)(data)),
+        ...rest
+    });
+};
+exports.ReadExcel = __webpack_exports__.ReadExcel;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ReadExcel"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ReadExcel.js

@@ -0,0 +1,14 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
+import * as __WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__ from "./InputFile.js";
+const ReadExcel = (props)=>{
+    const { onValueChange, ...rest } = props;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__InputFile_js_ee583621__.InputFile, {
+        accept: ".xlsx",
+        type: "arrayBuffer",
+        onValueChange: (data)=>onValueChange?.((0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.readExcel)(data)),
+        ...rest
+    });
+};
+export { ReadExcel };

package/dist/components/Ring.cjs

@@ -0,0 +1,53 @@
+"use client"
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Ring: ()=>Ring
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const Ring = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
+    const { outerWidth, innerWidth, style, ...rest } = props;
+    const outerRadius = outerWidth / 2;
+    const innerRadius = innerWidth / 2;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        style: {
+            ...style,
+            width: `${outerWidth}px`,
+            height: `${outerWidth}px`,
+            clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${2 * innerRadius},0 a${innerRadius},${innerRadius},0,0,1,-${2 * innerRadius},0 Z")`
+        },
+        ...rest
+    });
+});
+exports.Ring = __webpack_exports__.Ring;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Ring"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/Ring.js

@@ -0,0 +1,19 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+const Ring = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((props, ref)=>{
+    const { outerWidth, innerWidth, style, ...rest } = props;
+    const outerRadius = outerWidth / 2;
+    const innerRadius = innerWidth / 2;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        style: {
+            ...style,
+            width: `${outerWidth}px`,
+            height: `${outerWidth}px`,
+            clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${2 * innerRadius},0 a${innerRadius},${innerRadius},0,0,1,-${2 * innerRadius},0 Z")`
+        },
+        ...rest
+    });
+});
+export { Ring };