@arcblock/ux 2.2.4 → 2.4.1

package/lib/PricingTable/PricingPlan.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Card = _interopRequireDefault(require("@mui/material/Card"));
 
@@ -19,8 +19,12 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 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 PricingPlan(_ref) {
   let {
     plan
@@ -74,7 +78,4 @@ exports.default = _default;
 PricingPlan.propTypes = {
   plan: _propTypes.default.object.isRequired
 };
-const PlanCard = (0, _styledComponents.default)(_Card.default).withConfig({
-  displayName: "PricingPlan__PlanCard",
-  componentId: "sc-11tuq1x-0"
-})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');
+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)');

package/lib/PricingTable/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
@@ -15,8 +15,12 @@ var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
 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 PricingTable(_ref) {
   let {
     plans
@@ -55,7 +59,4 @@ PricingTable.propTypes = {
   plans: _propTypes.default.array.isRequired
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "PricingTable__Div",
-  componentId: "sc-1aylbiy-0"
-})(["padding:100px 0;text-align:center;background-color:", ";@media (max-width:320px){padding:50px 0;}.plan-item{@media (max-width:320px){margin-bottom:30px;}}"], props => props.variant === 'even' ? '#fbfbfb' : '#ffffff');
+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');

package/lib/Result/result.js

@@ -7,16 +7,20 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["icon", "title", "description", "extra"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -72,10 +76,7 @@ Result.defaultProps = {
   extra: undefined
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "result__Root",
-  componentId: "sc-1ttf6c9-0"
-})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
+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"])));
 
 var _default = Result;
 exports.default = _default;

package/lib/Screenshot/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Util = require("../Util");
 
@@ -17,10 +17,14 @@ require("./devices.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "children", "style", "className", "width", "height"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -184,10 +188,7 @@ function Screenshot(props) {
   }));
 }
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "Screenshot__Div",
-  componentId: "sc-el6nkq-0"
-})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content{overflow:hidden;}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
+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);
 
 Screenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),

package/lib/SplitButton/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
@@ -29,10 +29,14 @@ var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["size", "color", "menu", "children", "variant", "onClick", "menuButtonProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -140,11 +144,5 @@ SplitButton.defaultProps = {
   menuButtonProps: {}
 };
 SplitButton.Item = _MenuItem.default;
-const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
-  displayName: "SplitButton__StyledButtonGroup",
-  componentId: "sc-1meco5z-0"
-})(["> .MuiButtonBase-root:last-child{min-width:2em;padding-left:0;padding-right:0;}"]);
-const StyledPopper = (0, _styledComponents.default)(_Popper.default).withConfig({
-  displayName: "SplitButton__StyledPopper",
-  componentId: "sc-1meco5z-1"
-})([".MuiList-root{padding:4px 0;}.MuiListItem-root{padding-top:4px;padding-bottom:4px;}"]);
+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"])));

package/lib/Tag/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -112,7 +116,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/
 })));
 
 exports.default = _default;
-const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "Tag__Span",
-  componentId: "sc-wqpeo3-0"
-})(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;border-radius:4px;}"]);
+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"])));

package/lib/TextCollapse/index.js

@@ -9,14 +9,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children", "startChars", "endChars", "scaleFactor", "maxWidth", "style", "fontType"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -88,7 +92,4 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
-const Container = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "TextCollapse__Container",
-  componentId: "sc-1u3qfqq-0"
-})(["display:inline-flex;align-items:center;justify-content:start;cursor:pointer;white-space:nowrap;overflow:hidden;.start-part,.end-part{display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:hidden;}.start-part{max-width:calc(100% - ", ");min-width:", ";text-overflow:ellipsis;}.end-part{max-width:calc(100% - ", ");direction:rtl;}"], props => props.endwidth, props => props.startwidth, props => props.startwidth);
+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);

package/lib/Theme/theme-provider.js

@@ -7,7 +7,7 @@ exports.default = ThemeProvider;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@mui/material/styles");
 
