@lobehub/ui 1.159.0 → 1.161.0

package/es/A/index.js

@@ -1,9 +1,9 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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), {}, {
@@ -17,7 +17,7 @@ var A = /*#__PURE__*/forwardRef(function (props, ref) {
   var AContainer = useMemo(function () {
     return createContainer(render);
   }, [render]);
-  return /*#__PURE__*/React.createElement(AContainer, _extends({
+  return /*#__PURE__*/_jsx(AContainer, _objectSpread({
     ref: ref
   }, props));
 });

package/es/ActionIcon/index.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+/// <reference types="react" />
 import { type FlexboxProps } from 'react-layout-kit';
 import { type IconProps, type IconSizeConfig, type IconSizeType, LucideIconProps } from "../Icon";
 import { type TooltipProps } from "../Tooltip";
@@ -19,6 +19,7 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
      * @default false
      */
     arrow?: boolean;
+    classNames?: TooltipProps['classNames'];
     disable?: boolean;
     /**
      * @description Glass blur style
@@ -30,7 +31,8 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
      * @description Set the loading status of ActionIcon
      */
     loading?: boolean;
-    overlayStyle?: CSSProperties;
+    overlayClassName?: TooltipProps['overlayClassName'];
+    overlayStyle?: TooltipProps['overlayStyle'];
     /**
      * @description The position of the tooltip relative to the target
      * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
@@ -48,6 +50,7 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
      * @default false
      */
     spotlight?: boolean;
+    styles?: TooltipProps['styles'];
     /**
      * @description The text shown in the tooltip
      */

package/es/ActionIcon/index.js

@@ -1,10 +1,9 @@
 'use client';
 
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-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 = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "overlayStyle", "tooltipDelay", "fillOpacity", "fillRule", "focusable", "disable", "spin"];
+var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay", "fillOpacity", "fillRule", "focusable", "disable", "spin", "styles"];
 import { Loader2 } from 'lucide-react';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -13,6 +12,8 @@ import Tooltip from "../Tooltip";
 import Spotlight from "../awesome/Spotlight";
 import { calcSize } from "./calcSize";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var color = _ref.color,
     fill = _ref.fill,
@@ -31,7 +32,6 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick = _ref.onClick,
     children = _ref.children,
     loading = _ref.loading,
-    overlayStyle = _ref.overlayStyle,
     _ref$tooltipDelay = _ref.tooltipDelay,
     tooltipDelay = _ref$tooltipDelay === void 0 ? 0.5 : _ref$tooltipDelay,
     fillOpacity = _ref.fillOpacity,
@@ -39,12 +39,13 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focusable = _ref.focusable,
     disable = _ref.disable,
     iconSpinning = _ref.spin,
+    styles = _ref.styles,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
       glass: Boolean(glass)
     }),
-    styles = _useStyles.styles,
+    s = _useStyles.styles,
     cx = _useStyles.cx;
   var _useMemo = useMemo(function () {
       return calcSize(size);
@@ -59,15 +60,15 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     focusable: focusable,
     size: size === 'site' ? 'normal' : size
   };
-  var content = icon && /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
+  var content = icon && /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
+    className: s.icon,
     icon: icon
-  }, iconProps, {
+  }, iconProps), {}, {
     spin: iconSpinning
   }));
-  var spin = /*#__PURE__*/React.createElement(Icon, _extends({
+  var spin = /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({
     icon: Loader2
-  }, iconProps, {
+  }, iconProps), {}, {
     spin: true
   }));
   var _useState = useState(false),
@@ -79,9 +80,9 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setTooltipOpen(false);
     onClick === null || onClick === void 0 || onClick(event);
   }, [loading, disable, setTooltipOpen, onClick]);
-  var actionIconBlock = /*#__PURE__*/React.createElement(Flexbox, _extends({
+  var actionIconBlock = /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
-    className: cx(styles.block, disable ? styles.disabled : styles.normal, className),
+    className: cx(s.block, disable ? s.disabled : s.normal, className),
     horizontal: true,
     justify: 'center',
     onClick: handleClick,
@@ -91,18 +92,23 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
       height: blockSize,
       width: blockSize
     }, style)
-  }, rest), spotlight && /*#__PURE__*/React.createElement(Spotlight, null), loading ? spin : content, children);
+  }, rest), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), loading ? spin : content, children]
+  }));
   if (!title) return actionIconBlock;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/_jsx(Tooltip, {
     arrow: arrow,
     mouseEnterDelay: tooltipDelay,
     onOpenChange: setTooltipOpen,
     open: tooltipOpen,
-    overlayStyle: _objectSpread({
-      pointerEvents: 'none'
-    }, overlayStyle),
     placement: placement,
-    title: title
-  }, actionIconBlock);
+    styles: _objectSpread(_objectSpread({}, styles), {}, {
+      root: _objectSpread({
+        pointerEvents: 'none'
+      }, styles === null || styles === void 0 ? void 0 : styles.root)
+    }),
+    title: title,
+    children: actionIconBlock
+  });
 });
 export default ActionIcon;

