@lobehub/ui 1.158.1 → 1.160.0

package/es/chat/MessageInput/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";
@@ -10,6 +9,9 @@ import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { TextArea } from "../../Input";
 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 MessageInput = /*#__PURE__*/memo(function (_ref) {
   var text = _ref.text,
     _ref$type = _ref.type,
@@ -36,44 +38,50 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var isAutoSize = height === 'auto';
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     gap: 16,
     style: _objectSpread({
       flex: 1,
       width: '100%'
     }, style)
-  }, rest), /*#__PURE__*/React.createElement(TextArea, {
-    autoSize: isAutoSize,
-    className: cx(styles, textareaClassname),
-    classNames: classNames,
-    onBlur: function onBlur(e) {
-      return setValue(e.target.value);
-    },
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    placeholder: placeholder,
-    resize: false,
-    style: textareaStyle,
-    type: type,
-    value: temporaryValue
-  }), /*#__PURE__*/React.createElement(Flexbox, {
-    direction: 'horizontal-reverse',
-    gap: 8
-  }, renderButtons ? renderButtons(temporaryValue).map(function (buttonProps, index) {
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      key: index,
-      size: "small"
-    }, buttonProps));
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      onConfirm === null || onConfirm === void 0 || onConfirm(temporaryValue);
-    },
-    size: editButtonSize,
-    type: "primary"
-  }, (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'), /*#__PURE__*/React.createElement(Button, {
-    onClick: onCancel,
-    size: editButtonSize
-  }, (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'))));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      autoSize: isAutoSize,
+      className: cx(styles, textareaClassname),
+      classNames: classNames,
+      onBlur: function onBlur(e) {
+        return setValue(e.target.value);
+      },
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      placeholder: placeholder,
+      resize: false,
+      style: textareaStyle,
+      type: type,
+      value: temporaryValue
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      direction: 'horizontal-reverse',
+      gap: 8,
+      children: renderButtons ? renderButtons(temporaryValue).map(function (buttonProps, index) {
+        return /*#__PURE__*/_jsx(Button, _objectSpread({
+          size: "small"
+        }, buttonProps), index);
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: function onClick() {
+            onConfirm === null || onConfirm === void 0 || onConfirm(temporaryValue);
+          },
+          size: editButtonSize,
+          type: "primary",
+          children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: onCancel,
+          size: editButtonSize,
+          children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
+        })]
+      })
+    })]
+  }));
 });
 export default MessageInput;

package/es/chat/MessageModal/index.js

@@ -11,6 +11,9 @@ import { TextArea } from "../../Input";
 import Markdown from "../../Markdown";
 import Modal from "../../Modal";
 import { useStyles as useTextStyles } from "../MessageInput/style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var MessageModal = /*#__PURE__*/memo(function (_ref) {
   var editing = _ref.editing,
     open = _ref.open,
@@ -52,23 +55,26 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     overflowX: 'hidden',
     overflowY: 'auto'
   };
