@abtnode/ux 1.8.6 → 1.8.7

package/lib/card-selector.js

@@ -7,14 +7,18 @@ exports.default = CardSelector;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 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 CardSelector(_ref) {
   let {
     list,
@@ -98,10 +102,7 @@ function CardSelector(_ref) {
   });
 }
 
-const Contianer = _styledComponents.default.div.withConfig({
-  displayName: "card-selector__Contianer",
-  componentId: "sc-t0bkjd-0"
-})(["overflow:hidden;mask-image:linear-gradient(to left,transparent,black 3%,black 97%,transparent);overflow:hidden;.card-container{display:flex;white-space:nowrap;width:max-content;transition:all ease 0.3s;}.card-item{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;cursor:pointer;img{max-width:100%;max-height:100%;width:auto;height:auto;outline:#526ded solid 0;transition:all ease 0.2s;box-shadow:rgba(0,0,0,0.2) 0 0 10px;}&.selected{cursor:default;img{outline:#526ded solid 5px;}}}"]);
+const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
 
 CardSelector.propTypes = {
   list: _propTypes.default.array,

package/lib/issue-passport.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -33,9 +33,12 @@ var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/jsx-one-expression-per-line, no-undef */
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 // eslint-disable-next-line react/prop-types
 function IssuePassport(_ref) {
   let {
@@ -51,7 +54,7 @@ function IssuePassport(_ref) {
     locale
   } = (0, _react.useContext)(_context.LocaleContext);
   const [success, setSuccess] = (0, _react.useState)(false);
-  const history = (0, _reactRouterDom.useHistory)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     setPassportId
   } = (0, _usePassportId.default)();
@@ -83,11 +86,15 @@ function IssuePassport(_ref) {
     }
 
     if ((((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '').startsWith(_constant.WELLKNOWN_SERVICE_PATH_PREFIX)) {
-      history.replace("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"));
+      navigate("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"), {
+        replace: true
+      });
       return;
     }
 
-    history.replace('/');
+    navigate('/', {
+      replace: true
+    });
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
@@ -143,10 +150,7 @@ function IssuePassport(_ref) {
   });
 }
 