package/es/ActionIconGroup/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 = ["type", "items", "placement", "direction", "dropdownMenu", "onActionClick", "size"];
@@ -11,6 +10,8 @@ import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
@@ -30,51 +31,52 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
     }),
     styles = _useStyles.styles;
   var tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: styles.container,
     horizontal: direction === 'row'
-  }, rest), (items === null || items === void 0 ? void 0 : items.length) > 0 && items.map(function (item) {
-    return /*#__PURE__*/React.createElement(ActionIcon, {
-      disable: item.disable,
-      icon: item.icon,
-      key: item.key,
-      onClick: onActionClick ? function () {
-        return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick({
-          item: item,
-          key: item.key,
-          keyPath: [item.key]
-        });
-      } : undefined,
-      placement: tooltipsPlacement,
-      size: size,
-      title: item.label
-    });
-  }), (dropdownMenu === null || dropdownMenu === void 0 ? void 0 : dropdownMenu.length) > 0 && /*#__PURE__*/React.createElement(Dropdown, {
-    menu: {
-      items: dropdownMenu.map(function (item) {
-        if (item.type) return item;
-        return _objectSpread(_objectSpread({}, item), {}, {
-          disabled: item.disable,
-          icon: /*#__PURE__*/React.createElement(Icon, {
-            icon: item.icon,
-            size: size
-          }),
-          onClick: onActionClick ? function (info) {
-            return onActionClick({
-              item: item,
-              key: info.key,
-              keyPath: info.keyPath
-            });
-          } : undefined
-        });
-      })
-    },
-    trigger: ['click']
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
-    icon: MoreHorizontal,
-    key: "more",
-    placement: tooltipsPlacement,
-    size: size
-  })));
+  }, rest), {}, {
+    children: [(items === null || items === void 0 ? void 0 : items.length) > 0 && items.map(function (item) {
+      return /*#__PURE__*/_jsx(ActionIcon, {
+        disable: item.disable,
+        icon: item.icon,
+        onClick: onActionClick ? function () {
+          return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick({
+            item: item,
+            key: item.key,
+            keyPath: [item.key]
+          });
+        } : undefined,
+        placement: tooltipsPlacement,
+        size: size,
+        title: item.label
+      }, item.key);
+    }), (dropdownMenu === null || dropdownMenu === void 0 ? void 0 : dropdownMenu.length) > 0 && /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        items: dropdownMenu.map(function (item) {
+          if (item.type) return item;
+          return _objectSpread(_objectSpread({}, item), {}, {
+            disabled: item.disable,
+            icon: /*#__PURE__*/_jsx(Icon, {
+              icon: item.icon,
+              size: size
+            }),
+            onClick: onActionClick ? function (info) {
+              return onActionClick({
+                item: item,
+                key: info.key,
+                keyPath: info.keyPath
+              });
+            } : undefined
+          });
+        })
+      },
+      trigger: ['click'],
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: MoreHorizontal,
+        placement: tooltipsPlacement,
+        size: size
+      }, "more")
+    })]
+  }));
 });
 export default ActionIconGroup;