-  var modalFooter = isEdit ? /*#__PURE__*/React.createElement(Flexbox, {
+  var modalFooter = isEdit ? /*#__PURE__*/_jsxs(Flexbox, {
     direction: 'horizontal-reverse',
-    gap: 8
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      setTyping(false);
-      onChange === null || onChange === void 0 || onChange(temporaryValue);
-      setValue(value);
-    },
-    type: "primary"
-  }, (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      setTyping(false);
-      setValue(value);
-    }
-  }, (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel')) : footer;
-  return /*#__PURE__*/React.createElement(Modal, {
+    gap: 8,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        setTyping(false);
+        onChange === null || onChange === void 0 || onChange(temporaryValue);
+        setValue(value);
+      },
+      type: "primary",
+      children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        setTyping(false);
+        setValue(value);
+      },
+      children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
+    })]
+  }) : footer;
+  return /*#__PURE__*/_jsx(Modal, {
     allowFullscreen: true,
     cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
     destroyOnClose: true,
@@ -83,30 +89,34 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       return setTyping(true);
     },
     open: showModal,
-    title: text === null || text === void 0 ? void 0 : text.title
-  }, isEdit ? /*#__PURE__*/React.createElement(TextArea, {
-    autoSize: isAutoSize,
-    className: textStyles,
-    onBlur: function onBlur(e) {
-      return setValue(e.target.value);
-    },
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    placeholder: placeholder,
-    resize: false,
-    style: {
-      flex: mobile ? 1 : undefined,
-      height: isAutoSize ? 'unset' : height,
-      minHeight: mobile ? 'unset' : '100%'
-    },
-    type: mobile ? 'pure' : 'block',
-    value: temporaryValue
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, extra, /*#__PURE__*/React.createElement(Markdown, {
-    style: value ? markdownStyle : _objectSpread(_objectSpread({}, markdownStyle), {}, {
-      opacity: 0.5
-    }),
-    variant: 'chat'
-  }, String(value || placeholder))));
+    title: text === null || text === void 0 ? void 0 : text.title,
+    children: isEdit ? /*#__PURE__*/_jsx(TextArea, {
+      autoSize: isAutoSize,
+      className: textStyles,
+      onBlur: function onBlur(e) {
+        return setValue(e.target.value);
+      },
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      placeholder: placeholder,
+      resize: false,
+      style: {
+        flex: mobile ? 1 : undefined,
+        height: isAutoSize ? 'unset' : height,
+        minHeight: mobile ? 'unset' : '100%'
+      },
+      type: mobile ? 'pure' : 'block',
+      value: temporaryValue
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [extra, /*#__PURE__*/_jsx(Markdown, {
+        style: value ? markdownStyle : _objectSpread(_objectSpread({}, markdownStyle), {}, {
+          opacity: 0.5
+        }),
+        variant: 'chat',
+        children: String(value || placeholder)
+      })]
+    })
+  });
 });
 export default MessageModal;

package/es/chat/TokenTag/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 = ["className", "displayMode", "maxValue", "value", "text", "shape", "unoptimized"];
 import { useResponsive } from 'antd-style';
@@ -9,6 +9,8 @@ import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import FluentEmoji from "../../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var format = function format(number) {
   return numeral(number).format('0,0');
 };
@@ -45,17 +47,19 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles.container, className),
     flex: 'none',
     gap: 4,
     horizontal: true,
     ref: ref
-  }, rest), /*#__PURE__*/React.createElement(FluentEmoji, {
-    emoji: emoji,
-    size: ICON_SIZE,
-    unoptimized: unoptimized
-  }), valueLeft > 0 ? [mobile ? '' : displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? format(valueLeft) : format(value)].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload');
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: ICON_SIZE,
+      unoptimized: unoptimized
+    }), valueLeft > 0 ? [mobile ? '' : displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? format(valueLeft) : format(value)].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+  }));
 });
 export default TokenTag;

package/es/components/ControlInput.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 = ["value", "onChange", "onValueChanging", "onChangeEnd"];
@@ -7,6 +7,8 @@ import { RotateCcw, Save } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { Input } from "../Input";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ControlInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -25,7 +27,7 @@ export var ControlInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (value !== undefined) setInput(value);
   }, [value]);
-  return /*#__PURE__*/React.createElement(Input, _extends({
+  return /*#__PURE__*/_jsx(Input, _objectSpread({
     autoFocus: true,
     onBlur: function onBlur() {
       isFocusing.current = false;
@@ -53,27 +55,29 @@ export var ControlInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     },
     ref: ref,
-    suffix: value === input ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement(ConfigProvider, {
+    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         token: {
           fontSize: 14
         }
-      }
-    }, /*#__PURE__*/React.createElement(Space, {
-      size: 2
-    }, /*#__PURE__*/React.createElement(ActionIcon, {
-      icon: RotateCcw,
-      onClick: function onClick() {
-        setInput(value);
       },
-      size: "small",
-      title: "Reset"
-    }), /*#__PURE__*/React.createElement(ActionIcon, {
-      icon: Save,
-      onClick: updateValue,
-      size: "small",
-      title: "\u2705 Save"
-    }))),
+      children: /*#__PURE__*/_jsxs(Space, {
+        size: 2,
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          icon: RotateCcw,
+          onClick: function onClick() {
+            setInput(value);
+          },
+          size: "small",
+          title: "Reset"
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          icon: Save,
+          onClick: updateValue,
+          size: "small",
+          title: "\u2705 Save"
+        })]
+      })
+    }),
     value: input
   }, rest));
 });

