@arcblock/ux 2.4.13 → 2.4.14

package/lib/ActionButton/index.js

@@ -11,6 +11,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["href", "icon", "size", "color", "theme", "variant", "gradient", "children", "text"];
@@ -96,5 +98,9 @@ ActionButton.defaultProps = {
   size: 'large',
   children: null
 };
-var _default = ActionButton;
+
+var _default = (0, _deprecate.withDeprecated)(ActionButton, {
+  name: 'ActionButton'
+});
+
 exports.default = _default;

package/lib/Alert/index.js

@@ -19,6 +19,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -120,6 +122,11 @@ Alert.defaultProps = {
   style: '{}',
   variant: 'border'
 };
-var _default = Alert;
+
+var _default = (0, _deprecate.withDeprecated)(Alert, {
+  name: 'Alert',
+  alternative: '@mui/material/Alert'
+});
+
 exports.default = _default;
 const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  margin: 0;\n  padding: 16px;\n  margin: 16px 0;\n\n  strong {\n    margin: 0 5px;\n  }\n\n  .alert-icon {\n    margin-right: 16px;\n  }\n\n  .alert-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n"])));

package/lib/Badge/index.js

@@ -15,6 +15,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -98,9 +100,12 @@ Badge.defaultProps = {
   style: '{}'
 };
 
-var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, _objectSpread(_objectSpread({}, props), {}, {
+var _default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref
-})));
+}))), {
+  name: 'Badge',
+  alternative: '@arcblock/ux/lib/Tag'
+});
 
 exports.default = _default;
 const Span = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 24px;\n    line-height: 24px;\n  }\n"])));

package/lib/ContactForm/index.js

@@ -18,6 +18,8 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 
 var _Util = require("../Util");
 
+var _deprecate = require("../Util/deprecate");
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Theme = require("../Theme");
@@ -108,6 +110,7 @@ class ContactForm extends _react.default.Component {
     this.fields.forEach(x => {
       this.state[x] = '';
     });
+    (0, _deprecate.warn)('ContactForm');
   }
 
   deriveProps() {

package/lib/Earth/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Earth;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -21,6 +21,8 @@ var _countries = _interopRequireDefault(require("./countries.json"));
 
 var _util = _interopRequireDefault(require("./util"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -447,5 +449,11 @@ Earth.defaultProps = {
   activeMarkerId: undefined,
   colors: {}
 };
+
+var _default = (0, _deprecate.withDeprecated)(Earth, {
+  name: 'Earth'
+});
+
+exports.default = _default;
 const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  position: relative;\n  animation-name: zoomIn;\n  animation-duration: 1s;\n  animation-iteration-count: 1;\n  animation-timing-function: ease;\n  user-select: none;\n\n  .defs {\n    height: 0;\n    width: 0;\n  }\n\n  .frame {\n    fill: none;\n    pointer-events: all;\n  }\n\n  .country {\n    fill: ", ";\n    stroke: ", ";\n    stroke-width: 0.5px;\n    transition: fill 300ms ease;\n\n    &:hover {\n      fill: ", ";\n    }\n  }\n\n  .country--active {\n    fill: ", ";\n  }\n\n  .globe {\n    fill: ", ";\n    stroke: rgba(255, 255, 255, 0.5);\n    stroke-width: 0.25px;\n  }\n\n  .graticule {\n    fill: none;\n    stroke: ", ";\n  }\n\n  .star {\n    fill: #fff;\n    stroke: rgba(255, 255, 255, 0.5);\n    stroke-width: 0.25px;\n  }\n\n  .marker {\n    .marker__outer {\n      fill-opacity: 0;\n      animation: scaleIn 2s infinite ease-in-out;\n    }\n  }\n\n  @keyframes zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.1, 0.1, 0.1);\n    }\n\n    50% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes scaleIn {\n    from {\n      fill-opacity: 0.3;\n      transform: scale3d(0.5, 0.5, 0.5);\n    }\n    to {\n      fill-opacity: 0;\n      transform: scale3d(1.5, 1.5, 1.5);\n    }\n  }\n"])), props => props.theme === 'light' ? '#f7f7f7' : '#222', props => props.width, props => props.height, props => props.colors.land, props => props.colors.border, props => props.colors.activeLand, props => props.colors.activeLand, props => props.colors.ocean, props => props.colors.graticule);
 const Tooltip = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: auto;\n  min-width: 90px;\n  max-width: 320px;\n  padding: 8px 12px;\n  font-size: 14px;\n  background-color: #4a4a4a;\n  border-radius: 2px;\n  animation-name: fadeIn;\n  animation-duration: 250ms;\n  animation-iteration-count: 1;\n  animation-timing-function: ease;\n\n  .title,\n  .description {\n    margin: 0;\n    font-size: 16px;\n    color: #fff;\n  }\n\n  .description {\n    margin-top: ", "px;\n    color: #fff;\n    font-size: 12px;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.spacing(1));

package/lib/Footer/index.js

@@ -11,6 +11,8 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _Util = require("../Util");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
@@ -26,6 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 function Footer(props) {
+  var _window, _window$blocklet;
+
   const newProps = (0, _Util.mergeProps)(props, Footer, ['dark', 'style']);
   const {
     className,
@@ -37,11 +41,11 @@ function Footer(props) {
   const endYearString = "".concat(new Date().getFullYear());
   const copyStartString = "".concat(copyStart);
   const copyYear = endYearString === copyStartString ? endYearString : "".concat(copyStartString, "-").concat(endYearString);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     className: className,
     style: style,
     dark: dark,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
       maxWidth: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
         component: "div",
@@ -70,7 +74,19 @@ function Footer(props) {
           })]
         })]
       })
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      sx: {
+        color: 'transparent',
+        '::selection': {
+          background: '#000',
+          color: '#fff'
+        }
+      },
+      children: (_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.version
+    })]
   });
 }
 
