@lobehub/ui 1.157.1 → 1.158.0

package/es/Footer/index.js

@@ -3,7 +3,6 @@
 import RcFooter from 'rc-footer';
 import { memo } from 'react';
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
 var Footer = /*#__PURE__*/memo(function (_ref) {
   var columns = _ref.columns,
     bottom = _ref.bottom,
@@ -16,14 +15,13 @@ var Footer = /*#__PURE__*/memo(function (_ref) {
       isEmpty: isEmpty
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("section", {
-    className: styles.container,
-    children: /*#__PURE__*/_jsx(RcFooter, {
-      bottom: bottom,
-      className: styles.footer,
-      columns: columns,
-      theme: theme
-    })
-  });
+  return /*#__PURE__*/React.createElement("section", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(RcFooter, {
+    bottom: bottom,
+    className: styles.footer,
+    columns: columns,
+    theme: theme
+  }));
 });
 export default Footer;

package/es/Form/components/FormDivider.js

@@ -1,15 +1,15 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["style"];
 import { Divider as AntDivider } from 'antd';
 import { memo } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
 var Divider = /*#__PURE__*/memo(function (_ref) {
   var style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(AntDivider, _objectSpread({
+  return /*#__PURE__*/React.createElement(AntDivider, _extends({
     style: _objectSpread({
       margin: 0,
       opacity: 0.66

package/es/Form/components/FormFlatGroup.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 = ["className", "children", "variant"];
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./FormGroup";
-import { jsx as _jsx } from "react/jsx-runtime";
 var FormFlatGroup = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -22,14 +21,10 @@ var FormFlatGroup = /*#__PURE__*/memo(function (_ref) {
     prefixCls = _useStyles.prefixCls;
   var groupClassName = "".concat(prefixCls, "-form-group");
   var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
-  return mobile ? /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+  return mobile ? /*#__PURE__*/React.createElement(Flexbox, _extends({
     className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className)
-  }, rest), {}, {
-    children: children
-  })) : /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+  }, rest), children) : /*#__PURE__*/React.createElement(Flexbox, _extends({
     className: cx(groupClassName, styles.flatGroup, variantStyle, className)
-  }, rest), {}, {
-    children: children
-  }));
+  }, rest), children);
 });
 export default FormFlatGroup;

package/es/Form/components/FormFooter.js

@@ -1,20 +1,17 @@
 '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 = ["children"];
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { jsx as _jsx } from "react/jsx-runtime";
 var FormFooter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
     gap: 8,
     horizontal: true,
     justify: 'flex-end'
-  }, rest), {}, {
-    children: children
-  }));
+  }, rest), children);
 });
 export default FormFooter;