-const Div = (0, _styledComponents.default)(_Center.default).withConfig({
-  displayName: "issue-passport__Div",
-  componentId: "sc-ovfail-0"
-})([".header{text-align:center;margin-bottom:8px;}.subheader{text-align:center;margin-bottom:24px;}.login{padding:24px;height:auto;min-height:480px;display:flex;flex-direction:column;}.connect{background:#fafafa;}"]);
+const Div = (0, _styled.default)(_Center.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header {\n    text-align: center;\n    margin-bottom: 8px;\n  }\n\n  .subheader {\n    text-align: center;\n    margin-bottom: 24px;\n  }\n\n  .login {\n    padding: 24px;\n    height: auto;\n    min-height: 480px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .connect {\n    background: #fafafa;\n  }\n"])));
 
 var _default = (0, _wrapLocale.default)(IssuePassport);
 

package/lib/launch-blocklet/content-layout.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ContentLayout;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children"];
 
 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; }
@@ -40,7 +44,4 @@ ContentLayout.propTypes = {
   children: _propTypes.default.any.isRequired
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "content-layout__Container",
-  componentId: "sc-panu44-0"
-})(["display:flex;flex-direction:column;align-items:center;width:100%;height:100%;.header{text-align:center;}.body{display:flex;flex-direction:column;align-items:center;margin-top:30px;width:100%;min-height:200px;flex:1;", "{padding:24px;}", "{padding:0 16px 16px;}}.footer{display:flex;justify-content:center;", "{padding-bottom:34px;}", "{margin-top:auto;padding-bottom:10px;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n\n  .header {\n    text-align: center;\n  }\n\n  .body {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 30px;\n    width: 100%;\n    min-height: 200px;\n    flex: 1;\n\n    ", " {\n      padding: 24px;\n    }\n\n    ", " {\n      padding: 0 16px 16px;\n    }\n  }\n\n  .footer {\n    display: flex;\n    justify-content: center;\n\n    ", " {\n      padding-bottom: 34px;\n    }\n\n    ", " {\n      margin-top: auto;\n      padding-bottom: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));

package/lib/launch-blocklet/page-header.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 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 PageHeader(_ref) {
   let {
     title,
@@ -29,10 +33,7 @@ function PageHeader(_ref) {
   });
 }
 
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "page-header__Content",
-  componentId: "sc-1w6zplg-0"
-})(["text-align:center;.title{font-size:24px;font-weight:400;color:", ";}.sub-title{margin:0 auto;max-width:90%;font-size:14px;color:", ";}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
+const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n\n  .title {\n    font-size: 24px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  .sub-title {\n    margin: 0 auto;\n    max-width: 90%;\n    font-size: 14px;\n    color: ", ";\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
 
 var _default = PageHeader;
 exports.default = _default;

package/lib/layout/addon.js

@@ -7,7 +7,7 @@ exports.default = HeaderAddon;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,8 +27,12 @@ var _QuestionMarkCircle = _interopRequireDefault(require("@arcblock/icons/lib/Qu
 
 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; }
@@ -115,7 +119,4 @@ HeaderAddon.defaultProps = {
   sessionManagerProps: {}
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "addon__Div",
-  componentId: "sc-5tyqcw-0"
-})(["display:flex;justify-content:center;align-items:center;.MuiIconButton-root svg{width:26px;height:26px;}.user-addon{.user-avatar{width:28px;border-radius:14px;height:auto;}}", "{> button,> a{padding-left:8px;padding-right:8px;}}"], props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .MuiIconButton-root svg {\n    width: 26px;\n    height: 26px;\n  }\n\n  .user-addon {\n    .user-avatar {\n      width: 28px;\n      border-radius: 14px;\n      height: auto;\n    }\n  }\n\n  ", " {\n    > button,\n    > a {\n      padding-left: 8px;\n      padding-right: 8px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));

package/lib/lost-passport.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -51,11 +51,12 @@ var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/no-unstable-nested-components */
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-/* eslint-disable react/jsx-one-expression-per-line */
 // eslint-disable-next-line react/prop-types
 function ColorStepIcon(_ref) {
   let {
@@ -109,7 +110,7 @@ function LostPassport(_ref2) {
   const [user, setUser] = (0, _react.useState)(false);
   const [passport, setPassport] = (0, _react.useState)(false);
   const [success, setSuccess] = (0, _react.useState)(false);
-  const history = (0, _reactRouterDom.useHistory)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
   const {
     setPassportId
@@ -151,16 +152,22 @@ function LostPassport(_ref2) {
     const redirect = searchParams.get('redirect');
 
     if (redirect) {
-      history.replace(redirect);
+      navigate(redirect, {
+        replace: true
+      });
       return;
     }
 
     if ((((_window$env = window.env) === null || _window$env === void 0 ? void 0 : _window$env.apiPrefix) || '').startsWith(_constant.WELLKNOWN_SERVICE_PATH_PREFIX)) {
-      history.replace("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"));
+      navigate("".concat(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "/login"), {
+        replace: true
+      });
       return;
     }
 
-    history.replace('/');
+    navigate('/', {
+      replace: true
+    });
   };
 
   const handleChange = event => {
@@ -347,10 +354,7 @@ function LostPassport(_ref2) {
   });
 }
 
-const Div = (0, _styledComponents.default)(_Container.default).withConfig({
-  displayName: "lost-passport__Div",
-  componentId: "sc-1ov2rpb-0"
-})(["padding-top:46px;padding-bottom:46px;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;@media (max-width:", "px){display:block;}.header{text-align:center;margin-bottom:24px;}.stepper{padding:24px;height:auto;width:100%;min-height:640px;display:flex;flex-direction:column;.stepper-progress{padding:0;flex:0;margin-bottom:24px;.MuiStepLabel-label.MuiStepLabel-alternativeLabel{margin-top:8px;}.MuiStepConnector-alternativeLabel{top:24px;}.MuiStepConnector-lineHorizontal{height:3px;border:none;background-color:#eaeaf0;border-radius:1px;}.step-icon-w{background-color:", ";z-index:1;color:", ";width:50px;height:50px;display:flex;border-radius:50%;justify-content:center;align-items:center;.step-icon{font-size:30px;}}.step-icon-w--active{background-color:", ";}.step-icon-w--completed{background-color:", ";}}.stepper-content{padding:0 64px;flex:1;display:flex;justify-content:center;align-items:center;margin-bottom:24px;.stepper-icon{margin-left:40px;}.stepper-auth{padding:0;.auth-title{margin-bottom:16px;}}.stepper-tip{text-align:center;margin-bottom:16px;}@media (max-width:", "px){padding:0;}}.stepper-actions{flex:0;text-align:right;padding:0 64px;display:none;.step-button{margin-right:8px;}}.select-passport{width:80%;@media (max-width:", "px){width:100%;}}.user-info{.name{font-weight:500;font-size:18px;line-height:25px;color:#222222;}}}.connect{background:#fafafa;}"], props => props.theme.breakpoints.values.sm, props => props.theme.palette.grey[500], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.secondary.main, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
+const Div = (0, _styled.default)(_Container.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 46px;\n  padding-bottom: 46px;\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  @media (max-width: ", "px) {\n    display: block;\n  }\n  .header {\n    text-align: center;\n    margin-bottom: 24px;\n  }\n\n  .stepper {\n    padding: 24px;\n    height: auto;\n    width: 100%;\n    min-height: 640px;\n    display: flex;\n    flex-direction: column;\n\n    .stepper-progress {\n      padding: 0;\n      flex: 0;\n      margin-bottom: 24px;\n\n      .MuiStepLabel-label.MuiStepLabel-alternativeLabel {\n        margin-top: 8px;\n      }\n\n      .MuiStepConnector-alternativeLabel {\n        top: 24px;\n      }\n\n      .MuiStepConnector-lineHorizontal {\n        height: 3px;\n        border: none;\n        background-color: #eaeaf0;\n        border-radius: 1px;\n      }\n\n      .step-icon-w {\n        background-color: ", ";\n        z-index: 1;\n        color: ", ";\n        width: 50px;\n        height: 50px;\n        display: flex;\n        border-radius: 50%;\n        justify-content: center;\n        align-items: center;\n        .step-icon {\n          font-size: 30px;\n        }\n      }\n\n      .step-icon-w--active {\n        background-color: ", ";\n      }\n\n      .step-icon-w--completed {\n        background-color: ", ";\n      }\n    }\n\n    .stepper-content {\n      padding: 0 64px;\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: 24px;\n\n      .stepper-icon {\n        margin-left: 40px;\n      }\n\n      .stepper-auth {\n        padding: 0;\n\n        .auth-title {\n          margin-bottom: 16px;\n        }\n      }\n\n      .stepper-tip {\n        text-align: center;\n        margin-bottom: 16px;\n      }\n      @media (max-width: ", "px) {\n        padding: 0;\n      }\n    }\n\n    .stepper-actions {\n      flex: 0;\n      text-align: right;\n      padding: 0 64px;\n      display: none;\n      .step-button {\n        margin-right: 8px;\n      }\n    }\n\n    .select-passport {\n      width: 80%;\n      @media (max-width: ", "px) {\n        width: 100%;\n      }\n    }\n\n    .user-info {\n      .name {\n        font-weight: 500;\n        font-size: 18px;\n        line-height: 25px;\n        color: #222222;\n      }\n    }\n  }\n\n  .connect {\n    background: #fafafa;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.palette.grey[500], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.secondary.main, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
 
 var _default = (0, _wrapLocale.default)(LostPassport);
 

package/lib/nav-logo.js

@@ -7,15 +7,19 @@ exports.default = LogoContainer;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["logo", "name", "subname", "previousData"],
       _excluded2 = ["logo"];
 
 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; }
@@ -130,12 +134,6 @@ function LogoImg(_ref2) {
   }));
 }
 
-const LogoImgDiv = _styledComponents.default.div.withConfig({
-  displayName: "nav-logo__LogoImgDiv",
-  componentId: "sc-b61p4p-0"
-})(["display:block;> *{display:block;}"]);
+const LogoImgDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  > * {\n    display: block;\n  }\n"])));
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "nav-logo__Container",
-  componentId: "sc-b61p4p-1"
-})(["position:relative;display:block;.logo-inner{display:flex;align-items:center;height:100%;.logo-img-content{position:relative;display:block;}.logo-info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;letter-spacing:0.1px;&.zero-left{margin-left:0%;}.logo-name{position:relative;line-height:16px;font-size:16px;color:#121319;}.logo-subname{position:relative;line-height:13px;font-size:13px;color:#7d8085;}}}.postion-abs{position:absolute;left:0;top:0;height:100%;}.right-fade-out-ele{animation:right-fade-out ease 0.5s;animation-delay:2s;animation-fill-mode:forwards;}.right-fade-in-ele{animation:right-fade-in ease 0.5s;animation-delay:2s;animation-fill-mode:both;}@keyframes right-fade-out{0%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(8px,0);}}@keyframes right-fade-in{0%{opacity:0;transform:translate(8px,0);}100%{opacity:1;transform:translate(0,0);}}.left-fade-out-ele{animation:left-fade-out ease 0.5s;animation-delay:2s;animation-fill-mode:forwards;}.left-fade-in-ele{animation:left-fade-in ease 0.5s;animation-delay:2s;animation-fill-mode:both;}@keyframes left-fade-out{0%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(-8px,0);}}@keyframes left-fade-in{0%{opacity:0;transform:translate(-8px,0);}100%{opacity:1;transform:translate(0,0);}}"]);
+const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n\n  .logo-inner {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    .logo-img-content {\n      position: relative;\n      display: block;\n    }\n    .logo-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      margin-left: 10px;\n      letter-spacing: 0.1px;\n      &.zero-left {\n        margin-left: 0%;\n      }\n      .logo-name {\n        position: relative;\n        line-height: 16px;\n        font-size: 16px;\n        color: #121319;\n      }\n      .logo-subname {\n        position: relative;\n        line-height: 13px;\n        font-size: 13px;\n        color: #7d8085;\n      }\n    }\n  }\n\n  .postion-abs {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n  }\n\n  .right-fade-out-ele {\n    animation: right-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .right-fade-in-ele {\n    animation: right-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes right-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n  }\n\n  @keyframes right-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n\n  .left-fade-out-ele {\n    animation: left-fade-out ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: forwards;\n  }\n\n  .left-fade-in-ele {\n    animation: left-fade-in ease 0.5s;\n    animation-delay: 2s;\n    animation-fill-mode: both;\n  }\n\n  @keyframes left-fade-out {\n    0% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n    100% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n  }\n\n  @keyframes left-fade-in {\n    0% {\n      opacity: 0;\n      transform: translate(-8px, 0);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0, 0);\n    }\n  }\n"])));

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -21,36 +21,34 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@abtnode/auth": "1.8.6",
-    "@abtnode/constant": "1.8.6",
-    "@arcblock/did-connect": "^2.1.70",
-    "@arcblock/icons": "^2.1.70",
-    "@arcblock/ux": "^2.1.70",
-    "@blocklet/meta": "1.8.6",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.4",
-    "@mui/styles": "^5.6.2",
-    "ahooks": "^3.4.0",
-    "dayjs": "^1.11.2",
-    "flat": "^5.0.0",
+    "@abtnode/auth": "1.8.7",
+    "@abtnode/constant": "1.8.7",
+    "@arcblock/did-connect": "^2.4.0",
+    "@arcblock/icons": "^2.4.0",
+    "@arcblock/ux": "^2.4.0",
+    "@blocklet/meta": "1.8.7",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.10.0",
+    "@mui/styles": "^5.9.3",
+    "ahooks": "^3.7.0",
+    "dayjs": "^1.11.4",
+    "flat": "^5.0.2",
     "notistack": "2.0.5",
-    "prop-types": "^15.7.2",
-    "react": "^18.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
     "react-color": "^2.19.3",
-    "react-router-dom": "^5.1.2",
-    "react-use": "^17.3.2",
-    "styled-components": "^5.0.1"
+    "react-router-dom": "^6.3.0",
+    "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@babel/preset-react": "^7.8.3",
-    "babel-plugin-inline-react-svg": "^1.1.1",
-    "babel-plugin-styled-components": "^1.10.7"
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "babel-plugin-inline-react-svg": "^1.1.2"
   },
-  "gitHead": "070dad4ce5e12c8961399788f9d206bf7d9d263f"
+  "gitHead": "9807ea28b3ae634f5806c875774ac3b7e38502a1"
 }