@arcblock/ux 2.9.90 → 2.10.0

package/lib/Logo/index.js

@@ -1,37 +1,22 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Logo;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["showText", "showLogo", "mode", "layout"];
-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 React from "react";
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var LightLogo = function LightLogo(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
       fill: "none",
       fillRule: "evenodd",
       stroke: "#FFF",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      children: [/*#__PURE__*/_jsx("path", {
         d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
       })]
     })
-  }));
+  });
 };
 LightLogo.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -40,13 +25,14 @@ LightLogo.defaultProps = {
   viewBox: "0 0 45 52"
 };
 var LightText = function LightText(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
       fill: "#FFF",
       fillRule: "evenodd",
       d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
     })
-  }));
+  });
 };
 LightText.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -55,18 +41,19 @@ LightText.defaultProps = {
   viewBox: "0 0 99 18"
 };
 var DarkLogo = function DarkLogo(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
       fill: "none",
       fillRule: "evenodd",
       stroke: "#000",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      children: [/*#__PURE__*/_jsx("path", {
         d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
       })]
     })
-  }));
+  });
 };
 DarkLogo.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -75,12 +62,13 @@ DarkLogo.defaultProps = {
   viewBox: "0 0 45 52"
 };
 var DarkText = function DarkText(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
       d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
     })
