@arcblock/ux 2.4.0 → 2.4.3

package/lib/ActivityIndicator/index.js

@@ -9,14 +9,14 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _colors = require("@mui/material/colors");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -100,8 +100,7 @@ ActivityIndicator.defaultProps = {
   interval: 3000,
   messages: ['Loading data...']
 };
-
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    box-sizing: border-box;\n    padding: 20px;\n    width: 100%;\n    height: 100%;\n    min-height: 360px;\n    z-index: 100;\n    transition: opacity 0.5s linear;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .pm-loader-text {\n    color: ", ";\n    font-size: 14px;\n    text-align: center;\n    position: relative;\n    height: 70px;\n    -webkit-user-select: none;\n  }\n\n  .pm-loader-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    flex: 1;\n  }\n\n  .pm-loader-atoms {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n  }\n"])), _Colors.default.grey[900]);
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    box-sizing: border-box;\n    padding: 20px;\n    width: 100%;\n    height: 100%;\n    min-height: 360px;\n    z-index: 100;\n    transition: opacity 0.5s linear;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .pm-loader-text {\n    color: ", ";\n    font-size: 14px;\n    text-align: center;\n    position: relative;\n    height: 70px;\n    -webkit-user-select: none;\n  }\n\n  .pm-loader-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    flex: 1;\n  }\n\n  .pm-loader-atoms {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n  }\n"])), _Colors.default.grey[900]);
 
 function Orbit(_ref2) {
   let {
@@ -137,8 +136,7 @@ Orbit.propTypes = {
 Orbit.defaultProps = {
   duration: 2
 };
-
-const OrbitRoot = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @keyframes orbit {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  position: absolute;\n  border-radius: 50%;\n  animation: orbit ", "s infinite;\n  animation-timing-function: linear;\n  transform-origin: center;\n\n  > div {\n    position: absolute;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    transform: translateX(-50%);\n    border-radius: 50%;\n  }\n"])), _ref3 => {
+const OrbitRoot = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @keyframes orbit {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  position: absolute;\n  border-radius: 50%;\n  animation: orbit ", "s infinite;\n  animation-timing-function: linear;\n  transform-origin: center;\n\n  > div {\n    position: absolute;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    transform: translateX(-50%);\n    border-radius: 50%;\n  }\n"])), _ref3 => {
   let {
     $duration
   } = _ref3;

package/lib/Alert/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _colors = require("@mui/material/colors");
@@ -19,6 +17,8 @@ var _Util = require("../Util");
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -122,5 +122,4 @@ Alert.defaultProps = {
 };
 var _default = Alert;
 exports.default = _default;
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  margin: 0;\n  padding: 16px;\n  margin: 16px 0;\n\n  strong {\n    margin: 0 5px;\n  }\n\n  .alert-icon {\n    margin-right: 16px;\n  }\n\n  .alert-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n"])));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  margin: 0;\n  padding: 16px;\n  margin: 16px 0;\n\n  strong {\n    margin: 0 5px;\n  }\n\n  .alert-icon {\n    margin-right: 16px;\n  }\n\n  .alert-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n"])));

package/lib/AnimationWaiter/index.js

@@ -7,14 +7,14 @@ exports.default = AnimationWaiter;
 
 var _react = require("react");
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactLottiePlayer = _interopRequireDefault(require("react-lottie-player"));
 
 var _defaultAnimation = _interopRequireDefault(require("./default-animation.json"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -206,5 +206,4 @@ AnimationWaiter.defaultProps = {
   maybeDuration: 120000,
   increaseSpeed: 0
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .waiter-message {\n    position: relative;\n    width: 100%;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    text-align: center;\n    overflow: hidden;\n    .message-block {\n      position: absolute;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      transition: all ease 0.3s;\n      user-select: none;\n      &.message-before {\n        transform: translate(-20px, 0);\n      }\n      &.message-after {\n        transform: translate(20px, 0);\n      }\n      &.show-message {\n        transform: translate(0, 0);\n        opacity: 1;\n        user-select: text;\n        z-index: 2;\n      }\n    }\n\n    .placeholder-message {\n      user-select: none;\n      display: none;\n      opacity: 0;\n      &.show-message {\n        display: block;\n      }\n    }\n  }\n\n  .waiter-tips-container {\n    position: relative;\n    margin-top: auto;\n    width: 100%;\n    .waiter-tips-block {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      pointer-events: none;\n      z-index: 1;\n      transform: translate(-20px, 0);\n      transition: all ease 0.4s;\n      &.show-tips {\n        opacity: 1;\n        pointer-events: auto;\n        z-index: 2;\n        transform: translate(0, 0);\n      }\n    }\n  }\n"])));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .waiter-message {\n    position: relative;\n    width: 100%;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    text-align: center;\n    overflow: hidden;\n    .message-block {\n      position: absolute;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      transition: all ease 0.3s;\n      user-select: none;\n      &.message-before {\n        transform: translate(-20px, 0);\n      }\n      &.message-after {\n        transform: translate(20px, 0);\n      }\n      &.show-message {\n        transform: translate(0, 0);\n        opacity: 1;\n        user-select: text;\n        z-index: 2;\n      }\n    }\n\n    .placeholder-message {\n      user-select: none;\n      display: none;\n      opacity: 0;\n      &.show-message {\n        display: block;\n      }\n    }\n  }\n\n  .waiter-tips-container {\n    position: relative;\n    margin-top: auto;\n    width: 100%;\n    .waiter-tips-block {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      pointer-events: none;\n      z-index: 1;\n      transform: translate(-20px, 0);\n      transition: all ease 0.4s;\n      &.show-tips {\n        opacity: 1;\n        pointer-events: auto;\n        z-index: 2;\n        transform: translate(0, 0);\n      }\n    }\n  }\n"])));

