@lobehub/ui 1.157.1 → 1.158.0

package/es/awesome/AuroraBackground/index.js

@@ -1,6 +1,5 @@
 '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"];
@@ -8,8 +7,6 @@ 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,
@@ -28,20 +25,16 @@ var AuroraBackground = /*#__PURE__*/memo(function (_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  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
-    })]
-  }));
+  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));
 });
 export default AuroraBackground;

package/es/awesome/Features/Item.js

@@ -1,3 +1,4 @@
+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"];
@@ -9,23 +10,21 @@ 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__*/_jsx(Img, {
+  return image.startsWith('http') ? /*#__PURE__*/React.createElement(Img, {
     alt: title,
     className: className,
     src: image,
     style: style
-  }) : /*#__PURE__*/_jsx(Center, {
+  }) : /*#__PURE__*/React.createElement(Center, {
     className: className,
-    style: style,
-    children: image
-  });
+    style: style
+  }, image);
 });
 var Item = /*#__PURE__*/memo(function (_ref2) {
   var style = _ref2.style,
@@ -47,48 +46,41 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.container, className),
     style: _objectSpread({
       gridColumn: "span ".concat(column || 1),
       gridRow: "span ".concat(rowNumber)
     }, style)
-  }, 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"
-        })
-      })]
-    })
-  }));
+  }, 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"))));
 });
 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,14 +17,15 @@ var Features = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!(items !== null && items !== void 0 && items.length)) return;
-  return /*#__PURE__*/_jsx(SpotlightCard, _objectSpread({
+  return /*#__PURE__*/React.createElement(SpotlightCard, _extends({
     className: className,
     items: items,
     renderItem: function renderItem(item) {
-      return /*#__PURE__*/_jsx(Item, _objectSpread({
+      return /*#__PURE__*/React.createElement(Item, _extends({
         className: itemClassName,
+        key: item.title,
         style: itemStyle
-      }, item), item.title);
+      }, item));
     },
     style: _objectSpread({
       maxWidth: maxWidth

package/es/awesome/GaussianBackground/index.js

@@ -1,14 +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 = ["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,
@@ -32,17 +30,14 @@ var GaussianBackground = /*#__PURE__*/memo(function (_ref) {
     if (!run) return;
     run(layers, options);
   }, [run, options, layers]);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.container, className),
     style: style
-  }, 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
-    })]
-  }));
+  }, 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));
 });
 export default GaussianBackground;

package/es/awesome/GaussianBackground/useGaussianBackground.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { ColorLayer } from './vendor/gaussianBackground';
-export declare const useGaussianBackground: (ref: RefObject<HTMLCanvasElement>) => (layers: ColorLayer[], options?: {
+export declare const useGaussianBackground: (ref: RefObject<HTMLCanvasElement | null>) => (layers: ColorLayer[], options?: {
     blurRadius?: number;
     fpsCap?: number;
     scale?: number;

package/es/awesome/GaussianBackground/useGaussianBackground.js

@@ -7,7 +7,7 @@ export var useGaussianBackground = function useGaussianBackground(ref) {
     client = _useState2[0],
     setClient = _useState2[1];
   useEffect(function () {
-    if (!ref.current) return;
+    if (!(ref !== null && ref !== void 0 && ref.current)) return;
     setClient(new GaussianBackgroundClient(ref.current));
   }, []);
   var handleRun = useCallback(function (layers, options) {

package/es/awesome/Giscus/index.js

@@ -1,13 +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 = ["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,
@@ -32,19 +31,18 @@ var Giscus = /*#__PURE__*/memo(function (_ref) {
   var giscusTheme = useMemo(function () {
     return btoa(genStyles(token, isDarkMode).styles);
   }, [isDarkMode, token]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
-    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))
-  });
+    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)));
 });
 export default Giscus;

package/es/awesome/GradientButton/index.js

@@ -1,13 +1,11 @@
 '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 = ["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,
@@ -19,13 +17,11 @@ var GradientButton = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(size),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Button, _extends({
     className: cx(styles.button, className),
     size: size
-  }, rest), {}, {
-    children: [glow && /*#__PURE__*/_jsx("div", {
-      className: styles.glow
-    }), children]
-  }));
+  }, rest), glow && /*#__PURE__*/React.createElement("div", {
+    className: styles.glow
+  }), children);
 });
 export default GradientButton;

package/es/awesome/GridBackground/Grid.js

@@ -1,11 +1,7 @@
-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";
@@ -35,63 +31,55 @@ var Grid = /*#__PURE__*/memo(function (_ref) {
   var showLine = useCallback(function (l) {
     return isUnpick || linePick === l;
   }, [linePick]);
-  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 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 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,5 +1,6 @@
 '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"];
@@ -8,8 +9,6 @@ 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,
@@ -18,35 +17,32 @@ var GridShowcase = /*#__PURE__*/memo(function (_ref) {
     innerProps = _ref.innerProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
     style: _objectSpread({
       position: 'relative'
     }, style)
-  }, 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
-      }
-    })]
+  }, 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
+    }
   }));
 });
 export default GridShowcase;

package/es/awesome/GridBackground/index.js

@@ -1,6 +1,7 @@
 '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"];
@@ -9,9 +10,6 @@ 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,
@@ -52,45 +50,41 @@ var GridBackground = /*#__PURE__*/memo(function (_ref) {
     setGroup(random ? shuffle(initialGroup) : undefined);
   }, [random]);
   var HighlightGrid = useCallback(function () {
-    if (!group) return /*#__PURE__*/_jsx(Grid, _objectSpread({
+    if (!group) return /*#__PURE__*/React.createElement(Grid, _extends({
       style: {
         '--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);
-      })
-    });
+    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));
+    }));
   }, [group, animationDuration, gridProps]);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.container, className),
     ref: ref,
     style: flip ? _objectSpread({
       transform: 'scaleY(-1)'
     }, style) : style
-  }, 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
-      })
-    })]
-  }));
+  }, 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
+  })));
 });
 export default GridBackground;