@blocklet/launcher-layout 2.3.19 → 2.3.21

package/lib/index.js

@@ -1,42 +1,43 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _smallCircleProgress = _interopRequireDefault(require("@blocklet/launcher-ux/lib/small-circle-progress"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
-var _react = require("@emotion/react");
-var _styles = require("@mui/material/styles");
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _isObject = _interopRequireDefault(require("lodash/isObject"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react2 = require("react");
-var _step = require("./context/step");
-var _header = _interopRequireDefault(require("./header"));
-var _locale = require("./locale");
-var _nav = _interopRequireDefault(require("./nav"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["blockletMeta", "loading", "children", "logoUrl", "locale", "header", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "navSubTitle", "contentMaxWidth", "theme"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import Center from '@arcblock/ux/lib/Center';
+import { create } from '@arcblock/ux/lib/Theme';
+import SmallCircleProgress from '@blocklet/launcher-ux/lib/small-circle-progress';
+import styled from '@emotion/styled';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { Typography, useMediaQuery, StyledEngineProvider, ThemeProvider, Hidden, CircularProgress } from '@mui/material';
+import isObject from 'lodash/isObject';
+import PropTypes from 'prop-types';
+import { Suspense, isValidElement } from 'react';
+import { useStepContext } from './context/step';
+import AppHeader from './header';
+import { getTranslations } from './locale';
+import Nav from './nav';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HEADER_HEIGHT_MD = '72px';
-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: ", ";\n"])), HEADER_HEIGHT_MD);
-const PcContent = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 900px;\n  max-width: ", ";\n  max-height: 880px;\n  border-radius: 8px;\n  background-color: #fff;\n  width: ", ";\n  height: ", ";\n\n  @media (max-height: 1200px) {\n    margin-top: ", ";\n    height: 100%;\n    max-height: 100%;\n  }\n"])), props => props.contentMaxWidth, props => props.width || '80%', props => props.height || '80%', HEADER_HEIGHT_MD);
-const theme = (0, _Theme.create)({
+const MobileContent = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding-top: ${HEADER_HEIGHT_MD};
+`;
+const PcContent = styled.div`
+  display: flex;
+  min-width: 900px;
+  max-width: ${props => props.contentMaxWidth};
+  max-height: 880px;
+  border-radius: 8px;
+  background-color: #fff;
+  width: ${props => props.width || '80%'};
+  height: ${props => props.height || '80%'};
+
+  @media (max-height: 1200px) {
+    margin-top: ${HEADER_HEIGHT_MD};
+    height: 100%;
+    max-height: 100%;
+  }
+`;
+const theme = create({
   typography: {
     fontSize: 14
   },
@@ -51,63 +52,63 @@ const theme = (0, _Theme.create)({
     }
   }
 });
-function Layout(_ref) {
-  let {
-      blockletMeta: tmpBlockletMeta,
-      loading,
-      children,
-      logoUrl,
-      locale,
-      header,
-      headerEndAddons,
-      pcWidth,
-      pcHeight,
-      navLogo,
-      useOfSkeleton,
-      stepTip,
-      navSubTitle,
-      contentMaxWidth,
-      theme: userTheme
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const isMobile = (0, _useMediaQuery.default)(t => t.breakpoints.down('md'));
+function Layout({
+  blockletMeta: tmpBlockletMeta,
+  loading,
+  children,
+  logoUrl,
+  locale,
+  header,
+  headerEndAddons,
+  pcWidth,
+  pcHeight,
+  navLogo,
+  useOfSkeleton,
+  stepTip,
+  navSubTitle,
+  contentMaxWidth,
+  theme: userTheme,
+  ...rest
+}) {
+  const isMobile = useMediaQuery(t => t.breakpoints.down('md'));
   const {
     activeStep,
     totalStepsCount
-  } = (0, _step.useStepContext)();
+  } = useStepContext();
   const blockletMeta = tmpBlockletMeta || {};
   const Container = isMobile ? MobileContent : PcContent;
-  const translations = (0, _locale.getTranslations)(locale);
-  if (navLogo && ! /*#__PURE__*/(0, _react2.isValidElement)(navLogo) && (0, _isObject.default)(navLogo)) {
+  const translations = getTranslations(locale);
+  if (navLogo && ! /*#__PURE__*/isValidElement(navLogo) && isObject(navLogo)) {
     if (isMobile) {
       // eslint-disable-next-line no-param-reassign
       navLogo = navLogo.mobile;
     } else {
       // eslint-disable-next-line no-param-reassign
-      navLogo = /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoContainer, {
+      navLogo = /*#__PURE__*/_jsx(LogoContainer, {
         children: navLogo.desktop
       });
     }
   }
   const tempTheme = Object.assign(theme, userTheme || {});
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledEngineProvider, {
+  return /*#__PURE__*/_jsx(StyledEngineProvider, {
     injectFirst: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
       theme: tempTheme,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ThemeProvider, {
+      children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
         theme: tempTheme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+        children: /*#__PURE__*/_jsxs(Root, {
+          ...rest,
+          children: [/*#__PURE__*/_jsxs(Header, {
             maxWidth: contentMaxWidth,
             width: pcWidth,
-            children: [header && header, !header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: [header && header, !header && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [isMobile && /*#__PURE__*/_jsx("div", {
                 className: "left",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+                children: /*#__PURE__*/_jsx(AppHeader, {
                   blockletMeta: blockletMeta,
                   navLogo: navLogo,
-                  subTitle: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: ["".concat(navSubTitle || translations.defaultNavSubTitle, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
+                  subTitle: /*#__PURE__*/_jsxs("span", {
+                    children: [`${navSubTitle || translations.defaultNavSubTitle} ${activeStep + 1}/${totalStepsCount}`, /*#__PURE__*/_jsx(SmallCircleProgress, {
                       value: (activeStep + 1) / totalStepsCount * 100,
                       style: {
                         marginLeft: 3
@@ -118,20 +119,20 @@ function Layout(_ref) {
                   locale: locale,
                   loading: loading
                 })
-              }), navLogo && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              }), navLogo && !isMobile && /*#__PURE__*/_jsx("div", {
                 className: "left",
                 children: navLogo
-              }), headerEndAddons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              }), headerEndAddons && /*#__PURE__*/_jsx("div", {
                 className: "right",
                 children: headerEndAddons
               })]
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+          }), /*#__PURE__*/_jsxs(Container, {
             contentMaxWidth: contentMaxWidth,
             className: "ll-container",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
+            children: [/*#__PURE__*/_jsx(Hidden, {
               mdDown: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nav.default, {
+              children: /*#__PURE__*/_jsx(Nav, {
                 locale: locale,
                 blockletMeta: blockletMeta,
                 logoUrl: logoUrl,
@@ -139,13 +140,13 @@ function Layout(_ref) {
                 subTitle: navSubTitle,
                 loading: loading
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            }), /*#__PURE__*/_jsx(Typography, {
               component: "div",
               className: "layout-content",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Suspense, {
-                fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
+              children: /*#__PURE__*/_jsx(Suspense, {
+                fallback: /*#__PURE__*/_jsx(Center, {
                   relative: "parent",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+                  children: /*#__PURE__*/_jsx(CircularProgress, {
                     style: {
                       marginTop: 36
                     }
@@ -155,27 +156,27 @@ function Layout(_ref) {
               })
             })]
           })]
-        }))
+        })
       })
     })
   });
 }
 Layout.propTypes = {
-  loading: _propTypes.default.bool,
-  blockletMeta: _propTypes.default.object,
-  children: _propTypes.default.object.isRequired,
-  logoUrl: _propTypes.default.string,
-  locale: _propTypes.default.oneOf(['en', 'zh']),
-  header: _propTypes.default.any,
-  headerEndAddons: _propTypes.default.any,
-  pcWidth: _propTypes.default.any,
-  pcHeight: _propTypes.default.any,
-  contentMaxWidth: _propTypes.default.string,
-  navLogo: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
-  useOfSkeleton: _propTypes.default.bool,
-  stepTip: _propTypes.default.string,
-  navSubTitle: _propTypes.default.string,
-  theme: _propTypes.default.object
+  loading: PropTypes.bool,
+  blockletMeta: PropTypes.object,
+  children: PropTypes.object.isRequired,
+  logoUrl: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  header: PropTypes.any,
+  headerEndAddons: PropTypes.any,
+  pcWidth: PropTypes.any,
+  pcHeight: PropTypes.any,
+  contentMaxWidth: PropTypes.string,
+  navLogo: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
+  useOfSkeleton: PropTypes.bool,
+  stepTip: PropTypes.string,
+  navSubTitle: PropTypes.string,
+  theme: PropTypes.object
 };
 Layout.defaultProps = {
   loading: false,
@@ -200,7 +201,103 @@ let injectStyle = '';
 if (ua.includes('iphone os') && ua.includes('crios')) {
   injectStyle = 'height: calc(100vh - 60px);';
 }
-const Header = _styled.default.header(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  min-width: 900px;\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 200;\n  top: 0;\n  display: flex;\n  max-width: ", ";\n  height: 68px;\n  align-items: center;\n\n  @media (max-height: 900px) {\n    width: 100%;\n  }\n\n  ", " and (min-height: 900px) {\n    justify-content: flex-end;\n  }\n\n  ", " {\n    min-width: 360px;\n    width: 100%;\n    height: ", ";\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"])), props => props.width || '80%', props => props.maxWidth, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), HEADER_HEIGHT_MD, props => props.theme.breakpoints.down('md'));
-const Root = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  letter-spacing: normal;\n  ", "\n\n  header:empty {\n    display: none;\n  }\n\n  header:empty + div {\n    margin-top: 0;\n    padding-top: 0;\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  .layout-content {\n    width: 100%;\n    height: 100%;\n    padding: 32px;\n\n    ", " {\n      padding: 16px;\n    }\n  }\n\n  ", " {\n    background: #f6f8fa;\n  }\n\n  ", " {\n    background: ", ";\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);
-const LogoContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: block;\n  margin-top: 4px;\n"])));
-var _default = exports.default = Layout;
+const Header = styled.header`
+  width: ${props => props.width || '80%'};
+  min-width: 900px;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  display: flex;
+  max-width: ${props => props.maxWidth};
+  height: 68px;
+  align-items: center;
+
+  @media (max-height: 900px) {
+    width: 100%;
+  }
+
+  ${props => props.theme.breakpoints.up('sm')} and (min-height: 900px) {
+    justify-content: flex-end;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    min-width: 360px;
+    width: 100%;
+    height: ${HEADER_HEIGHT_MD};
+    justify-content: space-between;
+    background: #f6f8fa;
+  }
+
+  .left {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    ${props => props.theme.breakpoints.down('md')} {
+      button,
+      a {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+`;
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  letter-spacing: normal;
+  ${injectStyle}
+
+  header:empty {
+    display: none;
+  }
+
+  header:empty + div {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  .circular {
+    display: inline-block;
+    position: relative;
+    width: 15px;
+    height: 12px;
+    > * {
+      position: absolute;
+      left: 3px;
+      top: 2px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .layout-content {
+    width: 100%;
+    height: 100%;
+    padding: 32px;
+
+    ${props => props.theme.breakpoints.down('md')} {
+      padding: 16px;
+    }
+  }
+
+  ${props => props.theme.breakpoints.up('sm')} {
+    background: #f6f8fa;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    background: ${props => props.theme.palette.common.white};
+  }
+`;
+const LogoContainer = styled.div`
+  display: block;
+  margin-top: 4px;
+`;
+export default Layout;

package/lib/info-list.js

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function InfoTable({
+  infoList = []
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    className: "info-table",
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: {
+        xs: '1fr',
+        md: 'max-content 1fr'
+      },
+      columnGap: 4,
+      rowGap: 1.5
+    },
+    children: infoList.map(item => /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          fontWeight: 'bold',
+          whiteSpace: 'nowrap'
+        },
+        children: item.key
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          marginTop: {
+            xs: -1,
+            md: 0
+          }
+        },
+        children: item.value
+      })]
+    }))
+  });
+}
+InfoTable.propTypes = {
+  // eslint-disable-next-line react/require-default-props
+  infoList: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    value: PropTypes.string
+  }))
+};

