@lobehub/ui 1.158.1 → 1.160.0

package/es/awesome/AuroraBackground/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["children"];
@@ -7,6 +8,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { createStyles, keyframes } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var isDarkMode = _ref.isDarkMode,
     css = _ref.css,
@@ -25,16 +28,20 @@ var AuroraBackground = /*#__PURE__*/memo(function (_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(Flexbox, rest, /*#__PURE__*/React.createElement(Flexbox, {
-    className: styles.wrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.bg
-  })), /*#__PURE__*/React.createElement(Flexbox, {
-    flex: 1,
-    style: {
-      zIndex: 1
-    },
-    width: '100%'
-  }, children));
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      className: styles.wrapper,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.bg
+      })
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      flex: 1,
+      style: {
+        zIndex: 1
+      },
+      width: '100%',
+      children: children
+    })]
+  }));
 });
 export default AuroraBackground;

package/es/awesome/Features/Item.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style", "className", "row", "column", "description", "image", "title", "link", "icon", "imageStyle", "openExternal"];
@@ -10,21 +9,23 @@ import Img from "../../Img";
 import { useStyles } from "./style";
 
 // @ts-ignore
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Image = /*#__PURE__*/memo(function (_ref) {
   var image = _ref.image,
     className = _ref.className,
     title = _ref.title,
     style = _ref.style;
-  return image.startsWith('http') ? /*#__PURE__*/React.createElement(Img, {
+  return image.startsWith('http') ? /*#__PURE__*/_jsx(Img, {
     alt: title,
     className: className,
     src: image,
     style: style
-  }) : /*#__PURE__*/React.createElement(Center, {
+  }) : /*#__PURE__*/_jsx(Center, {
     className: className,
-    style: style
-  }, image);
+    style: style,
+    children: image
+  });
 });
 var Item = /*#__PURE__*/memo(function (_ref2) {
   var style = _ref2.style,
@@ -46,41 +47,48 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     style: _objectSpread({
       gridColumn: "span ".concat(column || 1),
       gridRow: "span ".concat(rowNumber)
     }, style)
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: styles.cell
-  }, image || icon && /*#__PURE__*/React.createElement(Center, {
-    className: styles.imgContainer,
-    style: imageStyle
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    className: styles.img,
-    icon: icon
-  }), image && /*#__PURE__*/React.createElement(Image, {
-    className: styles.img,
-    image: image,
-    title: title
-  })), title && /*#__PURE__*/React.createElement(Flexbox, {
-    align: 'center',
-    as: 'h3',
-    className: styles.title,
-    gap: 8,
-    horizontal: true
-  }, title), description && /*#__PURE__*/React.createElement("p", {
-    className: styles.desc,
-    dangerouslySetInnerHTML: {
-      __html: description
-    }
-  }), link && /*#__PURE__*/React.createElement("div", {
-    className: styles.link
-  }, /*#__PURE__*/React.createElement(A, {
-    href: link,
-    rel: "noreferrer",
-    target: openExternal ? '_blank' : undefined
-  }, "Read More"))));
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.cell,
+      children: [image || icon && /*#__PURE__*/_jsxs(Center, {
+        className: styles.imgContainer,
+        style: imageStyle,
+        children: [icon && /*#__PURE__*/_jsx(Icon, {
+          className: styles.img,
+          icon: icon
+        }), image && /*#__PURE__*/_jsx(Image, {
+          className: styles.img,
+          image: image,
+          title: title
+        })]
+      }), title && /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        as: 'h3',
+        className: styles.title,
+        gap: 8,
+        horizontal: true,
+        children: title
+      }), description && /*#__PURE__*/_jsx("p", {
+        className: styles.desc,
+        dangerouslySetInnerHTML: {
+          __html: description
+        }
+      }), link && /*#__PURE__*/_jsx("div", {
+        className: styles.link,
+        children: /*#__PURE__*/_jsx(A, {
+          href: link,
+          rel: "noreferrer",
+          target: openExternal ? '_blank' : undefined,
+          children: "Read More"
+        })
+      })]
+    })
+  }));
 });
 export default Item;

package/es/awesome/Features/index.js

@@ -1,12 +1,12 @@
 'use client';
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["items", "className", "itemClassName", "itemStyle", "maxWidth", "style"];
 import { memo } from 'react';
 import SpotlightCard from "../SpotlightCard";
 import { default as Item } from "./Item";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Features = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -17,15 +17,14 @@ var Features = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!(items !== null && items !== void 0 && items.length)) return;