package/es/Alert/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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -13,6 +12,8 @@ import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var typeIcons = {
   error: XCircle,
   info: Info,
@@ -61,17 +62,17 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var isInsideExtra = !extraIsolate && !!extra;
-  var alert = /*#__PURE__*/React.createElement(AntdAlert, _extends({
+  var alert = /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
     banner: banner,
     className: cx(styles.container, colorfulText && styles.colorfulText, !!isInsideExtra && styles.hasExtra, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure, classNames === null || classNames === void 0 ? void 0 : classNames.alert, !isInsideExtra && styles.container),
     closable: closable,
-    closeIcon: closeIcon || /*#__PURE__*/React.createElement(ActionIcon, {
+    closeIcon: closeIcon || /*#__PURE__*/_jsx(ActionIcon, {
       color: colors(theme, type),
       icon: X,
       size: 'small'
     }),
     description: description,
-    icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/_jsx(Icon, {
       icon: typeIcons[type] || icon,
       size: {
         fontSize: description ? 24 : 18
@@ -84,45 +85,51 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
     type: type
   }, rest));
   if (!extra) return alert;
-  if (extraIsolate) return /*#__PURE__*/React.createElement(Flexbox, {
+  if (extraIsolate) return /*#__PURE__*/_jsxs(Flexbox, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
-    gap: 8
-  }, alert, extra);
-  return /*#__PURE__*/React.createElement(Flexbox, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.container
-  }, alert, /*#__PURE__*/React.createElement(Flexbox, {
-    className: cx(styles.extra, banner && styles.banner, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure),
-    style: {
-      background: colors(theme, type, 'bg'),
-      borderColor: colors(theme, type, 'border'),
-      color: colors(theme, type),
-      fontSize: description ? 14 : 12
-    }
-  }, /*#__PURE__*/React.createElement(Flexbox, {
-    align: 'center',
-    className: cx(styles.extraHeader, variant === 'pure' && styles.variantPureExtraHeader),
-    gap: message ? 6 : 10,
-    horizontal: true,
-    style: {
-      borderColor: colors(theme, type, 'border')
-    }
-  }, /*#__PURE__*/React.createElement(ActionIcon, {
-    color: colorfulText ? colors(theme, type) : undefined,
-    icon: expand ? ChevronDown : ChevronRight,
-    onClick: function onClick() {
-      return setExpand(!expand);
-    },
-    size: {
-      blockSize: 24,
-      fontSize: 18
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.expandText),
-    onClick: function onClick() {
-      return setExpand(!expand);
-    }
-  }, (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details')), expand && /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.extraBody, variant === 'pure' && styles.variantPure)
-  }, extra)));
+    gap: 8,
+    children: [alert, extra]
+  });
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
+    children: [alert, /*#__PURE__*/_jsxs(Flexbox, {
+      className: cx(styles.extra, banner && styles.banner, variant === 'block' && styles.variantBlock, variant === 'ghost' && styles.variantGhost, variant === 'pure' && styles.variantPure),
+      style: {
+        background: colors(theme, type, 'bg'),
+        borderColor: colors(theme, type, 'border'),
+        color: colors(theme, type),
+        fontSize: description ? 14 : 12
+      },
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx(styles.extraHeader, variant === 'pure' && styles.variantPureExtraHeader),
+        gap: message ? 6 : 10,
+        horizontal: true,
+        style: {
+          borderColor: colors(theme, type, 'border')
+        },
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          color: colorfulText ? colors(theme, type) : undefined,
+          icon: expand ? ChevronDown : ChevronRight,
+          onClick: function onClick() {
+            return setExpand(!expand);
+          },
+          size: {
+            blockSize: 24,
+            fontSize: 18
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(styles.expandText),
+          onClick: function onClick() {
+            return setExpand(!expand);
+          },
+          children: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details'
+        })]
+      }), expand && /*#__PURE__*/_jsx("div", {
+        className: cx(styles.extraBody, variant === 'pure' && styles.variantPure),
+        children: extra
+      })]
+    })]
+  });
 });
 export default Alert;

package/es/Avatar/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 = ["className", "avatar", "title", "animation", "size", "shape", "background", "style", "unoptimized"];
@@ -10,6 +9,7 @@ import { forwardRef, isValidElement, useMemo } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import Img from "../Img";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     avatar = _ref.avatar,
@@ -47,22 +47,24 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
       cursor: 'default'
     }, style)
   }, rest);
-  return isDefaultAntAvatar ? /*#__PURE__*/React.createElement(AntAvatar, _extends({
+  return isDefaultAntAvatar ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     ref: ref,
-    src: typeof avatar === 'string' ? /*#__PURE__*/React.createElement(Img, {
+    src: typeof avatar === 'string' ? /*#__PURE__*/_jsx(Img, {
       alt: avatarProps.alt || title,
       height: size,
       loading: 'lazy',
       src: avatar,
       width: size
     }) : avatar
-  }, avatarProps)) : /*#__PURE__*/React.createElement(AntAvatar, _extends({
+  }, avatarProps)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
     ref: ref
-  }, avatarProps), emoji ? /*#__PURE__*/React.createElement(FluentEmoji, {
-    emoji: emoji,
-    size: size * 0.8,
-    type: animation ? 'anim' : '3d',
-    unoptimized: unoptimized
-  }) : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2));
+  }, avatarProps), {}, {
+    children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: size * 0.8,
+      type: animation ? 'anim' : '3d',
+      unoptimized: unoptimized
+    }) : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
+  }));
 });
 export default Avatar;

package/es/Burger/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 = ["items", "openKeys", "selectedKeys", "opened", "setOpened", "className", "headerHeight", "onClick", "iconProps", "rootClassName", "fullscreen", "drawerProps"];
 import { Drawer, Menu } from 'antd';
@@ -9,6 +9,8 @@ import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var Burger = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
     openKeys = _ref.openKeys,
