@arcblock/ux 1.17.13 → 1.17.16

package/lib/NavMenu/nav-menu.js

@@ -9,15 +9,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-require("./style.css");
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _style = require("./style");
 
-const _excluded = ["items", "orientation", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor"],
+const _excluded = ["items", "mode", "children", "defaultActiveId", "textColor", "activeTextColor", "bgColor", "onSelected"],
       _excluded2 = ["id", "icon", "label", "active", "onClick"],
-      _excluded3 = ["id", "icon", "label", "children"];
+      _excluded3 = ["id", "icon", "label", "children", "expandIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,12 +60,13 @@ function NavMenu(_ref) {
 
   let {
     items,
-    orientation,
+    mode,
     children,
     defaultActiveId,
     textColor,
     activeTextColor,
-    bgColor
+    bgColor,
+    onSelected
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -82,10 +83,12 @@ function NavMenu(_ref) {
   });
   const contextValue = (0, _react.useMemo)(() => {
     return _objectSpread(_objectSpread({}, state), {}, {
+      mode,
       activate: id => {
         setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
           activeId: id
         }));
+        onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
       },
       open: id => {
         setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
@@ -99,7 +102,7 @@ function NavMenu(_ref) {
       }
     });
   }, [state]);
-  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(orientation), rest.className);
+  const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
 
   const renderItem = (item, index) => {
     if (item.children) {
@@ -124,9 +127,10 @@ function NavMenu(_ref) {
     );
   };
 
+  const StyledRoot = mode === 'inline' ? _style.InlineStyle : _style.HorizontalStyle;
   return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(StyledRoot, Object.assign({}, rest, {
     className: classes,
     $textColor: textColor,
     $activeTextColor: activeTextColor,
@@ -138,33 +142,30 @@ function NavMenu(_ref) {
 
 NavMenu.propTypes = {
   items: _propTypes.default.array,
-  // 默认水平方向布局
-  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  // 默认水平方向布局,
+  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
+  mode: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
   children: _propTypes.default.array,
   defaultActiveId: _propTypes.default.string,
   textColor: _propTypes.default.string,
   activeTextColor: _propTypes.default.string,
-  bgColor: _propTypes.default.string
+  bgColor: _propTypes.default.string,
+  onSelected: _propTypes.default.func
 };
 NavMenu.defaultProps = {
   items: null,
-  orientation: 'horizontal',
+  mode: 'horizontal',
   children: null,
   defaultActiveId: null,
   textColor: '#9397a1',
   activeTextColor: '#25292f',
-  bgColor: '#fff'
+  bgColor: '#fff',
+  onSelected: null
 };
-
-const Root = _styledComponents.default.nav.withConfig({
-  displayName: "nav-menu__Root",
-  componentId: "sc-1atwjw0-0"
-})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";padding:8px 16px;background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
 /**
  * Item
  */
 
-
 function Item(_ref2) {
   let {
     id: _id,
@@ -195,14 +196,18 @@ function Item(_ref2) {
     activate(id);
   };
 
-  return /*#__PURE__*/_react.default.createElement(ItemRoot, Object.assign({}, rest, {
-    className: classes,
-    onClick: handleClick
-  }), icon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-item-icon"
-  }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-item-content"
-  }, label));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _react.default.createElement("li", Object.assign({}, rest, {
+      className: classes,
+      onClick: handleClick
+    }), icon && /*#__PURE__*/_react.default.createElement("span", {
+      className: "navmenu-item-icon"
+    }, icon), /*#__PURE__*/_react.default.createElement("span", {
+      className: "navmenu-item-label"
+    }, label))
+  );
 }
 
 Item.propTypes = {
@@ -221,22 +226,17 @@ Item.defaultProps = {
   active: false,
   onClick: null
 };
-
-const ItemRoot = _styledComponents.default.li.withConfig({
-  displayName: "nav-menu__ItemRoot",
-  componentId: "sc-1atwjw0-1"
-})(["position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}"]);
 /**
  * Sub
  */
 
-
 function Sub(_ref3) {
   let {
     id: _id,
     icon,
     label,
-    children
+    children,
+    expandIcon
   } = _ref3,
       rest = _objectWithoutProperties(_ref3, _excluded3);
 
@@ -244,22 +244,38 @@ function Sub(_ref3) {
   const {
     openedIds,
     open,
-    close
+    close,
+    mode
   } = (0, _react.useContext)(NavMenuContext);
+  const isOpen = openedIds.includes(id);
   const classes = (0, _clsx.default)('navmenu-sub', {
-    'navmenu-sub--opened': openedIds.includes(id)
+    'navmenu-sub--opened': isOpen
   }, rest.className);
-  return /*#__PURE__*/_react.default.createElement(SubRoot, Object.assign({}, rest, {
-    className: classes,
+  const isInlineMode = mode === 'inline'; // inline mode 时使用 click 事件控制收缩/伸展子菜单
+
+  const props = isInlineMode ? {
+    onClick: () => openedIds.includes(id) ? close(id) : open(id)
+  } : {
     onMouseEnter: () => open(id),
     onMouseLeave: () => close(id)
-  }), icon && /*#__PURE__*/_react.default.createElement("span", {
+  }; // inline mode, 避免点击子菜单项时触发父菜单的 open/close
+
+  const containerProps = isInlineMode ? {
+    onClick: e => e.stopPropagation()
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("li", Object.assign({}, rest, {
+    className: classes
+  }, props), icon && /*#__PURE__*/_react.default.createElement("span", {
     className: "navmenu-sub-icon"
   }, icon), /*#__PURE__*/_react.default.createElement("span", {
-    className: "navmenu-sub-content"
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "navmenu-sub-label"
+  }, label), expandIcon && /*#__PURE__*/_react.default.createElement("span", {
+    className: "navmenu-sub-expand-icon"
+  }, (expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon({
+    isOpen
+  })) || expandIcon), /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: "navmenu-sub-container"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
+  }, containerProps), /*#__PURE__*/_react.default.createElement("ul", {
     className: "navmenu-sub-list"
   }, filterItems(children))));
 }
@@ -268,18 +284,24 @@ Sub.propTypes = {
   id: _propTypes.default.string,
   icon: _propTypes.default.element,
   label: _propTypes.default.node.isRequired,
-  children: _propTypes.default.array.isRequired
+  children: _propTypes.default.array.isRequired,
+  expandIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 Sub.defaultProps = {
   id: null,
-  icon: null
+  icon: null,
+  // eslint-disable-next-line react/prop-types
+  expandIcon: _ref4 => {
+    let {
+      isOpen
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
+      style: {
+        transform: "rotate(".concat(isOpen ? 180 : 0, "deg)")
+      }
+    });
+  }
 };
-
-const SubRoot = _styledComponents.default.li.withConfig({
-  displayName: "nav-menu__SubRoot",
-  componentId: "sc-1atwjw0-2"
-})(["position:relative;cursor:pointer;.navmenu-sub-container{display:none;position:absolute;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;top:100%;}"]);
-
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 var _default = NavMenu;

package/lib/NavMenu/style.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineStyle = exports.HorizontalStyle = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const NavMenuBase = _styledComponents.default.nav.withConfig({
+  displayName: "style__NavMenuBase",
+  componentId: "sc-2g7isz-0"
+})(["--text-color:", ";--active-text-color:", ";--bg-color:", ";background-color:var(--bg-color);font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}.navmenu-item,.navmenu-item a,.navmenu-sub{color:var(--text-color);}.navmenu-item--active,.navmenu-item:hover,.navmenu-item:hover a,.navmenu-item--active a,.navmenu-sub--opened{color:var(--active-text-color);}.navmenu-item{position:relative;cursor:pointer;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$textColor, props => props.$activeTextColor, props => props.$bgColor);
+
+const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
+  displayName: "style__HorizontalStyle",
+  componentId: "sc-2g7isz-1"
+})(["padding:8px 16px;.navmenu-root{display:flex;align-items:center;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{margin-left:24px;}.navmenu-root > .navmenu-item:first-child,.navmenu-root > .navmenu-sub:first-child{margin-left:0;}.navmenu-sub-container{display:none;position:absolute;top:100%;}.navmenu-sub-list{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15);.navmenu-item + .navmenu-item{margin-top:8px;}}.navmenu-root > .navmenu-sub{> .navmenu-sub-container{left:50%;transform:translateX(-50%);padding-top:16px;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;}}"]);
+/* inline mode */
+
+exports.HorizontalStyle = HorizontalStyle;
+const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
+  displayName: "style__InlineStyle",
+  componentId: "sc-2g7isz-2"
+})([".navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{height:48px;line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:32px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;position:absolute;top:100%;left:0;right:0;.navmenu-item,.navmenu-sub{line-height:24px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:32px;margin-top:8px;font-size:13px;}}.navmenu-root > .navmenu-sub{&.navmenu-sub--opened{background:#eee;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+exports.InlineStyle = InlineStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.13",
+  "version": "1.17.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "da903274c188ed5dbb9e318b1495af6faa5ce668",
+  "gitHead": "acab741ed856df9b4def509821a1ab6217350625",
   "dependencies": {
-    "@arcblock/icons": "^1.17.13",
-    "@arcblock/react-hooks": "^1.17.13",
+    "@arcblock/icons": "^1.17.16",
+    "@arcblock/react-hooks": "^1.17.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/AnimationWaiter/index.js

@@ -11,6 +11,7 @@ import lottieJson from './default-animation.json';
  * @param {Number} size 动画的尺寸，单位px
  * @param {String｜Array} message 动画下方的文字；数组情况下会在一定时间切换文案
  * @param {Number} messageDuration 动画下方的文字为数组时，每个文案的持续时间；默认5000ms
+ * @param {Number} messageLoop 动画下方的文字为数组时，文案是否循环播放
  * @param {Array} tips 底部的提示元素
  * @param {Number} tipsDuration 底部提示的切换时间，单位毫秒，默认3000ms
  * @param {Number} speed 动画默认的播放速度
@@ -23,6 +24,7 @@ export default function AnimationWaiter({
   size,
   message,
   messageDuration,
+  messageLoop,
   tips,
   tipsDuration,
   maybeDuration,
@@ -36,7 +38,6 @@ export default function AnimationWaiter({
   // 动画的开始时间
   const startTime = useRef(new Date().getTime());
 
-  // 省略号
   useEffect(() => {
     if (!message) {
       return;
@@ -50,7 +51,11 @@ export default function AnimationWaiter({
       timer1 = setInterval(() => {
         msgId++;
         if (msgId >= message.length) {
-          msgId = 0;
+          if (messageLoop) {
+            msgId = 0;
+          } else {
+            msgId = message.length - 1;
+          }
         }
         setDesc(message[msgId]);
       }, messageDuration);
@@ -145,6 +150,7 @@ AnimationWaiter.propTypes = {
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   message: PropTypes.any,
   messageDuration: PropTypes.number,
+  messageLoop: PropTypes.bool,
   tips: PropTypes.array,
   tipsDuration: PropTypes.number,
   speed: PropTypes.number,
@@ -157,6 +163,7 @@ AnimationWaiter.defaultProps = {
   size: '',
   message: '',
   messageDuration: 5000,
+  messageLoop: true,
   tips: [],
   tipsDuration: 5000,
   speed: 1,

package/src/Blocklet/blocklet.js

@@ -95,24 +95,24 @@ const Div = styled.div`
     font-size: 16px;
     font-weight: 500;
     line-height: 19px;
+    max-height: 19px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    max-height: 38px;
-    word-break: break-all;
+    white-space: nowrap;
   }
   .arcblock-blocklet__describe {
-    margin-top: 2px;
+    margin-top: 4px;
     color: ${props => props.theme.palette.grey[600]};
     font-size: 14px;
     font-weight: 500;
     line-height: 17px;
-    max-height: 17px;
+    max-height: 34px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
   }
   .arcblock-blocklet__version {
     color: ${props => props.theme.palette.grey[600]};

package/src/Header/header.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+import useTheme from '@material-ui/core/styles/useTheme';
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  prepend,
+  containerComponent: ContainerComponent,
+  ...rest
+}) {
+  const theme = useTheme();
+  return (
+    <Root {...rest} $theme={theme}>
+      <ContainerComponent className="header-container">
+        {prepend}
+        {logo && <div className="header-logo">{logo}</div>}
+        <div className="header-brand">
+          <div className="header-brand-title">
+            <h2>{brand}</h2>
+            <div className="header-brand-addon">{brandAddon}</div>
+          </div>
+          <div className="header-brand-desc">{description}</div>
+        </div>
+        {children}
+        <Box flexGrow={1} />
+        <div className="header-addons">{addons}</div>
+      </ContainerComponent>
+    </Root>
+  );
+}
+
+Header.propTypes = {
+  logo: PropTypes.node,
+  // 相当于 Title
+  brand: PropTypes.string,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: PropTypes.node,
+  // brand 下方的描述
+  description: PropTypes.string,
+  children: PropTypes.node,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: PropTypes.node,
+  // logo 左侧内容
+  prepend: PropTypes.node,
+  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
+  containerComponent: PropTypes.elementType,
+};
+
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  prepend: null,
+  containerComponent: Container,
+};
+
+const Root = styled.div`
+  position: relative;
+  z-index: ${props => props.$theme.zIndex.drawer + 1};
+  font-size: 14px;
+  background: ${props => props.$theme.palette.common.white};
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 8px 16px;
+  }
+  .header-logo {
+    display: inline-flex;
+    justify-content: center;
+    position: relative;
+    height: 40px;
+    margin-right: 16px;
+    img,
+    svg {
+      width: auto;
+      height: 100%;
+    }
+    > a {
+      height: 100%;
+      line-height: 1;
+    }
+    > a::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      content: '';
+    }
+  }
+  .header-brand {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    margin-right: 16px;
+    .header-brand-title {
+      display: flex;
+      align-items: center;
+      h2 {
+        font-size: 16px;
+      }
+      .header-brand-addon {
+        margin-left: 8px;
+      }
+    }
+    .header-brand-desc {
+      color: #9397a1;
+    }
+  }
+  .header-addons {
+    display: flex;
+    align-items: center;
+  }
+  ${props => props.$theme.breakpoints.down('md')} {
+    .header-brand {
+      margin-right: 12px;
+      .header-brand-title {
+        h2 {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .header-container {
+      height: 56px;
+    }
+    .header-menu {
+      display: inline-block;
+    }
+    .header-logo {
+      height: 32px;
+    }
+    .header-brand {
+      display: none;
+    }
+  }
+`;
+
+export default Header;

package/src/Header/index.js

@@ -1,156 +1,2 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import MenuIcon from '@material-ui/icons/Menu';
-import Button from '@material-ui/core/IconButton';
-
-/**
- * Header 组件
- * TODO: Layout/dashboard 可以复用此处的 header
- */
-function Header({
-  logo,
-  brand,
-  brandAddon,
-  description,
-  children,
-  addons,
-  mobile,
-  onToggleMenu,
-  ...rest
-}) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const _mobile = { ...Header.defaultProps.mobile, ...mobile };
-  // 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
-  const hideLogo = isMobile && _mobile.hideLogo;
-  return (
-    <Root {...rest} $theme={theme}>
-      {_mobile.enableMenu && (
-        <Button color="inherit" edge="start" className="header-menu" onClick={onToggleMenu}>
-          <MenuIcon />
-        </Button>
-      )}
-      {!hideLogo && <div className="header-logo">{logo}</div>}
-      <div className="header-brand">
-        <div className="header-brand-title">
-          <h2>{brand}</h2>
-          <div className="header-brand-addon">{brandAddon}</div>
-        </div>
-        <div className="header-brand-desc">{description}</div>
-      </div>
-      {children}
-      <Box flexGrow={1} />
-      <div className="header-addons">{addons}</div>
-    </Root>
-  );
-}
-
-Header.propTypes = {
-  logo: PropTypes.any,
-  // 相当于 Title
-  brand: PropTypes.string,
-  // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: PropTypes.any,
-  // brand 下方的描述
-  description: PropTypes.string,
-  children: PropTypes.any,
-  // 右侧区域, 可以放置 icons/actions/login 等
-  addons: PropTypes.any,
-  // 窄屏下配置
-  mobile: PropTypes.shape({
-    enableMenu: PropTypes.bool,
-    hideLogo: PropTypes.bool,
-  }),
-  onToggleMenu: PropTypes.func,
-};
-
-Header.defaultProps = {
-  logo: null,
-  brand: null,
-  brandAddon: null,
-  description: null,
-  children: null,
-  addons: null,
-  mobile: { enableMenu: true, hideLogo: true },
-  onToggleMenu: () => {},
-};
-
-const Root = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: ${props => props.$theme.zIndex.drawer + 1};
-  height: 64px;
-  padding: 12px 24px;
-  font-size: 14px;
-  background: #fff;
-  .header-menu {
-    display: none;
-  }
-  .header-logo {
-    display: inline-flex;
-    justify-content: center;
-    position: relative;
-    height: 40px;
-    margin-right: 16px;
-    img,
-    svg {
-      width: auto;
-      height: 100%;
-    }
-    > a {
-      height: 100%;
-      line-height: 1;
-    }
-    > a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
-  }
-  .header-brand {
-    display: flex;
-    flex-direction: column;
-    margin-right: 16px;
-    .header-brand-title {
-      display: flex;
-      align-items: center;
-      h2 {
-        font-size: 16px;
-      }
-      .header-brand-addon {
-        margin-left: 8px;
-      }
-    }
-    .header-brand-desc {
-      color: #9397a1;
-    }
-  }
-  .header-addons {
-    display: flex;
-    align-items: center;
-  }
-  ${props => props.$theme.breakpoints.down('sm')} {
-    height: 56px;
-    padding: 8px 16px;
-    .header-menu {
-      display: inline-block;
-    }
-    .header-logo {
-      height: 32px;
-    }
-    .header-brand {
-      display: none;
-    }
-  }
-`;
-
-export default Header;
+export { default as Header } from './header';
+export { default as ResponsiveHeader } from './responsive-header';