@arcblock/ux 2.9.91 → 2.10.0

package/lib/Layout/dashboard/sidebar.js

@@ -1,42 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _colors = require("@mui/material/colors");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Theme = require("../../Theme");
-var _externalLink = require("./external-link");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["links", "addons", "dense"];
 /* eslint-disable react/no-array-index-key */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { teal } from '@mui/material/colors';
+import clsx from 'clsx';
+import { styled } from '../../Theme';
+import { NavLink } from './external-link';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function renderGroup(item, index) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+  return /*#__PURE__*/_jsxs("li", {
     className: "layout-sidebar-group",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: [/*#__PURE__*/_jsx("span", {
       className: "layout-sidebar-group-title",
       children: item.title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    }), /*#__PURE__*/_jsx("ul", {
       children: item.children.map(renderItem)
     })]
-  }, "group-".concat(item.title, "-").concat(index));
+  }, `group-${item.title}-${index}`);
 }
 function renderItem(item, index) {
-  var _item$children;
-  if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+  if (item.children?.length) {
     return renderGroup(item, index);
   }
   const {
@@ -48,59 +31,179 @@ function renderItem(item, index) {
     active
   } = item;
   // external = true 时 link active 状态由传入 links 的调用方决定 (适用于 blocklet ui dashboard 的情况)
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+  return /*#__PURE__*/_jsx("li", {
     className: "layout-sidebar-item",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_externalLink.NavLink, {
+    children: /*#__PURE__*/_jsxs(NavLink, {
       external: external,
       to: url,
-      className: _ref => {
-        let {
-          isActive
-        } = _ref;
-        return (0, _clsx.default)('layout-sidebar-link', {
-          'layout-sidebar-link--active': external ? active : isActive
-        });
-      },
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
+      className: ({
+        isActive
+      }) => clsx('layout-sidebar-link', {
+        'layout-sidebar-link--active': external ? active : isActive
+      }),
+      children: [icon && /*#__PURE__*/_jsx("span", {
+        className: `layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`,
         children: icon
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), /*#__PURE__*/_jsx(Typography, {
         component: "span",
         className: "layout-sidebar-link-text",
         children: title
       })]
     })
-  }, "".concat(url, "-").concat(index));
+  }, `${url}-${index}`);
 }
-function Sidebar(_ref2) {
-  let {
-      links,
-      addons,
-      dense
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-    className: (0, _clsx.default)({
+function Sidebar({
+  links,
+  addons,
+  dense,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Root, {
+    ...rest,
+    className: clsx({
       'layout-sidebar-dense': dense
     }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    children: [/*#__PURE__*/_jsx("ul", {
       children: links.map(renderItem)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       style: {
         flex: 1
       }
     }), addons]
-  }));
+  });
 }
 Sidebar.propTypes = {
-  links: _propTypes.default.array.isRequired,
-  addons: _propTypes.default.any,
-  dense: _propTypes.default.bool
+  links: PropTypes.array.isRequired,
+  addons: PropTypes.any,
+  dense: PropTypes.bool
 };
 Sidebar.defaultProps = {
   addons: null,
   dense: false
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .layout-sidebar-link {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 22px 24px;\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &.layout-sidebar-link--active {\n      color: ", ";\n      background: ", ";\n      border-left-color: ", ";\n    }\n  }\n  .layout-sidebar-icon {\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    > img,\n    > svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .layout-sidebar-badge {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 10px;\n      height: 10px;\n      border-radius: 10px;\n      background-color: #fe4e44;\n      right: -2px;\n      top: 0;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n    }\n  }\n  .layout-sidebar-link-text {\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    text-align: center;\n    text-transform: capitalize;\n    letter-spacing: normal;\n  }\n  /* dense=false \u65F6\u9690\u85CF group title */\n  .layout-sidebar-group-title {\n    display: none;\n  }\n  &.layout-sidebar-dense {\n    box-sizing: border-box;\n    padding: 20px 0;\n    font-weight: bold;\n    .layout-sidebar-item {\n      padding: 0 16px;\n    }\n    .layout-sidebar-item + .layout-sidebar-item {\n      margin-top: 1px;\n    }\n    .layout-sidebar-link {\n      box-sizing: border-box;\n      flex-direction: row;\n      align-items: center;\n      width: 100%;\n      padding: 8px;\n      &:hover,\n      &.layout-sidebar-link--active {\n        color: ", ";\n        background: ", ";\n        border: 0;\n        border-radius: 4px;\n      }\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 8px;\n      > img,\n      > svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n    .layout-sidebar-badge {\n      &:after {\n        width: 6px;\n        height: 6px;\n        border-radius: 6px;\n        right: -2px;\n        top: 0;\n      }\n    }\n    .layout-sidebar-link-text {\n      margin-top: 0;\n      font-size: 14px;\n      line-height: 1;\n    }\n    .layout-sidebar-group {\n      color: ", ";\n      .layout-sidebar-group-title {\n        display: inline-block;\n        padding: 8px 0 8px 24px;\n        font-size: 13px;\n        text-transform: uppercase;\n      }\n    }\n    .layout-sidebar-group + .layout-sidebar-group,\n    .layout-sidebar-group + .layout-sidebar-item,\n    .layout-sidebar-item + .layout-sidebar-group {\n      margin-top: 16px;\n    }\n  }\n"])), props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700, props => props.theme.palette.grey[900], props => props.theme.palette.grey[100], props => props.theme.palette.text.hint);
-var _default = exports.default = Sidebar;
+const Root = styled('div')`
+  display: flex;
+  flex-direction: column;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .layout-sidebar-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 22px 24px;
+    color: ${props => props.theme.palette.text.secondary};
+    text-decoration: none;
+
+    &:hover,
+    &.layout-sidebar-link--active {
+      color: ${props => props.theme.palette.primary.main};
+      background: ${gradient};
+      border-left-color: ${teal.A700};
+    }
+  }
+  .layout-sidebar-icon {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    > img,
+    > svg {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .layout-sidebar-badge {
+    position: relative;
+    &:after {
+      content: '';
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      background-color: #fe4e44;
+      right: -2px;
+      top: 0;
+      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
+    }
+  }
+  .layout-sidebar-link-text {
+    margin-top: 8px;
+    font-size: 12px;
+    font-weight: 500;
+    text-align: center;
+    text-transform: capitalize;
+    letter-spacing: normal;
+  }
+  /* dense=false 时隐藏 group title */
+  .layout-sidebar-group-title {
+    display: none;
+  }
+  &.layout-sidebar-dense {
+    box-sizing: border-box;
+    padding: 20px 0;
+    font-weight: bold;
+    .layout-sidebar-item {
+      padding: 0 16px;
+    }
+    .layout-sidebar-item + .layout-sidebar-item {
+      margin-top: 1px;
+    }
+    .layout-sidebar-link {
+      box-sizing: border-box;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      padding: 8px;
+      &:hover,
+      &.layout-sidebar-link--active {
+        color: ${props => props.theme.palette.grey[900]};
+        background: ${props => props.theme.palette.grey[100]};
+        border: 0;
+        border-radius: 4px;
+      }
+    }
+    .layout-sidebar-icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      > img,
+      > svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .layout-sidebar-badge {
+      &:after {
+        width: 6px;
+        height: 6px;
+        border-radius: 6px;
+        right: -2px;
+        top: 0;
+      }
+    }
+    .layout-sidebar-link-text {
+      margin-top: 0;
+      font-size: 14px;
+      line-height: 1;
+    }
+    .layout-sidebar-group {
+      color: ${props => props.theme.palette.text.hint};
+      .layout-sidebar-group-title {
+        display: inline-block;
+        padding: 8px 0 8px 24px;
+        font-size: 13px;
+        text-transform: uppercase;
+      }
+    }
+    .layout-sidebar-group + .layout-sidebar-group,
+    .layout-sidebar-group + .layout-sidebar-item,
+    .layout-sidebar-item + .layout-sidebar-group {
+      margin-top: 16px;
+    }
+  }
+`;
+export default Sidebar;

package/lib/Layout/dashboard-legacy/header.js

@@ -1,33 +1,87 @@
-"use strict";
+import PropTypes from 'prop-types';
+import Button from '@mui/material/IconButton';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Hidden from '@mui/material/Hidden';
+import MenuIcon from '@mui/icons-material/Menu';
+import { Link } from 'react-router-dom';
+import Logo from '../../Logo';
+import { styled } from '../../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAppBar = styled(AppBar)`
+  && {
+    z-index: ${props => props.theme.zIndex.drawer};
+    background: ${props => props.theme.palette.background.default};
+    box-shadow: none;
+    top: 0;
+    height: auto;
+  }
+  .header-toolbar {
+    background: ${props => props.theme.palette.background.default};
+    color: ${props => props.theme.palette.text.primary};
+    margin: ${props => props.theme.spacing(1)}px 0;
+  }
+  .header-link {
+    display: flex;
+    text-decoration: none;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+  .header-logo {
+    margin-right: 20px;
+  }
+  .header-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .header-title__primary {
+    font-size: 24px;
+    font-weight: 800;
+    color: ${props => props.theme.typography.color.main};
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+  }
+  .header-title__secondary {
+    font-size: 14px;
+    line-height: 1.71;
+    color: ${props => props.theme.typography.color.gray};
+  }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Header;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
-var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
-var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
-var _reactRouterDom = require("react-router-dom");
-var _Logo = _interopRequireDefault(require("../../Logo"));
-var _Theme = require("../../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const StyledAppBar = (0, _Theme.styled)(_AppBar.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    z-index: ", ";\n    background: ", ";\n    box-shadow: none;\n    top: 0;\n    height: auto;\n  }\n  .header-toolbar {\n    background: ", ";\n    color: ", ";\n    margin: ", "px 0;\n  }\n  .header-link {\n    display: flex;\n    text-decoration: none;\n    flex-shrink: 1;\n    overflow: hidden;\n  }\n  .header-logo {\n    margin-right: 20px;\n  }\n  .header-title {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n  }\n  .header-title__primary {\n    font-size: 24px;\n    font-weight: 800;\n    color: ", ";\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n  }\n  .header-title__secondary {\n    font-size: 14px;\n    line-height: 1.71;\n    color: ", ";\n  }\n\n  .header-addons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 9999999;\n\n    .user-addon {\n      .header-avatar {\n        width: 32px;\n        border-radius: 16px;\n        height: auto;\n      }\n    }\n  }\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-title {\n      display: none;\n    }\n    .header-title__primary {\n      font-size: 20px;\n    }\n    .header-menu {\n      display: block;\n    }\n  }\n"])), props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
+  .header-addons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 9999999;
+
+    .user-addon {
+      .header-avatar {
+        width: 32px;
+        border-radius: 16px;
+        height: auto;
+      }
+    }
+  }
+  .header-menu {
+    display: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-title {
+      display: none;
+    }
+    .header-title__primary {
+      font-size: 20px;
+    }
+    .header-menu {
+      display: block;
+    }
+  }
+`;
 
 /*
   自定义 logo 相关:
@@ -38,79 +92,78 @@ const StyledAppBar = (0, _Theme.styled)(_AppBar.default)(_templateObject || (_te
   考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
   参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
 */
-function Header(_ref) {
-  let {
-      children,
-      brand,
-      brandAddon,
-      description,
-      addons,
-      onToggleMenu,
-      homeUrl,
-      logo
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAppBar, _objectSpread(_objectSpread({
+export default function Header({
+  children,
+  brand,
+  brandAddon,
+  description,
+  addons,
+  onToggleMenu,
+  homeUrl,
+  logo,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(StyledAppBar, {
     position: "sticky",
-    className: "header"
-  }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.default, {
+    className: "header",
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Toolbar, {
       disableGutters: false,
       className: "header-toolbar",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      children: [/*#__PURE__*/_jsx(Button, {
         color: "inherit",
         "aria-label": "open drawer",
         edge: "start",
         className: "header-menu",
         "aira-label": "header menu button",
         onClick: onToggleMenu,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Link, {
+        children: /*#__PURE__*/_jsx(MenuIcon, {})
+      }), /*#__PURE__*/_jsxs(Link, {
         to: homeUrl,
         className: "header-link",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
+        children: [/*#__PURE__*/_jsx(Hidden, {
           mdDown: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/_jsx("div", {
             className: "header-logo",
-            children: logo || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
+            children: logo || /*#__PURE__*/_jsx(Logo, {
               showText: false
             })
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), /*#__PURE__*/_jsxs("div", {
           className: "header-title",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          children: [/*#__PURE__*/_jsxs(Typography, {
             component: "h2",
             noWrap: true,
             className: "header-title__primary",
             children: [brand, brandAddon]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }), /*#__PURE__*/_jsx(Typography, {
             component: "p",
             noWrap: true,
             className: "header-title__secondary",
             children: description
           })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), /*#__PURE__*/_jsx(Box, {
         flexGrow: 1
-      }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), !!children && /*#__PURE__*/_jsx("div", {
         className: "header-children",
         children: children
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "header-addons",
         children: addons
       })]
     })
-  }));
+  });
 }
 Header.propTypes = {
-  onToggleMenu: _propTypes.default.func.isRequired,
-  brand: _propTypes.default.string.isRequired,
-  brandAddon: _propTypes.default.object,
-  description: _propTypes.default.any.isRequired,
-  children: _propTypes.default.any,
-  addons: _propTypes.default.any,
-  homeUrl: _propTypes.default.string,
-  logo: _propTypes.default.any
+  onToggleMenu: PropTypes.func.isRequired,
+  brand: PropTypes.string.isRequired,
+  brandAddon: PropTypes.object,
+  description: PropTypes.any.isRequired,
+  children: PropTypes.any,
+  addons: PropTypes.any,
+  homeUrl: PropTypes.string,
+  logo: PropTypes.any
 };
 Header.defaultProps = {
   children: null,