@arcblock/ux 2.2.3 → 2.4.0

package/lib/Logo/index.js

@@ -9,14 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 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(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; }
@@ -139,7 +143,4 @@ Logo.defaultProps = {
   showLogo: true
 };
 
-const Container = _styledComponents.default.span.withConfig({
-  displayName: "Logo__Container",
-  componentId: "sc-1v4s433-0"
-})(["display:inline-flex;flex-direction:", ";justify-content:center;align-items:center;.logo-text{", " ", ";}"], props => props.layout === 'horizontal' ? 'row' : 'column', props => props.layout === 'vertical' ? 'margin-top: 8px;' : '', props => props.layout === 'vertical' ? '' : 'margin-left: 8px;');
+const Container = _styled.default.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;');

package/lib/Metric/index.js

@@ -7,15 +7,18 @@ exports.default = Metric;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _image = _interopRequireDefault(require("../Icon/image"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/no-danger */
+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,
@@ -72,7 +75,4 @@ Metric.defaultProps = {
   prefix: '/images'
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Metric__Container",
-  componentId: "sc-14hw8sz-0"
-})(["border-left:1px solid ", ";padding:10px 0 10px 16px;@media (max-width:", "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:", "px;font-weight:600;line-height:36px;color:", ";small{font-size:12px;line-height:12px;}@media (max-width:", "px){font-size:", "px;line-height:", "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:", ";@media (max-width:", "px){font-size:10px;line-height:1;}}@keyframes blink-opacity{0%{opacity:1;}50%{opacity:0.3;}100%{opacity:1;}}"], 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.default.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);

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

@@ -7,14 +7,18 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 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(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; }
@@ -47,10 +51,7 @@ AspectRatioContainer.propTypes = {
   children: _propTypes.default.node.isRequired
 };
 
-const Root = _styledComponents.default.span.withConfig({
-  displayName: "aspect-ratio-container__Root",
-  componentId: "sc-qqh9bx-0"
-})(["display:block;position:relative;width:100%;height:0;padding-bottom:", "%;.aspect-ratio-container__inner{position:absolute;top:0;bottom:0;left:0;right:0;}"], _ref2 => {
+const Root = _styled.default.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;

package/lib/NFTDisplay/broken.js

@@ -5,21 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Broken;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
 
 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 Broken() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
     className: "nft-display-broken"
   });
 }
 