package/lib/Badge/index.js

@@ -9,14 +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 _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -103,4 +103,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: 24px;\n    line-height: 24px;\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: 24px;\n    line-height: 24px;\n  }\n"])));

package/lib/Blocklet/blocklet.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletStore;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -15,14 +13,14 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
-var _styles = require("@mui/material/styles");
-
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["title", "did", "description", "cover", "version", "button", "buttonText", "buttonDisabled", "buttonLoading", "onButtonClick", "onMainClick", "className"];
@@ -43,7 +41,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n    ", " {\n      align-items: center;\n    }\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n    ", " {\n      width: 80px;\n      height: 80px;\n      margin-bottom: 12px;\n    }\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .arcblock-blocklet__version {\n    color: ", ";\n    font-size: 12px;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n    ", " {\n      align-items: center;\n    }\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n    ", " {\n      width: 80px;\n      height: 80px;\n      margin-bottom: 12px;\n    }\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .arcblock-blocklet__version {\n    color: ", ";\n    font-size: 12px;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {
@@ -90,7 +88,7 @@ function BlockletStore(_ref) {
     return false;
   });
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const isUpSm = (0, _useMediaQuery.default)(theme.breakpoints.up('sm'));
 
   const _onMainClick = wrapHandler(onMainClick);

package/lib/Blocklet/utils.js

@@ -5,15 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 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) } })); }
 
