@blocklet/launcher-layout 2.3.19 → 2.3.21

package/lib/markdown-body.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+function MarkdownBody({
+  children
+}) {
+  return /*#__PURE__*/_jsx(Root, {
+    children: children
+  });
+}
+const codeFont = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
+const Root = styled(Box)`
+  .highlight pre,
+  pre {
+    border-radius: 5px;
+  }
+  code {
+    font-family: ${codeFont};
+  }
+  pre code {
+    font-size: 14px;
+    font-family: ${codeFont};
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 700 !important;
+    font-size: 1.2rem !important;
+    line-height: 1.5 !important;
+    margin-bottom: 16px;
+    margin-top: 24px;
+    border-bottom: initial !important;
+  }
+
+  .CodeMirror pre {
+    background: #f6f8fa !important;
+  }
+
+  .anchor {
+    display: none;
+  }
+`;
+MarkdownBody.propTypes = {
+  children: PropTypes.any.isRequired
+};
+MarkdownBody.defaultProps = {};
+export default MarkdownBody;

package/lib/nav.js

@@ -1,28 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _step = require("./context/step");
-var _header = _interopRequireDefault(require("./header"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-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 Nav(_ref) {
-  let {
-    blockletMeta,
-    logoUrl,
-    locale,
-    useOfSkeleton,
-    subTitle,
-    loading
-  } = _ref;
+import styled from '@emotion/styled';
+import Check from '@mui/icons-material/Check';
+import { Skeleton } from '@mui/material';
+import PropTypes from 'prop-types';
+import { useStepContext } from './context/step';
+import AppHeader from './header';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Nav({
+  blockletMeta,
+  logoUrl,
+  locale,
+  useOfSkeleton,
+  subTitle,
+  loading
+}) {
   const {
     steps,
     activeStep,
@@ -30,7 +20,7 @@ function Nav(_ref) {
     setActiveStepByIndex,
     getStepStatus,
     canBackToStep
-  } = (0, _step.useStepContext)();
+  } = useStepContext();
   const showSkeleton = useOfSkeleton ? loading : false;
   const getNodeClassName = (step, index) => {
     const classNameList = ['step-block'];
@@ -66,33 +56,33 @@ function Nav(_ref) {
     }
     return classNameList.join(' ');
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsx(AppHeader, {
       blockletMeta: blockletMeta,
       loading: loading,
       logoUrl: logoUrl,
       locale: locale,
       subTitle: subTitle
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContainer, {
-      className: "".concat(showSkeleton ? 'hide-child-step-desc' : ''),
+    }), /*#__PURE__*/_jsx(StepContainer, {
+      className: `${showSkeleton ? 'hide-child-step-desc' : ''}`,
       children: steps.map((step, index) => {
         const canBack = !showSkeleton && canBackToStep(index);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        return /*#__PURE__*/_jsxs("div", {
           className: getNodeClassName(step, index),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [/*#__PURE__*/_jsx("div", {
             className: "step-icon",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+            children: /*#__PURE__*/_jsx(Check, {
               style: {
                 fontSize: 16
               }
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          }), /*#__PURE__*/_jsx("div", {
             className: "step-line"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          }), /*#__PURE__*/_jsxs("div", {
             className: "step-content",
             title: step.name,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "step-content-name ".concat(canBack ? ' step-clickable' : ''),
+            children: [/*#__PURE__*/_jsx("span", {
+              className: `step-content-name ${canBack ? ' step-clickable' : ''}`,
               onClick: () => {
                 if (canBack) {
                   if (step.key) {
@@ -102,14 +92,14 @@ function Nav(_ref) {
                   setActiveStepByIndex(index);
                 }
               },
-              children: showSkeleton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+              children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
                 variant: "text",
                 width: 100
               }) : step.name
-            }), step.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), step.description && /*#__PURE__*/_jsx("div", {
               className: "step-desc",
               children: step.description
-            }), step.children && step.children.length && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), step.children && step.children.length && /*#__PURE__*/_jsx("div", {
               className: "step-children",
               children: step.children.map(e => {
                 let className = '';
@@ -124,8 +114,8 @@ function Nav(_ref) {
                   case 'after':
                   default:
                 }
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "step-child-block ".concat(className),
+                return /*#__PURE__*/_jsx("div", {
+                  className: `step-child-block ${className}`,
                   children: e.name
                 }, e.key);
               })
@@ -136,15 +126,274 @@ function Nav(_ref) {
     })]
   });
 }
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  ", " {\n    padding: 24px;\n    border-right: 1px solid ", ";\n    flex: 0 0 280px;\n    min-height: 48px;\n\n    .MuiStepConnector-vertical {\n      padding: 0;\n    }\n  }\n\n  ", " {\n    padding: 16px;\n\n    .MuiStepConnector-lineVertical {\n      border: none;\n    }\n  }\n\n  .stepper {\n    padding: 0 !important;\n    background: transparent;\n\n    ", " {\n      margin-top: 100px;\n    }\n\n    ", " {\n      margin-top: 40px;\n    }\n\n    .step {\n      cursor: pointer;\n    }\n  }\n\n  .always-step-child {\n    .step-child-block {\n      animation: none !important;\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
-const StepContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 60px;\n\n  @media (max-height: 900px) {\n    margin-top: 32px;\n  }\n\n  ", " {\n    margin-top: 30px;\n  }\n  .step-clickable {\n    cursor: pointer;\n    &:hover {\n      color: ", ";\n    }\n  }\n  .step-line {\n    display: block;\n    position: absolute;\n    z-index: 1;\n    left: 11px;\n    top: 12px;\n    width: 2px;\n    height: 100%;\n    opacity: 0.5;\n    background-color: ", ";\n    transition: all ease 0.2s;\n  }\n  .step-icon {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-shrink: 0;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    border-radius: 13px;\n    background-color: ", ";\n    color: ", ";\n    transition: all ease 0.3s;\n    &:before {\n      position: absolute;\n      left: 4px;\n      top: 4px;\n      z-index: 3;\n      display: block;\n      background-color: ", ";\n      width: 16px;\n      height: 16px;\n      border-radius: 10px;\n      content: '';\n      transform: scale(0);\n      transition: all ease 0.3s;\n    }\n    & > * {\n      transform: scale(0);\n      transition: all ease 0.2s;\n    }\n  }\n  .step-content {\n    position: relative;\n    flex: 1;\n    padding-top: 1px;\n    margin-left: 22px;\n    font-size: 16px;\n    color: ", ";\n    white-space: nowrap;\n  }\n  .step-desc {\n    margin-top: 24px;\n    font-size: 12px;\n    font-weight: 500;\n    height: 17px;\n    color: ", ";\n    transition: all ease 0.3s;\n    overflow: hidden;\n  }\n  ", " {\n    .step-content-name {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n  &.hide-child-step-desc {\n    .step-desc {\n      margin: 0;\n      opacity: 0;\n      height: 0;\n    }\n  }\n  .step-block {\n    position: relative;\n    display: flex;\n    min-height: 70px;\n    opacity: 0.5;\n    overflow: hidden;\n    transition: all ease 0.2s;\n    &:last-child {\n      height: auto;\n      min-height: auto;\n    }\n    &.step-optional {\n      height: 0;\n      opacity: 0;\n      min-height: 0px;\n    }\n\n    &.step-checked,\n    &.step-active {\n      .step-desc {\n        margin: 0;\n        opacity: 0;\n        height: 0;\n      }\n    }\n\n    &.step-checked {\n      opacity: 1;\n      .step-icon {\n        color: ", ";\n        background-color: ", ";\n        & > * {\n          transform: scale(1);\n        }\n      }\n\n      .step-line {\n        background-color: ", ";\n        opacity: 1;\n      }\n    }\n\n    &.step-active {\n      opacity: 1;\n      .step-icon {\n        background-color: ", ";\n      }\n      .step-icon:before {\n        transform: scale(1);\n      }\n      .step-content {\n        color: ", ";\n      }\n    }\n\n    &:last-child {\n      .step-line {\n        display: none;\n      }\n\n      .step-child-block {\n        &:last-child {\n          padding-bottom: 0;\n        }\n      }\n    }\n\n    &.hide-step-child {\n      .step-children {\n        .step-child-block {\n          margin-top: 0;\n          height: 0;\n          opacity: 0;\n          &:last-child {\n            padding-bottom: 0;\n          }\n        }\n      }\n    }\n  }\n  .step-children {\n    padding-top: 20px;\n    .step-child-block {\n      margin-top: 4px;\n      height: 24px;\n      line-height: 24px;\n      font-size: 14px;\n      color: #9397a1;\n      transition: all ease 0.3s;\n      &:first-of-type {\n        margin-top: 8px;\n      }\n      &:last-child {\n        padding-bottom: 40px;\n      }\n      &.step-child-block-active {\n        color: ", ";\n        font-weight: 700;\n      }\n      &.step-child-block-checked {\n        color: ", ";\n      }\n    }\n  }\n\n  .step-active {\n    .step-child-block {\n      animation: stepChildAnime ease 0.3s;\n    }\n  }\n\n  @keyframes stepChildAnime {\n    0% {\n      height: 0;\n    }\n    100% {\n      height: 24px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
+const Div = styled.div`
+  overflow-y: auto;
+  ${props => props.theme.breakpoints.up('md')} {
+    padding: 24px;
+    border-right: 1px solid ${props => props.theme.palette.grey[100]};
+    flex: 0 0 280px;
+    min-height: 48px;
+
+    .MuiStepConnector-vertical {
+      padding: 0;
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    padding: 16px;
+
+    .MuiStepConnector-lineVertical {
+      border: none;
+    }
+  }
+
+  .stepper {
+    padding: 0 !important;
+    background: transparent;
+
+    ${props => props.theme.breakpoints.up('sm')} {
+      margin-top: 100px;
+    }
+
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: 40px;
+    }
+
+    .step {
+      cursor: pointer;
+    }
+  }
+
+  .always-step-child {
+    .step-child-block {
+      animation: none !important;
+    }
+  }
+`;
+const StepContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 60px;
+
+  @media (max-height: 900px) {
+    margin-top: 32px;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    margin-top: 30px;
+  }
+  .step-clickable {
+    cursor: pointer;
+    &:hover {
+      color: ${props => props.theme.palette.primary.main};
+    }
+  }
+  .step-line {
+    display: block;
+    position: absolute;
+    z-index: 1;
+    left: 11px;
+    top: 12px;
+    width: 2px;
+    height: 100%;
+    opacity: 0.5;
+    background-color: ${props => props.theme.palette.grey[400]};
+    transition: all ease 0.2s;
+  }
+  .step-icon {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 13px;
+    background-color: ${props => props.theme.palette.grey[400]};
+    color: ${props => props.theme.palette.common.white};
+    transition: all ease 0.3s;
+    &:before {
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      z-index: 3;
+      display: block;
+      background-color: ${props => props.theme.palette.common.white};
+      width: 16px;
+      height: 16px;
+      border-radius: 10px;
+      content: '';
+      transform: scale(0);
+      transition: all ease 0.3s;
+    }
+    & > * {
+      transform: scale(0);
+      transition: all ease 0.2s;
+    }
+  }
+  .step-content {
+    position: relative;
+    flex: 1;
+    padding-top: 1px;
+    margin-left: 22px;
+    font-size: 16px;
+    color: ${props => props.theme.palette.grey[700]};
+    white-space: nowrap;
+  }
+  .step-desc {
+    margin-top: 24px;
+    font-size: 12px;
+    font-weight: 500;
+    height: 17px;
+    color: ${props => props.theme.palette.grey[700]};
+    transition: all ease 0.3s;
+    overflow: hidden;
+  }
+  ${props => props.theme.breakpoints.up('md')} {
+    .step-content-name {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &.hide-child-step-desc {
+    .step-desc {
+      margin: 0;
+      opacity: 0;
+      height: 0;
+    }
+  }
+  .step-block {
+    position: relative;
+    display: flex;
+    min-height: 70px;
+    opacity: 0.5;
+    overflow: hidden;
+    transition: all ease 0.2s;
+    &:last-child {
+      height: auto;
+      min-height: auto;
+    }
+    &.step-optional {
+      height: 0;
+      opacity: 0;
+      min-height: 0px;
+    }
+
+    &.step-checked,
+    &.step-active {
+      .step-desc {
+        margin: 0;
+        opacity: 0;
+        height: 0;
+      }
+    }
+
+    &.step-checked {
+      opacity: 1;
+      .step-icon {
+        color: ${props => props.theme.palette.common.white};
+        background-color: ${props => props.theme.palette.primary.main};
+        & > * {
+          transform: scale(1);
+        }
+      }
+
+      .step-line {
+        background-color: ${props => props.theme.palette.primary.main};
+        opacity: 1;
+      }
+    }
+
+    &.step-active {
+      opacity: 1;
+      .step-icon {
+        background-color: ${props => props.theme.palette.primary.main};
+      }
+      .step-icon:before {
+        transform: scale(1);
+      }
+      .step-content {
+        color: ${props => props.theme.palette.primary.main};
+      }
+    }
+
+    &:last-child {
+      .step-line {
+        display: none;
+      }
+
+      .step-child-block {
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    &.hide-step-child {
+      .step-children {
+        .step-child-block {
+          margin-top: 0;
+          height: 0;
+          opacity: 0;
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .step-children {
+    padding-top: 20px;
+    .step-child-block {
+      margin-top: 4px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      color: #9397a1;
+      transition: all ease 0.3s;
+      &:first-of-type {
+        margin-top: 8px;
+      }
+      &:last-child {
+        padding-bottom: 40px;
+      }
+      &.step-child-block-active {
+        color: ${props => props.theme.palette.common.black};
+        font-weight: 700;
+      }
+      &.step-child-block-checked {
+        color: ${props => props.theme.palette.common.black};
+      }
+    }
+  }
+
+  .step-active {
+    .step-child-block {
+      animation: stepChildAnime ease 0.3s;
+    }
+  }
+
+  @keyframes stepChildAnime {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 24px;
+    }
+  }
+`;
 Nav.propTypes = {
-  blockletMeta: _propTypes.default.object.isRequired,
-  logoUrl: _propTypes.default.string,
-  locale: _propTypes.default.string,
-  useOfSkeleton: _propTypes.default.bool,
-  subTitle: _propTypes.default.string,
-  loading: _propTypes.default.bool
+  blockletMeta: PropTypes.object.isRequired,
+  logoUrl: PropTypes.string,
+  locale: PropTypes.string,
+  useOfSkeleton: PropTypes.bool,
+  subTitle: PropTypes.string,
+  loading: PropTypes.bool
 };
 Nav.defaultProps = {
   logoUrl: '',
@@ -153,4 +402,4 @@ Nav.defaultProps = {
   subTitle: '',
   loading: false
 };
-var _default = exports.default = Nav;
+export default Nav;

package/lib/page-header.js

@@ -1,50 +1,63 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["title", "subTitle", "onClickBack"];
-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 : 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 PageHeader(_ref) {
-  let {
-      title,
-      subTitle,
-      onClickBack
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [onClickBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  subTitle,
+  onClickBack,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Content, {
+    ...rest,
+    children: [onClickBack && /*#__PURE__*/_jsx(ArrowBackIosIcon, {
       className: "back-btn",
       onClick: onClickBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "title",
       children: title
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "sub-title",
       children: subTitle
     })]
-  }));
+  });
 }
-const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  text-align: center;\n\n  .title {\n    font-size: 24px;\n    font-weight: 700;\n    color: ", ";\n\n    ", " {\n      font-size: 20px;\n    }\n  }\n\n  .sub-title {\n    font-size: 14px;\n    color: ", ";\n    padding: 0 14px;\n    font-weight: 400;\n  }\n\n  .back-btn {\n    position: absolute;\n    left: 0;\n    top: 8px;\n    color: #9397a1;\n    font-size: 18px;\n    cursor: pointer;\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[600]);
-var _default = exports.default = PageHeader;
+const Content = styled.div`
+  position: relative;
+  width: 100%;
+  text-align: center;
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: ${props => props.theme.palette.common.black};
+
+    ${props => props.theme.breakpoints.down('md')} {
+      font-size: 20px;
+    }
+  }
+
+  .sub-title {
+    font-size: 14px;
+    color: ${props => props.theme.palette.grey[600]};
+    padding: 0 14px;
+    font-weight: 400;
+  }
+
+  .back-btn {
+    position: absolute;
+    left: 0;
+    top: 8px;
+    color: #9397a1;
+    font-size: 18px;
+    cursor: pointer;
+  }
+`;
+export default PageHeader;
 PageHeader.propTypes = {
-  title: _propTypes.default.string,
-  subTitle: _propTypes.default.string,
-  onClickBack: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  onClickBack: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 PageHeader.defaultProps = {
   title: '',

package/lib/theme-provider.js

@@ -1,49 +1,41 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemeProvider = exports.default = ThemeProvider;
-exports.useThemeContext = useThemeContext;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("@emotion/react");
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const defaultTheme = (0, _Theme.create)({});
-const ThemeContext = /*#__PURE__*/(0, _react.createContext)({});
-function ThemeProvider() {
-  let {
-    children: _children,
-    theme: _theme
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
-  (0, _react.useEffect)(() => {
+import { createContext, useEffect, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ThemeProvider as UxThemeProvider, create } from '@arcblock/ux/lib/Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = create({});
+const ThemeContext = /*#__PURE__*/createContext({});
+export default function ThemeProvider({
+  children,
+  theme: _theme
+} = {}) {
+  const [theme, setTheme] = useState(defaultTheme);
+  useEffect(() => {
     if (_theme && typeof _theme === 'object') setTheme(_theme);
   }, [_theme]);
   if (theme) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+    return /*#__PURE__*/_jsx(ThemeContext.Provider, {
       value: theme,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Consumer, {
+      children: /*#__PURE__*/_jsx(ThemeContext.Consumer, {
         children: themeValue => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
+          return /*#__PURE__*/_jsx(UxThemeProvider, {
             theme: themeValue,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
+            children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
               theme: themeValue,
-              children: _children
+              children: children
             })
           });
         }
       })
     });
   }
-  return _children;
+  return children;
 }
 ThemeProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  theme: _propTypes.default.object.isRequired
+  children: PropTypes.any.isRequired,
+  theme: PropTypes.object.isRequired
 };
 function useThemeContext() {
-  return (0, _react.useContext)(ThemeContext);
-}
+  return useContext(ThemeContext);
+}
+export { ThemeProvider, useThemeContext };