-  }));
+  });
 };
 DarkText.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -102,31 +90,30 @@ DarkText.defaultProps = {
  * @param {LogoProps} props
  * @return {React.ReactComponentElement}
  */
-function Logo(_ref) {
-  let {
-      showText,
-      showLogo,
-      mode,
-      layout
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const logo = mode === 'light' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LightLogo, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DarkLogo, {});
-  const text = mode === 'light' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LightText, {
+export default function Logo({
+  showText,
+  showLogo,
+  mode,
+  layout,
+  ...rest
+}) {
+  const logo = mode === 'light' ? /*#__PURE__*/_jsx(LightLogo, {}) : /*#__PURE__*/_jsx(DarkLogo, {});
+  const text = mode === 'light' ? /*#__PURE__*/_jsx(LightText, {
     className: "logo-text"
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DarkText, {
+  }) : /*#__PURE__*/_jsx(DarkText, {
     className: "logo-text"
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
-    layout: layout
-  }, rest), {}, {
+  return /*#__PURE__*/_jsxs(Container, {
+    layout: layout,
+    ...rest,
     children: [showLogo && logo, showText && text]
-  }));
+  });
 }
 Logo.propTypes = {
-  mode: _propTypes.default.oneOf(['light', 'dark']),
-  layout: _propTypes.default.oneOf(['vertical', 'horizontal']),
-  showText: _propTypes.default.bool,
-  showLogo: _propTypes.default.bool
+  mode: PropTypes.oneOf(['light', 'dark']),
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  showText: PropTypes.bool,
+  showLogo: PropTypes.bool
 };
 Logo.defaultProps = {
   mode: 'dark',
@@ -136,4 +123,14 @@ Logo.defaultProps = {
 };
 
 /** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Container = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  .logo-text {\n    ", "\n    ", ";\n  }\n"])), props => props.layout === 'horizontal' ? 'row' : 'column', props => props.layout === 'vertical' ? 'margin-top: 8px;' : '', props => props.layout === 'vertical' ? '' : 'margin-left: 8px;');
+const Container = styled('span')`
+  display: inline-flex;
+  flex-direction: ${props => props.layout === 'horizontal' ? 'row' : 'column'};
+  justify-content: center;
+  align-items: center;
+
+  .logo-text {
+    ${props => props.layout === 'vertical' ? 'margin-top: 8px;' : ''}
+    ${props => props.layout === 'vertical' ? '' : 'margin-left: 8px;'};
+  }
+`;

package/lib/Metric/index.js

@@ -1,64 +1,56 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Metric;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _image = _interopRequireDefault(require("../Icon/image"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
 /* eslint-disable react/no-danger */
-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 Metric(_ref) {
-  let {
-    icon,
-    value,
-    name,
-    url,
-    animated,
-    LinkComponent,
-    prefix
-  } = _ref;
-  const metric = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import PropTypes from 'prop-types';
+import ImageIcon from '../Icon/image';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Metric({
+  icon,
+  value,
+  name,
+  url,
+  animated,
+  LinkComponent,
+  prefix
+}) {
+  const metric = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
       className: "metric__image",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+      children: /*#__PURE__*/_jsx(ImageIcon, {
         name: icon,
         alt: typeof name === 'string' ? name : '',
         size: 30,
         prefix: prefix,
         color: "#222222"
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "metric__number ".concat(animated ? 'metric__number--animated' : ''),
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
         dangerouslySetInnerHTML: {
           __html: value
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "metric__name",
         children: name
       })]
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    children: url ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkComponent, {
+  return /*#__PURE__*/_jsx(Container, {
+    children: url ? /*#__PURE__*/_jsx(LinkComponent, {
       to: url,
       children: metric
     }) : metric
   });
 }
 Metric.propTypes = {
-  icon: _propTypes.default.string.isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  name: _propTypes.default.node.isRequired,
-  animated: _propTypes.default.bool,
-  url: _propTypes.default.string,
-  LinkComponent: _propTypes.default.any,
-  prefix: _propTypes.default.string
+  icon: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  name: PropTypes.node.isRequired,
+  animated: PropTypes.bool,
+  url: PropTypes.string,
+  LinkComponent: PropTypes.any,
+  prefix: PropTypes.string
 };
 Metric.defaultProps = {
   animated: false,
@@ -66,4 +58,75 @@ Metric.defaultProps = {
   LinkComponent: null,
   prefix: '/images'
 };
-const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-left: 1px solid ", ";\n  padding: 10px 0 10px 16px;\n  @media (max-width: ", "px) {\n    padding: 0 0 0 8px;\n  }\n\n  display: flex;\n  justify-items: center;\n  align-items: flex-start;\n\n  a {\n    display: flex;\n    justify-items: center;\n    align-items: flex-start;\n  }\n\n  .metric__image {\n    margin-right: 8px;\n  }\n\n  .metric__number {\n    margin-bottom: 8px;\n    font-size: ", "px;\n    font-weight: 600;\n    line-height: 36px;\n    color: ", ";\n\n    small {\n      font-size: 12px;\n      line-height: 12px;\n    }\n\n    @media (max-width: ", "px) {\n      font-size: ", "px;\n      line-height: ", "px;\n      margin-bottom: 2px;\n    }\n  }\n\n  .metric__number--animated {\n    animation-name: blink-opacity;\n    animation-duration: 250ms;\n    animation-timing-function: linear;\n    animation-iteration-count: 1;\n    background-color: transparent !important;\n  }\n\n  .metric__name {\n    font-size: 14px;\n    text-transform: capitalize;\n    line-height: 1.2;\n    font-weight: 500;\n    color: ", ";\n    @media (max-width: ", "px) {\n      font-size: 10px;\n      line-height: 1;\n    }\n  }\n\n  @keyframes blink-opacity {\n    0% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 32 : 36, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm, props => props.size === 'small' ? 24 : 28, props => props.size === 'small' ? 24 : 28, props => props.theme.typography.color.main, props => props.theme.breakpoints.values.sm);
+const Container = styled('div')`
+  border-left: 1px solid ${props => props.theme.typography.color.main};
+  padding: 10px 0 10px 16px;
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    padding: 0 0 0 8px;
+  }
+
+  display: flex;
+  justify-items: center;
+  align-items: flex-start;
+
+  a {
+    display: flex;
+    justify-items: center;
+    align-items: flex-start;
+  }
+
+  .metric__image {
+    margin-right: 8px;
+  }
+
+  .metric__number {
+    margin-bottom: 8px;
+    font-size: ${props => props.size === 'small' ? 32 : 36}px;
+    font-weight: 600;
+    line-height: 36px;
+    color: ${props => props.theme.typography.color.main};
+
+    small {
+      font-size: 12px;
+      line-height: 12px;
+    }
+
+    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+      font-size: ${props => props.size === 'small' ? 24 : 28}px;
+      line-height: ${props => props.size === 'small' ? 24 : 28}px;
+      margin-bottom: 2px;
+    }
+  }
+
+  .metric__number--animated {
+    animation-name: blink-opacity;
+    animation-duration: 250ms;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+    background-color: transparent !important;
+  }
+
+  .metric__name {
+    font-size: 14px;
+    text-transform: capitalize;
+    line-height: 1.2;
+    font-weight: 500;
+    color: ${props => props.theme.typography.color.main};
+    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+      font-size: 10px;
+      line-height: 1;
+    }
+  }
+
+  @keyframes blink-opacity {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

package/lib/NFTDisplay/aspect-ratio-container.js

@@ -1,46 +1,39 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["aspect", "children"];
-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 AspectRatioContainer(_ref) {
-  let {
-      aspect,
-      children
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({
-    aspect: aspect
-  }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+function AspectRatioContainer({
+  aspect,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Root, {
+    aspect: aspect,
+    ...rest,
+    children: /*#__PURE__*/_jsx("span", {
       className: "aspect-ratio-container__inner",
       children: children
     })
-  }));
+  });
 }
 AspectRatioContainer.propTypes = {
-  aspect: _propTypes.default.number.isRequired,
-  children: _propTypes.default.node.isRequired
+  aspect: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired
 };
-const Root = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 0;\n  padding-bottom: ", "%;\n\n  .aspect-ratio-container__inner {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), _ref2 => {
-  let {
-    aspect
-  } = _ref2;
-  return 1 / aspect * 100;
-});
-var _default = exports.default = AspectRatioContainer;
+const Root = styled('span')`
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: ${({
+  aspect
+}) => 1 / aspect * 100}%;
+
+  .aspect-ratio-container__inner {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+export default AspectRatioContainer;

package/lib/NFTDisplay/broken.js

@@ -1,91 +1,76 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Broken;
-var _react = _interopRequireDefault(require("react"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import React from "react";
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
 var NFTBroken = function NFTBroken(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsxs("g", {
       clipPath: "url(#a)",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      children: [/*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M60 0h60v60H60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M0 0h60v60H0zM180 0h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .898 .9059 .9216)",
         d: "M120 0h60v60h-60zM240 0h60v60h-60zM0 60h60v60H0z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M60 60h60v60H60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M120 60h60v60h-60zM240 60h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .898 .9059 .9216)",
         d: "M180 60h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M0 120h60v60H0z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M0 180h60v60H0z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M0 240h60v60H0z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .898 .9059 .9216)",
         d: "M60 120h60v60H60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M60 180h60v60H60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .898 .9059 .9216)",
         d: "M60 240h60v60H60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M120 120h60v60h-60zM180 180h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M120 240h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M240 120h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .898 .9059 .9216)",
         d: "M120 180h60v60h-60zM180 240h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9529 .9569 .9647)",
         d: "M180 120h60v60h-60zM240 180h60v60h-60z"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      }), /*#__PURE__*/_jsx("path", {
         fill: "color(display-p3 .9765 .9804 .9843)",
         d: "M240 240h60v60h-60z"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("clipPath", {
         id: "a",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        children: /*#__PURE__*/_jsx("path", {
           fill: "#fff",
           d: "M0 0h300v300H0z"
         })
       })
     })]
-  }));
+  });
 };
 NFTBroken.defaultProps = {
   width: "300",
@@ -94,23 +79,54 @@ NFTBroken.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Broken() {
-  let {
-    children
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NFTBroken, {
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Broken({
+  children
+} = {}) {
+  return /*#__PURE__*/_jsxs(Root, {
+    children: [/*#__PURE__*/_jsx(NFTBroken, {
       className: "nft-display-broken-background"
-    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    }), children && /*#__PURE__*/_jsx(Box, {
       className: "nft-display-broken-content",
       children: children
     })]
   });
 }
 Broken.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
 Broken.defaultProps = {
   children: 'Non-publicly accessible NFT'
 };
-const Root = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n\n  .nft-display-broken-background {\n    width: 100%;\n    height: 100%;\n  }\n\n  .nft-display-broken-content {\n    display: flex;\n    width: 100%;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    margin: auto;\n    mix-blend-mode: plus-darker;\n    font-size: 13px;\n    color: #9aa3b0;\n    text-align: center;\n    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;\n    user-select: none;\n  }\n"])));
+const Root = styled(Box)`
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .nft-display-broken-background {
+    width: 100%;
+    height: 100%;
+  }
+
+  .nft-display-broken-content {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    mix-blend-mode: plus-darker;
+    font-size: 13px;
+    color: #9aa3b0;
+    text-align: center;
+    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
+    user-select: none;
+  }
+`;