-  return /*#__PURE__*/React.createElement(SpotlightCard, _extends({
+  return /*#__PURE__*/_jsx(SpotlightCard, _objectSpread({
     className: className,
     items: items,
     renderItem: function renderItem(item) {
-      return /*#__PURE__*/React.createElement(Item, _extends({
+      return /*#__PURE__*/_jsx(Item, _objectSpread({
         className: itemClassName,
-        key: item.title,
         style: itemStyle
-      }, item));
+      }, item), item.title);
     },
     style: _objectSpread({
       maxWidth: maxWidth

package/es/awesome/GaussianBackground/index.js

@@ -1,12 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["layers", "options", "className", "children", "classNames", "style"];
 import { memo, useEffect, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { useGaussianBackground } from "./useGaussianBackground";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   blurRadius: 16,
   fpsCap: 60,
@@ -30,14 +32,17 @@ var GaussianBackground = /*#__PURE__*/memo(function (_ref) {
     if (!run) return;
     run(layers, options);
   }, [run, options, layers]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     style: style
-  }, rest), /*#__PURE__*/React.createElement("canvas", {
-    className: cx(styles.canvas, classNames === null || classNames === void 0 ? void 0 : classNames.canvas),
-    ref: ref
-  }), /*#__PURE__*/React.createElement(Flexbox, {
-    className: cx(styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content)
-  }, children));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("canvas", {
+      className: cx(styles.canvas, classNames === null || classNames === void 0 ? void 0 : classNames.canvas),
+      ref: ref
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+      children: children
+    })]
+  }));
 });
 export default GaussianBackground;

package/es/awesome/Giscus/index.js

@@ -1,12 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style", "className", "reactionsEnabled", "mapping", "lang", "inputPosition", "id", "loading", "emitMetadata"];
 import GiscusComponent from '@giscus/react';
 import { useTheme, useThemeMode } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { formatLang, genStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Giscus = /*#__PURE__*/memo(function (_ref) {
   var style = _ref.style,
     className = _ref.className,
@@ -31,18 +32,19 @@ var Giscus = /*#__PURE__*/memo(function (_ref) {
   var giscusTheme = useMemo(function () {
     return btoa(genStyles(token, isDarkMode).styles);
   }, [isDarkMode, token]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: className,
-    style: style
-  }, /*#__PURE__*/React.createElement(GiscusComponent, _extends({
-    emitMetadata: emitMetadata,
-    id: id,
-    inputPosition: inputPosition,
-    lang: formatLang(lang),
-    loading: loading,
-    mapping: mapping,
-    reactionsEnabled: reactionsEnabled,
-    theme: "data:text/css;base64,".concat(giscusTheme)
-  }, rest)));
+    style: style,
+    children: /*#__PURE__*/_jsx(GiscusComponent, _objectSpread({
+      emitMetadata: emitMetadata,
+      id: id,
+      inputPosition: inputPosition,
+      lang: formatLang(lang),
+      loading: loading,
+      mapping: mapping,
+      reactionsEnabled: reactionsEnabled,
+      theme: "data:text/css;base64,".concat(giscusTheme)
+    }, rest))
+  });
 });
 export default Giscus;

package/es/awesome/GradientButton/index.js

@@ -1,11 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["glow", "children", "className", "size"];
 import { Button } from 'antd';
 import { memo } from 'react';
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var GradientButton = /*#__PURE__*/memo(function (_ref) {
   var _ref$glow = _ref.glow,
     glow = _ref$glow === void 0 ? true : _ref$glow,
@@ -17,11 +19,13 @@ var GradientButton = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(size),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/React.createElement(Button, _extends({
+  return /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
     className: cx(styles.button, className),
     size: size
-  }, rest), glow && /*#__PURE__*/React.createElement("div", {
-    className: styles.glow
-  }), children);
+  }, rest), {}, {
+    children: [glow && /*#__PURE__*/_jsx("div", {
+      className: styles.glow
+    }), children]
+  }));
 });
 export default GradientButton;

package/es/awesome/GridBackground/Grid.js