package/es/Form/components/FormGroup.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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["className", "icon", "title", "children", "extra", "variant", "defaultActive", "collapsible", "active", "keyValue", "onCollapse"];
@@ -11,8 +11,6 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Collapse from "../../Collapse";
 import Icon from "../../Icon";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useStyles = createStyles(function (_ref) {
   var prefixCls = _ref.prefixCls,
     css = _ref.css,
@@ -60,27 +58,23 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
   var groupHeaderClassName = "".concat(prefixCls, "-form-group-header");
   var groupContentClassName = "".concat(prefixCls, "-form-group-content");
   var defaultCollapsible = isUndefined(collapsible) ? variant !== 'pure' : collapsible;
-  var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
+  var titleContent = /*#__PURE__*/React.createElement(Flexbox, {
     className: cx(groupTitleClassName, styles.title, variant === 'pure' && styles.pureTitle),
     gap: 8,
+    horizontal: true
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), title);
+  if (mobile) return /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(groupClassName, className)
+  }, /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(groupHeaderClassName, styles.mobileGroupHeader),
     horizontal: true,
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      icon: icon
-    }), title]
-  });
-  if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(groupClassName, className),
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      className: cx(groupHeaderClassName, styles.mobileGroupHeader),
-      horizontal: true,
-      justify: 'space-between',
-      children: [titleContent, extra]
-    }), /*#__PURE__*/_jsx("div", {
-      className: cx(groupContentClassName, styles.mobileGroupBody),
-      children: children
-    })]
-  });
-  return /*#__PURE__*/_jsx(Collapse, _objectSpread({
+    justify: 'space-between'
+  }, titleContent, extra), /*#__PURE__*/React.createElement("div", {
+    className: cx(groupContentClassName, styles.mobileGroupBody)
+  }, children));
+  return /*#__PURE__*/React.createElement(Collapse, _extends({
     activeKey: isUndefined(active) ? undefined : active ? [keyValue] : [],
     className: cx(groupClassName, variant === 'pure' && styles.pure, className),
     collapsible: defaultCollapsible,

package/es/Form/components/FormItem.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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["desc", "tag", "minWidth", "avatar", "className", "label", "children", "divider"];
@@ -11,9 +11,6 @@ import { isNumber } from 'lodash-es';
 import { memo } from 'react';
 import FormDivider from "./FormDivider";
 import FormTitle from "./FormTitle";
-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 Item = Form.Item;
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
   var css = _ref.css,
@@ -38,18 +35,14 @@ var FormItem = /*#__PURE__*/memo(function (_ref2) {
   var _useStyles = useStyles(minWidth),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [divider && /*#__PURE__*/_jsx(FormDivider, {}), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
-      className: cx(styles.item, Boolean(minWidth) && styles.itemMinWidth, !divider && styles.itemNoDivider, className),
-      label: /*#__PURE__*/_jsx(FormTitle, {
-        avatar: avatar,
-        desc: desc,
-        tag: tag,
-        title: label
-      })
-    }, rest), {}, {
-      children: children
-    }))]
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider && /*#__PURE__*/React.createElement(FormDivider, null), /*#__PURE__*/React.createElement(Item, _extends({
+    className: cx(styles.item, Boolean(minWidth) && styles.itemMinWidth, !divider && styles.itemNoDivider, className),
+    label: /*#__PURE__*/React.createElement(FormTitle, {
+      avatar: avatar,
+      desc: desc,
+      tag: tag,
+      title: label
+    })
+  }, rest), children));
 });
 export default FormItem;

package/es/Form/components/FormTitle.js

@@ -6,8 +6,6 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Tag from "../../Tag";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token,
@@ -25,30 +23,24 @@ var FormTitle = /*#__PURE__*/memo(function (_ref2) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var titleNode = /*#__PURE__*/_jsxs(Flexbox, {
-    className: cx(styles.formTitle, className),
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      align: 'center',
-      direction: 'horizontal',
-      gap: 8,
-      children: [title, tag && /*#__PURE__*/_jsx(Tag, {
-        children: tag
-      })]
-    }), desc && /*#__PURE__*/_jsx("small", {
-      style: {
-        marginBottom: 2,
-        marginTop: 6
-      },
-      children: desc
-    })]
-  });
+  var titleNode = /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.formTitle, className)
+  }, /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    direction: 'horizontal',
+    gap: 8
+  }, title, tag && /*#__PURE__*/React.createElement(Tag, null, tag)), desc && /*#__PURE__*/React.createElement("small", {
+    style: {
+      marginBottom: 2,
+      marginTop: 6
+    }
+  }, desc));
   if (avatar) {
-    return /*#__PURE__*/_jsxs(Flexbox, {
+    return /*#__PURE__*/React.createElement(Flexbox, {
       align: "center",
       gap: 8,
-      horizontal: true,
-      children: [avatar, titleNode]
-    });
+      horizontal: true
+    }, avatar, titleNode);
   }
   return titleNode;
 });

package/es/Form/index.js