package/es/hooks/useHighlight.d.ts

@@ -1,3 +1,3 @@
 export declare const FALLBACK_LANG = "txt";
-export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr/_internal").SWRResponse<string, any, any>;
+export declare const useHighlight: (text: string, lang: string, isDarkMode: boolean) => import("swr/dist/_internal").SWRResponse<string, any, any>;
 export { default as languageMap } from './languageMap';

package/es/mdx/Callout/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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
@@ -11,6 +10,8 @@ import { AlertOctagon, AlertTriangle, Info, Lightbulb, MessageSquareWarning } fr
 import { rgba } from 'polished';
 import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
@@ -55,7 +56,7 @@ var Callout = function Callout(_ref2) {
   var selectedType = (typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig[type]) || typeConfig.info;
   var icon = selectedType.icon,
     color = selectedType.color;
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'flex-start',
     className: cx(styles.container, className),
     horizontal: true,
@@ -64,16 +65,21 @@ var Callout = function Callout(_ref2) {
       borderColor: rgba(color, 0.5),
       color: color
     }, style)
-  }, rest), /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: {
-      fontSize: '1.2em'
-    },
-    style: {
-      marginBlock: '0.25em'
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.content, type === 'info' && styles.underlineAnchor)
-  }, /*#__PURE__*/React.createElement("div", null, children)));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: {
+        fontSize: '1.2em'
+      },
+      style: {
+        marginBlock: '0.25em'
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      className: cx(styles.content, type === 'info' && styles.underlineAnchor),
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
+    })]
+  }));
 };
 export default Callout;

package/es/mdx/Cards/Card.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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["tag", "tagColor", "icon", "title", "desc", "href", "iconProps", "className", "image"];
@@ -11,6 +11,8 @@ import { Flexbox } from 'react-layout-kit';
 import A from "../../A";
 import Icon from "../../Icon";
 import Img from "../../Img";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     cx = _ref.cx,