@@ -30,39 +32,42 @@ var Burger = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(Center, _extends({
+  return /*#__PURE__*/_jsxs(Center, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     onClick: function onClick() {
       setOpened(!opened);
     }
-  }, rest), /*#__PURE__*/React.createElement(ActionIcon, _extends({
-    icon: opened ? X : MenuIcon,
-    size: "site"
-  }, iconProps)), /*#__PURE__*/React.createElement(Drawer, _extends({
-    closeIcon: undefined,
-    open: opened,
-    placement: 'left',
-    width: '100vw'
-  }, drawerProps, {
-    className: styles.drawer,
-    rootClassName: cx(styles.drawerRoot, rootClassName),
-    styles: {
-      body: {
-        padding: 0
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(ActionIcon, _objectSpread({
+      icon: opened ? X : MenuIcon,
+      size: "site"
+    }, iconProps)), /*#__PURE__*/_jsxs(Drawer, _objectSpread(_objectSpread({
+      closeIcon: undefined,
+      open: opened,
+      placement: 'left',
+      width: '100vw'
+    }, drawerProps), {}, {
+      className: styles.drawer,
+      rootClassName: cx(styles.drawerRoot, rootClassName),
+      styles: {
+        body: {
+          padding: 0
+        },
+        header: {
+          display: 'none'
+        }
       },
-      header: {
-        display: 'none'
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Menu, {
-    className: styles.menu,
-    items: items,
-    mode: 'inline',
-    onClick: onClick,
-    openKeys: openKeys,
-    selectedKeys: selectedKeys
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.fillRect
-  })));
+      children: [/*#__PURE__*/_jsx(Menu, {
+        className: styles.menu,
+        items: items,
+        mode: 'inline',
+        onClick: onClick,
+        openKeys: openKeys,
+        selectedKeys: selectedKeys
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.fillRect
+      })]
+    }))]
+  }));
 });
 export default Burger;

package/es/CodeEditor/index.js

@@ -1,4 +1,3 @@
-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";
@@ -7,6 +6,8 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useSta
 import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var KEYCODE_Y = 89;
 var KEYCODE_Z = 90;
 var KEYCODE_M = 77;
@@ -368,44 +369,48 @@ var Editor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     style: style
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: styles.editor
-  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, {
-    className: cx(styles.highlight, classNames === null || classNames === void 0 ? void 0 : classNames.highlight),
-    language: language,
-    style: s.highlight
-  }, value), /*#__PURE__*/React.createElement("textarea", {
-    autoCapitalize: "off",
-    autoComplete: "off",
-    autoCorrect: "off",
-    autoFocus: autoFocus,
-    className: cx(styles.textarea, classNames === null || classNames === void 0 ? void 0 : classNames.textarea),
-    "data-gramm": false,
-    disabled: disabled,
-    form: form,
-    id: textareaId,
-    maxLength: maxLength,
-    minLength: minLength,
-    onBlur: onBlur,
-    onChange: handleChange,
-    onClick: onClick,
-    onFocus: onFocus,
-    onKeyDown: handleKeyDown,
-    onKeyUp: onKeyUp,
-    placeholder: placeholder,
-    readOnly: readOnly
-    // @ts-ignore
-    ,
-    ref: function ref(c) {
-      return inputRef.current = c;
-    },
-    required: required,
-    spellCheck: false,
-    style: _objectSpread({}, s === null || s === void 0 ? void 0 : s.textarea),
-    value: value
-  })));
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.editor,
+      children: [/*#__PURE__*/_jsx(SyntaxHighlighter, {
+        className: cx(styles.highlight, classNames === null || classNames === void 0 ? void 0 : classNames.highlight),
+        language: language,
+        style: s.highlight,
+        children: value
+      }), /*#__PURE__*/_jsx("textarea", {
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoFocus: autoFocus,
+        className: cx(styles.textarea, classNames === null || classNames === void 0 ? void 0 : classNames.textarea),
+        "data-gramm": false,
+        disabled: disabled,
+        form: form,
+        id: textareaId,
+        maxLength: maxLength,
+        minLength: minLength,
+        onBlur: onBlur,
+        onChange: handleChange,
+        onClick: onClick,
+        onFocus: onFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: onKeyUp,
+        placeholder: placeholder,
+        readOnly: readOnly
+        // @ts-ignore
+        ,
+        ref: function ref(c) {
+          return inputRef.current = c;
+        },
+        required: required,
+        spellCheck: false,
+        style: _objectSpread({}, s === null || s === void 0 ? void 0 : s.textarea),
+        value: value
+      })]
+    })
+  }));
 });
 export default Editor;