-const Root = (0, _styledComponents.default)(_BrokenImage.default).withConfig({
-  displayName: "broken__Root",
-  componentId: "sc-8n0p34-0"
-})(["&&{width:100%;max-width:200px;height:auto;max-width:100%;max-height:100%;fill:#ddd;}"]);
+const Root = (0, _styled.default)(_BrokenImage.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    width: 100%;\n    max-width: 200px;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n    fill: #ddd;\n  }\n"])));

package/lib/NFTDisplay/index.js

@@ -10,7 +10,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -36,11 +36,15 @@ var _broken = _interopRequireDefault(require("./broken"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["data", "address", "inset", "aspect", "component", "className", "renderError", "renderLoading", "preferredSvgEmbedder", "checkSvg", "minimumLoadingTime", "onCompleted"],
       _excluded2 = ["aspect", "inset"];
 
 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(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; }
@@ -293,10 +297,7 @@ NFTDisplay.defaultProps = {
   onCompleted: () => {}
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "NFTDisplay__Root",
-  componentId: "sc-7p9mb0-0"
-})(["display:flex;justify-content:center;align-items:center;position:relative;width:150px;height:150px;overflow:hidden;&,img{max-width:100%;max-height:100%;}img{width:100%;height:100%;}&.nft-display--inset{width:100%;height:100%;}"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 
 function withAspectRatio(Component) {
   // eslint-disable-next-line func-names, react/prop-types

package/lib/NFTDisplay/loading.js

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Loading;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 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 Loading() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
     className: "nft-display__loading",
@@ -18,7 +22,4 @@ function Loading() {
   });
 }
 
-const Root = _styledComponents.default.span.withConfig({
-  displayName: "loading__Root",
-  componentId: "sc-jedc6b-0"
-})(["display:flex;justify-content:center;align-items:center;position:absolute;width:100%;height:100%;color:#ccc;background-color:#eee;"]);
+const Root = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  color: #ccc;\n  background-color: #eee;\n"])));

package/lib/NFTDisplay/svg-embedder/inline-svg.js

@@ -7,16 +7,20 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _styledComponents2 = _interopRequireDefault(require("react-shadow/styled-components"));
+var _emotion = _interopRequireDefault(require("react-shadow/emotion"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["svg"];
 
 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(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; }
@@ -48,15 +52,9 @@ function InlineSvg(_ref) {
 InlineSvg.propTypes = {
   svg: _propTypes.default.string.isRequired
 };
-const Root = (0, _styledComponents.default)(_styledComponents2.default.span).withConfig({
-  displayName: "inline-svg__Root",
-  componentId: "sc-wv8c7s-0"
-})(["display:block;width:100%;height:100%;"]);
-
-const Inner = _styledComponents.default.div.withConfig({
-  displayName: "inline-svg__Inner",
-  componentId: "sc-wv8c7s-1"
-})(["&,& > svg{height:100%;width:100%;min-width:100%;max-width:100%;}"]);
+const Root = (0, _styled.default)(_emotion.default.span)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));
+
+const Inner = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &,\n  & > svg {\n    height: 100%;\n    width: 100%;\n    min-width: 100%;\n    max-width: 100%;\n  }\n"])));
 
 var _default = InlineSvg;
 exports.default = _default;

package/lib/NavMenu/style.js

@@ -5,24 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineStyle = exports.HorizontalStyle = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const NavMenuBase = _styledComponents.default.nav.withConfig({
-  displayName: "style__NavMenuBase",
-  componentId: "sc-2g7isz-0"
-})(["background-color:", ";font-size:16px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;height:22px;max-height:22px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const NavMenuBase = _styled.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 16px;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    display: flex;\n    align-items: center;\n  }\n  a {\n    color: inherit;\n  }\n  /* active/hover */\n  .navmenu-item,\n  .navmenu-sub {\n    color: ", ";\n  }\n  .navmenu-item--active,\n  .navmenu-item:hover,\n  .navmenu-sub--opened {\n    color: ", ";\n  }\n\n  .navmenu-item {\n    position: relative;\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n    a {\n      text-decoration: none;\n      white-space: nowrap;\n    }\n    a::before {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      background-color: transparent;\n      content: '';\n    }\n  }\n\n  .navmenu-sub {\n    position: relative;\n    cursor: pointer;\n  }\n  /* icon & expand icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon,\n  .navmenu-sub-expand-icon {\n    display: flex;\n    line-height: 1;\n  }\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    margin-right: 4px;\n  }\n  .navmenu-item-icon > *,\n  .navmenu-sub-icon > * {\n    width: auto;\n    height: 22px;\n    max-height: 22px;\n    font-size: 1.5em;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: 8px;\n    > * {\n      width: 0.8em;\n      height: 0.8em;\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
-const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
-  displayName: "style__HorizontalStyle",
-  componentId: "sc-2g7isz-1"
-})(["padding:8px 16px;.navmenu-root{display:flex;align-items:center;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{margin-left:24px;}.navmenu-root > .navmenu-item:first-child,.navmenu-root > .navmenu-sub:first-child{margin-left:0;}.navmenu-sub-container{display:none;position:absolute;top:100%;}.navmenu-sub-list{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.15);.navmenu-item + .navmenu-item{margin-top:8px;}}.navmenu-root > .navmenu-sub{> .navmenu-sub-container{left:50%;transform:translateX(-50%);padding-top:16px;}&.navmenu-sub--opened > .navmenu-sub-container{display:block;}}"]);
+const HorizontalStyle = (0, _styled.default)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  .navmenu-root {\n    display: flex;\n    align-items: center;\n  }\n  /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    margin-left: 24px;\n  }\n  .navmenu-root > .navmenu-item:first-child,\n  .navmenu-root > .navmenu-sub:first-child {\n    margin-left: 0;\n  }\n\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    position: absolute;\n    top: 100%;\n  }\n  .navmenu-sub-list {\n    padding: 16px;\n    border-radius: 4px;\n    background: #fff;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    .navmenu-item + .navmenu-item {\n      margin-top: 8px;\n    }\n  }\n  /* \u4E8C\u7EA7 sub menu */\n  .navmenu-root > .navmenu-sub {\n    > .navmenu-sub-container {\n      left: 50%;\n      transform: translateX(-50%);\n      padding-top: 16px;\n    }\n    &.navmenu-sub--opened > .navmenu-sub-container {\n      display: block;\n    }\n  }\n"])));
 /* inline mode */
 
 exports.HorizontalStyle = HorizontalStyle;
-const InlineStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
-  displayName: "style__InlineStyle",
-  componentId: "sc-2g7isz-2"
-})(["font-size:16px;.navmenu-root{display:flex;flex-direction:column;align-items:stretch;}.navmenu-item,.navmenu-sub{padding:0 16px;}& .navmenu-sub{flex-wrap:wrap;}.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{line-height:48px;border-bottom:1px solid #eee;}.navmenu-item-icon,.navmenu-sub-icon{width:42px;margin:0;}.navmenu-sub-expand-icon{margin-left:auto;}.navmenu-sub-container{display:none;flex:1 0 100%;margin:0 -16px;padding-bottom:8px;.navmenu-item,.navmenu-sub{line-height:32px;}}.navmenu-sub-list{padding-left:16px;.navmenu-item,.navmenu-sub{padding-left:42px;font-size:13px;}}.navmenu-sub--opened > .navmenu-sub-container{display:block;}"]);
+const InlineStyle = (0, _styled.default)(NavMenuBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  .navmenu-root {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .navmenu-item,\n  .navmenu-sub {\n    padding: 0 16px;\n  }\n  & .navmenu-sub {\n    flex-wrap: wrap;\n  }\n  /* \u9876\u7EA7 */\n  .navmenu-root > .navmenu-item,\n  .navmenu-root > .navmenu-sub {\n    line-height: 48px;\n    border-bottom: 1px solid #eee;\n  }\n  /* icon */\n  .navmenu-item-icon,\n  .navmenu-sub-icon {\n    width: 42px;\n    margin: 0;\n  }\n  .navmenu-sub-expand-icon {\n    margin-left: auto;\n  }\n  /* \u5B50\u7EA7\u5217\u8868 */\n  .navmenu-sub-container {\n    display: none;\n    flex: 1 0 100%;\n    margin: 0 -16px;\n    padding-bottom: 8px;\n    .navmenu-item,\n    .navmenu-sub {\n      line-height: 32px;\n    }\n  }\n  .navmenu-sub-list {\n    padding-left: 16px;\n    .navmenu-item,\n    .navmenu-sub {\n      padding-left: 42px;\n      font-size: 13px;\n    }\n  }\n  /* \u4E8C\u7EA7 menu */\n  .navmenu-sub--opened > .navmenu-sub-container {\n    display: block;\n  }\n"])));
 exports.InlineStyle = InlineStyle;

package/lib/PricingTable/PricingPlan.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Card = _interopRequireDefault(require("@mui/material/Card"));
 
@@ -19,8 +19,12 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 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 PricingPlan(_ref) {
   let {
     plan
@@ -74,7 +78,4 @@ exports.default = _default;
 PricingPlan.propTypes = {
   plan: _propTypes.default.object.isRequired
 };
-const PlanCard = (0, _styledComponents.default)(_Card.default).withConfig({
-  displayName: "PricingPlan__PlanCard",
-  componentId: "sc-11tuq1x-0"
-})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');
+const PlanCard = (0, _styled.default)(_Card.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 500px;\n  display: flex;\n  flex-direction: column;\n  @media (max-width: 320px) {\n    margin-top: 20px;\n  }\n\n  && {\n    ", "\n  }\n\n  .card-header {\n    height: 80px;\n    background-color: #f1fbfb;\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    .title {\n      font-size: 18px;\n      font-weight: 600;\n      text-align: center;\n      color: #404040;\n      margin: 0;\n    }\n  }\n\n  .card-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .plan-content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .plan-pricing {\n      display: flex;\n      justify-content: center;\n      align-items: baseline;\n      margin-bottom: 12px;\n      color: #4e6af6;\n      text-align: center;\n    }\n\n    .price-number {\n      font-size: 30px;\n      font-weight: 600;\n      color: #4e6af6;\n    }\n\n    .plan-services strong {\n      color: #4e6af6;\n      font-weight: 500;\n    }\n  }\n\n  .plan-actions {\n    width: 100%;\n  }\n"])), props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');

package/lib/PricingTable/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 
@@ -15,8 +15,12 @@ var _PricingPlan = _interopRequireDefault(require("./PricingPlan"));
 
 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 PricingTable(_ref) {
   let {
     plans
@@ -55,7 +59,4 @@ PricingTable.propTypes = {
   plans: _propTypes.default.array.isRequired
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "PricingTable__Div",
-  componentId: "sc-1aylbiy-0"
-})(["padding:100px 0;text-align:center;background-color:", ";@media (max-width:320px){padding:50px 0;}.plan-item{@media (max-width:320px){margin-bottom:30px;}}"], props => props.variant === 'even' ? '#fbfbfb' : '#ffffff');
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 100px 0;\n  text-align: center;\n  background-color: ", ";\n  @media (max-width: 320px) {\n    padding: 50px 0;\n  }\n  .plan-item {\n    @media (max-width: 320px) {\n      margin-bottom: 30px;\n    }\n  }\n"])), props => props.variant === 'even' ? '#fbfbfb' : '#ffffff');

package/lib/Result/result.js

@@ -7,16 +7,20 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["icon", "title", "description", "extra"];
 
 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(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; }
@@ -72,10 +76,7 @@ Result.defaultProps = {
   extra: undefined
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "result__Root",
-  componentId: "sc-1ttf6c9-0"
-})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  padding: 16px;\n\n  background-color: #f7f8fb;\n"])));
 
 var _default = Result;
 exports.default = _default;

package/lib/Screenshot/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Util = require("../Util");
 
@@ -17,10 +17,14 @@ require("./devices.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "children", "style", "className", "width", "height"];
 
 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(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; }
@@ -184,10 +188,7 @@ function Screenshot(props) {
   }));
 }
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "Screenshot__Div",
-  componentId: "sc-el6nkq-0"
-})(["@media (max-width:", "px){transform-origin:0 0;transform:scale(", ");}.device-content{overflow:hidden;}.device-content video,.device-content img{border-radius:", "px;background-color:#fff;background-position:center center;background-size:cover;object-fit:cover;width:100.1%;height:100.1%;}"], props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    transform-origin: 0 0;\n    transform: scale(", ");\n  }\n  .device-content {\n    overflow: hidden;\n  }\n  .device-content video,\n  .device-content img {\n    border-radius: ", "px;\n    background-color: #fff;\n    background-position: center center;\n    background-size: cover;\n    object-fit: cover;\n    width: 100.1%;\n    height: 100.1%;\n  }\n"])), props => types[props.type].width, props => types[props.type].scale, props => props.contentRadius);
 
 Screenshot.propTypes = {
   type: _propTypes.default.oneOf(Object.keys(types)),

package/lib/SplitButton/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
@@ -29,10 +29,14 @@ var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["size", "color", "menu", "children", "variant", "onClick", "menuButtonProps"];
 
 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(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; }
@@ -140,11 +144,5 @@ SplitButton.defaultProps = {
   menuButtonProps: {}
 };
 SplitButton.Item = _MenuItem.default;
-const StyledButtonGroup = (0, _styledComponents.default)(_ButtonGroup.default).withConfig({
-  displayName: "SplitButton__StyledButtonGroup",
-  componentId: "sc-1meco5z-0"
-})(["> .MuiButtonBase-root:last-child{min-width:2em;padding-left:0;padding-right:0;}"]);
-const StyledPopper = (0, _styledComponents.default)(_Popper.default).withConfig({
-  displayName: "SplitButton__StyledPopper",
-  componentId: "sc-1meco5z-1"
-})([".MuiList-root{padding:4px 0;}.MuiListItem-root{padding-top:4px;padding-bottom:4px;}"]);
+const StyledButtonGroup = (0, _styled.default)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-child {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
+const StyledPopper = (0, _styled.default)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])));

package/lib/Tag/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(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; }
@@ -112,7 +116,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/
 })));
 
 exports.default = _default;
