deepsea-components 5.15.24 → 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

@@ -64,12 +64,12 @@ const AutoFit = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     return /*#__PURE__*/ jsx("div", {
         ref: ele,
-        className: clsx(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: transformCSSVariable({
             transform,

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

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

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

@@ -25,10 +25,10 @@ const AutoSizeTextArea = /*#__PURE__*/ forwardRef((props, ref)=>{
     }, []);
     return /*#__PURE__*/ jsx("textarea", {
         ref: ele,
-        className: clsx(css`
-                    height: var(--height);
-                    resize: none;
-                    overflow-y: hidden;
+        className: clsx(css`
+                    height: var(--height);
+                    resize: none;
+                    overflow-y: hidden;
                 `, className),
         style: transformCSSVariable({
             height

package/dist/components/Flow.cjs

@@ -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"

package/dist/components/Flow.js

@@ -106,24 +106,24 @@ function ManualFlow(props) {
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: ele,
-        className: clsx(css`
-                    position: relative;
-                    height: var(--height);
-                    overflow: hidden;
+        className: clsx(css`
+                    position: relative;
+                    height: var(--height);
+                    overflow: hidden;
                 `, className),
         style: transformCSSVariable({
             height: px(height)
         }, style),
         ...rest,
         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));
+                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: transformCSSVariable({
                     width: px(itemWidth),
@@ -133,10 +133,10 @@ function ManualFlow(props) {
                     top: px(getPosition(index).top)
                 }, wrapperStyle),
                 children: /*#__PURE__*/ jsx("div", {
-                    className: clsx(css`
-                                width: 100%;
-                                height: 100%;
-                                display: var(--display);
+                    className: clsx(css`
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
                             `, containerClassName),
                     style: transformCSSVariable({
                         display: getHidden(index) ? "none" : "block"

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

@@ -57,9 +57,9 @@ const InfiniteScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: wrapper,
-        className: clsx(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,
@@ -74,22 +74,22 @@ const InfiniteScroll = /*#__PURE__*/ forwardRef((props, ref)=>{
             children: [
                 /*#__PURE__*/ jsx("div", {
                     ref: container,
-                    className: clsx(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__*/ jsx("div", {
                     ref: container,
-                    className: clsx(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/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",

package/dist/components/LoopSwiper.js

@@ -40,39 +40,39 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
     }, []);
     return /*#__PURE__*/ jsxs("div", {
         ref: wrapper,
-        className: clsx(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: clsx(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",

package/dist/components/Scroll.cjs

@@ -107,19 +107,19 @@ 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)`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                    .scrollbar-track.scrollbar-track-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
+            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_2__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_1__.css)`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
                 `, className),
             style: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.transformCSSVariable)({
                 thumbWidth: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbWidth),

package/dist/components/Scroll.js

@@ -26,19 +26,19 @@ const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: ele,
-        className: clsx(css`
-                    .scrollbar-track.scrollbar-track-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-x {
-                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
-                    .scrollbar-track.scrollbar-track-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
-                    }
-                    .scrollbar-thumb.scrollbar-thumb-y {
-                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
-                    }
+        className: clsx(css`
+                    .scrollbar-track.scrollbar-track-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-x {
+                        ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
+                    .scrollbar-track.scrollbar-track-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
+                    }
+                    .scrollbar-thumb.scrollbar-thumb-y {
+                        ${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
+                    }
                 `, className),
         style: transformCSSVariable({
             thumbWidth: px(thumbWidth),

package/dist/components/Skeleton.cjs

@@ -35,23 +35,23 @@ const Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((p
     const { className, children, loading = null == children, ...rest } = props;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
-        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
-                    @keyframes shimmer {
-                        0% {
-                            background-position: -400px 0px;
-                        }
-                        100% {
-                            background-position: 400px 0px;
-                        }
-                    }
-                `, loading && (0, css_namespaceObject.css)`
-                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                        animation-duration: 1s;
-                        animation-fill-mode: forwards;
-                        animation-iteration-count: infinite;
-                        animation-name: shimmer;
-                        animation-timing-function: linear;
-                        background-size: 800px 104px;
+        className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+                `, loading && (0, css_namespaceObject.css)`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
                     `, className),
         ...rest,
         children: children