@lobehub/ui 1.157.0 → 1.158.0

package/es/Highlighter/FullFeatured.js

@@ -1,4 +1,4 @@
-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 = ["children", "language", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "bodyRender", "actionsRender", "copyable", "type", "defalutExpand"];
@@ -11,8 +11,6 @@ import CopyButton from "../CopyButton";
 import { languageMap } from "../hooks/useHighlight";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var options = languageMap.map(function (item) {
   return {
     label: item,
@@ -52,7 +50,7 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     fontSize: 14,
     strokeWidth: 2
   };
-  var origianlActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
+  var origianlActions = copyable && /*#__PURE__*/React.createElement(CopyButton, {
     content: children,
     placement: "left",
     size: size
@@ -63,65 +61,57 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     language: language,
     originalNode: origianlActions
   }) : origianlActions;
-  var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
+  var originalBody = /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
     style: expand ? {} : {
       height: 0,
       overflow: 'hidden'
-    },
-    children: children
-  });
+    }
+  }, children);
   var body = bodyRender ? bodyRender({
     content: children,
     language: language,
     originalNode: originalBody
   }) : originalBody;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.container, className),
     "data-code-type": "highlighter",
     style: style
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      className: styles.header,
-      horizontal: true,
-      justify: 'space-between',
-      children: [/*#__PURE__*/_jsx(ActionIcon, {
-        icon: expand ? ChevronDown : ChevronRight,
-        onClick: function onClick() {
-          return setExpand(!expand);
-        },
-        size: {
-          blockSize: 24,
-          fontSize: 14,
-          strokeWidth: 3
-        }
-      }), allowChangeLanguage && !fileName ? showLanguage && /*#__PURE__*/_jsx(Select, {
-        className: styles.select,
-        onSelect: setLang,
-        options: options,
-        size: 'small',
-        suffixIcon: false,
-        value: lang.toLowerCase(),
-        variant: 'borderless'
-      }) : /*#__PURE__*/_jsxs(Flexbox, {
-        align: 'center',
-        className: styles.select,
-        gap: 2,
-        horizontal: true,
-        justify: 'center',
-        children: [icon, /*#__PURE__*/_jsx("span", {
-          children: fileName || lang
-        })]
-      }), /*#__PURE__*/_jsx(Flexbox, {
-        align: 'center',
-        flex: 'none',
-        gap: 4,
-        horizontal: true,
-        children: actions
-      })]
-    }), body]
-  }));
+  }, rest), /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    className: styles.header,
+    horizontal: true,
+    justify: 'space-between'
+  }, /*#__PURE__*/React.createElement(ActionIcon, {
+    icon: expand ? ChevronDown : ChevronRight,
+    onClick: function onClick() {
+      return setExpand(!expand);
+    },
+    size: {
+      blockSize: 24,
+      fontSize: 14,
+      strokeWidth: 3
+    }
+  }), allowChangeLanguage && !fileName ? showLanguage && /*#__PURE__*/React.createElement(Select, {
+    className: styles.select,
+    onSelect: setLang,
+    options: options,
+    size: 'small',
+    suffixIcon: false,
+    value: lang.toLowerCase(),
+    variant: 'borderless'
+  }) : /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    className: styles.select,
+    gap: 2,
+    horizontal: true,
+    justify: 'center'
+  }, icon, /*#__PURE__*/React.createElement("span", null, fileName || lang)), /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    flex: 'none',
+    gap: 4,
+    horizontal: true
+  }, actions)), body);
 });
 export default HighlighterFullFeatured;
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -5,9 +5,6 @@ import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
 import { useHighlight } from "../../hooks/useHighlight";
 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 SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language,
@@ -21,32 +18,24 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var _useHighlight = useHighlight(children, language, isDarkMode),
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isLoading || !data ? /*#__PURE__*/_jsx("div", {
-      className: cx(styles.unshiki, className),
-      style: style,
-      children: /*#__PURE__*/_jsx("pre", {
-        children: /*#__PURE__*/_jsx("code", {
-          children: children
-        })
-      })
-    }) : /*#__PURE__*/_jsx("div", {
-      className: cx(styles.shiki, className),
-      dangerouslySetInnerHTML: {
-        __html: data
-      },
-      style: style
-    }), isLoading && /*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      className: styles.loading,
-      gap: 8,
-      horizontal: true,
-      justify: 'center',
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: Loader2,
-        spin: true
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading || !data ? /*#__PURE__*/React.createElement("div", {
+    className: cx(styles.unshiki, className),
+    style: style
+  }, /*#__PURE__*/React.createElement("pre", null, /*#__PURE__*/React.createElement("code", null, children))) : /*#__PURE__*/React.createElement("div", {
+    className: cx(styles.shiki, className),
+    dangerouslySetInnerHTML: {
+      __html: data
+    },
+    style: style
+  }), isLoading && /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    className: styles.loading,
+    gap: 8,
+    horizontal: true,
+    justify: 'center'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: Loader2,
+    spin: true
+  })));
 });
 export default SyntaxHighlighter;

