@arcblock/ux 2.9.90 → 2.10.0

package/lib/ButtonGroup/index.js

@@ -1,12 +1,6 @@
-"use strict";
+import ButtonGroup from '@mui/material/ButtonGroup';
+import wrap from '../Button/wrap';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
-var _wrap = _interopRequireDefault(require("../Button/wrap"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
 // (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
-var _default = exports.default = (0, _wrap.default)(_ButtonGroup.default);
+export default wrap(ButtonGroup);

package/lib/CardSelector/index.js

@@ -1,29 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CardSelector;
-var _react = require("react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function CardSelector(_ref) {
-  let {
-    list,
-    width,
-    height,
-    cardSpace,
-    onSelect,
-    defaultIndex
-  } = _ref;
-  const [selectedId, setSelectedId] = (0, _react.useState)(0);
-  const [translateX, setTranslateX] = (0, _react.useState)(0);
-  const outterCon = (0, _react.useRef)(null);
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CardSelector({
+  list,
+  width,
+  height,
+  cardSpace,
+  onSelect,
+  defaultIndex
+}) {
+  const [selectedId, setSelectedId] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const outterCon = useRef(null);
 
   // 选择卡片
   const selectedItem = i => {
@@ -37,7 +27,7 @@ function CardSelector(_ref) {
     setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
     onSelect(i);
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     selectedItem(defaultIndex);
     const func = e => e.preventDefault();
     outterCon.current.addEventListener('touchmove', func, {
@@ -61,19 +51,19 @@ function CardSelector(_ref) {
       }
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Contianer, {
+  return /*#__PURE__*/_jsx(Contianer, {
     ref: outterCon,
     onTouchStart: touchstart,
     onTouchEnd: touchend,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/_jsx("div", {
       className: "card-container",
       style: {
-        transform: "translate(".concat(-translateX, "px, 0)")
+        transform: `translate(${-translateX}px, 0)`
       },
       children: list.map((e, i) => {
         if (e instanceof Function) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+          return /*#__PURE__*/_jsx("div", {
+            className: `card-item ${i === selectedId ? 'selected' : ''}`,
             style: {
               width,
               height,
@@ -86,8 +76,8 @@ function CardSelector(_ref) {
             children: e(i)
           }, i);
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+        return /*#__PURE__*/_jsx("div", {
+          className: `card-item ${i === selectedId ? 'selected' : ''}`,
           style: {
             width,
             height,
@@ -97,7 +87,7 @@ function CardSelector(_ref) {
           ,
 
           onClick: () => selectedItem(i),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          children: /*#__PURE__*/_jsx("img", {
             src: e.src,
             alt: e.name
           })
@@ -106,20 +96,54 @@ function CardSelector(_ref) {
     })
   });
 }
-const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img,\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img,\n      svg {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+const Contianer = styled.div`
+  overflow: hidden;
+  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
+  overflow: hidden;
+  .card-container {
+    display: flex;
+    white-space: nowrap;
+    width: max-content;
+    transition: all ease 0.3s;
+  }
+  .card-item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    img,
+    svg {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      outline: #526ded solid 0;
+      transition: all ease 0.2s;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
+    }
+    &.selected {
+      cursor: default;
+      img,
+      svg {
+        outline: #526ded solid 5px;
+      }
+    }
+  }
+`;
 CardSelector.propTypes = {
-  list: _propTypes.default.array,
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  cardSpace: _propTypes.default.number,
-  onSelect: _propTypes.default.func,
-  defaultIndex: _propTypes.default.number
+  list: PropTypes.array,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  cardSpace: PropTypes.number,
+  onSelect: PropTypes.func,
+  defaultIndex: PropTypes.number
 };
 CardSelector.defaultProps = {
   list: '',
   width: 300,
   height: 400,
   cardSpace: 40,
-  onSelect: _noop.default,
+  onSelect: noop,
   defaultIndex: 0
 };

package/lib/Center/index.js

@@ -1,25 +1,16 @@
-"use strict";
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Center;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
 /**
  *
  * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
  * @returns react component element
  */
-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 Center(_ref) {
-  let {
-    children,
-    relative
-  } = _ref;
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Center({
+  children,
+  relative
+}) {
   let style = {};
   if (relative === 'parent') {
     style = {
@@ -27,15 +18,23 @@ function Center(_ref) {
       height: '100%'
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+  return /*#__PURE__*/_jsx(Div, {
     style: style,
     children: children
   });
 }
-const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  width: 100vw;\n  height: 100vh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+const Div = styled('div')`
+  flex: 1;
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 Center.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  relative: _propTypes.default.string
+  children: PropTypes.any.isRequired,
+  relative: PropTypes.string
 };
 Center.defaultProps = {
   relative: 'screen'

package/lib/ClickToCopy/copy-button.js

@@ -1,68 +1,55 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CopyButton;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _colors = require("@mui/material/colors");
-var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _hook = _interopRequireDefault(require("./hook"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["content", "locale", "render", "showTooltip"];
-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 CopyButton(_ref) {
-  let {
-      content,
-      locale,
-      render,
-      showTooltip
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+import PropTypes from 'prop-types';
+import Tooltip from '@mui/material/Tooltip';
+import { green } from '@mui/material/colors';
+import CopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import useCopy from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CopyButton({
+  content,
+  locale,
+  render,
+  showTooltip,
+  ...rest
+}) {
   const {
     containerRef,
     copied,
     copy,
     texts
-  } = (0, _hook.default)({
+  } = useCopy({
     content,
     locale
   });
   const iconStyle = {
     fontSize: '1em'
   };
-  const copyButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
-    title: copied ? '' : texts.copy
-  }, rest), {}, {
-    style: _objectSpread({
-      height: '1em'
-    }, rest.style),
-    children: copied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+  const copyButton = /*#__PURE__*/_jsx("span", {
+    title: copied ? '' : texts.copy,
+    ...rest,
+    style: {
+      height: '1em',
+      ...rest.style
+    },
+    children: copied ? /*#__PURE__*/_jsx(Tooltip, {
       title: texts.copied,
       placement: "bottom",
       arrow: true,
       open: copied && showTooltip,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-        sx: _objectSpread(_objectSpread({}, iconStyle), {}, {
-          color: _colors.green[500]
-        })
+      children: /*#__PURE__*/_jsx(CheckIcon, {
+        sx: {
+          ...iconStyle,
+          color: green[500]
+        }
       })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentCopy.default, {
+    }) : /*#__PURE__*/_jsx(CopyIcon, {
       onClick: copy,
-      sx: _objectSpread(_objectSpread({}, iconStyle), {}, {
+      sx: {
+        ...iconStyle,
         cursor: 'pointer'
-      })
+      }
     })
-  }));
+  });
   if (render) {
     return render({
       copyButton,
@@ -72,10 +59,10 @@ function CopyButton(_ref) {
   return copyButton;
 }
 CopyButton.propTypes = {
-  content: _propTypes.default.string,
-  locale: _propTypes.default.oneOf(['en', 'zh']),
-  render: _propTypes.default.func,
-  showTooltip: _propTypes.default.bool
+  content: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  render: PropTypes.func,
+  showTooltip: PropTypes.bool
 };
 CopyButton.defaultProps = {
   content: '',

package/lib/ClickToCopy/hook.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useCopy;
-var _react = require("react");
-var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { useState, useEffect, useRef } from 'react';
+import Copy from 'copy-to-clipboard';
 const translations = {
   en: {
     copy: 'Click To Copy',
@@ -17,21 +10,20 @@ const translations = {
     copied: '已复制!'
   }
 };
-function useCopy(_ref) {
-  let {
-    content,
-    locale = 'en'
-  } = _ref;
-  const [copied, setCopied] = (0, _react.useState)(false);
-  const containerRef = (0, _react.useRef)();
+export default function useCopy({
+  content,
+  locale = 'en'
+}) {
+  const [copied, setCopied] = useState(false);
+  const containerRef = useRef();
   const copy = e => {
     if (e) {
       e.stopPropagation();
     }
-    (0, _copyToClipboard.default)(content || containerRef.current.textContent);
+    Copy(content || containerRef.current.textContent);
     setCopied(true);
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     let timer = null;
     if (copied) {
       timer = setTimeout(() => setCopied(false), 2000);

package/lib/ClickToCopy/index.js

@@ -1,95 +1,70 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CopyButton", {
-  enumerable: true,
-  get: function get() {
-    return _copyButton.default;
-  }
-});
-exports.default = ClickToCopy;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ahooks = require("ahooks");
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _hook = _interopRequireDefault(require("./hook"));
-var _Toast = _interopRequireWildcard(require("../Toast"));
-var _Util = require("../Util");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _copyButton = _interopRequireDefault(require("./copy-button"));
-var _templateObject, _templateObject2;
-const _excluded = ["children", "content", "tip", "copiedTip", "tipPlacement", "locale", "style", "unstyled"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 ClickToCopy(props) {
-  const newProps = (0, _Util.mergeProps)(props, ClickToCopy, ['style']);
+import PropTypes from 'prop-types';
+import { useSize } from 'ahooks';
+import Tooltip from '@mui/material/Tooltip';
+import useCopy from './hook';
+import Toast, { ToastProvider } from '../Toast';
+import { mergeProps } from '../Util';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export { default as CopyButton } from './copy-button';
+export default function ClickToCopy(props) {
+  const newProps = mergeProps(props, ClickToCopy, ['style']);
   const {
-      children,
-      content,
-      tip,
-      copiedTip,
-      tipPlacement,
-      locale,
-      style,
-      unstyled
-    } = newProps,
-    rest = _objectWithoutProperties(newProps, _excluded);
+    children,
+    content,
+    tip,
+    copiedTip,
+    tipPlacement,
+    locale,
+    style,
+    unstyled,
+    ...rest
+  } = newProps;
   const {
     containerRef,
     copied,
     copy,
     texts
-  } = (0, _hook.default)({
+  } = useCopy({
     content,
     locale
   });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
-  const size = (0, _ahooks.useSize)(document.body);
-  const width = (size === null || size === void 0 ? void 0 : size.width) || 0;
+  const size = useSize(document.body);
+  const width = size?.width || 0;
   const onCopy = e => {
     copy(e);
     if (width < 600) {
-      _Toast.default.success(_copiedTip);
+      Toast.success(_copiedTip);
     }
   };
   const ContainerComponent = unstyled ? UnstyledContainer : Container;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.ToastProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, _objectSpread(_objectSpread({
-      title: copied ? _copiedTip : _tip
-    }, rest), {}, {
+  return /*#__PURE__*/_jsx(ToastProvider, {
+    children: /*#__PURE__*/_jsx(Tooltip, {
+      title: copied ? _copiedTip : _tip,
+      ...rest,
       placement: tipPlacement,
       disableFocusListener: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContainerComponent, {
+      children: /*#__PURE__*/_jsx(ContainerComponent, {
         ref: containerRef,
         style: style,
         onClick: onCopy,
         children: children || content
       })
-    }))
+    })
   });
 }
 ClickToCopy.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  content: _propTypes.default.string,
-  tip: _propTypes.default.string,
-  tipPlacement: _propTypes.default.string,
-  copiedTip: _propTypes.default.string,
-  locale: _propTypes.default.oneOf(['en', 'zh']),
-  style: _propTypes.default.object,
+  children: PropTypes.any.isRequired,
+  content: PropTypes.string,
+  tip: PropTypes.string,
+  tipPlacement: PropTypes.string,
+  copiedTip: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  style: PropTypes.object,
   // 仅提供点击复制功能, 不提供样式
-  unstyled: _propTypes.default.bool
+  unstyled: PropTypes.bool
 };
 ClickToCopy.defaultProps = {
   content: '',
@@ -100,5 +75,18 @@ ClickToCopy.defaultProps = {
   style: {},
   unstyled: false
 };
-const Container = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));
-const UnstyledContainer = (0, _Theme.styled)('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));
+const Container = styled('span')`
+  display: inline;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  align-items: center;
+  justify-content: start;
+  border-radius: 15px;
+  padding: 1px 12px;
+  background-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+`;
+const UnstyledContainer = styled('span')`
+  cursor: pointer;
+`;

package/lib/CodeBlock/LightBox.js

@@ -1,12 +1,85 @@
-"use strict";
+// highlight.js/styles/atom-one-light.css
+import styled from '@emotion/styled';
+const LightBox = styled('div')`
+  display: block;
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+  code.hljs {
+    padding: 3px 5px;
+  }
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+    font-style: italic;
+  }
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: #a626a4;
+  }
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: #e45649;
+  }
+  .hljs-literal {
+    color: #0184bb;
+  }
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #50a14f;
+  }
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: #986801;
+  }
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: #4078f2;
+  }
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: #c18401;
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: 700;
+  }
+  .hljs-link {
+    text-decoration: underline;
+  }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject; // highlight.js/styles/atom-one-light.css
-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 LightBox = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  pre code.hljs {\n    display: block;\n    overflow-x: auto;\n    padding: 1em;\n  }\n  code.hljs {\n    padding: 3px 5px;\n  }\n  .hljs {\n    color: #383a42;\n    background: #fafafa;\n  }\n  .hljs-comment,\n  .hljs-quote {\n    color: #a0a1a7;\n    font-style: italic;\n  }\n  .hljs-doctag,\n  .hljs-formula,\n  .hljs-keyword {\n    color: #a626a4;\n  }\n  .hljs-deletion,\n  .hljs-name,\n  .hljs-section,\n  .hljs-selector-tag,\n  .hljs-subst {\n    color: #e45649;\n  }\n  .hljs-literal {\n    color: #0184bb;\n  }\n  .hljs-addition,\n  .hljs-attribute,\n  .hljs-meta .hljs-string,\n  .hljs-regexp,\n  .hljs-string {\n    color: #50a14f;\n  }\n  .hljs-attr,\n  .hljs-number,\n  .hljs-selector-attr,\n  .hljs-selector-class,\n  .hljs-selector-pseudo,\n  .hljs-template-variable,\n  .hljs-type,\n  .hljs-variable {\n    color: #986801;\n  }\n  .hljs-bullet,\n  .hljs-link,\n  .hljs-meta,\n  .hljs-selector-id,\n  .hljs-symbol,\n  .hljs-title {\n    color: #4078f2;\n  }\n  .hljs-built_in,\n  .hljs-class .hljs-title,\n  .hljs-title.class_ {\n    color: #c18401;\n  }\n  .hljs-emphasis {\n    font-style: italic;\n  }\n  .hljs-strong {\n    font-weight: 700;\n  }\n  .hljs-link {\n    text-decoration: underline;\n  }\n\n  pre {\n    .copy-button {\n      > .default-text {\n        color: #222;\n      }\n    }\n  }\n"])));
-var _default = exports.default = LightBox;
+  pre {
+    .copy-button {
+      > .default-text {
+        color: #222;
+      }
+    }
+  }
+`;
+export default LightBox;