@arcblock/ux 2.4.2 → 2.4.3

package/lib/Metric/index.js

@@ -7,10 +7,10 @@ exports.default = Metric;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _image = _interopRequireDefault(require("../Icon/image"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -74,5 +74,4 @@ Metric.defaultProps = {
   LinkComponent: null,
   prefix: '/images'
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-left: 1px solid ", ";\n  padding: 10px 0 10px 16px;\n  @media (max-width: ", "px) {\n    padding: 0 0 0 8px;\n  }\n\n  display: flex;\n  justify-items: center;\n  align-items: flex-start;\n\n  a {\n    display: flex;\n    justify-items: center;\n    align-items: flex-start;\n  }\n\n  .metric__image {\n    margin-right: 8px;\n  }\n\n  .metric__number {\n    margin-bottom: 8px;\n    font-size: ", "px;\n    font-weight: 600;\n    line-height: 36px;\n    color: ", ";\n\n    small {\n      font-size: 12px;\n      line-height: 12px;\n    }\n\n    @media (max-width: ", "px) {\n      font-size: ", "px;\n      line-height: ", "px;\n      margin-bottom: 2px;\n    }\n  }\n\n  .metric__number--animated {\n    animation-name: blink-opacity;\n    animation-duration: 250ms;\n    animation-timing-function: linear;\n    animation-iteration-count: 1;\n    background-color: transparent !important;\n  }\n\n  .metric__name {\n    font-size: 14px;\n    text-transform: capitalize;\n    line-height: 1.2;\n    font-weight: 500;\n    color: ", ";\n    @media (max-width: ", "px) {\n      font-size: 10px;\n      line-height: 1;\n    }\n  }\n\n  @keyframes blink-opacity {\n    0% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 32 : 36, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 24 : 28, props => props.size === 'small' ? 24 : 28, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm);
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-left: 1px solid ", ";\n  padding: 10px 0 10px 16px;\n  @media (max-width: ", "px) {\n    padding: 0 0 0 8px;\n  }\n\n  display: flex;\n  justify-items: center;\n  align-items: flex-start;\n\n  a {\n    display: flex;\n    justify-items: center;\n    align-items: flex-start;\n  }\n\n  .metric__image {\n    margin-right: 8px;\n  }\n\n  .metric__number {\n    margin-bottom: 8px;\n    font-size: ", "px;\n    font-weight: 600;\n    line-height: 36px;\n    color: ", ";\n\n    small {\n      font-size: 12px;\n      line-height: 12px;\n    }\n\n    @media (max-width: ", "px) {\n      font-size: ", "px;\n      line-height: ", "px;\n      margin-bottom: 2px;\n    }\n  }\n\n  .metric__number--animated {\n    animation-name: blink-opacity;\n    animation-duration: 250ms;\n    animation-timing-function: linear;\n    animation-iteration-count: 1;\n    background-color: transparent !important;\n  }\n\n  .metric__name {\n    font-size: 14px;\n    text-transform: capitalize;\n    line-height: 1.2;\n    font-weight: 500;\n    color: ", ";\n    @media (max-width: ", "px) {\n      font-size: 10px;\n      line-height: 1;\n    }\n  }\n\n  @keyframes blink-opacity {\n    0% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 32 : 36, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 24 : 28, props => props.size === 'small' ? 24 : 28, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm);

package/lib/NFTDisplay/aspect-ratio-container.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -50,13 +50,11 @@ AspectRatioContainer.propTypes = {
   aspect: _propTypes.default.number.isRequired,
   children: _propTypes.default.node.isRequired
 };
-
-const Root = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 0;\n  padding-bottom: ", "%;\n\n  .aspect-ratio-container__inner {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), _ref2 => {
+const Root = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 0;\n  padding-bottom: ", "%;\n\n  .aspect-ratio-container__inner {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), _ref2 => {
   let {
     aspect
   } = _ref2;
   return 1 / aspect * 100;
 });
-
 var _default = AspectRatioContainer;
 exports.default = _default;

package/lib/NFTDisplay/broken.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Broken;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -23,4 +23,4 @@ function Broken() {
   });
 }
 
-const Root = (0, _styled.default)(_BrokenImage.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    width: 100%;\n    max-width: 200px;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n    fill: #ddd;\n  }\n"])));
+const Root = (0, _Theme.styled)(_BrokenImage.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    width: 100%;\n    max-width: 200px;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n    fill: #ddd;\n  }\n"])));

package/lib/NFTDisplay/index.js

@@ -10,8 +10,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _buffer = require("buffer");
@@ -34,6 +32,8 @@ var _loading = _interopRequireDefault(require("./loading"));
 
 var _broken = _interopRequireDefault(require("./broken"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -296,8 +296,7 @@ NFTDisplay.defaultProps = {
   minimumLoadingTime: 0,
   onCompleted: () => {}
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 
 function withAspectRatio(Component) {
   // eslint-disable-next-line func-names, react/prop-types

package/lib/NFTDisplay/loading.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Loading;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-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 Loading() {
@@ -22,4 +20,4 @@ function Loading() {
   });
 }
 
-const Root = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  color: #ccc;\n  background-color: #eee;\n"])));
+const Root = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  color: #ccc;\n  background-color: #eee;\n"])));

package/lib/NFTDisplay/svg-embedder/inline-svg.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _emotion = _interopRequireDefault(require("react-shadow/emotion"));
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -52,9 +52,7 @@ function InlineSvg(_ref) {
 InlineSvg.propTypes = {
   svg: _propTypes.default.string.isRequired
 };
-const Root = (0, _styled.default)(_emotion.default.span)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));
-
-const Inner = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &,\n  & > svg {\n    height: 100%;\n    width: 100%;\n    min-width: 100%;\n    max-width: 100%;\n  }\n"])));
-
+const Root = (0, _Theme.styled)(_emotion.default.span)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));
+const Inner = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &,\n  & > svg {\n    height: 100%;\n    width: 100%;\n    min-width: 100%;\n    max-width: 100%;\n  }\n"])));
 var _default = InlineSvg;
 exports.default = _default;

package/lib/NavMenu/style.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineStyle = exports.HorizontalStyle = void 0;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-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) } })); }
 