package/es/Highlighter/index.js

@@ -1,6 +1,6 @@
 '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 = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "wrap", "bodyRender", "actionsRender"];
 import { memo } from 'react';
@@ -10,8 +10,6 @@ import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var fullFeatured = _ref.fullFeatured,
     _ref$copyButtonSize = _ref.copyButtonSize,
@@ -34,27 +32,27 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
-    content: children,
+  var tirmedChildren = children.trim();
+  var originalActions = copyable && /*#__PURE__*/React.createElement(CopyButton, {
+    content: tirmedChildren,
     placement: "left",
     size: copyButtonSize
   });
   var actions = actionsRender ? actionsRender({
     actionIconSize: copyButtonSize,
-    content: children,
+    content: tirmedChildren,
     language: language,
     originalNode: originalActions
   }) : originalActions;
-  var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
-    language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
-    children: children
-  });
+  var originalBody = /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    language: language === null || language === void 0 ? void 0 : language.toLowerCase()
+  }, tirmedChildren);
   var body = bodyRender ? bodyRender({
-    content: children,
+    content: tirmedChildren,
     language: language,
     originalNode: originalBody
   }) : originalBody;
-  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
+  if (fullFeatured) return /*#__PURE__*/React.createElement(FullFeatured, _extends({
     actionsRender: actionsRender,
     bodyRender: bodyRender,
     className: className,
@@ -63,29 +61,22 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     showLanguage: showLanguage,
     type: type,
     wrap: wrap
-  }, rest), {}, {
-    children: children
-  }));
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  }, rest), tirmedChildren);
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(styles.container, !wrap && styles.nowrap, className),
     "data-code-type": "highlighter",
     style: style
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      className: styles.button,
-      flex: 'none',
-      gap: 4,
-      horizontal: true,
-      children: actions
-    }), showLanguage && language && /*#__PURE__*/_jsx(Tag, {
-      className: styles.lang,
-      children: language.toLowerCase()
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles.scroller,
-      children: body
-    })]
-  }));
+  }, rest), /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    className: styles.button,
+    flex: 'none',
+    gap: 4,
+    horizontal: true
+  }, actions), showLanguage && language && /*#__PURE__*/React.createElement(Tag, {
+    className: styles.lang
+  }, language.toLowerCase()), /*#__PURE__*/React.createElement("div", {
+    className: styles.scroller
+  }, body));
 });
 export default Highlighter;
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Icon/icons/DiscordIcon.js

@@ -1,12 +1,11 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createLucideIcon } from 'lucide-react';
-import { jsx as _jsx } from "react/jsx-runtime";
 var Discord = createLucideIcon('Discord', [['path', {
   d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
   key: '18tl5t'
 }]]);
 var DiscordIcon = function DiscordIcon(props) {
-  return /*#__PURE__*/_jsx(Discord, _objectSpread({
+  return /*#__PURE__*/React.createElement(Discord, _extends({
     style: {
       overflow: 'visible'
     }

package/es/Icon/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 = ["icon", "size", "color", "fill", "className", "focusable", "spin", "fillRule", "fillOpacity"],
   _excluded2 = ["fontSize"];
 import { forwardRef, useMemo } from 'react';
 import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
 var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var icon = _ref.icon,
     size = _ref.size,
@@ -29,21 +28,19 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, [size]),
     fontSize = _useMemo.fontSize,
     restSize = _objectWithoutProperties(_useMemo, _excluded2);
-  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("span", _extends({
     className: cx('anticon', spin && styles.spin, className),
     role: "img"
-  }, rest), {}, {
-    children: /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
-      color: color,
-      fill: fill,
-      fillOpacity: fillOpacity,
-      fillRule: fillRule,
-      focusable: focusable,
-      height: fontSize,
-      ref: ref,
-      size: fontSize,
-      width: fontSize
-    }, restSize))
-  }));
+  }, rest), /*#__PURE__*/React.createElement(SvgIcon, _extends({
+    color: color,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    fillRule: fillRule,
+    focusable: focusable,
+    height: fontSize,
+    ref: ref,
+    size: fontSize,
+    width: fontSize
+  }, restSize)));
 });
 export default Icon;