@@ -37,50 +39,61 @@ var Card = function Card(_ref2) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(A, {
-    href: href
-  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
-    align: 'flex-start',
-    className: cx(styles.card, className)
-  }, rest), image && /*#__PURE__*/React.createElement(Img, {
-    alt: title,
-    height: 100,
-    src: image,
-    style: {
-      height: 'auto',
-      width: '100%'
-    },
-    width: 250
-  }), tag && /*#__PURE__*/React.createElement(Flexbox, {
-    align: 'flex-start',
-    className: styles.content,
-    style: {
-      paddingBottom: '0.2em',
-      paddingTop: '1.8em'
-    }
-  }, /*#__PURE__*/React.createElement(Tag, {
-    bordered: false,
-    color: tagColor,
-    style: {
-      borderRadius: '1em',
-      fontSize: '0.8em',
-      fontWeight: 500,
-      paddingBlock: '0.1em',
-      paddingInline: '0.6em'
-    }
-  }, tag)), /*#__PURE__*/React.createElement(Flexbox, {
-    align: desc ? 'flex-start' : 'center',
-    className: styles.content,
-    gap: '0.75em',
-    horizontal: true
-  }, !image && icon && /*#__PURE__*/React.createElement(Icon, _extends({
-    className: styles.icon,
-    icon: icon,
-    size: {
-      fontSize: '1.5em'
-    }
-  }, iconProps)), /*#__PURE__*/React.createElement(Flexbox, {
-    gap: '0.2em'
-  }, /*#__PURE__*/React.createElement("h3", null, title), desc && /*#__PURE__*/React.createElement("p", null, desc)))));
+  return /*#__PURE__*/_jsx(A, {
+    href: href,
+    children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      align: 'flex-start',
+      className: cx(styles.card, className)
+    }, rest), {}, {
+      children: [image && /*#__PURE__*/_jsx(Img, {
+        alt: title,
+        height: 100,
+        src: image,
+        style: {
+          height: 'auto',
+          width: '100%'
+        },
+        width: 250
+      }), tag && /*#__PURE__*/_jsx(Flexbox, {
+        align: 'flex-start',
+        className: styles.content,
+        style: {
+          paddingBottom: '0.2em',
+          paddingTop: '1.8em'
+        },
+        children: /*#__PURE__*/_jsx(Tag, {
+          bordered: false,
+          color: tagColor,
+          style: {
+            borderRadius: '1em',
+            fontSize: '0.8em',
+            fontWeight: 500,
+            paddingBlock: '0.1em',
+            paddingInline: '0.6em'
+          },
+          children: tag
+        })
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        align: desc ? 'flex-start' : 'center',
+        className: styles.content,
+        gap: '0.75em',
+        horizontal: true,
+        children: [!image && icon && /*#__PURE__*/_jsx(Icon, _objectSpread({
+          className: styles.icon,
+          icon: icon,
+          size: {
+            fontSize: '1.5em'
+          }
+        }, iconProps)), /*#__PURE__*/_jsxs(Flexbox, {
+          gap: '0.2em',
+          children: [/*#__PURE__*/_jsx("h3", {
+            children: title
+          }), desc && /*#__PURE__*/_jsx("p", {
+            children: desc
+          })]
+        })]
+      })]
+    }))
+  });
 };
 export default Card;

package/es/mdx/Cards/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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["children", "className", "maxItemWidth", "rows"];
 var _templateObject;
 import { createStyles } from 'antd-style';
 import Grid from "../../Grid";
+import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
@@ -24,10 +25,12 @@ var Cards = function Cards(_ref2) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(Grid, _extends({
+  return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     maxItemWidth: maxItemWidth,
     rows: rows
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 };
 export default Cards;

package/es/mdx/FileTree/File.js

@@ -1,22 +1,28 @@
 '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 = ["name", "icon"];
 import { FileIcon } from 'lucide-react';
 import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var File = function File(_ref) {
   var name = _ref.name,
     _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? FileIcon : _ref$icon,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     gap: 4,
     horizontal: true
-  }, rest), /*#__PURE__*/React.createElement(Icon, {
-    icon: icon
-  }), /*#__PURE__*/React.createElement("span", null, name));
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), /*#__PURE__*/_jsx("span", {
+      children: name
+    })]
+  }));
 };
 export default File;

package/es/mdx/FileTree/Folder.js

@@ -1,5 +1,6 @@
 'use client';
 
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
@@ -10,6 +11,8 @@ import { FolderIcon, FolderOpen } from 'lucide-react';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Icon from "../../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
@@ -31,18 +34,24 @@ var Folder = function Folder(_ref2) {
     setOpen = _useState2[1];
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement(Flexbox, rest, /*#__PURE__*/React.createElement(Flexbox, {
-    align: 'center',
-    className: styles.folder,
-    gap: 4,
-    horizontal: true,
-    onClick: function onClick() {
-      return setOpen(!open);
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: open ? FolderOpen : icon
-  }), /*#__PURE__*/React.createElement("span", null, name)), open && /*#__PURE__*/React.createElement(Flexbox, {
-    className: styles.folderChildren
-  }, children));
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.folder,
+      gap: 4,
+      horizontal: true,
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: open ? FolderOpen : icon
+      }), /*#__PURE__*/_jsx("span", {
+        children: name
+      })]
+    }), open && /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.folderChildren,
+      children: children
+    })]
+  }));
 };
 export default Folder;