-const NavMenuBase = _styled.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      text-decoration: none;\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
-
-const HorizontalStyle = (0, _styled.default)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n  }\n  .navmenu-root > .navmenu-item:first-child,\n  .navmenu-root > .navmenu-sub:first-child {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
+const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      text-decoration: none;\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+const HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n  }\n  .navmenu-root > .navmenu-item:first-child,\n  .navmenu-root > .navmenu-sub:first-child {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
 /* inline mode */
 
 exports.HorizontalStyle = HorizontalStyle;
-const InlineStyle = (0, _styled.default)(NavMenuBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  .navmenu-root {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    padding: 0 16px;\n  }\n  & .navmenu-sub {\n    flex-wrap: wrap;\n  }\n  /* \u9876\u7EA7 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    line-height: 48px;\n    border-bottom: 1px solid #eee;\n  }\n  /* icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    width: 42px;\n    margin: 0;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: auto;\n  }\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    flex: 1 0 100%;\n    margin: 0 -16px;\n    padding-bottom: 8px;\n    .navmenu-item,\n    .navmenu-sub {\n      line-height: 32px;\n    }\n  }\n  .navmenu-sub-list {\n    padding-left: 16px;\n    .navmenu-item,\n    .navmenu-sub {\n      padding-left: 42px;\n      font-size: 13px;\n    }\n  }\n  /* \u4E8C\u7EA7 menu */\n  .navmenu-sub--opened > .navmenu-sub-container {\n    display: block;\n  }\n"])));
+const InlineStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  .navmenu-root {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    padding: 0 16px;\n  }\n  & .navmenu-sub {\n    flex-wrap: wrap;\n  }\n  /* \u9876\u7EA7 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    line-height: 48px;\n    border-bottom: 1px solid #eee;\n  }\n  /* icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    width: 42px;\n    margin: 0;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: auto;\n  }\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    flex: 1 0 100%;\n    margin: 0 -16px;\n    padding-bottom: 8px;\n    .navmenu-item,\n    .navmenu-sub {\n      line-height: 32px;\n    }\n  }\n  .navmenu-sub-list {\n    padding-left: 16px;\n    .navmenu-item,\n    .navmenu-sub {\n      padding-left: 42px;\n      font-size: 13px;\n    }\n  }\n  /* \u4E8C\u7EA7 menu */\n  .navmenu-sub--opened > .navmenu-sub-container {\n    display: block;\n  }\n"])));
 exports.InlineStyle = InlineStyle;

package/lib/PricingTable/PricingPlan.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Card = _interopRequireDefault(require("@mui/material/Card"));
 
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
@@ -17,6 +15,8 @@ var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -78,4 +78,4 @@ exports.default = _default;
 PricingPlan.propTypes = {
   plan: _propTypes.default.object.isRequired
 };
-const PlanCard = (0, _styled.default)(_Card.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 500px;\n  display: flex;\n  flex-direction: column;\n  @media (max-width: 320px) {\n    margin-top: 20px;\n  }\n\n  && {\n    ", "\n  }\n\n  .card-header {\n    height: 80px;\n    background-color: #f1fbfb;\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    .title {\n      font-size: 18px;\n      font-weight: 600;\n      text-align: center;\n      color: #404040;\n      margin: 0;\n    }\n  }\n\n  .card-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .plan-content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .plan-pricing {\n      display: flex;\n      justify-content: center;\n      align-items: baseline;\n      margin-bottom: 12px;\n      color: #4e6af6;\n      text-align: center;\n    }\n\n    .price-number {\n      font-size: 30px;\n      font-weight: 600;\n      color: #4e6af6;\n    }\n\n    .plan-services strong {\n      color: #4e6af6;\n      font-weight: 500;\n    }\n  }\n\n  .plan-actions {\n    width: 100%;\n  }\n"])), props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');
+const PlanCard = (0, _Theme.styled)(_Card.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 500px;\n  display: flex;\n  flex-direction: column;\n  @media (max-width: 320px) {\n    margin-top: 20px;\n  }\n\n  && {\n    ", "\n  }\n\n  .card-header {\n    height: 80px;\n    background-color: #f1fbfb;\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    .title {\n      font-size: 18px;\n      font-weight: 600;\n      text-align: center;\n      color: #404040;\n      margin: 0;\n    }\n  }\n\n  .card-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .plan-content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .plan-pricing {\n      display: flex;\n      justify-content: center;\n      align-items: baseline;\n      margin-bottom: 12px;\n      color: #4e6af6;\n      text-align: center;\n    }\n\n    .price-number {\n      font-size: 30px;\n      font-weight: 600;\n      color: #4e6af6;\n    }\n\n    .plan-services strong {\n      color: #4e6af6;\n      font-weight: 500;\n    }\n  }\n\n  .plan-actions {\n    width: 100%;\n  }\n"])), props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');

package/lib/PricingTable/index.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
 var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -58,5 +58,4 @@ exports.default = _default;
 PricingTable.propTypes = {
   plans: _propTypes.default.array.isRequired
 };
-
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 100px 0;\n  text-align: center;\n  background-color: ", ";\n  @media (max-width: 320px) {\n    padding: 50px 0;\n  }\n  .plan-item {\n    @media (max-width: 320px) {\n      margin-bottom: 30px;\n    }\n  }\n"])), props => props.variant === 'even' ? '#fbfbfb' : '#ffffff');
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 100px 0;\n  text-align: center;\n  background-color: ", ";\n  @media (max-width: 320px) {\n    padding: 50px 0;\n  }\n  .plan-item {\n    @media (max-width: 320px) {\n      margin-bottom: 30px;\n    }\n  }\n"])), props => props.variant === 'even' ? '#fbfbfb' : '#ffffff');

package/lib/Result/common.js

@@ -11,8 +11,6 @@ exports.InternalServerError = InternalServerError;
 exports.Maintenance = Maintenance;
 exports.PageNotFound = PageNotFound;
 
-var _styles = require("@mui/material/styles");
-
 var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
 
 var _CancelRounded = _interopRequireDefault(require("@mui/icons-material/CancelRounded"));
@@ -23,6 +21,8 @@ var _translations = _interopRequireDefault(require("./translations"));
 
 var _context = require("../Locale/context");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["locale"],
@@ -161,7 +161,7 @@ function Info(props) {
 Info.status = 'info';
 
 function StyledErrorIcon(props) {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CancelRounded.default, _objectSpread({
     style: {
       color: theme.palette.error.main,
@@ -171,7 +171,7 @@ function StyledErrorIcon(props) {
 }
 
 function StyledInfoIcon(props) {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Info.default, _objectSpread({
     style: {
       color: theme.palette.info.main,

package/lib/Result/result.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -75,8 +75,6 @@ Result.defaultProps = {
   actions: null,
   extra: undefined
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  padding: 16px;\n\n  background-color: #f7f8fb;\n"])));
-
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  padding: 16px;\n\n  background-color: #f7f8fb;\n"])));
 var _default = Result;
 exports.default = _default;

package/lib/Screenshot/index.js

@@ -9,10 +9,10 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 require("./devices.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -188,8 +188,7 @@ function Screenshot(props) {
   }));
 }
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    transform-origin: 0 0;\n    transform: scale(", ");\n  }\n  .device-content {\n    overflow: hidden;\n  }\n  .device-content video,\n  .device-content img {\n    border-radius: ", "px;\n    background-color: #fff;\n    background-position: center center;\n    background-size: cover;\n    object-fit: cover;\n    width: 100.1%;\n    height: 100.1%;\n  }\n"])), props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
-
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    transform-origin: 0 0;\n    transform: scale(", ");\n  }\n  .device-content {\n    overflow: hidden;\n  }\n  .device-content video,\n  .device-content img {\n    border-radius: ", "px;\n    background-color: #fff;\n    background-position: center center;\n    background-size: cover;\n    object-fit: cover;\n    width: 100.1%;\n    height: 100.1%;\n  }\n"])), props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
 Screenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),
   children: _propTypes.default.any.isRequired,

package/lib/SplitButton/index.js

@@ -9,8 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
@@ -27,6 +25,8 @@ var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -144,5 +144,5 @@ SplitButton.defaultProps = {
   menuButtonProps: {}
 };
 SplitButton.Item = _MenuItem.default;
-const StyledButtonGroup = (0, _styled.default)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-child {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
-const StyledPopper = (0, _styled.default)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])));
+const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-child {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
+const StyledPopper = (0, _Theme.styled)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])));

package/lib/Switch/index.js

@@ -7,12 +7,12 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@mui/material/styles");
-
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["labelProps"];
@@ -30,7 +30,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
-const IOSSwitch = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, _objectSpread({
+const IOSSwitch = (0, _Theme.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, _objectSpread({
   focusVisibleClassName: ".Mui-focusVisible",
   disableRipple: true
 }, props)))(_ref => {

package/lib/Tabs/index.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
-var _styles = require("@mui/material/styles");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
 
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["tabs", "current", "onChange"];
@@ -34,7 +34,7 @@ const classes = {
   tabs: "".concat(PREFIX, "-tabs"),
   tab: "".concat(PREFIX, "-tab")
 };
-const StyledMuiTabs = (0, _styles.styled)(_Tabs.default)(_ref => {
+const StyledMuiTabs = (0, _Theme.styled)(_Tabs.default)(_ref => {
   let {
     theme
   } = _ref;

package/lib/Tag/index.js

@@ -9,16 +9,14 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styles = require("@mui/material/styles");
-
 var _Util = require("../Util");
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -77,7 +75,7 @@ function Tag(props) {
 
   const {
     palette
-  } = (0, _styles.useTheme)();
+  } = (0, _Theme.useTheme)();
   const styles = Object.assign({}, types[type] || types.primary, style);
 
   if (palette[type]) {
@@ -116,4 +114,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/
 })));
 
 exports.default = _default;
-const Span = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 20px;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 4px;\n  }\n"])));
+const Span = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 20px;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 4px;\n  }\n"])));

package/lib/TextCollapse/index.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -92,4 +92,4 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
-const Container = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);
+const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);

package/lib/Theme/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  styled: true,
+  useTheme: true,
   ThemeProvider: true
 };
 Object.defineProperty(exports, "ThemeProvider", {
@@ -12,6 +14,18 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _themeProvider.default;
   }
 });
+Object.defineProperty(exports, "styled", {
+  enumerable: true,
+  get: function get() {
+    return _styles.styled;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function get() {
+    return _styles.useTheme;
+  }
+});
 
 var _theme = require("./theme");
 
@@ -27,6 +41,8 @@ Object.keys(_theme).forEach(function (key) {
   });
 });
 
+var _styles = require("@mui/material/styles");
+
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Theme/theme-provider.js

@@ -7,8 +7,6 @@ exports.default = ThemeProvider;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require("@emotion/react");
-
 var _styles = require("@mui/material/styles");
 
 var _StyledEngineProvider = _interopRequireDefault(require("@mui/material/StyledEngineProvider"));
@@ -21,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const defaultTheme = (0, _theme.create)();
+const defaultTheme = (0, _theme.createTheme)();
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
  */
@@ -37,12 +35,9 @@ function ThemeProvider(_ref) {
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     (0, _jsxRuntime.jsx)(_StyledEngineProvider.default, {
       injectFirst: injectFirst,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ThemeProvider, {
-          theme: theme,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
-        })
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
       })
     })
   );