package/es/Image/ImageGallery.js

@@ -1,7 +1,6 @@
 import { Image } from 'antd';
 import { memo } from 'react';
 import usePreview from "./usePreview";
-import { jsx as _jsx } from "react/jsx-runtime";
 var PreviewGroup = Image.PreviewGroup;
 var ImageGallery = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
@@ -11,10 +10,9 @@ var ImageGallery = /*#__PURE__*/memo(function (_ref) {
     preview = _ref.preview;
   var mergePreivew = usePreview(preview);
   if (!enable) return children;
-  return /*#__PURE__*/_jsx(PreviewGroup, {
+  return /*#__PURE__*/React.createElement(PreviewGroup, {
     items: items,
-    preview: mergePreivew,
-    children: children
-  });
+    preview: mergePreivew
+  }, children);
 });
 export default ImageGallery;

package/es/Image/Preview.js

@@ -1,10 +1,10 @@
 import { memo, useEffect, useRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
 var Preview = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     visible = _ref.visible;
-  var ref = useRef();
+  var ref = useRef(null);
   useEffect(function () {
+    if (!ref.current) return;
     var handleDisableZoom = function handleDisableZoom(event) {
       event.preventDefault();
     };
@@ -16,9 +16,8 @@ var Preview = /*#__PURE__*/memo(function (_ref) {
       ref.current.removeEventListener('wheel', handleDisableZoom);
     }
   }, [visible]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    children: children
-  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children);
 });
 export default Preview;

package/es/Image/index.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 = ["wrapperClassName", "style", "preview", "isLoading", "minSize", "size", "actions", "alwaysShowActions", "objectFit", "classNames", "onClick", "width", "height", "borderless"];
@@ -11,8 +12,6 @@ import { Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
 import { useStyles } from "./style";
 import usePreview from "./usePreview";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var Image = /*#__PURE__*/memo(function (_ref) {
   var wrapperClassName = _ref.wrapperClassName,
     style = _ref.style,
@@ -48,42 +47,39 @@ var Image = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     theme = _useStyles.theme;
   var mergePreivew = usePreview(preview);
-  if (isLoading) return /*#__PURE__*/_jsx("div", {
-    onClick: onClick,
-    children: /*#__PURE__*/_jsx(Skeleton.Avatar, {
-      active: true,
-      style: {
-        borderRadius: theme.borderRadius,
-        height: height,
-        maxHeight: size,
-        maxWidth: size,
-        minHeight: minSize,
-        minWidth: minSize,
-        width: width
-      }
-    })
-  });
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(styles.imageWrapper, wrapperClassName),
-    style: style,
-    children: [actions && /*#__PURE__*/_jsx("div", {
-      className: styles.actions,
-      children: actions
-    }), /*#__PURE__*/_jsx(AntImage, _objectSpread({
-      className: classNames.image,
-      fallback: isDarkMode ? 'https://gw.alipayobjects.com/zos/kitchen/nhzBb%24r0Cm/image_off_dark.webp' : 'https://gw.alipayobjects.com/zos/kitchen/QAvkgt30Ys/image_off_light.webp',
+  if (isLoading) return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Skeleton.Avatar, {
+    active: true,
+    style: {
+      borderRadius: theme.borderRadius,
       height: height,
-      loading: 'lazy',
-      onClick: onClick,
-      preview: preview === false ? false : _objectSpread({
-        mask: mobile ? false : actions ? /*#__PURE__*/_jsx("div", {}) : /*#__PURE__*/_jsx(Icon, {
-          icon: Eye,
-          size: 'normal'
-        })
-      }, mergePreivew),
-      width: width,
-      wrapperClassName: cx(styles.image, classNames.wrapper)
-    }, rest))]
-  });
+      maxHeight: size,
+      maxWidth: size,
+      minHeight: minSize,
+      minWidth: minSize,
+      width: width
+    }
+  }));
+  return /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.imageWrapper, wrapperClassName),
+    style: style
+  }, actions && /*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, actions), /*#__PURE__*/React.createElement(AntImage, _extends({
+    className: classNames.image,
+    fallback: isDarkMode ? 'https://gw.alipayobjects.com/zos/kitchen/nhzBb%24r0Cm/image_off_dark.webp' : 'https://gw.alipayobjects.com/zos/kitchen/QAvkgt30Ys/image_off_light.webp',
+    height: height,
+    loading: 'lazy',
+    onClick: onClick,
+    preview: preview === false ? false : _objectSpread({
+      mask: mobile ? false : actions ? /*#__PURE__*/React.createElement("div", null) : /*#__PURE__*/React.createElement(Icon, {
+        icon: Eye,
+        size: 'normal'
+      })
+    }, mergePreivew),
+    width: width,
+    wrapperClassName: cx(styles.image, classNames.wrapper)
+  }, rest)));
 });
 export default Image;

