@arcblock/ux 2.9.91 → 2.10.0

package/lib/Header/header.js

@@ -1,76 +1,61 @@
-"use strict";
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { useRef, useState, useEffect } from 'react';
+import AutoHidden from './auto-hidden';
+import { styled } from '../Theme';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-var _react = require("react");
-var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align", "maxWidth", "homeLink"];
 /**
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
-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; }
-function Header(_ref) {
-  let {
-      logo,
-      brand,
-      brandAddon,
-      description,
-      children,
-      addons,
-      prepend,
-      align,
-      maxWidth,
-      homeLink
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const logoRef = (0, _react.useRef)();
-  const [brandWrapperMinWidth, setBrandWrapperMinWidth] = (0, _react.useState)('0px');
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  prepend,
+  align,
+  maxWidth,
+  homeLink,
+  ...rest
+}) {
+  const logoRef = useRef();
+  const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
   const style = {
     minWidth: brandWrapperMinWidth
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (logoRef.current) {
-      setBrandWrapperMinWidth("".concat(logoRef.current.offsetWidth, "px"));
+      setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
     }
   }, []);
   const renderBrand = () => {
-    const brandContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    const brandContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [logo && /*#__PURE__*/_jsx("div", {
         className: "header-logo",
         ref: logoRef,
         children: logo
-      }), brand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoHidden.default, {
+      }), brand && /*#__PURE__*/_jsx(AutoHidden, {
         height: 44,
         sx: {
           flexShrink: {
             xs: 1
           }
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: /*#__PURE__*/_jsxs("div", {
           className: "header-brand",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [/*#__PURE__*/_jsx("div", {
             className: "header-brand-title",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+            children: /*#__PURE__*/_jsx("h2", {
               children: brand
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          }), /*#__PURE__*/_jsx("div", {
             className: "header-brand-desc",
             children: description
           })]
@@ -80,50 +65,51 @@ function Header(_ref) {
     if (typeof homeLink === 'function') {
       return homeLink(brandContent);
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+    return /*#__PURE__*/_jsx("a", {
       href: homeLink,
       children: brandContent
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
+  return /*#__PURE__*/_jsx(Root, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Container, {
       maxWidth: maxWidth,
       className: "header-container",
-      children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [prepend, /*#__PURE__*/_jsx("div", {
         className: "header-brand-wrapper",
         style: style,
         children: renderBrand()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "header-brand-addon",
         children: brandAddon
-      }), align === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), align === 'right' && /*#__PURE__*/_jsx(Box, {
         flexGrow: 1
-      }), children, align === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
         flexGrow: 1
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "header-addons",
         children: addons
       })]
     })
-  }));
+  });
 }
 Header.propTypes = {
   // logo img/svg, 可以包裹一个 a 标签
-  logo: _propTypes.default.node,
+  logo: PropTypes.node,
   // 相当于 Title, 可以包裹一个 a 标签
-  brand: _propTypes.default.node,
+  brand: PropTypes.node,
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: _propTypes.default.node,
+  brandAddon: PropTypes.node,
   // brand 下方的描述
-  description: _propTypes.default.node,
-  children: _propTypes.default.node,
+  description: PropTypes.node,
+  children: PropTypes.node,
   // 右侧区域, 可以放置 icons/actions/login 等
-  addons: _propTypes.default.node,
+  addons: PropTypes.node,
   // logo 左侧内容
-  prepend: _propTypes.default.node,
-  align: _propTypes.default.oneOf(['left', 'right']),
-  maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
-  homeLink: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
+  prepend: PropTypes.node,
+  align: PropTypes.oneOf(['left', 'right']),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
+  homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
 Header.defaultProps = {
   logo: null,
@@ -137,5 +123,101 @@ Header.defaultProps = {
   maxWidth: undefined,
   homeLink: '/'
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n\n  .header-brand-wrapper {\n    flex-shrink: 2;\n    > a {\n      display: flex;\n      align-items: center;\n      height: 100%;\n      line-height: 1;\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  .header-brand-wrapper .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n  }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
-var _default = exports.default = Header;
+const Root = styled('div')`
+  position: relative;
+  z-index: ${props => props.theme.zIndex.appBar};
+  font-size: 14px;
+  background: ${props => props.theme.palette.common.white};
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 64px;
+  }
+
+  .header-brand-wrapper {
+    flex-shrink: 2;
+    > a {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      line-height: 1;
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  .header-brand-wrapper .header-logo {
+    display: inline-flex;
+    position: relative;
+    height: 44px;
+    margin-right: 16px;
+    img,
+    svg {
+      width: auto;
+      height: 100%;
+      max-height: 100%;
+    }
+  }
+  .header-brand {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 44px;
+    margin-right: 16px;
+    line-height: 1;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    .header-brand-title {
+      display: flex;
+      align-items: center;
+      h2 {
+        margin: 0;
+        font-size: 16px;
+      }
+    }
+    .header-brand-desc {
+      margin-top: 4px;
+      color: #9397a1;
+    }
+  }
+  .header-brand-addon {
+    margin-right: 16px;
+  }
+  .header-addons {
+    display: flex;
+    align-items: center;
+  }
+  ${props => props.theme.breakpoints.down('lg')} {
+    .header-brand {
+      margin-right: 12px;
+      .header-brand-title {
+        h2 {
+          font-size: 14px;
+        }
+      }
+    }
+    .header-brand-addon {
+      display: none;
+    }
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-menu {
+      display: inline-block;
+    }
+    .header-logo {
+      height: 32px;
+    }
+    .header-brand {
+      .header-brand-title {
+        h2 {
+          font-size: 13px;
+        }
+      }
+      .header-brand-desc {
+        font-size: 12px;
+      }
+    }
+  }
+`;
+export default Header;

package/lib/Header/index.js

@@ -1,20 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Header", {
-  enumerable: true,
-  get: function get() {
-    return _header.default;
-  }
-});
-Object.defineProperty(exports, "ResponsiveHeader", {
-  enumerable: true,
-  get: function get() {
-    return _responsiveHeader.default;
-  }
-});
-var _header = _interopRequireDefault(require("./header"));
-var _responsiveHeader = _interopRequireDefault(require("./responsive-header"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Header } from './header';
+export { default as ResponsiveHeader } from './responsive-header';

package/lib/Header/responsive-header.js

@@ -1,23 +1,15 @@
-"use strict";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useCreation, useReactive } from 'ahooks';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import Button from '@mui/material/IconButton';
+import Container from '@mui/material/Container';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Drawer from '@mui/material/Drawer';
+import Header from './header';
+import { styled, useTheme } from '../Theme';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ahooks = require("ahooks");
-var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Container = _interopRequireDefault(require("@mui/material/Container"));
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
-var _header = _interopRequireDefault(require("./header"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-const _excluded = ["menu", "prepend", "children"];
 /**
  * ResponsiveHeader
  * - 窄屏下显示 burge menu
@@ -25,39 +17,30 @@ const _excluded = ["menu", "prepend", "children"];
  *
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
  */
-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; }
-function ResponsiveHeader(_ref) {
-  let {
-      menu,
-      prepend,
-      children
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const theme = (0, _Theme.useTheme)();
-  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
-  const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ResponsiveHeader({
+  menu,
+  prepend,
+  children,
+  ...rest
+}) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const _children = typeof children === 'function' ? children({
     isMobile,
     closeMenu: () => setDrawerOpen(false)
   }) : children;
 
   // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
-  const htmlOverflowState = (0, _ahooks.useReactive)({
+  const htmlOverflowState = useReactive({
     changed: false,
     value: '',
     priority: ''
   });
-  (0, _ahooks.useCreation)(() => {
-    var _document$documentEle;
-    if ((_document$documentEle = document.documentElement) !== null && _document$documentEle !== void 0 && _document$documentEle.style) {
+  useCreation(() => {
+    if (document.documentElement?.style) {
       const clean = () => {
         if (htmlOverflowState.changed) {
           if (htmlOverflowState.value) {
@@ -85,12 +68,13 @@ function ResponsiveHeader(_ref) {
 
   // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
   if (!children) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, _objectSpread({
-      prepend: prepend
-    }, rest));
+    return /*#__PURE__*/_jsx(Header, {
+      prepend: prepend,
+      ...rest
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
-    prepend: prepend || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+  return /*#__PURE__*/_jsxs(Root, {
+    prepend: prepend || /*#__PURE__*/_jsx(Button, {
       sx: {
         color: theme.palette.grey[500]
       },
@@ -98,10 +82,10 @@ function ResponsiveHeader(_ref) {
       className: "header-menu",
       "aria-label": "header menu button",
       onClick: () => setDrawerOpen(!drawerOpen),
-      children: drawerOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
-    })
-  }, rest), {}, {
-    children: [!isMobile && _children, isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
+      children: drawerOpen ? /*#__PURE__*/_jsx(CloseIcon, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
+    }),
+    ...rest,
+    children: [!isMobile && _children, isMobile && /*#__PURE__*/_jsx(Drawer, {
       open: drawerOpen,
       onClose: () => setDrawerOpen(false),
       ModalProps: {
@@ -121,19 +105,42 @@ function ResponsiveHeader(_ref) {
           boxShadow: 'none'
         }
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuPanel, {
+      children: /*#__PURE__*/_jsx(MenuPanel, {
         children: _children
       })
     })]
-  }));
+  });
 }
-ResponsiveHeader.propTypes = _objectSpread(_objectSpread({}, _header.default.PropTypes), {}, {
+ResponsiveHeader.propTypes = {
+  ...Header.PropTypes,
   // 如果是 function, 则
   // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
   // - 会传入一个 closeMenu 参数, 可以关闭 menu
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
-});
-ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
-const Root = (0, _Theme.styled)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-menu {\n      display: flex;\n      margin-right: 12px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
-const MenuPanel = (0, _Theme.styled)(_Container.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 8px;\n  padding-bottom: 16px;\n  .navmenu {\n    margin: 0 -16px;\n    .navmenu-root > .navmenu-item,\n    .navmenu-root > .navmenu-sub {\n      border: 0;\n    }\n  }\n"])));
-var _default = exports.default = ResponsiveHeader;
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+};
+ResponsiveHeader.defaultProps = {
+  ...Header.defaultProps
+};
+const Root = styled(Header)`
+  .header-menu {
+    display: none;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .header-menu {
+      display: flex;
+      margin-right: 12px;
+    }
+  }
+`;
+const MenuPanel = styled(Container)`
+  padding-top: 8px;
+  padding-bottom: 16px;
+  .navmenu {
+    margin: 0 -16px;
+    .navmenu-root > .navmenu-item,
+    .navmenu-root > .navmenu-sub {
+      border: 0;
+    }
+  }
+`;
+export default ResponsiveHeader;

package/lib/Icon/image.js

@@ -1,62 +1,46 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ImageIcon;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Img = _interopRequireDefault(require("../Img"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["name", "size", "alt", "color", "style", "prefix", "showBadge"];
-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; }
-function ImageIcon(_ref) {
-  let {
-      name,
-      size,
-      alt,
-      color,
-      style,
-      prefix,
-      showBadge
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const src = "".concat(prefix, "/").concat(name, "-").concat(color.replace(/^#/, ''), ".png");
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+import PropTypes from 'prop-types';
+import Img from '../Img';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ImageIcon({
+  name,
+  size,
+  alt,
+  color,
+  style,
+  prefix,
+  showBadge,
+  ...rest
+}) {
+  const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
+  return /*#__PURE__*/_jsxs(Div, {
     style: {
       width: size,
       height: size
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread({
+    children: [/*#__PURE__*/_jsx(Img, {
       width: size,
       height: size,
       alt: alt || name,
       src: src,
       style: Object.assign({
         width: size
-      }, style)
-    }, rest)), showBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      }, style),
+      ...rest
+    }), showBadge && /*#__PURE__*/_jsx("i", {
       className: "badge-point"
     })]
   });
 }
 ImageIcon.propTypes = {
-  name: _propTypes.default.string.isRequired,
-  size: _propTypes.default.number,
-  color: _propTypes.default.string,
-  alt: _propTypes.default.string,
-  style: _propTypes.default.object,
-  prefix: _propTypes.default.string,
-  showBadge: _propTypes.default.bool
+  name: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  alt: PropTypes.string,
+  style: PropTypes.object,
+  prefix: PropTypes.string,
+  showBadge: PropTypes.bool
 };
 ImageIcon.defaultProps = {
   size: 36,
@@ -66,4 +50,16 @@ ImageIcon.defaultProps = {
   prefix: '/images',
   showBadge: false
 };
-const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .badge-point {\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"])));
+const Div = styled('div')`
+  position: relative;
+  .badge-point {
+    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);
+  }
+`;