-const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "Tag__Span",
-  componentId: "sc-wqpeo3-0"
-})(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:20px;line-height:20px;font-size:12px;font-weight:500;border-radius:4px;}"]);
+const Span = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 20px;\n    line-height: 20px;\n    font-size: 12px;\n    font-weight: 500;\n    border-radius: 4px;\n  }\n"])));

package/lib/TextCollapse/index.js

@@ -9,14 +9,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children", "startChars", "endChars", "scaleFactor", "maxWidth", "style", "fontType"];
 
 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(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; }
@@ -88,7 +92,4 @@ TextCollapse.defaultProps = {
   scaleFactor: 0.45,
   fontType: 'normal'
 };
-const Container = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "TextCollapse__Container",
-  componentId: "sc-1u3qfqq-0"
-})(["display:inline-flex;align-items:center;justify-content:start;cursor:pointer;white-space:nowrap;overflow:hidden;.start-part,.end-part{display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:hidden;}.start-part{max-width:calc(100% - ", ");min-width:", ";text-overflow:ellipsis;}.end-part{max-width:calc(100% - ", ");direction:rtl;}"], props => props.endwidth, props => props.startwidth, props => props.startwidth);
+const Container = (0, _styled.default)(_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/Theme/theme-provider.js

@@ -7,7 +7,7 @@ exports.default = ThemeProvider;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@mui/material/styles");
 
@@ -24,7 +24,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const defaultTheme = (0, _theme.create)();
 /**
  * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- * 注: 目前 UX 依赖 styled-components, 所以该组件也内置了一个 StyledThemeProvider
  */
 
 function ThemeProvider(_ref) {
@@ -39,7 +38,7 @@ function ThemeProvider(_ref) {
       injectFirst: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.ThemeProvider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ThemeProvider, {
           theme: theme,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CssBaseline.default, {}), children]
         })