-const ActionButton = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent !important;\n  & > :not(.Mui-disabled) {\n    position: relative;\n    z-index: 1;\n    &::before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      top: 0;\n      transition: opacity 0.3s;\n    }\n    &:hover::before {\n      opacity: 0;\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      border-radius: 2px;\n      background-color: ", ";\n      transform: scale(0.1);\n      opacity: 0;\n      z-index: -1;\n      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n    }\n    &:hover::after {\n      opacity: 1;\n      transform-origin: center;\n      transform: scale(1);\n    }\n  }\n  & > :not(.Mui-disabled) {\n    background-color: transparent !important;\n    color: ", "!important;\n  }\n  & > :not(.Mui-disabled) {\n    &:hover {\n      color: ", "!important;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
-
+const ActionButton = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent !important;\n  & > :not(.Mui-disabled) {\n    position: relative;\n    z-index: 1;\n    &::before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      top: 0;\n      transition: opacity 0.3s;\n    }\n    &:hover::before {\n      opacity: 0;\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      border-radius: 2px;\n      background-color: ", ";\n      transform: scale(0.1);\n      opacity: 0;\n      z-index: -1;\n      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n    }\n    &:hover::after {\n      opacity: 1;\n      transform-origin: center;\n      transform: scale(1);\n    }\n  }\n  & > :not(.Mui-disabled) {\n    background-color: transparent !important;\n    color: ", "!important;\n  }\n  & > :not(.Mui-disabled) {\n    &:hover {\n      color: ", "!important;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 var _default = ActionButton;
 exports.default = _default;

package/lib/BlockletNFT/index.js

@@ -7,8 +7,6 @@ exports.default = BlockletNFT;
 
 var _react = require("react");
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Portal = _interopRequireDefault(require("@mui/material/Portal"));
@@ -19,8 +17,6 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _styles = require("@mui/material/styles");
-
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -29,6 +25,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["title", "did", "description", "cover", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
@@ -69,7 +67,7 @@ function prettySize(_size) {
   return _size && "".concat(size).concat(list[index]);
 }
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: 0 16px;\n    background: ", ";\n    overflow: hidden;\n    box-shadow: 0px 0px 8px #f0f0f0;\n    &:hover {\n      box-shadow: 0px 2px 12px #f0f0f0;\n    }\n  }\n  .arcblock-blocklet__content {\n    padding: 16px 0 0 0;\n  }\n  .arcblock-blocklet__content--main {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .arcblock-blocklet__content--body {\n    overflow: hidden;\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n  }\n  .arcblock-blocklet__addons {\n    padding: 16px 0;\n  }\n  .arcblock-blocklet__cover {\n    width: 80px;\n    height: 80px;\n    margin-right: 12px;\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        left: 0;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    .arcblock-blocklet__button {\n      margin-top: 16px;\n      display: inline-block;\n    }\n  }\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin: 0 0 2px 0;\n    color: #999;\n    font-size: 14px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .arcblock-blocklet__addons {\n    display: flex;\n    justify-content: space-between;\n    color: #999;\n    font-size: 14px;\n    position: relative;\n  }\n  .arcblock-blocklet__addons--item {\n    white-space: nowrap;\n  }\n  &.arcblock-blocklet--size-md {\n    &:hover {\n      position: relative;\n    }\n    .arcblock-blocklet__title {\n      height: 2.3em;\n      margin-bottom: 3px;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n      text-overflow: initial;\n      white-space: initial;\n      word-break: break-all;\n    }\n    .arcblock-blocklet__describe {\n      white-space: normal;\n      height: 2.86em;\n    }\n    .arcblock-blocklet__button {\n      margin-top: 5px;\n    }\n  }\n  &.arcblock-blocklet--size-sm,\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__cover {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n    }\n    .arcblock-blocklet__content {\n      padding: 16px 0;\n    }\n    .arcblock-blocklet__addons {\n      padding: 8px 0;\n      .arcblock-blocklet__addons--item {\n        font-size: 12px;\n      }\n    }\n  }\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__addons {\n      display: none !important;\n    }\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: 0 16px;\n    background: ", ";\n    overflow: hidden;\n    box-shadow: 0px 0px 8px #f0f0f0;\n    &:hover {\n      box-shadow: 0px 2px 12px #f0f0f0;\n    }\n  }\n  .arcblock-blocklet__content {\n    padding: 16px 0 0 0;\n  }\n  .arcblock-blocklet__content--main {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .arcblock-blocklet__content--body {\n    overflow: hidden;\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n  }\n  .arcblock-blocklet__addons {\n    padding: 16px 0;\n  }\n  .arcblock-blocklet__cover {\n    width: 80px;\n    height: 80px;\n    margin-right: 12px;\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        left: 0;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    .arcblock-blocklet__button {\n      margin-top: 16px;\n      display: inline-block;\n    }\n  }\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin: 0 0 2px 0;\n    color: #999;\n    font-size: 14px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .arcblock-blocklet__addons {\n    display: flex;\n    justify-content: space-between;\n    color: #999;\n    font-size: 14px;\n    position: relative;\n  }\n  .arcblock-blocklet__addons--item {\n    white-space: nowrap;\n  }\n  &.arcblock-blocklet--size-md {\n    &:hover {\n      position: relative;\n    }\n    .arcblock-blocklet__title {\n      height: 2.3em;\n      margin-bottom: 3px;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n      text-overflow: initial;\n      white-space: initial;\n      word-break: break-all;\n    }\n    .arcblock-blocklet__describe {\n      white-space: normal;\n      height: 2.86em;\n    }\n    .arcblock-blocklet__button {\n      margin-top: 5px;\n    }\n  }\n  &.arcblock-blocklet--size-sm,\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__cover {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n    }\n    .arcblock-blocklet__content {\n      padding: 16px 0;\n    }\n    .arcblock-blocklet__addons {\n      padding: 8px 0;\n      .arcblock-blocklet__addons--item {\n        font-size: 12px;\n      }\n    }\n  }\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__addons {\n      display: none !important;\n    }\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 function BlockletIcon(_ref) {
   let {
@@ -140,7 +138,7 @@ function BlockletNFT(_ref2) {
 
   const _onMainClick = wrapHandler(onMainClick);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('lg'));
   const isUpLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size

package/lib/Center/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Center;
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -42,8 +42,7 @@ function Center(_ref) {
   });
 }
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  width: 100vw;\n  height: 100vh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  width: 100vw;\n  height: 100vh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 Center.propTypes = {
   children: _propTypes.default.any.isRequired,
   relative: _propTypes.default.string

package/lib/ClickToCopy/index.js

@@ -19,14 +19,14 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _hook = _interopRequireDefault(require("./hook"));
 
 var _Toast = _interopRequireWildcard(require("../Toast"));
 
 var _Util = require("../Util");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _copyButton = _interopRequireDefault(require("./copy-button"));
@@ -131,4 +131,4 @@ ClickToCopy.defaultProps = {
   locale: 'en',
   style: {}
 };
-const Container = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));
+const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));

