@blocklet/launcher-layout 1.8.0 → 1.8.3

package/lib/compact-layout.js

@@ -7,14 +7,18 @@ exports.default = CompactLayout;
 
 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 CompactLayout(_ref) {
   let {
     children,
@@ -94,10 +98,7 @@ function CompactLayout(_ref) {
   });
 }
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "compact-layout__Container",
-  componentId: "sc-1r46z5c-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;animation:fadein ease 0.5s;&.scroll-mode{.compact-context{flex:1;overflow-y:auto;}.fix-container{flex-shrink:0;}}@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  animation: fadein ease 0.5s;\n  &.scroll-mode {\n    .compact-context {\n      flex: 1;\n      overflow-y: auto;\n    }\n    .fix-container {\n      flex-shrink: 0;\n    }\n  }\n\n  @keyframes fadein {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])));
 
 CompactLayout.propTypes = {
   children: _propTypes.default.any,

package/lib/content.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Content;
 
-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 Content(_ref) {
   let {
     children
@@ -26,7 +30,4 @@ Content.propTypes = {
   children: _propTypes.default.any.isRequired
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "content__Container",
-  componentId: "sc-1b9ey7-0"
-})(["display:flex;flex-direction:column;height:100%;width:100%;.center{display:flex;justify-content:center;}.page-title{text-align:center;}.toolbar{display:flex;justify-content:space-between;align-items:center;.toolbar_title{color:", ";font-size:16px;}}.page-footer{display:flex;justify-content:center;align-items:center;width:100%;background:", ";.create-button{margin-right:32px;}& > button,.button{margin:0 8px;}", "{padding:24px;& > button,.button{margin:0 12px;min-width:200px;}}", "{margin-top:auto;padding:16px;}}"], props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n\n  .center {\n    display: flex;\n    justify-content: center;\n  }\n\n  .page-title {\n    text-align: center;\n  }\n\n  .toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .toolbar_title {\n      color: ", ";\n      font-size: 16px;\n    }\n  }\n\n  .page-footer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 100%;\n    background: ", ";\n\n    .create-button {\n      margin-right: 32px;\n    }\n\n    & > button,\n    .button {\n      margin: 0 8px;\n    }\n\n    ", " {\n      padding: 24px;\n      & > button,\n      .button {\n        margin: 0 12px;\n        min-width: 200px;\n      }\n    }\n\n    ", " {\n      margin-top: auto;\n      padding: 16px;\n    }\n  }\n"])), props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));

package/lib/header.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 _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
@@ -21,8 +21,12 @@ var _locale = require("./locale");
 
 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 AppHeader(_ref) {
   let {
     title,
@@ -121,7 +125,4 @@ AppHeader.defaultProps = {
   navLogo: ''
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "header__Container",
-  componentId: "sc-1twhts3-0"
-})(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:14px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:700;", "{font-size:18px;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:12px;line-height:16px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  ", " {\n    min-height: 70px;\n  }\n  ", " {\n    align-items: center;\n  }\n  .app-name-content {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n    ", " {\n      height: 22px;\n    }\n  }\n  .launching-context {\n    flex-shrink: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: ", ";\n    ", " {\n      margin-bottom: 4px;\n    }\n    ", " {\n      font-size: 14px;\n      line-height: 15px;\n      &:after {\n        display: inline-block;\n        margin: 0 4px;\n        content: ':';\n      }\n    }\n  }\n\n  &.center-mode {\n    align-items: flex-start;\n    .launching-context {\n      ", " {\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  .app-icon {\n    flex-shrink: 0;\n    > * {\n      display: block;\n      vertical-align: middle;\n    }\n  }\n\n  .header-title {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: flex-start;\n    margin-left: 24px;\n    ", " {\n      margin-left: 16px;\n    }\n    .header-title-name {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex: 1;\n      height: 100%;\n      color: ", ";\n      font-weight: 700;\n      ", " {\n        font-size: 18px;\n\n        &.middle-size {\n          font-size: 16px;\n        }\n      }\n      ", " {\n        display: block;\n        max-width: calc(100vw - 100px);\n        font-size: 16px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    .header-title-sub {\n      color: ", ";\n      font-size: 12px;\n      line-height: 16px;\n\n      ", " {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));

package/lib/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 _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
 
@@ -33,17 +33,15 @@ var _nav = _interopRequireDefault(require("./nav"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MobileContent = _styledComponents.default.div.withConfig({
-  displayName: "src__MobileContent",
-  componentId: "sc-11nbl7p-0"
-})(["box-sizing:border-box;display:flex;overflow:hidden;width:100%;height:100%;padding-top:68px;"]);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const MobileContent = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  padding-top: 68px;\n"])));
 
-const PcContent = _styledComponents.default.div.withConfig({
-  displayName: "src__PcContent",
-  componentId: "sc-11nbl7p-1"
-})(["display:flex;max-width:1245px;min-width:900px;max-height:880px;border-radius:8px;background-color:#fff;"]);
+const PcContent = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  max-width: 1245px;\n  min-width: 900px;\n  max-height: 880px;\n  border-radius: 8px;\n  background-color: #fff;\n"])));
 
 function Layout(_ref) {
   let {
@@ -166,15 +164,9 @@ if (ua.includes('iphone os') && ua.includes('crios')) {
   injectStyle = 'height: calc(100vh - 60px);';
 }
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "src__Root",
-  componentId: "sc-11nbl7p-2"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;letter-spacing:normal;", " .circular{display:inline-block;position:relative;width:15px;height:12px;> *{position:absolute;left:3px;top:2px;width:100%;height:100%;}}.ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", "{left:26px;width:calc(100% - 26px);}}", "{background:#f6f8fa;}", "{background:", ";}.root-header{box-sizing:border-box;position:absolute;z-index:200;top:0;display:flex;width:100%;max-width:1245px;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{height:56px;padding:14px 16px;justify-content:space-between;background:#f6f8fa;}.left{flex:1;display:flex;align-items:center;}.right{display:flex;align-items:center;", "{button,a{padding-left:8px;padding-right:8px;}}}}"], injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
+const Root = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  letter-spacing: normal;\n  ", "\n\n  .circular {\n    display: inline-block;\n    position: relative;\n    width: 15px;\n    height: 12px;\n    > * {\n      position: absolute;\n      left: 3px;\n      top: 2px;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .ellipsis-title {\n    flex: 1;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    ", " {\n      left: 26px;\n      width: calc(100% - 26px);\n    }\n  }\n\n  ", " {\n    background: #f6f8fa;\n  }\n\n  ", " {\n    background: ", ";\n  }\n\n  .root-header {\n    box-sizing: border-box;\n    position: absolute;\n    z-index: 200;\n    top: 0;\n    display: flex;\n    width: 100%;\n    max-width: 1245px;\n    height: 68px;\n    align-items: center;\n\n    ", " {\n      padding: 24px;\n      justify-content: flex-end;\n    }\n\n    ", " {\n      height: 56px;\n      padding: 14px 16px;\n      justify-content: space-between;\n      background: #f6f8fa;\n    }\n\n    .left {\n      flex: 1;\n      display: flex;\n      align-items: center;\n    }\n\n    .right {\n      display: flex;\n      align-items: center;\n      ", " {\n        button,\n        a {\n          padding-left: 8px;\n          padding-right: 8px;\n        }\n      }\n    }\n  }\n"])), injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
 
-const LogoContainer = _styledComponents.default.div.withConfig({
-  displayName: "src__LogoContainer",
-  componentId: "sc-11nbl7p-3"
-})(["display:block;margin-top:4px;"]);
+const LogoContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: block;\n  margin-top: 4px;\n"])));
 
 var _default = Layout;
 exports.default = _default;

package/lib/launch-result-message.js

@@ -7,7 +7,7 @@ exports.default = LaunchResultMessage;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
@@ -19,10 +19,14 @@ var _PriorityHigh = _interopRequireDefault(require("@mui/icons-material/Priority
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["variant", "title", "subTitle", "footer"];
 
 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; }
@@ -96,7 +100,4 @@ LaunchResultMessage.defaultProps = {
   footer: null
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "launch-result-message__Container",
-  componentId: "sc-msneii-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;.result-body{padding:0 14px;max-width:500px;text-align:center;margin-top:-64px;}.result-icon{display:inline-flex;justify-content:center;align-items:center;margin-bottom:24px;width:48px;height:48px;border-radius:100%;color:", ";transition:all ease 0.3s;&.color-success{background-color:", ";}&.color-error{background-color:", ";}&.color-info{background-color:", ";}}.result-title{height:34px;font-size:24px;margin-bottom:8px;font-weight:bolder;transition:all ease 0.3s;transition-delay:0.2s;&.color-success{color:", ";}&.color-error{color:", ";}&.color-info{color:", ";}&.ele-hide{height:0;opacity:0;margin-bottom:0;}}.result-sub-title{margin:0 auto;min-height:17px;color:", ";font-size:14px;line-height:1.21em;transition:all ease 0.3s;transition-delay:0.2s;word-break:break-word;&.ele-hide{line-height:0;opacity:0;min-height:0;}}.result-footer{padding-top:24px;transition:all ease 0.3s;transition-delay:0.2s;}"], props => props.theme.palette.common.white, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.grey[700]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n  height: 100%;\n\n  .result-body {\n    padding: 0 14px;\n    max-width: 500px;\n    text-align: center;\n    margin-top: -64px;\n  }\n\n  .result-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 24px;\n    width: 48px;\n    height: 48px;\n    border-radius: 100%;\n    color: ", ";\n    transition: all ease 0.3s;\n    &.color-success {\n      background-color: ", ";\n    }\n    &.color-error {\n      background-color: ", ";\n    }\n    &.color-info {\n      background-color: ", ";\n    }\n  }\n\n  .result-title {\n    height: 34px;\n    font-size: 24px;\n    margin-bottom: 8px;\n    font-weight: bolder;\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n    &.color-success {\n      color: ", ";\n    }\n    &.color-error {\n      color: ", ";\n    }\n    &.color-info {\n      color: ", ";\n    }\n    &.ele-hide {\n      height: 0;\n      opacity: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .result-sub-title {\n    margin: 0 auto;\n    min-height: 17px;\n    color: ", ";\n    font-size: 14px;\n    line-height: 1.21em; // 0.01\u53EF\u4EE5\u89E3\u51B3\u89C6\u7F51\u819C\u5C4F\u8F7B\u5FAE\u504F\u79FB\u95EE\u9898\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n    word-break: break-word;\n    &.ele-hide {\n      line-height: 0;\n      opacity: 0;\n      min-height: 0;\n    }\n  }\n\n  .result-footer {\n    padding-top: 24px;\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.grey[700]);

package/lib/nav.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 _urlJoin = _interopRequireDefault(require("url-join"));
 
@@ -21,8 +21,12 @@ var _step = require("./context/step");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function Nav(_ref) {
   let {
     blockletMeta,
@@ -169,20 +173,11 @@ function Nav(_ref) {
   });
 }
 
-const AppLink = _styledComponents.default.a.withConfig({
-  displayName: "nav__AppLink",
-  componentId: "sc-1qwhj4c-0"
-})(["color:", ";text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';text-decoration:none;font-weight:700;-webkit-font-smoothing:antialiased;", "{display:block;max-width:calc(100vw - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
+const AppLink = _styled.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  text-decoration: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  text-decoration: none;\n  font-weight: 700;\n  -webkit-font-smoothing: antialiased;\n\n  ", " {\n    display: block;\n    max-width: calc(100vw - 150px);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "nav__Div",
-  componentId: "sc-1qwhj4c-1"
-})(["overflow-y:auto;", "{padding:24px;border-right:1px solid ", ";flex:0 0 280px;min-height:48px;.MuiStepConnector-vertical{padding:0;}}", "{padding:16px;.MuiStepConnector-lineVertical{border:none;}}.stepper{padding:0 !important;background:transparent;", "{margin-top:100px;}", "{margin-top:40px;}.step{cursor:pointer;}}.always-step-child{.step-child-block{animation:none !important;}}"], props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  ", " {\n    padding: 24px;\n    border-right: 1px solid ", ";\n    flex: 0 0 280px;\n    min-height: 48px;\n\n    .MuiStepConnector-vertical {\n      padding: 0;\n    }\n  }\n\n  ", " {\n    padding: 16px;\n\n    .MuiStepConnector-lineVertical {\n      border: none;\n    }\n  }\n\n  .stepper {\n    padding: 0 !important;\n    background: transparent;\n\n    ", " {\n      margin-top: 100px;\n    }\n\n    ", " {\n      margin-top: 40px;\n    }\n\n    .step {\n      cursor: pointer;\n    }\n  }\n\n  .always-step-child {\n    .step-child-block {\n      animation: none !important;\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
 
-const StepContainer = _styledComponents.default.div.withConfig({
-  displayName: "nav__StepContainer",
-  componentId: "sc-1qwhj4c-2"
-})(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-clickable{cursor:pointer;&:hover{color:", ";}}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;opacity:0.5;background-color:", ";transition:all ease 0.2s;}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-content{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";white-space:nowrap;}.step-desc{margin-top:24px;font-size:12px;font-weight:500;height:17px;color:", ";transition:all ease 0.3s;overflow:hidden;}", "{.step-content-name{position:absolute;left:0;top:0;width:100%;overflow:hidden;text-overflow:ellipsis;}}&.hide-child-step-desc{.step-desc{margin:0;opacity:0;height:0;}}.step-block{position:relative;display:flex;min-height:70px;opacity:0.5;overflow:hidden;transition:all ease 0.2s;&:last-child{height:auto;min-height:auto;}&.step-optional{height:0;opacity:0;min-height:0px;}&.step-checked,&.step-active{.step-desc{margin:0;opacity:0;height:0;}}&.step-checked{opacity:1;.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";opacity:1;}}&.step-active{opacity:1;.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-content{color:", ";}}&:last-child{.step-line{display:none;}.step-child-block{&:last-child{padding-bottom:0;}}}&.hide-step-child{.step-children{.step-child-block{margin-top:0;height:0;opacity:0;&:last-child{padding-bottom:0;}}}}}.step-children{padding-top:20px;.step-child-block{margin-top:4px;height:24px;line-height:24px;font-size:14px;color:#9397a1;transition:all ease 0.3s;&:first-child{margin-top:8px;}&:last-child{padding-bottom:40px;}&.step-child-block-active{color:", ";font-weight:700;}&.step-child-block-checked{color:", ";}}}.step-active{.step-child-block{animation:stepChildAnime ease 0.3s;}}@keyframes stepChildAnime{0%{height:0;}100%{height:24px;}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
+const StepContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 60px;\n  ", " {\n    margin-top: 30px;\n  }\n  .step-clickable {\n    cursor: pointer;\n    &:hover {\n      color: ", ";\n    }\n  }\n  .step-line {\n    display: block;\n    position: absolute;\n    z-index: 1;\n    left: 11px;\n    top: 12px;\n    width: 2px;\n    height: 100%;\n    opacity: 0.5;\n    background-color: ", ";\n    transition: all ease 0.2s;\n  }\n  .step-icon {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    flex-shrink: 0;\n    justify-content: center;\n    align-items: center;\n    width: 24px;\n    height: 24px;\n    border-radius: 13px;\n    background-color: ", ";\n    color: ", ";\n    transition: all ease 0.3s;\n    &:before {\n      position: absolute;\n      left: 4px;\n      top: 4px;\n      z-index: 3;\n      display: block;\n      background-color: ", ";\n      width: 16px;\n      height: 16px;\n      border-radius: 10px;\n      content: '';\n      transform: scale(0);\n      transition: all ease 0.3s;\n    }\n    & > * {\n      transform: scale(0);\n      transition: all ease 0.2s;\n    }\n  }\n  .step-content {\n    position: relative;\n    flex: 1;\n    padding-top: 1px;\n    margin-left: 22px;\n    font-size: 16px;\n    color: ", ";\n    white-space: nowrap;\n  }\n  .step-desc {\n    margin-top: 24px;\n    font-size: 12px;\n    font-weight: 500;\n    height: 17px;\n    color: ", ";\n    transition: all ease 0.3s;\n    overflow: hidden;\n  }\n  ", " {\n    .step-content-name {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n  &.hide-child-step-desc {\n    .step-desc {\n      margin: 0;\n      opacity: 0;\n      height: 0;\n    }\n  }\n  .step-block {\n    position: relative;\n    display: flex;\n    min-height: 70px;\n    opacity: 0.5;\n    overflow: hidden;\n    transition: all ease 0.2s;\n    &:last-child {\n      height: auto;\n      min-height: auto;\n    }\n    &.step-optional {\n      height: 0;\n      opacity: 0;\n      min-height: 0px;\n    }\n\n    &.step-checked,\n    &.step-active {\n      .step-desc {\n        margin: 0;\n        opacity: 0;\n        height: 0;\n      }\n    }\n\n    &.step-checked {\n      opacity: 1;\n      .step-icon {\n        color: ", ";\n        background-color: ", ";\n        & > * {\n          transform: scale(1);\n        }\n      }\n\n      .step-line {\n        background-color: ", ";\n        opacity: 1;\n      }\n    }\n\n    &.step-active {\n      opacity: 1;\n      .step-icon {\n        background-color: ", ";\n      }\n      .step-icon:before {\n        transform: scale(1);\n      }\n      .step-content {\n        color: ", ";\n      }\n    }\n\n    &:last-child {\n      .step-line {\n        display: none;\n      }\n\n      .step-child-block {\n        &:last-child {\n          padding-bottom: 0;\n        }\n      }\n    }\n\n    &.hide-step-child {\n      .step-children {\n        .step-child-block {\n          margin-top: 0;\n          height: 0;\n          opacity: 0;\n          &:last-child {\n            padding-bottom: 0;\n          }\n        }\n      }\n    }\n  }\n  .step-children {\n    padding-top: 20px;\n    .step-child-block {\n      margin-top: 4px;\n      height: 24px;\n      line-height: 24px;\n      font-size: 14px;\n      color: #9397a1;\n      transition: all ease 0.3s;\n      &:first-of-type {\n        margin-top: 8px;\n      }\n      &:last-child {\n        padding-bottom: 40px;\n      }\n      &.step-child-block-active {\n        color: ", ";\n        font-weight: 700;\n      }\n      &.step-child-block-checked {\n        color: ", ";\n      }\n    }\n  }\n\n  .step-active {\n    .step-child-block {\n      animation: stepChildAnime ease 0.3s;\n    }\n  }\n\n  @keyframes stepChildAnime {\n    0% {\n      height: 0;\n    }\n    100% {\n      height: 24px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
 
 Nav.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,

package/lib/page-header.js

@@ -5,7 +5,7 @@ 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"));
 
@@ -13,10 +13,14 @@ var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBac
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["title", "subTitle", "onClickBack"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(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; }
@@ -49,10 +53,7 @@ function PageHeader(_ref) {
   }));
 }
 
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "page-header__Content",
-  componentId: "sc-1j6254k-0"
-})(["position:relative;width:100%;text-align:center;.title{font-size:24px;font-weight:700;color:", ";}.sub-title{font-size:14px;color:", ";padding:0 14px;font-weight:400;}.back-btn{position:absolute;left:25px;top:8px;color:#9397a1;font-size:18px;cursor:pointer;}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
+const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  text-align: center;\n\n  .title {\n    font-size: 24px;\n    font-weight: 700;\n    color: ", ";\n  }\n\n  .sub-title {\n    font-size: 14px;\n    color: ", ";\n    padding: 0 14px;\n    font-weight: 400;\n  }\n\n  .back-btn {\n    position: absolute;\n    left: 25px;\n    top: 8px;\n    color: #9397a1;\n    font-size: 18px;\n    cursor: pointer;\n  }\n"])), props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
 
 var _default = PageHeader;
 exports.default = _default;

package/lib/wizard/server-eula.js

@@ -7,7 +7,7 @@ exports.default = ServerEula;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,9 +21,12 @@ var _submit = _interopRequireDefault(require("@blocklet/launcher-ux/lib/hot-key/
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/jsx-wrap-multilines */
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ServerEula(_ref) {
   let {
     onContinue,
@@ -85,7 +88,4 @@ ServerEula.defaultProps = {
   }
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "server-eula__Div",
-  componentId: "sc-66fg47-0"
-})(["margin:0 auto;display:flex;justify-content:space-between;align-items:center;@media (max-width:", "px){flex-direction:column;}.eula-trigger{cursor:pointer;text-decoration:underline;", "{padding-right:24px;}", "{padding:16px;}font-size:14px;white-space:nowrap;&:hover{color:", ";}}.next-button{min-width:200px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n  }\n\n  .eula-trigger {\n    cursor: pointer;\n    text-decoration: underline;\n    ", " {\n      padding-right: 24px;\n    }\n    ", " {\n      padding: 16px;\n    }\n    font-size: 14px;\n    white-space: nowrap;\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  .next-button {\n    min-width: 200px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main);

package/lib/wizard/wizard-desc.js

@@ -13,7 +13,7 @@ var _util = require("@blocklet/meta/lib/util");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _rehypeReact = _interopRequireDefault(require("rehype-react"));
 
@@ -29,8 +29,12 @@ var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 
 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) } })); }
+
 const isFreeBlocklet = meta => {
   if (!meta.payment) {
     return true;
@@ -230,10 +234,7 @@ function WizardDesc(_ref) {
   });
 }
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "wizard-desc__Container",
-  componentId: "sc-1it5wg8-0"
-})([".info-table{a{word-break:break-all;}}.app-overview{font-size:16px;margin:16px 0 0 16px;h1{margin:8px 0;font-size:20px;}h2{margin:8px 0;font-size:18px;}ul{display:block;list-style-type:disc;padding-left:2em;li{display:list-item;list-style:disc;}}blockquote{margin-left:2em;}}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .info-table {\n    a {\n      word-break: break-all;\n    }\n  }\n  .app-overview {\n    font-size: 16px;\n    margin: 16px 0 0 16px;\n    h1 {\n      margin: 8px 0;\n      font-size: 20px;\n    }\n    h2 {\n      margin: 8px 0;\n      font-size: 18px;\n    }\n    ul {\n      display: block;\n      list-style-type: disc;\n      padding-left: 2em;\n      li {\n        display: list-item;\n        list-style: disc;\n      }\n    }\n    blockquote {\n      margin-left: 2em;\n    }\n  }\n"])));
 
 var _default = WizardDesc;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -37,21 +37,19 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.2.0",
-    "@arcblock/icons": "^2.2.0",
-    "@arcblock/ux": "^2.2.0",
-    "@blocklet/launcher-ux": "1.8.0",
-    "@blocklet/meta": "^1.8.5",
+    "@arcblock/did-connect": "^2.4.0",
+    "@arcblock/icons": "^2.4.0",
+    "@arcblock/ux": "^2.4.0",
+    "@blocklet/launcher-ux": "1.8.3",
+    "@blocklet/meta": "^1.8.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.93",
-    "@mui/material": "^5.9.3",
-    "@mui/styles": "^5.9.3",
+    "@mui/lab": "^5.0.0-alpha.94",
+    "@mui/material": "^5.10.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "rehype-react": "^7.1.1",
-    "styled-components": "^5.3.5",
     "url-join": "^4.0.1"
   },
   "devDependencies": {
@@ -59,9 +57,8 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/react": "^6.5.9",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-styled-components": "^1.13.3"
+    "@storybook/react": "^6.5.10",
+    "babel-plugin-inline-react-svg": "^2.0.1"
   },
-  "gitHead": "f3ae76788c6fae79943d18d94e1eb909a0ba7f6e"
+  "gitHead": "4de5d39ed3842737b490234c4c4ebcc2c142f0ad"
 }