@@ -24,22 +24,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaultTheme = (0, _theme.create)();
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
  */
 
 function ThemeProvider(_ref) {
   let {
     children,
-    theme
+    theme,
+    injectFirst
   } = _ref;
   return (
     /*#__PURE__*/
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     (0, _jsxRuntime.jsx)(_StyledEngineProvider.default, {
-      injectFirst: true,
+      injectFirst: injectFirst,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.ThemeProvider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ThemeProvider, {
           theme: theme,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
         })
@@ -50,9 +50,11 @@ function ThemeProvider(_ref) {
 
 ThemeProvider.propTypes = {
   children: _propTypes.default.any,
-  theme: _propTypes.default.any
+  theme: _propTypes.default.any,
+  injectFirst: _propTypes.default.bool
 };
 ThemeProvider.defaultProps = {
   children: null,
-  theme: defaultTheme
+  theme: defaultTheme,
+  injectFirst: true
 };

package/lib/Video/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactPlayer = _interopRequireDefault(require("react-player"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
@@ -19,8 +19,12 @@ var _Util = require("../Util");
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -99,7 +103,4 @@ Video.defaultProps = {
   style: {}
 };
 
-const Placeholder = _styledComponents.default.div.withConfig({
-  displayName: "Video__Placeholder",
-  componentId: "sc-1h1lmc5-0"
-})(["background-color:#222222;display:flex;justify-content:center;align-items:center;position:relative;.loading-indicator{position:absolute;top:45%;left:47%;z-index:2;}"]);
+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"])));

package/lib/Wallet/Action.js

@@ -7,7 +7,7 @@ exports.default = WalletAction;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["action", "size", "textLayout", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -109,7 +113,4 @@ const sizes = {
   }
 };
 
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "Action__Content",
-  componentId: "sc-zuf4zr-0"
-})(["display:flex;justify-content:center;align-items:center;&:hover{opacity:0.9;}.wallet-action__logo{width:auto;height:auto;max-width:", "px;margin-left:5px;}.wallet-action__text{padding:8px;display:flex;height:100%;flex-direction:column;justify-content:space-between;align-items:flex-start;}.wallet-action__action{font-size:", "px;text-transform:capitalize;margin-bottom:1px;color:", ";letter-spacing:1px;}.wallet-action__title{font-size:", "px;text-transform:capitalize;color:", ";letter-spacing:1px;}"], 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 = _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);

package/lib/Wallet/Download.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["title", "children", "iosLink", "androidLink", "androidDownLoadUrl", "locale"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -333,7 +337,4 @@ WalletDownload.defaultProps = {
   locale: 'zh'
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Download__Container",
-  componentId: "sc-dufrvq-0"
-})(["display:flex;flex-direction:", ";align-items:center;.download-title{margin-right:", ";margin-bottom:", ";}.download-store-list{display:flex;flex-direction:", ";justify-content:space-between;align-items:center;.download-link{padding:0;margin:0;margin-right:", ";margin-bottom:", ";&:last-of-type{margin-right:0;margin-bottom:0;}}}"], 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 = _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');

package/lib/Wallet/Open.js

@@ -7,7 +7,7 @@ exports.default = OpenInWallet;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 
@@ -15,8 +15,12 @@ var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 
 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 OpenInWallet(_ref) {
   let {
     locale,
@@ -49,7 +53,4 @@ OpenInWallet.propTypes = {
 OpenInWallet.defaultProps = {
   locale: 'zh'
 };
-const Button = (0, _styledComponents.default)(_Fab.default).withConfig({
-  displayName: "Open__Button",
-  componentId: "sc-4xnnrp-0"
-})(["&&{font-size:12px;position:fixed;bottom:24px;left:50%;transform-origin:50% 50%;transform:translateX(-50%);min-width:120px;z-index:", ";}"], props => props.theme.zIndex.tooltip);
+const Button = (0, _styled.default)(_Fab.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    font-size: 12px;\n    position: fixed;\n    bottom: 24px;\n    left: 50%;\n    transform-origin: 50% 50%;\n    transform: translateX(-50%);\n    min-width: 120px;\n    z-index: ", ";\n  }\n"])), props => props.theme.zIndex.tooltip);

package/lib/WechatPrompt/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = WechatPrompt;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -19,8 +19,12 @@ var _android = _interopRequireDefault(require("./images/android.png"));
 
 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 WechatPrompt() {
   const browser = (0, _useBrowser.default)();
 
@@ -77,7 +81,4 @@ function WechatPrompt() {
   });
 }
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "WechatPrompt__Container",
-  componentId: "sc-3wi7rq-0"
-})([".wechat-title{height:80px;line-height:80px;text-align:center;font-size:20px;color:#fff;background-color:#9cdbd8;}.wechat-tip{display:flex;flex-direction:column;align-items:center;.wechat-tip-text{font-size:20px;padding:10px 10px;overflow:auto;word-break:break-word;text-align:center;}.wechat-tip-img{width:90%;object-fit:cover;}}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .wechat-title {\n    height: 80px;\n    line-height: 80px;\n    text-align: center;\n    font-size: 20px;\n    color: #fff;\n    background-color: #9cdbd8;\n  }\n\n  .wechat-tip {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .wechat-tip-text {\n      font-size: 20px;\n      padding: 10px 10px;\n      overflow: auto;\n      word-break: break-word;\n      text-align: center;\n    }\n\n    .wechat-tip-img {\n      width: 90%;\n      object-fit: cover;\n    }\n  }\n"])));

package/lib/withTheme/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = require("styled-components");
+var _react2 = require("@emotion/react");
 
 var _styles = require("@mui/material/styles");
 
@@ -17,6 +17,8 @@ var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,7 +31,9 @@ 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; }
 
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)(["font-family:", ";color:", ";a,a:hover,a:active{text-decoration:none;color:", ";}a:hover{color:", ";}.section--latest-post{p:last-of-type{margin:0;}}.has-scrolled{.section--footnotes{position:static !important;transition-property:background-color;transition-duration:600ms;transition-timing-function:ease;.footnote__title{color:#fff;}}}"], props => props.theme.typography.fontFamily, props => props.theme.typography.color.main, props => props.theme.palette.primary.dark, props => props.theme.palette.primary.main);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const globalStyles = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n\n  a,\n  a:hover,\n  a:active {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  a:hover {\n    color: ", ";\n  }\n\n  .section--latest-post {\n    p:last-of-type {\n      margin: 0;\n    }\n  }\n\n  .has-scrolled {\n    .section--footnotes {\n      position: static !important;\n      transition-property: background-color;\n      transition-duration: 600ms;\n      transition-timing-function: ease;\n      .footnote__title {\n        color: #fff;\n      }\n    }\n  }\n"])), props => props.theme.typography.fontFamily, props => props.theme.typography.color.main, props => props.theme.palette.primary.dark, props => props.theme.palette.primary.main);
 
 function withTheme(Component) {
   let {
@@ -62,9 +66,9 @@ function withTheme(Component) {
     render() {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ThemeProvider, {
         theme: this.theme,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStyle, {
-          theme: this.theme
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
+          styles: globalStyles
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
           theme: this.theme,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, this.props))
         })]

package/lib/withTracker/index.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactGa = _interopRequireDefault(require("react-ga"));
 
 var Sentry = _interopRequireWildcard(require("@sentry/browser"));
 
+var _useDeepCompareEffect = _interopRequireDefault(require("react-use/lib/useDeepCompareEffect"));
+
+var _useMount = _interopRequireDefault(require("react-use/lib/useMount"));
+
 var _reactRouterDom = require("react-router-dom");
 
 var _error_boundary = _interopRequireDefault(require("./error_boundary"));
@@ -65,38 +65,23 @@ var _default = function _default(WrappedComponent) {
     }
   };
 
-  class TrackedComponent extends _react.Component {
-    componentDidMount() {
-      const page = this.props.location.pathname;
-      trackPage(page);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      const currentPage = this.props.location.pathname;
-      const nextPage = nextProps.location.pathname;
-
-      if (currentPage !== nextPage) {
-        trackPage(nextPage);
-      }
-    }
-
-    render() {
-      if (process.env.NODE_ENV === 'production') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_error_boundary.default, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props))
-        });
-      }
-
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, this.props));
+  return function TrackedComponent(props) {
+    const location = (0, _reactRouterDom.useLocation)();
+    (0, _useMount.default)(() => {
+      trackPage(location.pathname);
+    });
+    (0, _useDeepCompareEffect.default)(() => {
+      trackPage(location.pathname);
+    }, [location.pathname]);
+
+    if (process.env.NODE_ENV === 'production') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_error_boundary.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, props))
+      });
     }
 