package/lib/CodeBlock/index.js

@@ -9,8 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -55,6 +53,8 @@ var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -190,5 +190,4 @@ CodeBlock.defaultProps = {
   children: null
 };
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-
-const Pre = _styled.default.pre(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: #fff;\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: none;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    border-radius: 4px;\n\n    &,\n    &:hover,\n    &.Mui-disabled {\n      background: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n    }\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    color: #fff;\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);
+const Pre = (0, _Theme.styled)('pre')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: #fff;\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: none;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    border-radius: 4px;\n\n    &,\n    &:hover,\n    &.Mui-disabled {\n      background: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n    }\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    color: #fff;\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/lib/ContactForm/index.js

@@ -10,8 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _axios = _interopRequireDefault(require("axios"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -22,6 +20,8 @@ var _Util = require("../Util");
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -219,4 +219,4 @@ _defineProperty(ContactForm, "defaultProps", {
 
 const getInputWidth = props => props.layout === 'vertical' ? '100%' : "".concat(Math.max(95 / (props.fieldCount + 1), 20), "%");
 
-const Form = _styled.default.form(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: ", "px) {\n    width: 100% !important;\n  }\n  max-width: 800px;\n  margin: 0px auto;\n\n  .title {\n    font-size: 30px;\n    text-align: center;\n    color: ", ";\n  }\n\n  .form-controls {\n    width: 100%;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .input {\n      width: ", ";\n      height: 50px;\n      border: none;\n      border-bottom: 1px solid ", ";\n      font-size: 16px;\n      letter-spacing: 1.8px;\n      outline: none;\n      margin: ", ";\n      background: transparent;\n\n      &:first-of-type {\n        margin-top: 40px;\n      }\n    }\n\n    .subscribe-btn-empty {\n      margin-top: ", ";\n      width: ", ";\n    }\n  }\n\n  .error,\n  .success {\n    margin-top: 20px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.typography.color.main, props => props.layout === 'vertical' ? 'column' : 'row', props => getInputWidth(props), props => props.theme.typography.color.main, props => props.layout === 'vertical' ? '12px 0' : '12px', props => props.layout === 'vertical' ? '40px' : '0', props => props.layout === 'vertical' ? '100%' : 'auto');
+const Form = (0, _Theme.styled)('form')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: ", "px) {\n    width: 100% !important;\n  }\n  max-width: 800px;\n  margin: 0px auto;\n\n  .title {\n    font-size: 30px;\n    text-align: center;\n    color: ", ";\n  }\n\n  .form-controls {\n    width: 100%;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .input {\n      width: ", ";\n      height: 50px;\n      border: none;\n      border-bottom: 1px solid ", ";\n      font-size: 16px;\n      letter-spacing: 1.8px;\n      outline: none;\n      margin: ", ";\n      background: transparent;\n\n      &:first-of-type {\n        margin-top: 40px;\n      }\n    }\n\n    .subscribe-btn-empty {\n      margin-top: ", ";\n      width: ", ";\n    }\n  }\n\n  .error,\n  .success {\n    margin-top: 20px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.typography.color.main, props => props.layout === 'vertical' ? 'column' : 'row', props => getInputWidth(props), props => props.theme.typography.color.main, props => props.layout === 'vertical' ? '12px 0' : '12px', props => props.layout === 'vertical' ? '40px' : '0', props => props.layout === 'vertical' ? '100%' : 'auto');

package/lib/CookieConsent/index.js

@@ -13,12 +13,12 @@ Object.defineProperty(exports, "resetCookieConsentValue", {
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _reactCookieConsent = _interopRequireWildcard(require("react-cookie-consent"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -111,5 +111,4 @@ DefaultCookieConsent.defaultProps = {
   style: {},
   locale: 'en'
 };
-
-const Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  z-index: 999;\n  max-width: 440px;\n  padding: 16px 24px;\n  font-size: 16px;\n  color: #666;\n  background: #fff;\n  border-radius: 6px;\n  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);\n  &:empty {\n    display: none;\n  }\n  button {\n    min-width: 200px;\n  }\n\n  @media screen and (max-width: 480px) {\n    left: 16px;\n    right: 16px;\n    bottom: 16px;\n    width: auto;\n    button {\n      display: block;\n      width: 100%;\n    }\n  }\n"])));
+const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  z-index: 999;\n  max-width: 440px;\n  padding: 16px 24px;\n  font-size: 16px;\n  color: #666;\n  background: #fff;\n  border-radius: 6px;\n  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);\n  &:empty {\n    display: none;\n  }\n  button {\n    min-width: 200px;\n  }\n\n  @media screen and (max-width: 480px) {\n    left: 16px;\n    right: 16px;\n    bottom: 16px;\n    width: auto;\n    button {\n      display: block;\n      width: 100%;\n    }\n  }\n"])));

package/lib/CountDown/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");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -169,5 +169,4 @@ CountDown.defaultProps = {
   style: {}
 };
 const textBackground = "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\nlinear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))";
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: flex-start;\n\n  .num-group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin: 0 60px;\n\n    @media (max-width: ", "px) {\n      margin: 0 20px;\n    }\n    @media (max-width: ", "px) {\n      margin: 0;\n    }\n\n    .num-items {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .num-item {\n      display: inline-block;\n      width: 40px;\n      height: 60px;\n      line-height: 60px;\n      background-image: ", ";\n      text-align: center;\n\n      &:first-of-type {\n        margin-right: 10px;\n        @media (max-width: ", "px) {\n          margin: 0;\n        }\n      }\n    }\n\n    .num-label {\n      margin-top: 20px;\n      font-size: 24px;\n      color: ", ";\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.sm, props => props.dark ? textBackground : 'none', props => props.theme.breakpoints.values.sm, props => (0, _Util.getColor)(props));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: flex-start;\n\n  .num-group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin: 0 60px;\n\n    @media (max-width: ", "px) {\n      margin: 0 20px;\n    }\n    @media (max-width: ", "px) {\n      margin: 0;\n    }\n\n    .num-items {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .num-item {\n      display: inline-block;\n      width: 40px;\n      height: 60px;\n      line-height: 60px;\n      background-image: ", ";\n      text-align: center;\n\n      &:first-of-type {\n        margin-right: 10px;\n        @media (max-width: ", "px) {\n          margin: 0;\n        }\n      }\n    }\n\n    .num-label {\n      margin-top: 20px;\n      font-size: 24px;\n      color: ", ";\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.sm, props => props.dark ? textBackground : 'none', props => props.theme.breakpoints.values.sm, props => (0, _Util.getColor)(props));

package/lib/Datatable/CustomToolbar.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _muiDatatables = require("mui-datatables");
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _reactToPrint = _interopRequireWildcard(require("react-to-print"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -41,8 +39,6 @@ var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText")
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _styles = require("@mui/material/styles");
-
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 
 var _utils = require("./utils");
@@ -51,6 +47,8 @@ var _TableSearch = _interopRequireDefault(require("./TableSearch"));
 
 var _DatatableContext = require("./DatatableContext");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -64,7 +62,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function useMobile() {
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
 }
 
@@ -390,7 +388,5 @@ CustomToolbar.defaultProps = {
   title: '',
   searchText: null
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 56px;\n  .custom-toobar-title {\n    position: relative;\n    flex: 1;\n    font-size: 18px;\n    font-weight: 800;\n    height: 56px;\n    transition: all ease 0.3s;\n    &-inner {\n      line-height: 56px;\n      width: 100%;\n      height: 56px;\n      position: absolute;\n      left: 0;\n      top: 0;\n      span {\n        display: inline-block;\n        max-width: 100%;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    }\n  }\n  .custom-toobar-btns {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &.toobar-btns-disabled {\n      position: relative;\n      opacity: 0.5;\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n    .custom-toolbar-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 24px;\n      height: 24px;\n      font-size: 20px;\n      overflow: hidden;\n    }\n  }\n  .toobar-title-hidden {\n    opacity: 0;\n    cursor: none;\n  }\n"])));
-
-const ProgressContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  .toolbar-progress {\n    height: 2px;\n  }\n"])));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 56px;\n  .custom-toobar-title {\n    position: relative;\n    flex: 1;\n    font-size: 18px;\n    font-weight: 800;\n    height: 56px;\n    transition: all ease 0.3s;\n    &-inner {\n      line-height: 56px;\n      width: 100%;\n      height: 56px;\n      position: absolute;\n      left: 0;\n      top: 0;\n      span {\n        display: inline-block;\n        max-width: 100%;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    }\n  }\n  .custom-toobar-btns {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &.toobar-btns-disabled {\n      position: relative;\n      opacity: 0.5;\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n    .custom-toolbar-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 24px;\n      height: 24px;\n      font-size: 20px;\n      overflow: hidden;\n    }\n  }\n  .toobar-title-hidden {\n    opacity: 0;\n    cursor: none;\n  }\n"])));
+const ProgressContainer = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  .toolbar-progress {\n    height: 2px;\n  }\n"])));

package/lib/Datatable/TableSearch.js

@@ -19,12 +19,12 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
 var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _DatatableContext = require("./DatatableContext");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -142,5 +142,4 @@ TableSearch.defaultProps = {
   searchText: '',
   onSearchOpen: () => {}
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-search-area {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    .MuiFormControl-root {\n      width: inherit;\n      margin: 0 12px;\n    }\n    &.toolbar-btn-show {\n      width: 260px;\n      padding-left: 8px;\n\n      ", " {\n        width: 200px;\n      }\n\n      ", " {\n        width: 180px;\n      }\n      &.small-textfield {\n        width: 200px;\n      }\n    }\n  }\n  .toolbar-search-close {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    &.toolbar-btn-show {\n      width: 40px;\n    }\n  }\n  .toolbar-search-icon-placeholder {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n  }\n  &.search-always-open {\n    .MuiFormControl-root {\n      margin: 0 12px 0 0;\n    }\n    .toolbar-btn-show {\n      padding-left: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-search-area {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    .MuiFormControl-root {\n      width: inherit;\n      margin: 0 12px;\n    }\n    &.toolbar-btn-show {\n      width: 260px;\n      padding-left: 8px;\n\n      ", " {\n        width: 200px;\n      }\n\n      ", " {\n        width: 180px;\n      }\n      &.small-textfield {\n        width: 200px;\n      }\n    }\n  }\n  .toolbar-search-close {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    &.toolbar-btn-show {\n      width: 40px;\n    }\n  }\n  .toolbar-search-icon-placeholder {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n  }\n  &.search-always-open {\n    .MuiFormControl-root {\n      margin: 0 12px 0 0;\n    }\n    .toolbar-btn-show {\n      padding-left: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));

package/lib/Datatable/index.js

@@ -12,8 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
 
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
@@ -32,6 +30,8 @@ var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -424,16 +424,14 @@ const getDurableData = key => {
 
 exports.getDurableData = getDurableData;
 const alignCss = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableCell-head {\n    [class*='MUIDataTableHeadCell-toolButton'] {\n      width: 100%;\n      > [class*='MUIDataTableHeadCell-sortAction'] {\n        width: 100%;\n      }\n    }\n    &.pc-align-center {\n      text-align: center;\n      [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {\n        justify-content: center;\n      }\n    }\n    &.pc-align-right {\n      text-align: right;\n      [class*='MUIDataTableHeadCell-toolButton'] {\n        margin-right: 0;\n        padding-right: 0;\n        & > [class*='MUIDataTableHeadCell-sortAction'] {\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n  .MuiTableCell-body {\n    &.pc-align-center {\n      text-align: center;\n    }\n    &.pc-align-right {\n      text-align: right;\n    }\n  }\n"])));
-
-const TableContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-child {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
+const TableContainer = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-child {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
   if (inProps.verticalKeyWidth) {
     return "\n        ".concat(inProps.theme.breakpoints.down('md'), " {\n          [class*='MUIDataTable-responsiveBase'] {\n            tr:not([class*='responsiveSimple']) {\n              td.MuiTableCell-body {\n                > div {\n                  &:first-child {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
   }
 
   return '';
 }, props => props.theme.palette.action.hover);
-
-const FilterLine = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-filter-content {\n    margin-bottom: 8px;\n  }\n  .toolbar-filter-title {\n    font-weight: 700;\n    font-size: 14px;\n  }\n"])));
+const FilterLine = (0, _Theme.styled)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-filter-content {\n    margin-bottom: 8px;\n  }\n  .toolbar-filter-title {\n    font-weight: 700;\n    font-size: 14px;\n  }\n"])));
 
 function WrapFilterList(props) {
   const {
@@ -476,4 +474,4 @@ function WrapTableFooter(props) {
   });
 }
 
-const FooterContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .datatable-footer {\n    position: relative;\n    margin-left: auto;\n    &.datatable-footer-disabled {\n      position: relative;\n      .MuiTablePagination-root {\n        opacity: 0.6;\n      }\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  ", " {\n    .MuiTableCell-footer,\n    .MuiToolbar-gutters {\n      padding: 0;\n    }\n\n    div[variant='standard'] {\n      margin-left: 4px;\n      margin-right: 16px;\n    }\n\n    .MuiTablePagination-actions {\n      margin-left: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('sm'));
+const FooterContainer = (0, _Theme.styled)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .datatable-footer {\n    position: relative;\n    margin-left: auto;\n    &.datatable-footer-disabled {\n      position: relative;\n      .MuiTablePagination-root {\n        opacity: 0.6;\n      }\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  ", " {\n    .MuiTableCell-footer,\n    .MuiToolbar-gutters {\n      padding: 0;\n    }\n\n    div[variant='standard'] {\n      margin-left: 4px;\n      margin-right: 16px;\n    }\n\n    .MuiTablePagination-actions {\n      margin-left: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('sm'));

package/lib/Dialog/dialog.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
 var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
@@ -19,10 +17,10 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
-var _styles = require("@mui/material/styles");
-
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -63,7 +61,7 @@ function Dialog(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)(); // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
+  const theme = (0, _Theme.useTheme)(); // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
 
   const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const showHeader = title || showCloseButton || toolbar;
@@ -144,9 +142,7 @@ Dialog.defaultProps = {
   actionsPosition: 'right',
   PaperProps: {}
 };
-const StyledMuiDialog = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paper {\n    ", ";\n  }\n  .MuiDialogContent-root {\n    padding: 16px 24px;\n  }\n  .MuiDialogActions-root {\n    padding: 8px 24px 16px 24px;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--left {\n    justify-content: flex-start;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--right {\n    justify-content: flex-end;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--center {\n    justify-content: center;\n  }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
-
-const Header = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
-
+const StyledMuiDialog = (0, _Theme.styled)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paper {\n    ", ";\n  }\n  .MuiDialogContent-root {\n    padding: 16px 24px;\n  }\n  .MuiDialogActions-root {\n    padding: 8px 24px 16px 24px;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--left {\n    justify-content: flex-start;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--right {\n    justify-content: flex-end;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--center {\n    justify-content: center;\n  }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
+const Header = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
 var _default = Dialog;
 exports.default = _default;