package/es/Image/usePreview.js

@@ -9,8 +9,6 @@ import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
 import Preview from "./Preview";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var usePreview = function usePreview() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _onVisibleChange = _ref.onVisibleChange,
@@ -29,7 +27,7 @@ export var usePreview = function usePreview() {
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   return _objectSpread({
-    closeIcon: /*#__PURE__*/_jsx(Icon, {
+    closeIcon: /*#__PURE__*/React.createElement(Icon, {
       icon: X,
       size: {
         fontSize: 18,
@@ -37,10 +35,9 @@ export var usePreview = function usePreview() {
       }
     }),
     imageRender: function imageRender(node) {
-      return /*#__PURE__*/_jsx(Preview, {
-        visible: visible,
-        children: node
-      });
+      return /*#__PURE__*/React.createElement(Preview, {
+        visible: visible
+      }, node);
     },
     maxScale: maxScale,
     minScale: minScale,
@@ -62,38 +59,37 @@ export var usePreview = function usePreview() {
         onRotateRight = _ref2$actions.onRotateRight,
         onZoomOut = _ref2$actions.onZoomOut,
         onZoomIn = _ref2$actions.onZoomIn;
-      return /*#__PURE__*/_jsxs(Flexbox, {
+      return /*#__PURE__*/React.createElement(Flexbox, {
         className: styles.toolbar,
         gap: 4,
-        horizontal: true,
-        children: [/*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: FlipHorizontal,
-          onClick: onFlipX
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: FlipVertical,
-          onClick: onFlipY
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: RotateCcw,
-          onClick: onRotateLeft
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          icon: RotateCw,
-          onClick: onRotateRight
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          disable: scale === minScale,
-          icon: ZoomOut,
-          onClick: onZoomOut
-        }), /*#__PURE__*/_jsx(ActionIcon, {
-          color: '#fff',
-          disable: scale === maxScale,
-          icon: ZoomIn,
-          onClick: onZoomIn
-        }), toolbarAddon]
-      });
+        horizontal: true
+      }, /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        icon: FlipHorizontal,
+        onClick: onFlipX
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        icon: FlipVertical,
+        onClick: onFlipY
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        icon: RotateCcw,
+        onClick: onRotateLeft
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        icon: RotateCw,
+        onClick: onRotateRight
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        disable: scale === minScale,
+        icon: ZoomOut,
+        onClick: onZoomOut
+      }), /*#__PURE__*/React.createElement(ActionIcon, {
+        color: '#fff',
+        disable: scale === maxScale,
+        icon: ZoomIn,
+        onClick: onZoomIn
+      }), toolbarAddon);
     }
   }, rest);
 };

package/es/Img/index.js

@@ -1,11 +1,11 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["unoptimized"];
 import { createElement, forwardRef, useContext, useMemo } from 'react';
 import { ConfigContext } from "../ConfigProvider";
-import { jsx as _jsx } from "react/jsx-runtime";
 var createContainer = function createContainer(as) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
@@ -21,7 +21,7 @@ var Img = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var ImgContainer = useMemo(function () {
     return createContainer(render);
   }, [render]);
-  return /*#__PURE__*/_jsx(ImgContainer, _objectSpread({
+  return /*#__PURE__*/React.createElement(ImgContainer, _extends({
     ref: ref,
     unoptimized: unoptimized === undefined ? config === null || config === void 0 ? void 0 : config.imgUnoptimized : unoptimized
   }, res));

package/es/Input/index.js

@@ -1,13 +1,13 @@
 '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 = ["className", "type"],
   _excluded2 = ["className", "type", "resize", "style"];
 import { Input as AntInput } from 'antd';
 import { forwardRef } from 'react';
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
 export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$type = _ref.type,
@@ -18,7 +18,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+  return /*#__PURE__*/React.createElement(AntInput, _extends({
     className: cx(styles.input, className),
     ref: ref,
     variant: type === 'pure' ? 'borderless' : undefined
@@ -37,7 +37,7 @@ export var TextArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }),
     styles = _useStyles2.styles,
     cx = _useStyles2.cx;
-  return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
+  return /*#__PURE__*/React.createElement(AntInput.TextArea, _extends({
     className: cx(styles.textarea, className),
     ref: ref,
     style: resize ? style : _objectSpread({