package/lib/launch-result-message.js

@@ -1,75 +1,55 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _PriorityHigh = _interopRequireDefault(require("@mui/icons-material/PriorityHigh"));
-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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function LaunchResultMessage(_ref) {
-  let {
-      variant,
-      title,
-      subTitle,
-      footer
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { Check, Close, PriorityHigh } from '@mui/icons-material';
+import { CircularProgress } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function LaunchResultMessage({
+  variant,
+  title,
+  subTitle,
+  footer,
+  ...props
+}) {
   let Icon;
   switch (variant) {
     case 'error':
-      Icon = _Close.default;
+      Icon = Close;
       break;
     case 'info':
-      Icon = _PriorityHigh.default;
+      Icon = PriorityHigh;
       break;
     case 'loading':
-      Icon = _CircularProgress.default;
+      Icon = CircularProgress;
       break;
     default:
-      Icon = _Check.default;
+      Icon = Check;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
-    variant: variant
-  }, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsx(Container, {
+    variant: variant,
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
       className: "result-body",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "result-icon color-".concat(variant),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "result-title color-".concat(variant, " ").concat(title ? '' : 'ele-hide'),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `result-icon color-${variant}`,
+        children: /*#__PURE__*/_jsx(Icon, {})
+      }), /*#__PURE__*/_jsx("div", {
+        className: `result-title color-${variant} ${title ? '' : 'ele-hide'}`,
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "result-sub-title ".concat(subTitle ? '' : 'ele-hide'),
+      }), /*#__PURE__*/_jsx("div", {
+        className: `result-sub-title ${subTitle ? '' : 'ele-hide'}`,
         children: subTitle
-      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), footer && /*#__PURE__*/_jsx("div", {
         className: "result-footer",
         children: footer
       })]
     })
-  }));
+  });
 }
 LaunchResultMessage.propTypes = {
-  variant: _propTypes.default.oneOf(['success', 'error', 'info', 'loading']),
-  title: _propTypes.default.string,
-  subTitle: _propTypes.default.any,
-  footer: _propTypes.default.any
+  variant: PropTypes.oneOf(['success', 'error', 'info', 'loading']),
+  title: PropTypes.string,
+  subTitle: PropTypes.any,
+  footer: PropTypes.any
 };
 LaunchResultMessage.defaultProps = {
   variant: 'success',
@@ -77,5 +57,86 @@ LaunchResultMessage.defaultProps = {
   subTitle: '',
   footer: null
 };
-var _default = exports.default = LaunchResultMessage;
-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: 21px;\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]);
+export default LaunchResultMessage;
+const Container = styled.div`
+  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: ${props => props.theme.palette.common.white};
+    transition: all ease 0.3s;
+    &.color-success {
+      background-color: ${props => props.theme.palette.success.main};
+    }
+    &.color-error {
+      background-color: ${props => props.theme.palette.error.main};
+    }
+    &.color-info {
+      background-color: ${props => props.theme.palette.primary.main};
+    }
+  }
+
+  .result-title {
+    height: 34px;
+    font-size: 21px;
+    margin-bottom: 8px;
+    font-weight: bolder;
+    transition: all ease 0.3s;
+    transition-delay: 0.2s;
+    &.color-success {
+      color: ${props => props.theme.palette.success.main};
+    }
+    &.color-error {
+      color: ${props => props.theme.palette.error.main};
+    }
+    &.color-info {
+      color: ${props => props.theme.palette.primary.main};
+    }
+    &.ele-hide {
+      height: 0;
+      opacity: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .result-sub-title {
+    margin: 0 auto;
+    min-height: 17px;
+    color: ${props => props.theme.palette.grey[700]};
+    font-size: 14px;
+    line-height: 1.21em; // 0.01可以解决视网膜屏轻微偏移问题
+    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;
+  }
+`;

package/lib/locale.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTranslations = exports.getLaunchingText = void 0;
 const translations = {
   en: {
     optional: 'Optional',
@@ -15,6 +9,5 @@ const translations = {
   }
 };
 const getTranslations = locale => translations[locale] ? translations[locale] : translations.en;
-exports.getTranslations = getTranslations;
 const getLaunchingText = locale => locale === 'zh' ? '启动' : 'Launching';
-exports.getLaunchingText = getLaunchingText;
+export { getTranslations, getLaunchingText };