@arcblock/ux 2.9.91 → 2.10.0

package/lib/Earth/index.js

@@ -1,31 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _useSpring = _interopRequireDefault(require("react-use/lib/useSpring"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var d3 = _interopRequireWildcard(require("d3-geo"));
-var topojson = _interopRequireWildcard(require("topojson-client"));
-var _versor = _interopRequireDefault(require("versor"));
-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");
-var _templateObject, _templateObject2;
-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); } /* eslint-disable consistent-return */
-const geoJson = topojson.feature(_countries.default, _countries.default.objects.ne_110m_admin_0_countries);
+/* eslint-disable consistent-return */
+import { useReducer, useRef, useEffect } from 'react';
+import useSpring from 'react-use/lib/useSpring';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3-geo';
+import * as topojson from 'topojson-client';
+import versor from 'versor';
+import json from './countries.json';
+import util from './util';
+import { withDeprecated } from '../Util/deprecate';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
 const themes = {
   light: {
     ocean: '#EDF4F4',
@@ -49,15 +35,17 @@ const themes = {
 function stateReducer(state, action) {
   switch (action.type) {
     case 'dragEnd':
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return {
+        ...state,
         isDragging: false
-      });
+      };
     case 'dragStart':
-      return _objectSpread(_objectSpread({}, state), {}, {
+      return {
+        ...state,
         isDragging: true,
         animationDuration: 1,
         mousePosition: action.payload.mousePosition
-      });
+      };
     case 'tooltip':
     case 'rotate':
       return Object.assign({}, state, action.payload);
@@ -65,36 +53,35 @@ function stateReducer(state, action) {
       return state;
   }
 }
-function Earth(_ref) {
-  let {
-    theme,
-    width,
-    height,
-    enableRotation,
-    rotationSpeed,
-    markers,
-    activeMarkerId,
-    colors
-  } = _ref;
+function Earth({
+  theme,
+  width,
+  height,
+  enableRotation,
+  rotationSpeed,
+  markers,
+  activeMarkerId,
+  colors
+}) {
   Object.assign(colors, themes[theme]);
-  const [state, dispatch] = (0, _react.useReducer)(stateReducer, {
+  const [state, dispatch] = useReducer(stateReducer, {
     rotation: [0, 0, 0],
     isDragging: false,
     animateDuration: 1,
     mousePosition: null,
     tooltipIndex: -1
   });
-  const svgRef = (0, _react.useRef)(null);
+  const svgRef = useRef(null);
 
   // variables used to track drag and rotate
-  const dragRef = (0, _react.useRef)({
+  const dragRef = useRef({
     v0: undefined,
     r0: undefined,
     q0: undefined
   });
 
   // variables used to track start and end position when there is active marker
-  const rotateRef = (0, _react.useRef)({
+  const rotateRef = useRef({
     p1: null,
     p2: [0, 0],
     r1: null,
@@ -105,13 +92,13 @@ function Earth(_ref) {
   });
 
   // console.log('renderGlobe', state, dragRef.current, rotateRef.current, geoJson);
-  const t = (0, _useSpring.default)(state.animateDuration, 170, 26);
+  const t = useSpring(state.animateDuration, 170, 26);
   const isValid = activeMarkerId && rotateRef.current.markerId !== activeMarkerId && markers.some(x => x.id === activeMarkerId);
 
   // Setup path for globe
   const projection = d3.geoOrthographic().fitExtent([[30, 30], [width - 30, height - 30]], geoJson).rotate(t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv(t / state.animateDuration));
   const pathGenerator = d3.geoPath().projection(projection).pointRadius(2);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     // Rotate to active marker
     if (isValid) {
       // eslint-disable-next-line prefer-const
@@ -129,7 +116,7 @@ function Earth(_ref) {
         p2 = [marker.longitude, marker.latitude];
         r1 = r2;
         r2 = [-p2[0], 20 - p2[1], projection.rotate()[2]];
-        const iv = _util.default.interpolateAngles(r1, r2);
+        const iv = util.interpolateAngles(r1, r2);
         Object.assign(rotateRef.current, {
           p1,
           p2,
@@ -174,9 +161,9 @@ function Earth(_ref) {
     if (!mousePosition[0]) {
       return;
     }
-    dragRef.current.v0 = _versor.default.cartesian(projection.invert(mousePosition));
+    dragRef.current.v0 = versor.cartesian(projection.invert(mousePosition));
     dragRef.current.r0 = projection.rotate();
-    dragRef.current.q0 = (0, _versor.default)(dragRef.current.r0);
+    dragRef.current.q0 = versor(dragRef.current.r0);
     dispatch({
       type: 'dragStart',
       payload: {
@@ -194,9 +181,9 @@ function Earth(_ref) {
       v0,
       q0
     } = dragRef.current;
-    const v1 = _versor.default.cartesian(projection.rotate(r0).invert(mousePosition));
-    const q1 = _versor.default.multiply(q0, _versor.default.delta(v0, v1));
-    const r1 = _versor.default.rotation(q1);
+    const v1 = versor.cartesian(projection.rotate(r0).invert(mousePosition));
+    const q1 = versor.multiply(q0, versor.delta(v0, v1));
+    const r1 = versor.rotation(q1);
     dispatch({
       type: 'rotate',
       payload: {
@@ -235,13 +222,13 @@ function Earth(_ref) {
     // eslint-disable-next-line no-nested-ternary
     const fill = distance > 1.57 ? 'none' : isActive ? colors.activeMarker : colors.marker;
     const radius = isActive ? 9 : 6;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      className: "marker ".concat(isActive ? 'marker--active' : ''),
+    return /*#__PURE__*/_jsxs("g", {
+      className: `marker ${isActive ? 'marker--active' : ''}`,
       onFocus: event => onShowTooltip(event, i),
       onBlur: onHideTooltip,
       onMouseOver: event => onShowTooltip(event, i),
       onMouseOut: onHideTooltip,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      children: [/*#__PURE__*/_jsx("circle", {
         className: "marker__inner",
         r: radius,
         cx: sphereCoords[0],
@@ -250,7 +237,7 @@ function Earth(_ref) {
         style: {
           fillOpacity: isActive ? 1 : 0.5
         }
-      }, "marker-inner"), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      }, "marker-inner"), /*#__PURE__*/_jsx("circle", {
         className: "marker__outer",
         r: radius * 2,
         cx: sphereCoords[0],
@@ -258,8 +245,8 @@ function Earth(_ref) {
         fill: fill,
         style: {
           animationDuration: isActive ? '800ms' : '1600ms',
-          animationDelay: "".concat(i * 0.2, "s"),
-          transformOrigin: "".concat(sphereCoords[0], "px ").concat(sphereCoords[1], "px")
+          animationDelay: `${i * 0.2}s`,
+          transformOrigin: `${sphereCoords[0]}px ${sphereCoords[1]}px`
         }
       }, "marker-outer")]
     }, x.id);
@@ -267,18 +254,18 @@ function Earth(_ref) {
   const renderTooltip = () => {
     if (state.tooltipIndex >= 0) {
       const marker = markers[state.tooltipIndex];
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip, {
+      return /*#__PURE__*/_jsxs(Tooltip, {
         style: {
           left: state.mousePosition[0],
           top: state.mousePosition[1]
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: [/*#__PURE__*/_jsx("p", {
           className: "title",
           children: marker.title
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        }), /*#__PURE__*/_jsx("p", {
           className: "description",
           children: marker.description
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        }), /*#__PURE__*/_jsxs("p", {
           className: "description",
           children: ["ID: ", marker.id]
         })]
@@ -290,13 +277,13 @@ function Earth(_ref) {
     const activeMarker = markers.find(x => x.id === activeMarkerId);
     activeCountry = geoJson.features.findIndex(x => x.properties && x.properties.name && x.properties.name === activeMarker.country);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     width: width,
     height: height,
     theme: theme,
     colors: colors,
     onMouseLeave: onDragEnd,
-    children: [renderTooltip(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    children: [renderTooltip(), /*#__PURE__*/_jsxs("svg", {
       className: "earth",
       width: width,
       height: height,
@@ -304,69 +291,69 @@ function Earth(_ref) {
       onMouseMove: onDrag,
       onMouseUp: onDragEnd,
       ref: svgRef,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      children: [/*#__PURE__*/_jsx("rect", {
         className: "frame",
         width: width,
         height: height
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      }), /*#__PURE__*/_jsx("circle", {
         cx: width / 2,
         cy: height / 2,
         r: projection.scale(),
         className: "globe",
         filter: "url(#glow)"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         className: "graticule",
         d: pathGenerator(d3.geoGraticule().step([10, 10])())
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      }), /*#__PURE__*/_jsx("g", {
         className: "features",
-        children: geoJson.features.map((x, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-          className: "country ".concat(activeCountry === i ? 'country--active' : ''),
+        children: geoJson.features.map((x, i) => /*#__PURE__*/_jsx("path", {
+          className: `country ${activeCountry === i ? 'country--active' : ''}`,
           d: pathGenerator(x)
         }, x.properties.name))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      }), /*#__PURE__*/_jsx("g", {
         className: "markers",
         children: renderMarkers()
-      }), state.isDragging && state.mousePosition && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), state.isDragging && state.mousePosition && /*#__PURE__*/_jsx("path", {
         className: "point point-mouse",
         d: pathGenerator({
           type: 'Point',
           coordinates: projection.invert(state.mousePosition)
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    }), /*#__PURE__*/_jsx("svg", {
       className: "defs",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
+      children: /*#__PURE__*/_jsxs("defs", {
+        children: [/*#__PURE__*/_jsxs("linearGradient", {
           id: "gradBlue",
           x1: "0%",
           y1: "0%",
           x2: "100%",
           y2: "0%",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+          children: [/*#__PURE__*/_jsx("stop", {
             offset: "0%",
             style: {
               stopColor: '#005C99',
               stopOpacity: 1
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+          }), /*#__PURE__*/_jsx("stop", {
             offset: "100%",
             style: {
               stopColor: '#0099FF',
               stopOpacity: 1
             }
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("filter", {
+        }), /*#__PURE__*/_jsxs("filter", {
           id: "glow",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("feColorMatrix", {
+          children: [/*#__PURE__*/_jsx("feColorMatrix", {
             type: "matrix",
             values: "0 0 0 0   0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1   0"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("feGaussianBlur", {
+          }), /*#__PURE__*/_jsx("feGaussianBlur", {
             stdDeviation: "5.5",
             result: "coloredBlur"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("feMerge", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("feMergeNode", {
+          }), /*#__PURE__*/_jsxs("feMerge", {
+            children: [/*#__PURE__*/_jsx("feMergeNode", {
               in: "coloredBlur"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("feMergeNode", {
+            }), /*#__PURE__*/_jsx("feMergeNode", {
               in: "SourceGraphic"
             })]
           })]
@@ -376,28 +363,28 @@ function Earth(_ref) {
   });
 }
 Earth.propTypes = {
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  width: _propTypes.default.number,
-  height: _propTypes.default.number,
-  enableRotation: _propTypes.default.bool,
-  rotationSpeed: _propTypes.default.number,
-  activeMarkerId: _propTypes.default.string,
-  markers: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    title: _propTypes.default.string.isRequired,
-    description: _propTypes.default.string.isRequired,
-    country: _propTypes.default.string.isRequired,
-    latitude: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    longitude: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+  theme: PropTypes.oneOf(['light', 'dark']),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  enableRotation: PropTypes.bool,
+  rotationSpeed: PropTypes.number,
+  activeMarkerId: PropTypes.string,
+  markers: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    country: PropTypes.string.isRequired,
+    latitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    longitude: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
   })),
-  colors: _propTypes.default.shape({
-    ocean: _propTypes.default.string,
-    graticule: _propTypes.default.string,
-    land: _propTypes.default.string,
-    activeLand: _propTypes.default.string,
-    border: _propTypes.default.string,
-    marker: _propTypes.default.string,
-    activeMarker: _propTypes.default.string
+  colors: PropTypes.shape({
+    ocean: PropTypes.string,
+    graticule: PropTypes.string,
+    land: PropTypes.string,
+    activeLand: PropTypes.string,
+    border: PropTypes.string,
+    marker: PropTypes.string,
+    activeMarker: PropTypes.string
   })
 };
 Earth.defaultProps = {
@@ -410,8 +397,125 @@ Earth.defaultProps = {
   activeMarkerId: undefined,
   colors: {}
 };
-var _default = exports.default = (0, _deprecate.withDeprecated)(Earth, {
+export default withDeprecated(Earth, {
   name: 'Earth'
 });
-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));
+const Container = styled('div')`
+  background-color: ${props => props.theme === 'light' ? '#f7f7f7' : '#222'};
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  position: relative;
+  animation-name: zoomIn;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-timing-function: ease;
+  user-select: none;
+
+  .defs {
+    height: 0;
+    width: 0;
+  }
+
+  .frame {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .country {
+    fill: ${props => props.colors.land};
+    stroke: ${props => props.colors.border};
+    stroke-width: 0.5px;
+    transition: fill 300ms ease;
+
+    &:hover {
+      fill: ${props => props.colors.activeLand};
+    }
+  }
+
+  .country--active {
+    fill: ${props => props.colors.activeLand};
+  }
+
+  .globe {
+    fill: ${props => props.colors.ocean};
+    stroke: rgba(255, 255, 255, 0.5);
+    stroke-width: 0.25px;
+  }
+
+  .graticule {
+    fill: none;
+    stroke: ${props => props.colors.graticule};
+  }
+
+  .star {
+    fill: #fff;
+    stroke: rgba(255, 255, 255, 0.5);
+    stroke-width: 0.25px;
+  }
+
+  .marker {
+    .marker__outer {
+      fill-opacity: 0;
+      animation: scaleIn 2s infinite ease-in-out;
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale3d(0.1, 0.1, 0.1);
+    }
+
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      fill-opacity: 0.3;
+      transform: scale3d(0.5, 0.5, 0.5);
+    }
+    to {
+      fill-opacity: 0;
+      transform: scale3d(1.5, 1.5, 1.5);
+    }
+  }
+`;
+const Tooltip = styled('div')`
+  position: absolute;
+  width: auto;
+  min-width: 90px;
+  max-width: 320px;
+  padding: 8px 12px;
+  font-size: 14px;
+  background-color: #4a4a4a;
+  border-radius: 2px;
+  animation-name: fadeIn;
+  animation-duration: 250ms;
+  animation-iteration-count: 1;
+  animation-timing-function: ease;
+
+  .title,
+  .description {
+    margin: 0;
+    font-size: 16px;
+    color: #fff;
+  }
+
+  .description {
+    margin-top: ${props => props.theme.spacing(1)}px;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+`;

package/lib/Earth/util.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /* eslint-disable */
 // Code from: https://observablehq.com/@d3/world-tour
-class Util {
-  static fromAngles(_ref) {
-    let [l, p, g] = _ref;
+export default class Util {
+  static fromAngles([l, p, g]) {
     l *= Math.PI / 360;
     p *= Math.PI / 360;
     g *= Math.PI / 360;
@@ -20,17 +13,14 @@ class Util {
     const cg = Math.cos(g);
     return [cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg];
   }
-  static toAngles(_ref2) {
-    let [a, b, c, d] = _ref2;
+  static toAngles([a, b, c, d]) {
     return [Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI];
   }
   static interpolateAngles(a, b) {
     const i = Util.interpolate(Util.fromAngles(a), Util.fromAngles(b));
     return t => Util.toAngles(i(t));
   }
-  static interpolateLinear(_ref3, _ref4) {
-    let [a1, b1, c1, d1] = _ref3;
-    let [a2, b2, c2, d2] = _ref4;
+  static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {
     a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1;
     const x = new Array(4);
     return t => {
@@ -39,9 +29,7 @@ class Util {
       return x;
     };
   }
-  static interpolate(_ref5, _ref6) {
-    let [a1, b1, c1, d1] = _ref5;
-    let [a2, b2, c2, d2] = _ref6;
+  static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {
     let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;
     if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot;
     if (dot > 0.9995) return Util.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);
@@ -60,5 +48,4 @@ class Util {
       return x;
     };
   }
-}
-exports.default = Util;
+}

package/lib/Empty/index.js

@@ -1,26 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _material = require("@mui/material");
-var _EmptyIcon = _interopRequireDefault(require("@arcblock/icons/lib/EmptyIcon"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["color", "size", "children"];
-var _templateObject;
-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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Wrapper = (0, _Theme.styled)(_material.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+import EmptyIcon from '@arcblock/icons/lib/EmptyIcon';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Wrapper = styled(Box)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100px;
+  color: #999;
+  .empty-icon {
+    margin: 10px 0;
+  }
+`;
 
 /**
  * Empty component to display empty state
@@ -36,35 +31,35 @@ const Wrapper = (0, _Theme.styled)(_material.Box)(_templateObject || (_templateO
  * @param {EmptyProps} props
  * @returns {JSX.Element}
  */
-function Empty(_ref) {
-  let {
-      color,
-      size,
-      children
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyIcon.default, {
+function Empty({
+  color,
+  size,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(EmptyIcon, {
       style: {
         width: size,
         height: size,
         color
       },
       className: "empty-icon"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       className: "empty-content",
       children: children
     })]
-  }));
+  });
 }
 Empty.propTypes = {
-  color: _propTypes.default.string,
-  size: _propTypes.default.number,
-  children: _propTypes.default.any
+  color: PropTypes.string,
+  size: PropTypes.number,
+  children: PropTypes.any
 };
 Empty.defaultProps = {
   color: 'inherit',
   size: 36,
   children: null
 };
-var _default = exports.default = Empty;
+export default Empty;