@@ -1,7 +1,8 @@
 'use client';
 
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant", "gap", "style", "collapsible", "classNames", "styles", "defaultActiveKey", "activeKey", "onCollapse"];
 import { Form as AntForm } from 'antd';
@@ -12,8 +13,6 @@ import FormFooter from "./components/FormFooter";
 import FormGroup from "./components/FormGroup";
 import FormItem from "./components/FormItem";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     itemMinWidth = _ref.itemMinWidth,
@@ -41,19 +40,21 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cx = _useStyles.cx,
     s = _useStyles.styles;
   var mapFlat = function mapFlat(item, itemIndex) {
-    return /*#__PURE__*/_jsx(FormItem, _objectSpread({
+    return /*#__PURE__*/React.createElement(FormItem, _extends({
       divider: itemIndex !== 0,
+      key: itemIndex,
       minWidth: itemMinWidth
-    }, item), itemIndex);
+    }, item));
   };
   var mapTree = function mapTree(group, groupIndex) {
     var key = (group === null || group === void 0 ? void 0 : group.key) || groupIndex;
-    return /*#__PURE__*/_jsx(FormGroup, {
+    return /*#__PURE__*/React.createElement(FormGroup, {
       active: activeKey && group !== null && group !== void 0 && group.key ? activeKey.includes(key) : undefined,
       collapsible: isUndefined(group.collapsible) ? collapsible : group.collapsible,
       defaultActive: defaultActiveKey && group !== null && group !== void 0 && group.key ? defaultActiveKey.includes(key) : group === null || group === void 0 ? void 0 : group.defaultActive,
       extra: group === null || group === void 0 ? void 0 : group.extra,
       icon: group === null || group === void 0 ? void 0 : group.icon,
+      key: key,
       keyValue: key,
       onCollapse: function onCollapse(active) {
         var keys = activeKey || defaultActiveKey || [];
@@ -63,15 +64,14 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
         _onCollapse === null || _onCollapse === void 0 || _onCollapse(active ? [].concat(_toConsumableArray(keys), [key]) : keys);
       },
       title: group.title,
-      variant: (group === null || group === void 0 ? void 0 : group.variant) || variant,
-      children: Array.isArray(group.children) ? group.children.filter(function (item) {
-        return !item.hidden;
-      }).map(function (item, i) {
-        return mapFlat(item, i);
-      }) : group.children
-    }, key);
+      variant: (group === null || group === void 0 ? void 0 : group.variant) || variant
+    }, Array.isArray(group.children) ? group.children.filter(function (item) {
+      return !item.hidden;
+    }).map(function (item, i) {
+      return mapFlat(item, i);
+    }) : group.children);
   };
-  return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(AntForm, _extends({
     className: cx(s.form, variant === 'pure' && s.pure, s.mobile, className),
     colon: false,
     form: form,
@@ -80,22 +80,18 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: _objectSpread({
       gap: gap
     }, style)
-  }, rest), {}, {
-    children: [items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-      return mapTree(item, i);
-    }) : /*#__PURE__*/_jsx(FormFlatGroup, {
-      variant: variant,
-      children: items === null || items === void 0 ? void 0 : items.filter(function (item) {
-        return !item.hidden;
-      }).map(function (item, i) {
-        return mapFlat(item, i);
-      })
-    }) : undefined, children, footer && /*#__PURE__*/_jsx(FormFooter, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.footer,
-      style: styles === null || styles === void 0 ? void 0 : styles.footer,
-      children: footer
-    })]
-  }));
+  }, rest), items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    return mapTree(item, i);
+  }) : /*#__PURE__*/React.createElement(FormFlatGroup, {
+    variant: variant
+  }, items === null || items === void 0 ? void 0 : items.filter(function (item) {
+    return !item.hidden;
+  }).map(function (item, i) {
+    return mapFlat(item, i);
+  })) : undefined, children, footer && /*#__PURE__*/React.createElement(FormFooter, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.footer,
+    style: styles === null || styles === void 0 ? void 0 : styles.footer
+  }, footer));
 });
 var Form = FormParent;
 Form.Item = FormItem;