@@ -1,7 +1,11 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["color", "strokeWidth", "linePick"];
 import { isUndefined } from 'lodash-es';
 import { memo, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Line = /*#__PURE__*/function (Line) {
   Line[Line["l7"] = 0] = "l7";
   Line[Line["l6"] = 1] = "l6";
@@ -31,55 +35,63 @@ var Grid = /*#__PURE__*/memo(function (_ref) {
   var showLine = useCallback(function (l) {
     return isUnpick || linePick === l;
   }, [linePick]);
-  var vLine = /*#__PURE__*/React.createElement(React.Fragment, null, showLine(Line.l7) && /*#__PURE__*/React.createElement("path", {
-    d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0"
-  }), showLine(Line.l6) && /*#__PURE__*/React.createElement("path", {
-    d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0"
-  }), showLine(Line.l5) && /*#__PURE__*/React.createElement("path", {
-    d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0"
-  }), showLine(Line.l4) && /*#__PURE__*/React.createElement("path", {
-    d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0"
-  }), showLine(Line.l3) && /*#__PURE__*/React.createElement("path", {
-    d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0"
-  }), showLine(Line.l2) && /*#__PURE__*/React.createElement("path", {
-    d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0"
-  }), showLine(Line.l1) && /*#__PURE__*/React.createElement("path", {
-    d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0"
-  }), showLine(Line.center) && /*#__PURE__*/React.createElement("path", {
-    d: "M1864 420V0h0"
-  }), showLine(Line.r1) && /*#__PURE__*/React.createElement("path", {
-    d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0"
-  }), showLine(Line.r2) && /*#__PURE__*/React.createElement("path", {
-    d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0"
-  }), showLine(Line.r3) && /*#__PURE__*/React.createElement("path", {
-    d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0"
-  }), showLine(Line.r4) && /*#__PURE__*/React.createElement("path", {
-    d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0"
-  }), showLine(Line.r5) && /*#__PURE__*/React.createElement("path", {
-    d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0"
-  }), showLine(Line.r6) && /*#__PURE__*/React.createElement("path", {
-    d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0"
-  }), showLine(Line.r7) && /*#__PURE__*/React.createElement("path", {
-    d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0"
+  var vLine = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showLine(Line.l7) && /*#__PURE__*/_jsx("path", {
+      d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0"
+    }), showLine(Line.l6) && /*#__PURE__*/_jsx("path", {
+      d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0"
+    }), showLine(Line.l5) && /*#__PURE__*/_jsx("path", {
+      d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0"
+    }), showLine(Line.l4) && /*#__PURE__*/_jsx("path", {
+      d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0"
+    }), showLine(Line.l3) && /*#__PURE__*/_jsx("path", {
+      d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0"
+    }), showLine(Line.l2) && /*#__PURE__*/_jsx("path", {
+      d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0"
+    }), showLine(Line.l1) && /*#__PURE__*/_jsx("path", {
+      d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0"
+    }), showLine(Line.center) && /*#__PURE__*/_jsx("path", {
+      d: "M1864 420V0h0"
+    }), showLine(Line.r1) && /*#__PURE__*/_jsx("path", {
+      d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0"
+    }), showLine(Line.r2) && /*#__PURE__*/_jsx("path", {
+      d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0"
+    }), showLine(Line.r3) && /*#__PURE__*/_jsx("path", {
+      d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0"
+    }), showLine(Line.r4) && /*#__PURE__*/_jsx("path", {
+      d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0"
+    }), showLine(Line.r5) && /*#__PURE__*/_jsx("path", {
+      d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0"
+    }), showLine(Line.r6) && /*#__PURE__*/_jsx("path", {
+      d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0"
+    }), showLine(Line.r7) && /*#__PURE__*/_jsx("path", {
+      d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0"
+    })]
+  });
+  var hLine = isUnpick && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2835 42H892"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M595 136h2538"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M237 249h3254"
+    })]
+  });
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/_jsx("svg", {
+      style: {
+        width: '100%'
+      },
+      viewBox: "0 0 3728 422",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        stroke: color,
+        strokeWidth: strokeWidth,
+        children: [vLine, hLine]
+      })
+    })
   }));
-  var hLine = isUnpick && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
-    d: "M2835 42H892"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M595 136h2538"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M237 249h3254"
-  }));
-  return /*#__PURE__*/React.createElement("div", rest, /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '100%'
-    },
-    viewBox: "0 0 3728 422",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: color,
-    strokeWidth: strokeWidth
-  }, vLine, hLine)));
 });
 export default Grid;