-  }
-
-  _defineProperty(TrackedComponent, "propTypes", {
-    location: _propTypes.default.object.isRequired
-  });
-
-  return (0, _reactRouterDom.withRouter)(TrackedComponent);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, props));
+  };
 };
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.2.4",
+  "version": "2.4.1",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -38,7 +38,6 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^1.1.2",
-    "babel-plugin-styled-components": "^1.13.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0",
     "moment-timezone": "^0.5.34"
@@ -48,16 +47,16 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963",
+  "gitHead": "f9811866bb818ee7eac47a5173346e24931c2b32",
   "dependencies": {
-    "@arcblock/icons": "^2.2.4",
-    "@arcblock/react-hooks": "^2.2.4",
+    "@arcblock/icons": "^2.4.1",
+    "@arcblock/react-hooks": "^2.4.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fontsource/lato": "^4.5.9",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.4",
     "base64-url": "^2.3.3",
@@ -79,11 +78,10 @@
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",
-    "react-router-dom": "^5.3.3",
+    "react-router-dom": "^6.3.0",
     "react-shadow": "^19.0.3",
     "react-use": "^17.4.0",
     "rebound": "^0.1.0",
-    "styled-components": "^5.3.5",
     "topojson-client": "^3.1.0",
     "versor": "^0.0.4"
   }