package/es/FormModal/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["classNames", "className", "style", "closable", "styles", "allowFullscreen", "title", "wrapClassName", "afterOpenChange", "width", "onCancel", "centered", "open", "afterClose", "destroyOnClose", "closeIcon", "paddings", "maxHeight", "enableResponsive", "zIndex", "mask", "getContainer", "keyboard", "focusTriggerAfterClose", "forceRender", "loading", "footer", "submitButtonProps", "submitLoading", "onFinish", "submitText", "variant", "gap", "onSubmit", "children"],
@@ -9,7 +10,6 @@ import { forwardRef } from 'react';
 import Form from "../Form";
 import Modal from "../Modal";
 import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
 var FormModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
@@ -61,7 +61,7 @@ var FormModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var formStyle = styles.form,
     footerStyle = styles.footer,
     modalStyles = _objectWithoutProperties(styles, _excluded3);
-  return /*#__PURE__*/_jsx(Modal, {
+  return /*#__PURE__*/React.createElement(Modal, {
     afterClose: afterClose,
     afterOpenChange: afterOpenChange,
     allowFullscreen: allowFullscreen,
@@ -93,38 +93,34 @@ var FormModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: title,
     width: width,
     wrapClassName: wrapClassName,
-    zIndex: zIndex,
-    children: /*#__PURE__*/_jsx(Form, _objectSpread(_objectSpread({
-      className: cx(s.form, formClassName),
-      classNames: {
-        footer: cx(s.footer, footerClassName)
-      },
-      clearOnDestroy: destroyOnClose,
-      footer: footer || /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
-        block: true,
-        htmlType: "submit",
-        loading: submitLoading,
-        onClick: onSubmit,
-        type: 'primary'
-      }, submitButtonProps), {}, {
-        style: _objectSpread({
-          flex: 1
-        }, submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.style),
-        children: submitText || 'Submit'
-      })),
-      gap: gap || (variant === 'pure' ? 24 : gap),
-      onFinish: onFinish,
-      ref: ref,
+    zIndex: zIndex
+  }, /*#__PURE__*/React.createElement(Form, _extends({
+    className: cx(s.form, formClassName),
+    classNames: {
+      footer: cx(s.footer, footerClassName)
+    },
+    clearOnDestroy: destroyOnClose,
+    footer: footer || /*#__PURE__*/React.createElement(Button, _extends({
+      block: true,
+      htmlType: "submit",
+      loading: submitLoading,
+      onClick: onSubmit,
+      type: 'primary'
+    }, submitButtonProps, {
       style: _objectSpread({
-        paddingBottom: 56
-      }, formStyle),
-      styles: {
-        footer: footerStyle
-      },
-      variant: variant
-    }, rest), {}, {
-      children: children
-    }))
-  });
+        flex: 1
+      }, submitButtonProps === null || submitButtonProps === void 0 ? void 0 : submitButtonProps.style)
+    }), submitText || 'Submit'),
+    gap: gap || (variant === 'pure' ? 24 : gap),
+    onFinish: onFinish,
+    ref: ref,
+    style: _objectSpread({
+      paddingBottom: 56
+    }, formStyle),
+    styles: {
+      footer: footerStyle
+    },
+    variant: variant
+  }, rest), children));
 });
 export default FormModal;

package/es/Grid/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";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["className", "gap", "rows", "children", "maxItemWidth"];
@@ -9,7 +9,6 @@ import { createStyles } from 'antd-style';
 import { isString } from 'lodash-es';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { jsx as _jsx } from "react/jsx-runtime";
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css;
   var rows = _ref2.rows,
@@ -36,12 +35,10 @@ var Grid = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement(Flexbox, _extends({
     className: cx(styles.container, className),
     gap: gap,
     ref: ref
-  }, rest), {}, {
-    children: children
-  }));
+  }, rest), children);
 });
 export default Grid;