package/es/awesome/GridBackground/GridShowcase.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style", "children", "backgroundColor", "innerProps"];
@@ -9,6 +8,8 @@ import { rgba } from 'polished';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import GridBackground from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var GridShowcase = /*#__PURE__*/memo(function (_ref) {
   var style = _ref.style,
     children = _ref.children,
@@ -17,32 +18,35 @@ var GridShowcase = /*#__PURE__*/memo(function (_ref) {
     innerProps = _ref.innerProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     style: _objectSpread({
       position: 'relative'
     }, style)
-  }, rest), /*#__PURE__*/React.createElement(GridBackground, {
-    animation: true,
-    colorBack: rgba(theme.colorText, 0.12),
-    colorFront: rgba(theme.colorText, 0.6),
-    flip: true
-  }), /*#__PURE__*/React.createElement(Flexbox, _extends({
-    align: 'center'
-  }, innerProps, {
-    style: _objectSpread({
-      zIndex: 4
-    }, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style)
-  }), children), /*#__PURE__*/React.createElement(GridBackground, {
-    animation: true,
-    backgroundColor: backgroundColor,
-    colorBack: rgba(theme.colorText, 0.24),
-    colorFront: theme.colorText,
-    random: true,
-    reverse: true,
-    showBackground: true,
-    style: {
-      zIndex: 0
-    }
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      colorBack: rgba(theme.colorText, 0.12),
+      colorFront: rgba(theme.colorText, 0.6),
+      flip: true
+    }), /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      align: 'center'
+    }, innerProps), {}, {
+      style: _objectSpread({
+        zIndex: 4
+      }, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style),
+      children: children
+    })), /*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      backgroundColor: backgroundColor,
+      colorBack: rgba(theme.colorText, 0.24),
+      colorFront: theme.colorText,
+      random: true,
+      reverse: true,
+      showBackground: true,
+      style: {
+        zIndex: 0
+      }
+    })]
   }));
 });
 export default GridShowcase;

package/es/awesome/GridBackground/index.js

@@ -1,7 +1,6 @@
 'use client';
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["flip", "reverse", "showBackground", "backgroundColor", "random", "animationDuration", "className", "colorFront", "colorBack", "strokeWidth", "style", "animation"];
@@ -10,6 +9,9 @@ import { shuffle } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Grid from "./Grid";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
 var GridBackground = /*#__PURE__*/memo(function (_ref) {
   var flip = _ref.flip,
@@ -50,41 +52,45 @@ var GridBackground = /*#__PURE__*/memo(function (_ref) {
     setGroup(random ? shuffle(initialGroup) : undefined);
   }, [random]);
   var HighlightGrid = useCallback(function () {
-    if (!group) return /*#__PURE__*/React.createElement(Grid, _extends({
+    if (!group) return /*#__PURE__*/_jsx(Grid, _objectSpread({
       style: {
         '--duration': "".concat(animationDuration, "s")
       }
     }, gridProps));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, group.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(Grid, _extends({
-        key: item,
-        linePick: item,
-        style: {
-          '--delay': "".concat(index + Math.random(), "s"),
-          '--duration': "".concat(animationDuration, "s")
-        }
-      }, gridProps));
-    }));
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: group.map(function (item, index) {
+        return /*#__PURE__*/_jsx(Grid, _objectSpread({
+          linePick: item,
+          style: {
+            '--delay': "".concat(index + Math.random(), "s"),
+            '--duration': "".concat(animationDuration, "s")
+          }
+        }, gridProps), item);
+      })
+    });
   }, [group, animationDuration, gridProps]);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     ref: ref,
     style: flip ? _objectSpread({
       transform: 'scaleY(-1)'
     }, style) : style
-  }, rest), /*#__PURE__*/React.createElement(Grid, {
-    color: colorBack || theme.colorBorder,
-    strokeWidth: strokeWidth,
-    style: {
-      zIndex: 2
-    }
-  }), animation && /*#__PURE__*/React.createElement(HighlightGrid, null), showBackground && /*#__PURE__*/React.createElement("div", {
-    className: styles.backgroundContainer,
-    style: size ? {
-      fontSize: size.width / 80
-    } : {}
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.background
-  })));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      color: colorBack || theme.colorBorder,
+      strokeWidth: strokeWidth,
+      style: {
+        zIndex: 2
+      }
+    }), animation && /*#__PURE__*/_jsx(HighlightGrid, {}), showBackground && /*#__PURE__*/_jsx("div", {
+      className: styles.backgroundContainer,
+      style: size ? {
+        fontSize: size.width / 80
+      } : {},
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.background
+      })
+    })]
+  }));
 });
 export default GridBackground;