package/lib/Video/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactPlayer = _interopRequireDefault(require("react-player"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
@@ -19,8 +19,12 @@ var _Util = require("../Util");
 
 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 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; }
@@ -99,7 +103,4 @@ Video.defaultProps = {
   style: {}
 };
 
-const Placeholder = _styledComponents.default.div.withConfig({
-  displayName: "Video__Placeholder",
-  componentId: "sc-1h1lmc5-0"
-})(["background-color:#222222;display:flex;justify-content:center;align-items:center;position:relative;.loading-indicator{position:absolute;top:45%;left:47%;z-index:2;}"]);
+const Placeholder = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #222222;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n\n  .loading-indicator {\n    position: absolute;\n    top: 45%;\n    left: 47%;\n    z-index: 2;\n  }\n"])));

package/lib/Wallet/Action.js

@@ -7,7 +7,7 @@ exports.default = WalletAction;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["action", "size", "textLayout", "style"];
 
 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(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; }
@@ -109,7 +113,4 @@ const sizes = {
   }
 };
 
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "Action__Content",
-  componentId: "sc-zuf4zr-0"
-})(["display:flex;justify-content:center;align-items:center;&:hover{opacity:0.9;}.wallet-action__logo{width:auto;height:auto;max-width:", "px;margin-left:5px;}.wallet-action__text{padding:8px;display:flex;height:100%;flex-direction:column;justify-content:space-between;align-items:flex-start;}.wallet-action__action{font-size:", "px;text-transform:capitalize;margin-bottom:1px;color:", ";letter-spacing:1px;}.wallet-action__title{font-size:", "px;text-transform:capitalize;color:", ";letter-spacing:1px;}"], props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);
+const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  .wallet-action__logo {\n    width: auto;\n    height: auto;\n    max-width: ", "px;\n    margin-left: 5px;\n  }\n\n  .wallet-action__text {\n    padding: 8px;\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .wallet-action__action {\n    font-size: ", "px;\n    text-transform: capitalize;\n    margin-bottom: 1px;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n\n  .wallet-action__title {\n    font-size: ", "px;\n    text-transform: capitalize;\n    color: ", ";\n    letter-spacing: 1px;\n  }\n"])), props => sizes.logo[props.size], props => sizes.font[props.size], props => props.color || _Colors.default.primary.main, props => sizes.font[props.size] * 1.5, props => props.color || _Colors.default.primary.main);