package/lib/Theme/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.create = void 0;
+exports.createTheme = exports.create = void 0;
 
 var _styles = require("@mui/material/styles");
 
@@ -154,4 +154,6 @@ const create = function create() {
   return enhanced;
 };
 
-exports.create = create;
+exports.create = create;
+const createTheme = create;
+exports.createTheme = createTheme;

package/lib/Video/index.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactPlayer = _interopRequireDefault(require("react-player"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -102,5 +102,4 @@ Video.defaultProps = {
   height: 400,
   style: {}
 };
-
-const Placeholder = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #222222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n\n  .loading-indicator {\n    position: absolute;\n    top: 45%;\n    left: 47%;\n    z-index: 2;\n  }\n"])));
+const Placeholder = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #222222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n\n  .loading-indicator {\n    position: absolute;\n    top: 45%;\n    left: 47%;\n    z-index: 2;\n  }\n"])));

package/lib/Wallet/Action.js

@@ -7,8 +7,6 @@ exports.default = WalletAction;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _abtwallet = _interopRequireDefault(require("./images/abtwallet.png"));
@@ -19,6 +17,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -112,5 +112,4 @@ const sizes = {
     xlarge: 18
   }
 };
-
-const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  .wallet-action__logo {\n    width: auto;\n    height: auto;\n    max-width: ", "px;\n    margin-left: 5px;\n  }\n\n  .wallet-action__text {\n    padding: 8px;\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .wallet-action__action {\n    font-size: ", "px;\n    text-transform: capitalize;\n    margin-bottom: 1px;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n\n  .wallet-action__title {\n    font-size: ", "px;\n    text-transform: capitalize;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n"])), props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);
+const Content = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  .wallet-action__logo {\n    width: auto;\n    height: auto;\n    max-width: ", "px;\n    margin-left: 5px;\n  }\n\n  .wallet-action__text {\n    padding: 8px;\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .wallet-action__action {\n    font-size: ", "px;\n    text-transform: capitalize;\n    margin-bottom: 1px;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n\n  .wallet-action__title {\n    font-size: ", "px;\n    text-transform: capitalize;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n"])), props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);

package/lib/Wallet/Download.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
@@ -19,6 +17,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -336,5 +336,4 @@ WalletDownload.defaultProps = {
   style: {},
   locale: 'zh'
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n\n  .download-title {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n\n  .download-store-list {\n    display: flex;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .download-link {\n      padding: 0;\n      margin: 0;\n\n      margin-right: ", ";\n      margin-bottom: ", ";\n\n      &:last-of-type {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? '0' : '16px', props => props.layout === 'vertical' ? '16px' : '0', props => props.storeLayout === 'vertical' ? 'column' : 'row', props => props.storeLayout === 'vertical' ? '0' : '16px', props => props.storeLayout === 'vertical' ? '16px' : '0');
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n\n  .download-title {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n\n  .download-store-list {\n    display: flex;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .download-link {\n      padding: 0;\n      margin: 0;\n\n      margin-right: ", ";\n      margin-bottom: ", ";\n\n      &:last-of-type {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? '0' : '16px', props => props.layout === 'vertical' ? '16px' : '0', props => props.storeLayout === 'vertical' ? 'column' : 'row', props => props.storeLayout === 'vertical' ? '0' : '16px', props => props.storeLayout === 'vertical' ? '16px' : '0');