@lobehub/ui 1.158.1 → 1.160.0

package/es/Footer/index.js

@@ -3,6 +3,7 @@
 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,
@@ -15,13 +16,14 @@ var Footer = /*#__PURE__*/memo(function (_ref) {
       isEmpty: isEmpty
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement("section", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement(RcFooter, {
-    bottom: bottom,
-    className: styles.footer,
-    columns: columns,
-    theme: theme
-  }));
+  return /*#__PURE__*/_jsx("section", {
+    className: styles.container,
+    children: /*#__PURE__*/_jsx(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__*/React.createElement(AntDivider, _extends({
+  return /*#__PURE__*/_jsx(AntDivider, _objectSpread({
     style: _objectSpread({
       margin: 0,
       opacity: 0.66

package/es/Form/components/FormFlatGroup.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 = ["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,
@@ -21,10 +22,14 @@ 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__*/React.createElement(Flexbox, _extends({
+  return mobile ? /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className)
-  }, rest), children) : /*#__PURE__*/React.createElement(Flexbox, _extends({
+  }, rest), {}, {
+    children: children
+  })) : /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: cx(groupClassName, styles.flatGroup, variantStyle, className)
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 });
 export default FormFlatGroup;

package/es/Form/components/FormFooter.js

@@ -1,17 +1,20 @@
 '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 = ["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__*/React.createElement(Flexbox, _extends({
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     gap: 8,
     horizontal: true,
     justify: 'flex-end'
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 });
 export default FormFooter;

package/es/Form/components/FormGroup.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 = ["className", "icon", "title", "children", "extra", "variant", "defaultActive", "collapsible", "active", "keyValue", "onCollapse"];
@@ -11,6 +11,8 @@ 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,
@@ -58,23 +60,27 @@ 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__*/React.createElement(Flexbox, {
+  var titleContent = /*#__PURE__*/_jsxs(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,
-    justify: 'space-between'
-  }, titleContent, extra), /*#__PURE__*/React.createElement("div", {
-    className: cx(groupContentClassName, styles.mobileGroupBody)
-  }, children));
-  return /*#__PURE__*/React.createElement(Collapse, _extends({
+    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({
     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 _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 = ["desc", "tag", "minWidth", "avatar", "className", "label", "children", "divider"];
@@ -11,6 +11,9 @@ 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,
@@ -35,14 +38,18 @@ var FormItem = /*#__PURE__*/memo(function (_ref2) {
   var _useStyles = useStyles(minWidth),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  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));
+  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
+    }))]
+  });
 });
 export default FormItem;

package/es/Form/components/FormTitle.js

@@ -6,6 +6,8 @@ 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,
@@ -23,24 +25,30 @@ var FormTitle = /*#__PURE__*/memo(function (_ref2) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  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));
+  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
+    })]
+  });
   if (avatar) {
-    return /*#__PURE__*/React.createElement(Flexbox, {
+    return /*#__PURE__*/_jsxs(Flexbox, {
       align: "center",
       gap: 8,
-      horizontal: true
-    }, avatar, titleNode);
+      horizontal: true,
+      children: [avatar, titleNode]
+    });
   }
   return titleNode;
 });

package/es/Form/index.js

@@ -1,8 +1,7 @@
 'use client';
 
-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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 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';
@@ -13,6 +12,8 @@ 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,
@@ -40,21 +41,19 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cx = _useStyles.cx,
     s = _useStyles.styles;
   var mapFlat = function mapFlat(item, itemIndex) {
-    return /*#__PURE__*/React.createElement(FormItem, _extends({
+    return /*#__PURE__*/_jsx(FormItem, _objectSpread({
       divider: itemIndex !== 0,
-      key: itemIndex,
       minWidth: itemMinWidth
-    }, item));
+    }, item), itemIndex);
   };
   var mapTree = function mapTree(group, groupIndex) {
     var key = (group === null || group === void 0 ? void 0 : group.key) || groupIndex;
-    return /*#__PURE__*/React.createElement(FormGroup, {
+    return /*#__PURE__*/_jsx(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 || [];
@@ -64,14 +63,15 @@ 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
-    }, Array.isArray(group.children) ? group.children.filter(function (item) {
-      return !item.hidden;
-    }).map(function (item, i) {
-      return mapFlat(item, i);
-    }) : group.children);
+      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);
   };
-  return /*#__PURE__*/React.createElement(AntForm, _extends({
+  return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
     className: cx(s.form, variant === 'pure' && s.pure, s.mobile, className),
     colon: false,
     form: form,
@@ -80,18 +80,22 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: _objectSpread({
       gap: gap
     }, style)
-  }, 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));
+  }, 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
+    })]
+  }));
 });
 var Form = FormParent;
 Form.Item = FormItem;

package/es/FormModal/index.js

@@ -1,4 +1,3 @@
-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"],
@@ -10,6 +9,7 @@ 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__*/React.createElement(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     afterClose: afterClose,
     afterOpenChange: afterOpenChange,
     allowFullscreen: allowFullscreen,
@@ -93,34 +93,38 @@ var FormModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: title,
     width: width,
     wrapClassName: wrapClassName,
-    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, {
+    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,
       style: _objectSpread({
-        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));
+        paddingBottom: 56
+      }, formStyle),
+      styles: {
+        footer: footerStyle
+      },
+      variant: variant
+    }, rest), {}, {
+      children: children
+    }))
+  });
 });
 export default FormModal;

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

package/es/Header/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 = ["actionsClassName", "navClassName", "logoClassName", "nav", "logo", "actions", "actionsStyle", "logoStyle", "navStyle", "className"];
@@ -8,6 +7,9 @@ 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,
@@ -25,54 +27,68 @@ var Header = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/React.createElement("section", _extends({
+  return /*#__PURE__*/_jsx("section", _objectSpread(_objectSpread({
     className: cx(styles.header, className)
-  }, 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)))));
+  }, 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
+          })]
+        })]
+      })
+    })
+  }));
 });
 export default Header;