@@ -88,7 +104,7 @@ Footer.defaultProps = {
   className: '',
   style: {}
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
   let {
     theme,
     dark

package/lib/Icon/index.js

@@ -13,6 +13,8 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -94,8 +96,11 @@ Icon.defaultProps = {
 };
 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 = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
+var _default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref
-})));
+}))), {
+  name: 'Icon',
+  alternative: 'SVG icons'
+});
 
 exports.default = _default;

package/lib/PageScroller/index.js

@@ -17,6 +17,8 @@ var _isNull = _interopRequireDefault(require("lodash/isNull"));
 
 var _usePrevValue = _interopRequireDefault(require("./usePrevValue"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -318,5 +320,9 @@ PageScroller.defaultProps = {
   renderAllPagesOnFirstRender: false,
   customPageNumber: undefined
 };
-var _default = PageScroller;
+
+var _default = (0, _deprecate.withDeprecated)(PageScroller, {
+  name: 'PageScroller'
+});
+
 exports.default = _default;

package/lib/PricingTable/index.js

@@ -13,6 +13,8 @@ var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -53,7 +55,10 @@ function PricingTable(_ref) {
   return null;
 }
 
-var _default = PricingTable;
+var _default = (0, _deprecate.withDeprecated)(PricingTable, {
+  name: 'PricingTable'
+});
+
 exports.default = _default;
 PricingTable.propTypes = {
   plans: _propTypes.default.array.isRequired

package/lib/Spinner/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Spinner;
+exports.default = void 0;
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,4 +36,11 @@ function Spinner(props) {
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, _objectSpread({}, _props));
-}
+}
+
+var _default = (0, _deprecate.withDeprecated)(Spinner, {
+  name: 'Spinner',
+  alternative: '@mui/material/CircularProgress'
+});
+
+exports.default = _default;

package/lib/TextCollapse/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = TextCollapse;
+exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -11,6 +11,8 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Theme = require("../Theme");
 
+var _deprecate = require("../Util/deprecate");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -92,4 +94,10 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
+
+var _default = (0, _deprecate.withDeprecated)(TextCollapse, {
+  name: 'TextCollapse'
+});
+
+exports.default = _default;
 const Container = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n\n  .start-part,\n  .end-part {\n    display: inline-block;\n    vertical-align: bottom;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .start-part {\n    max-width: calc(100% - ", ");\n    min-width: ", ";\n    text-overflow: ellipsis;\n  }\n  .end-part {\n    max-width: calc(100% - ", ");\n    direction: rtl;\n  }\n"])), props => props.endwidth, props => props.startwidth, props => props.startwidth);

package/lib/Util/deprecate.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withDeprecated = exports.warn = void 0;
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const warn = (name, alternative) => {
+  var _console;
+
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  if (typeof ((_console = console) === null || _console === void 0 ? void 0 : _console.warn) === 'function') {
+    if (alternative) {
+      console.warn("DEPRECATED: ".concat(name, " is deprecated, use ").concat(alternative, " instead."));
+    } else {
+      console.warn("DEPRECATED: ".concat(name, " is deprecated."));
+    }
+  }
+};
+
+exports.warn = warn;
+
+const withDeprecated = (Component, _ref) => {
+  let {
+    name,
+    alternative
+  } = _ref;
+  return function Deprecated(props) {
+    (0, _react.useEffect)(() => {
+      warn(name, alternative);
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread({}, props));
+  };
+};
+
+exports.withDeprecated = withDeprecated;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.13",
+  "version": "2.4.14",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,10 +47,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "f374463572e397b959e9c1ce70cdbc9f53f99076",
+  "gitHead": "3bc65e4ac9040d63f8b1a732c647c24d3156f20b",
   "dependencies": {
-    "@arcblock/icons": "^2.4.13",
-    "@arcblock/react-hooks": "^2.4.13",
+    "@arcblock/icons": "^2.4.14",
+    "@arcblock/react-hooks": "^2.4.14",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",

package/src/ActionButton/index.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
 
 function ActionButton(props) {
   const newProps = mergeProps(props, ActionButton);
@@ -61,4 +62,4 @@ ActionButton.defaultProps = {
   children: null,
 };
 
-export default ActionButton;
+export default withDeprecated(ActionButton, { name: 'ActionButton' });

package/src/Alert/index.js

@@ -6,6 +6,7 @@ import Icon from '../Icon';
 import { mergeProps } from '../Util';
 import colors from '../Colors';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 const types = {
   error: {
@@ -72,7 +73,7 @@ Alert.defaultProps = {
   variant: 'border',
 };
 
-export default Alert;
+export default withDeprecated(Alert, { name: 'Alert', alternative: '@mui/material/Alert' });
 
 const Container = styled('div')`
   display: flex;

package/src/Badge/index.js

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 
 import colors from '../Colors';
 import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
 
 const types = {
@@ -56,7 +57,10 @@ Badge.defaultProps = {
   style: '{}',
 };
 
-export default forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />);
+export default withDeprecated(
+  forwardRef((props, ref) => <Badge {...props} forwardedRef={ref} />),
+  { name: 'Badge', alternative: '@arcblock/ux/lib/Tag' }
+);
 
 const Span = styled(Typography)`
   && {

package/src/ContactForm/index.js

@@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
+import { warn as deprecatedWarn } from '../Util/deprecate';
 import Button from '../Button';
 import { styled } from '../Theme';
 
@@ -69,6 +70,7 @@ export default class ContactForm extends React.Component {
     this.fields.forEach((x) => {
       this.state[x] = '';
     });
+    deprecatedWarn('ContactForm');
   }
 
   deriveProps() {

package/src/Earth/index.js

@@ -8,6 +8,7 @@ import versor from 'versor';
 
 import json from './countries.json';
 import util from './util';
+import { withDeprecated } from '../Util/deprecate';
 import { styled } from '../Theme';
 
 const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
@@ -51,16 +52,7 @@ function stateReducer(state, action) {
   }
 }
 
-export default function Earth({
-  theme,
-  width,
-  height,
-  enableRotation,
-  rotationSpeed,
-  markers,
-  activeMarkerId,
-  colors,
-}) {
+function Earth({ theme, width, height, enableRotation, rotationSpeed, markers, activeMarkerId, colors }) {
   Object.assign(colors, themes[theme]);
   const [state, dispatch] = useReducer(stateReducer, {
     rotation: [0, 0, 0],
@@ -371,6 +363,8 @@ Earth.defaultProps = {
   colors: {},
 };
 
+export default withDeprecated(Earth, { name: 'Earth' });
+
 const Container = styled('div')`
   background-color: ${(props) => (props.theme === 'light' ? '#f7f7f7' : '#222')};
   width: ${(props) => props.width}px;

package/src/Footer/index.js

@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
+import Box from '@mui/material/Box';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
@@ -29,6 +30,13 @@ export default function Footer(props) {
           </Typography>
         </Typography>
       </MuiContainer>
+      <Box
+        position="absolute"
+        right={0}
+        bottom={0}
+        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        {window?.blocklet?.version}
+      </Box>
     </Container>
   );
 }
@@ -50,6 +58,7 @@ Footer.defaultProps = {
 };
 
 const Container = styled('div')`
+  position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;
   border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};

package/src/Icon/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import colors from '../Colors';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 const variants = {
   light: 'fal',
@@ -67,4 +68,7 @@ const Span = styled('span')`
   }
 `;
 
-export default forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />);
+export default withDeprecated(
+  forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />),
+  { name: 'Icon', alternative: 'SVG icons' }
+);

package/src/PageScroller/index.js

@@ -6,6 +6,7 @@ import isNil from 'lodash/isNil';
 import isNull from 'lodash/isNull';
 
 import usePrevious from './usePrevValue';
+import { withDeprecated } from '../Util/deprecate';
 
 const Events = {
   TOUCHMOVE: 'touchmove',
@@ -325,4 +326,4 @@ PageScroller.defaultProps = {
   customPageNumber: undefined,
 };
 
-export default PageScroller;
+export default withDeprecated(PageScroller, { name: 'PageScroller' });

package/src/PricingTable/index.js

@@ -3,6 +3,7 @@ import Grid from '@mui/material/Grid';
 
 import PricingPlan from './PricingPlan';
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
 function PricingTable({ plans }) {
   if (plans && plans.length > 0) {
@@ -22,7 +23,7 @@ function PricingTable({ plans }) {
   return null;
 }
 
-export default PricingTable;
+export default withDeprecated(PricingTable, { name: 'PricingTable' });
 
 PricingTable.propTypes = {
   plans: PropTypes.array.isRequired,

package/src/Spinner/index.js

@@ -1,4 +1,5 @@
 import CircularProgress from '@mui/material/CircularProgress';
+import { withDeprecated } from '../Util/deprecate';
 
 /**
  * Spinner
@@ -8,7 +9,7 @@ import CircularProgress from '@mui/material/CircularProgress';
  * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
  * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
  */
-export default function Spinner(props) {
+function Spinner(props) {
   const _props = { ...props };
   // 兼容之前的 size prop (设置外圈/内圈的尺寸)
   if (_props.size && Array.isArray(_props.size)) {
@@ -16,3 +17,5 @@ export default function Spinner(props) {
   }
   return <CircularProgress {..._props} />;
 }
+
+export default withDeprecated(Spinner, { name: 'Spinner', alternative: '@mui/material/CircularProgress' });

package/src/TextCollapse/index.js

@@ -2,17 +2,9 @@ import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 
 import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
 
-export default function TextCollapse({
-  children,
-  startChars,
-  endChars,
-  scaleFactor,
-  maxWidth,
-  style,
-  fontType,
-  ...rest
-}) {
+function TextCollapse({ children, startChars, endChars, scaleFactor, maxWidth, style, fontType, ...rest }) {
   if (typeof children !== 'string') {
     return null;
   }
@@ -59,6 +51,8 @@ TextCollapse.defaultProps = {
   fontType: 'normal',
 };
 
+export default withDeprecated(TextCollapse, { name: 'TextCollapse' });
+
 const Container = styled(Typography)`
   display: inline-flex;
   align-items: center;

package/src/Util/deprecate.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+const warn = (name, alternative) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  if (typeof console?.warn === 'function') {
+    if (alternative) {
+      console.warn(`DEPRECATED: ${name} is deprecated, use ${alternative} instead.`);
+    } else {
+      console.warn(`DEPRECATED: ${name} is deprecated.`);
+    }
+  }
+};
+
+const withDeprecated = (Component, { name, alternative }) => {
+  return function Deprecated(props) {
+    useEffect(() => {
+      warn(name, alternative);
+    }, []);
+    return <Component {...props} />;
+  };
+};
+
+export { warn, withDeprecated };