@arcblock/ux 2.9.90 → 2.10.0

package/lib/Icon/index.js

@@ -1,26 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Colors = _interopRequireDefault(require("../Colors"));
-var _Theme = require("../Theme");
-var _deprecate = require("../Util/deprecate");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["name", "color", "size", "variant", "rounded", "style", "className", "forwardedRef"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(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 : String(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; }
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import colors from '../Colors';
+import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
+import { jsx as _jsx } from "react/jsx-runtime";
 const variants = {
   light: 'fal',
   regular: 'far',
@@ -28,59 +11,74 @@ const variants = {
 };
 
 // eslint-disable-next-line react/prop-types
-function Icon(_ref) {
-  let {
-      name,
-      color,
-      size,
-      variant,
-      rounded,
-      style,
-      className,
-      forwardedRef
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+function Icon({
+  name,
+  color,
+  size,
+  variant,
+  rounded,
+  style,
+  className,
+  forwardedRef,
+  ...rest
+}) {
+  const content = /*#__PURE__*/_jsx("i", {
     ref: forwardedRef,
-    className: "".concat(variants[variant], " fa-").concat(name, " ").concat(rounded ? '' : className),
+    className: `${variants[variant]} fa-${name} ${rounded ? '' : className}`,
     style: Object.assign({
       color,
-      fontSize: "".concat(size, "px")
+      fontSize: `${size}px`
     }, style || {})
   });
   if (rounded) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Span, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(Span, {
       ref: forwardedRef,
       size: size,
       color: color,
-      className: className
-    }, rest), {}, {
+      className: className,
+      ...rest,
       children: content
-    }));
+    });
   }
   return content;
 }
 Icon.propTypes = {
-  name: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  color: _propTypes.default.string,
-  rounded: _propTypes.default.bool,
-  variant: _propTypes.default.string,
-  size: _propTypes.default.number,
-  style: _propTypes.default.object
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  rounded: PropTypes.bool,
+  variant: PropTypes.string,
+  size: PropTypes.number,
+  style: PropTypes.object
 };
 Icon.defaultProps = {
   rounded: false,
   variant: 'light',
-  color: _Colors.default.grey[900],
+  color: colors.grey[900],
   className: '',
   size: 24,
   style: {}
 };
-const Span = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .fa,\n  .fas,\n  .fal,\n  .far {\n    line-height: ", "px;\n  }\n"])), props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
-var _default = exports.default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
+const Span = styled('span')`
+  width: ${props => props.size * 2}px;
+  height: ${props => props.size * 2}px;
+  border-radius: 50%;
+  border: 1px solid ${props => props.color};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .fa,
+  .fas,
+  .fal,
+  .far {
+    line-height: ${props => props.size}px;
+  }
+`;
+export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Icon, {
+  ...props,
   forwardedRef: ref
-}))), {
+})), {
   name: 'Icon',
   alternative: 'SVG icons'
 });

package/lib/Img/index.js

@@ -1,19 +1,12 @@
-"use strict";
+import { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useInView } from 'react-intersection-observer';
+import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
+import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
+import { Icon } from '@iconify/react';
+import { Box } from '@mui/material';
+import noop from 'lodash/noop';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactIntersectionObserver = require("react-intersection-observer");
-var _warningRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/warning-rounded"));
-var _imageRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/image-rounded"));
-var _react2 = require("@iconify/react");
-var _material = require("@mui/material");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
 /**
  * @typedef {Object} ImgExProps
  * @property {string} src - required
@@ -32,20 +25,15 @@ const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size",
  * @property {function} [onError=() => {}]
  * @property {function} [onSuccess=() => {}]
  */
+
 /**
  * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
  */
