@lobehub/ui 1.158.1 → 1.160.0

package/es/Highlighter/FullFeatured.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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,6 +11,8 @@ 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,
@@ -50,7 +52,7 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     fontSize: 14,
     strokeWidth: 2
   };
-  var origianlActions = copyable && /*#__PURE__*/React.createElement(CopyButton, {
+  var origianlActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
     content: children,
     placement: "left",
     size: size
@@ -61,57 +63,65 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     language: language,
     originalNode: origianlActions
   }) : origianlActions;
-  var originalBody = /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+  var originalBody = /*#__PURE__*/_jsx(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__*/React.createElement("div", _extends({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     "data-code-type": "highlighter",
     style: style
-  }, 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);
+  }, 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]
+  }));
 });
 export default HighlighterFullFeatured;
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -5,6 +5,9 @@ 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,
@@ -18,24 +21,32 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var _useHighlight = useHighlight(children, language, isDarkMode),
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
-  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
-  })));
+  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
+      })
+    })]
+  });
 });
 export default SyntaxHighlighter;

package/es/Highlighter/index.js

@@ -1,6 +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 = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "wrap", "bodyRender", "actionsRender"];
 import { memo } from 'react';
@@ -10,6 +10,8 @@ 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,
@@ -33,7 +35,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var tirmedChildren = children.trim();
-  var originalActions = copyable && /*#__PURE__*/React.createElement(CopyButton, {
+  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
     content: tirmedChildren,
     placement: "left",
     size: copyButtonSize
@@ -44,15 +46,16 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     language: language,
     originalNode: originalActions
   }) : originalActions;
-  var originalBody = /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-    language: language === null || language === void 0 ? void 0 : language.toLowerCase()
-  }, tirmedChildren);
+  var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
+    language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
+    children: tirmedChildren
+  });
   var body = bodyRender ? bodyRender({
     content: tirmedChildren,
     language: language,
     originalNode: originalBody
   }) : originalBody;
-  if (fullFeatured) return /*#__PURE__*/React.createElement(FullFeatured, _extends({
+  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
     actionsRender: actionsRender,
     bodyRender: bodyRender,
     className: className,
@@ -61,22 +64,29 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     showLanguage: showLanguage,
     type: type,
     wrap: wrap
-  }, rest), tirmedChildren);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  }, rest), {}, {
+    children: tirmedChildren
+  }));
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, !wrap && styles.nowrap, className),
     "data-code-type": "highlighter",
     style: style
-  }, 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));
+  }, 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
+    })]
+  }));
 });
 export default Highlighter;
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Icon/icons/DiscordIcon.js

@@ -1,11 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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__*/React.createElement(Discord, _extends({
+  return /*#__PURE__*/_jsx(Discord, _objectSpread({
     style: {
       overflow: 'visible'
     }

package/es/Icon/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 = ["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,
@@ -28,19 +29,21 @@ var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, [size]),
     fontSize = _useMemo.fontSize,
     restSize = _objectWithoutProperties(_useMemo, _excluded2);
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
     className: cx('anticon', spin && styles.spin, className),
     role: "img"
-  }, 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)));
+  }, 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))
+  }));
 });
 export default Icon;

package/es/Image/ImageGallery.js

@@ -1,6 +1,7 @@
 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,
@@ -10,9 +11,10 @@ var ImageGallery = /*#__PURE__*/memo(function (_ref) {
     preview = _ref.preview;
   var mergePreivew = usePreview(preview);
   if (!enable) return children;
-  return /*#__PURE__*/React.createElement(PreviewGroup, {
+  return /*#__PURE__*/_jsx(PreviewGroup, {
     items: items,
-    preview: mergePreivew
-  }, children);
+    preview: mergePreivew,
+    children: children
+  });
 });
 export default ImageGallery;

package/es/Image/Preview.js

@@ -1,4 +1,5 @@
 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;
@@ -16,8 +17,9 @@ var Preview = /*#__PURE__*/memo(function (_ref) {
       ref.current.removeEventListener('wheel', handleDisableZoom);
     }
   }, [visible]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, children);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    children: children
+  });
 });
 export default Preview;

package/es/Image/index.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 = ["wrapperClassName", "style", "preview", "isLoading", "minSize", "size", "actions", "alwaysShowActions", "objectFit", "classNames", "onClick", "width", "height", "borderless"];
@@ -12,6 +11,8 @@ 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,
@@ -47,39 +48,42 @@ var Image = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     theme = _useStyles.theme;
   var mergePreivew = usePreview(preview);
-  if (isLoading) return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Skeleton.Avatar, {
-    active: true,
-    style: {
-      borderRadius: theme.borderRadius,
-      height: height,
-      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',
+  if (isLoading) return /*#__PURE__*/_jsx("div", {
     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)));
+    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',
+      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))]
+  });
 });
 export default Image;

package/es/Image/usePreview.js

@@ -9,6 +9,8 @@ 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,
@@ -27,7 +29,7 @@ export var usePreview = function usePreview() {
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   return _objectSpread({
-    closeIcon: /*#__PURE__*/React.createElement(Icon, {
+    closeIcon: /*#__PURE__*/_jsx(Icon, {
       icon: X,
       size: {
         fontSize: 18,
@@ -35,9 +37,10 @@ export var usePreview = function usePreview() {
       }
     }),
     imageRender: function imageRender(node) {
-      return /*#__PURE__*/React.createElement(Preview, {
-        visible: visible
-      }, node);
+      return /*#__PURE__*/_jsx(Preview, {
+        visible: visible,
+        children: node
+      });
     },
     maxScale: maxScale,
     minScale: minScale,
@@ -59,37 +62,38 @@ export var usePreview = function usePreview() {
         onRotateRight = _ref2$actions.onRotateRight,
         onZoomOut = _ref2$actions.onZoomOut,
         onZoomIn = _ref2$actions.onZoomIn;
-      return /*#__PURE__*/React.createElement(Flexbox, {
+      return /*#__PURE__*/_jsxs(Flexbox, {
         className: styles.toolbar,
         gap: 4,
-        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);
+        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]
+      });
     }
   }, 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__*/React.createElement(ImgContainer, _extends({
+  return /*#__PURE__*/_jsx(ImgContainer, _objectSpread({
     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__*/React.createElement(AntInput, _extends({
+  return /*#__PURE__*/_jsx(AntInput, _objectSpread({
     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__*/React.createElement(AntInput.TextArea, _extends({
+  return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
     className: cx(styles.textarea, className),
     ref: ref,
     style: resize ? style : _objectSpread({