package/es/Header/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 = ["actionsClassName", "navClassName", "logoClassName", "nav", "logo", "actions", "actionsStyle", "logoStyle", "navStyle", "className"];
@@ -7,9 +8,6 @@ import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 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 Header = /*#__PURE__*/memo(function (_ref) {
   var actionsClassName = _ref.actionsClassName,
     navClassName = _ref.navClassName,
@@ -27,68 +25,54 @@ var Header = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsx("section", _objectSpread(_objectSpread({
+  return /*#__PURE__*/React.createElement("section", _extends({
     className: cx(styles.header, className)
-  }, rest), {}, {
-    children: /*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      className: styles.content,
-      distribution: 'space-between',
-      horizontal: true,
-      width: 'auto',
-      children: mobile ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Flexbox, {
-          className: actionsClassName,
-          style: _objectSpread({
-            flex: 0
-          }, navStyle),
-          children: nav
-        }), /*#__PURE__*/_jsx(Flexbox, {
-          className: cx(styles.left, logoClassName),
-          horizontal: true,
-          style: _objectSpread({
-            flex: 1,
-            overflow: 'hidden'
-          }, logoStyle),
-          children: logo
-        }), /*#__PURE__*/_jsx(Flexbox, {
-          className: actionsClassName,
-          style: _objectSpread({
-            flex: 0
-          }, actionsStyle),
-          children: actions
-        })]
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Flexbox, {
-          className: cx(styles.left, logoClassName),
-          horizontal: true,
-          style: _objectSpread({
-            flex: 0
-          }, logoStyle),
-          children: logo
-        }), /*#__PURE__*/_jsx(Flexbox, {
-          className: navClassName,
-          style: _objectSpread({
-            flex: 1,
-            marginLeft: 48,
-            overflow: 'hidden'
-          }, navStyle),
-          children: nav
-        }), /*#__PURE__*/_jsxs(Flexbox, {
-          className: cx(styles.right, actionsClassName),
-          flex: 1,
-          horizontal: true,
-          justify: 'space-between',
-          style: actionsStyle,
-          children: [/*#__PURE__*/_jsx("div", {}), /*#__PURE__*/_jsx(Flexbox, {
-            align: 'center',
-            gap: 8,
-            horizontal: true,
-            children: actions
-          })]
-        })]
-      })
-    })
-  }));
+  }, rest), /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    className: styles.content,
+    distribution: 'space-between',
+    horizontal: true,
+    width: 'auto'
+  }, mobile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flexbox, {
+    className: actionsClassName,
+    style: _objectSpread({
+      flex: 0
+    }, navStyle)
+  }, nav), /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.left, logoClassName),
+    horizontal: true,
+    style: _objectSpread({
+      flex: 1,
+      overflow: 'hidden'
+    }, logoStyle)
+  }, logo), /*#__PURE__*/React.createElement(Flexbox, {
+    className: actionsClassName,
+    style: _objectSpread({
+      flex: 0
+    }, actionsStyle)
+  }, actions)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.left, logoClassName),
+    horizontal: true,
+    style: _objectSpread({
+      flex: 0
+    }, logoStyle)
+  }, logo), /*#__PURE__*/React.createElement(Flexbox, {
+    className: navClassName,
+    style: _objectSpread({
+      flex: 1,
+      marginLeft: 48,
+      overflow: 'hidden'
+    }, navStyle)
+  }, nav), /*#__PURE__*/React.createElement(Flexbox, {
+    className: cx(styles.right, actionsClassName),
+    flex: 1,
+    horizontal: true,
+    justify: 'space-between',
+    style: actionsStyle
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement(Flexbox, {
+    align: 'center',
+    gap: 8,
+    horizontal: true
+  }, actions)))));
 });
 export default Header;