-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 : String(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; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREFIX = 'Img';
 const classes = {
-  root: "".concat(PREFIX, "-root")
+  root: `${PREFIX}-root`
 };
 
 /**
@@ -53,32 +41,31 @@ const classes = {
  * @param {ImgProps} props
  * @returns {React.ReactComponentElement}
  */
-function Img(_ref) {
-  let {
-      lazy,
-      width,
-      height,
-      repeat,
-      ratio,
-      alt,
-      size,
-      position,
-      src,
-      placeholder,
-      fallback,
-      style,
-      className,
-      onError,
-      onSuccess
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+function Img({
+  lazy,
+  width,
+  height,
+  repeat,
+  ratio,
+  alt,
+  size,
+  position,
+  src,
+  placeholder,
+  fallback,
+  style,
+  className,
+  onError,
+  onSuccess,
+  ...rest
+}) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [ref, inView] = lazy ? (0, _reactIntersectionObserver.useInView)({
+  const [ref, inView] = lazy ? useInView({
     threshold: 0,
     triggerOnce: true
   }) : [null, true];
-  const [imgState, setImgState] = (0, _react.useState)('init');
-  const actualSrc = (0, _react.useMemo)(() => {
+  const [imgState, setImgState] = useState('init');
+  const actualSrc = useMemo(() => {
     switch (imgState) {
       case 'init':
       case 'loading':
@@ -92,12 +79,12 @@ function Img(_ref) {
     }
   }, [placeholder, fallback, src, imgState]);
   const actualRatio = width && height ? 100 * height / width : ratio * 100;
-  const mergedStyle = (0, _react.useMemo)(() => ({
-    backgroundImage: actualSrc ? "url(".concat(actualSrc, ")") : '',
+  const mergedStyle = useMemo(() => ({
+    backgroundImage: actualSrc ? `url(${actualSrc})` : '',
     backgroundPosition: position,
     backgroundSize: size,
     backgroundRepeat: repeat,
-    paddingTop: "".concat(actualRatio, "%")
+    paddingTop: `${actualRatio}%`
   }),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [actualSrc, position, size, imgState]);
@@ -105,10 +92,11 @@ function Img(_ref) {
   /**
    * @type {CSSStyleDeclaration}
    */
-  const outerStyle = _objectSpread(_objectSpread({}, style), {}, {
+  const outerStyle = {
+    ...style,
     display: 'inline-block',
-    width: width ? "".concat(width, "px") : '100%'
-  });
+    width: width ? `${width}px` : '100%'
+  };
   function loadImg() {
     const img = new Image();
     img.src = src;
@@ -122,20 +110,20 @@ function Img(_ref) {
       onError(err);
     };
   }
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (inView) loadImg();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inView]);
   return (
     /*#__PURE__*/
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    (0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
+    _jsx(Box, {
       "data-id": "2",
       ref: ref,
-      style: outerStyle
-    }, rest), {}, {
-      sx: _objectSpread({
-        ["& .".concat(classes.root)]: {
+      style: outerStyle,
+      ...rest,
+      sx: {
+        [`& .${classes.root}`]: {
           position: 'relative',
           overflow: 'hidden',
           '& .image--state, & .image--img': {
@@ -165,50 +153,51 @@ function Img(_ref) {
             maxWidth: '80%',
             maxHeight: '80%'
           }
-        }
-      }, rest.sx),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "image ".concat(className, " ").concat(classes.root),
+        },
+        ...rest.sx
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: `image ${className} ${classes.root}`,
         style: mergedStyle,
-        children: [!fallback && imgState === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [!fallback && imgState === 'error' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "loading image",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _warningRounded.default,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: WarningRoundedIcon,
             className: "image--icon"
           })
-        }), !placeholder && imgState === 'loading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "Image load error",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _imageRounded.default,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ImageRoundedIcon,
             className: "image--icon"
           })
-        }), imgState === 'loaded' && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        }), imgState === 'loaded' && /*#__PURE__*/_jsx("img", {
           className: "image--img",
           src: src,
           alt: alt
         })]
       })
-    }))
+    })
   );
 }
 Img.propTypes = {
-  src: _propTypes.default.string.isRequired,
-  alt: _propTypes.default.string,
-  size: _propTypes.default.string,
-  position: _propTypes.default.string,
-  style: _propTypes.default.object,
-  ratio: _propTypes.default.number,
-  repeat: _propTypes.default.string,
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  lazy: _propTypes.default.bool,
-  placeholder: _propTypes.default.string,
-  fallback: _propTypes.default.string,
-  className: _propTypes.default.string,
-  onError: _propTypes.default.func,
-  onSuccess: _propTypes.default.func
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  size: PropTypes.string,
+  position: PropTypes.string,
+  style: PropTypes.object,
+  ratio: PropTypes.number,
+  repeat: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  lazy: PropTypes.bool,
+  placeholder: PropTypes.string,
+  fallback: PropTypes.string,
+  className: PropTypes.string,
+  onError: PropTypes.func,
+  onSuccess: PropTypes.func
 };
 Img.defaultProps = {
   alt: null,
@@ -223,7 +212,7 @@ Img.defaultProps = {
   placeholder: null,
   fallback: null,
   className: '',
-  onError: _noop.default,
-  onSuccess: _noop.default
+  onError: noop,
+  onSuccess: noop
 };
-var _default = exports.default = Img;
+export default Img;

package/lib/InfoRow/index.js

@@ -1,69 +1,87 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
-var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["name", "nameFormatter", "layout", "children", "valueComponent", "nameWidth"];
-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 : String(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 InfoRow(_ref) {
-  let {
-      name,
-      nameFormatter,
-      layout,
-      children,
-      valueComponent,
-      nameWidth
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
+import PropTypes from 'prop-types';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
+import Typography from '@mui/material/Typography';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function InfoRow({
+  name,
+  nameFormatter,
+  layout,
+  children,
+  valueComponent,
+  nameWidth,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Container, {
     layout: layout,
-    width: nameWidth
-  }, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    width: nameWidth,
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Typography, {
       color: "textSecondary",
       className: "info-row__name",
       children: nameFormatter(name)
-    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    }), children && /*#__PURE__*/_jsx(Typography, {
       color: "textPrimary",
       component: valueComponent,
       className: "info-row__value",
       children: children
     })]
-  }));
+  });
 }
 InfoRow.propTypes = {
-  name: _propTypes.default.any.isRequired,
-  layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
-  children: _propTypes.default.any,
-  nameFormatter: _propTypes.default.func,
-  valueComponent: _propTypes.default.string,
-  nameWidth: _propTypes.default.number
+  name: PropTypes.any.isRequired,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  children: PropTypes.any,
+  nameFormatter: PropTypes.func,
+  valueComponent: PropTypes.string,
+  nameWidth: PropTypes.number
 };
 InfoRow.defaultProps = {
   children: null,
   nameWidth: 90,
   nameFormatter: name => {
-    const resetName = name.split(' ').map(x => (0, _upperFirst.default)((0, _camelCase.default)(x))).join(' ');
+    const resetName = name.split(' ').map(x => upperFirst(camelCase(x))).join(' ');
     return typeof name === 'string' ? resetName : name;
   },
   valueComponent: 'div',
   layout: 'horizontal'
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-start;\n  align-items: ", ";\n  margin-bottom: 16px;\n\n  .info-row__name {\n    width: ", "px;\n    margin-right: ", ";\n    margin-bottom: ", ";\n    text-transform: capitalize;\n  }\n\n  .info-row__value {\n    flex: 1;\n    overflow: auto;\n    word-wrap: break-word;\n    font-weight: 500;\n  }\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    .info-row__name {\n      font-weight: bold;\n    }\n\n    .info-row__value {\n      width: 100%;\n      font-size: 12px;\n      margin-top: 8px;\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? 'flex-start' : 'center', props => props.width, props => props.layout === 'vertical' ? '0' : '8px', props => props.layout === 'vertical' ? '8px' : '0', props => props.theme.breakpoints.values.md);
-var _default = exports.default = InfoRow;
+const Container = styled('div')`
+  display: flex;
+  flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+  justify-content: flex-start;
+  align-items: ${props => props.layout === 'vertical' ? 'flex-start' : 'center'};
+  margin-bottom: 16px;
+
+  .info-row__name {
+    width: ${props => props.width}px;
+    margin-right: ${props => props.layout === 'vertical' ? '0' : '8px'};
+    margin-bottom: ${props => props.layout === 'vertical' ? '8px' : '0'};
+    text-transform: capitalize;
+  }
+
+  .info-row__value {
+    flex: 1;
+    overflow: auto;
+    word-wrap: break-word;
+    font-weight: 500;
+  }
+
+  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .info-row__name {
+      font-weight: bold;
+    }
+
+    .info-row__value {
+      width: 100%;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+  }
+`;
+export default InfoRow;

package/lib/Layout/dashboard/external-link.js

@@ -1,72 +1,57 @@
-"use strict";
+import PropTypes from 'prop-types';
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Link = Link;
-exports.NavLink = NavLink;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactRouterDom = require("react-router-dom");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "routerLinkComponent", "to", "external"],
-  _excluded2 = ["className"]; // 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
-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 : String(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 ExternalLink(_ref) {
-  let {
-      children,
-      routerLinkComponent: RouterLinkComponent,
-      to,
-      external
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+import { jsx as _jsx } from "react/jsx-runtime";
+function ExternalLink({
+  children,
+  routerLinkComponent: RouterLinkComponent,
+  to,
+  external,
+  ...rest
+}) {
   if (external) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
-      href: to
-    }, rest), {}, {
+    return /*#__PURE__*/_jsx("a", {
+      href: to,
+      ...rest,
       children: children
-    }));
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinkComponent, _objectSpread(_objectSpread({
-    to: to
-  }, rest), {}, {
+  return /*#__PURE__*/_jsx(RouterLinkComponent, {
+    to: to,
+    ...rest,
     children: children
-  }));
+  });
 }
 ExternalLink.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  routerLinkComponent: _propTypes.default.elementType.isRequired,
-  external: _propTypes.default.bool,
-  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired
+  children: PropTypes.any.isRequired,
+  routerLinkComponent: PropTypes.elementType.isRequired,
+  external: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
 };
 ExternalLink.defaultProps = {
   external: false
 };
-function Link(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
-    routerLinkComponent: _reactRouterDom.Link
-  }, props));
+export function Link(props) {
+  return /*#__PURE__*/_jsx(ExternalLink, {
+    routerLinkComponent: RouterLink,
+    ...props
+  });
 }
-function NavLink(_ref2) {
-  let {
-      className
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+export function NavLink({
+  className,
+  ...rest
+}) {
   // NavLink#className 支持 function
   const classes = rest.external && typeof className === 'function' ? className({}) : className;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExternalLink, _objectSpread({
-    routerLinkComponent: _reactRouterDom.NavLink,
-    className: classes
-  }, rest));
+  return /*#__PURE__*/_jsx(ExternalLink, {
+    routerLinkComponent: RouterNavLink,
+    className: classes,
+    ...rest
+  });
 }
 NavLink.propTypes = {
-  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
 NavLink.defaultProps = {
   className: ''