@arcblock/ux 2.2.4 → 2.4.1

package/lib/Layout/dashboard/sidebar.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 _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -19,10 +19,14 @@ var _withExternalLink = require("./with-external-link");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["links", "addons", "dense"];
 
 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; }
@@ -66,8 +70,12 @@ function renderLinksItem(item) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_withExternalLink.NavLink, {
       to: url,
       external: external,
-      className: "layout-sidebar-link",
-      activeClassName: "layout-sidebar-link--active",
+      className: _ref => {
+        let {
+          isActive
+        } = _ref;
+        return isActive ? 'layout-sidebar-link layout-sidebar-link--active' : 'layout-sidebar-link';
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "layout-sidebar-icon ".concat(showBadge ? 'layout-sidebar-badge' : ''),
         children: icon
@@ -80,13 +88,13 @@ function renderLinksItem(item) {
   }, url);
 }
 
-function Sidebar(_ref) {
+function Sidebar(_ref2) {
   let {
     links,
     addons,
     dense
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     className: (0, _clsx.default)({
@@ -113,10 +121,7 @@ Sidebar.defaultProps = {
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "sidebar__Root",
-  componentId: "sc-gaosgy-0"
-})(["display:flex;flex-direction:column;ul{list-style:none;margin:0;padding:0;}.layout-sidebar-link{display:flex;flex-direction:column;align-items:center;padding:22px 24px;color:", ";text-decoration:none;&:hover,&.layout-sidebar-link--active{color:", ";background:", ";border-left-color:", ";}}.layout-sidebar-icon{display:inline-block;width:32px;height:32px;> img,> svg{width:32px;height:32px;}}.layout-sidebar-badge{position:relative;&:after{content:'';position:absolute;width:10px;height:10px;border-radius:10px;background-color:#fe4e44;right:-2px;top:0;box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1);}}.layout-sidebar-link-text{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;}.layout-sidebar-divider{display:flex;justify-content:center;align-items:center;&::after{content:'';display:inline-block;width:80px;max-width:100%;border-bottom:1px solid #ddd;}}&.layout-sidebar-dense{box-sizing:border-box;height:100%;padding-top:28px;border-right:1px solid #ddd;.layout-sidebar-link{flex-direction:row;align-items:center;padding:10px 36px 10px 24px;}.layout-sidebar-icon{display:inline-block;width:20px;height:20px;margin-right:12px;> img,> svg{width:20px;height:20px;}}.layout-sidebar-badge{&:after{width:6px;height:6px;border-radius:6px;right:-2px;top:0;}}.layout-sidebar-link-text{margin-top:0;font-size:14px;}.layout-sidebar-divider{&::after{content:'';display:inline-block;width:100%;margin:12px 0;}}}"], props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .layout-sidebar-link {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 22px 24px;\n    color: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &.layout-sidebar-link--active {\n      color: ", ";\n      background: ", ";\n      border-left-color: ", ";\n    }\n  }\n  .layout-sidebar-icon {\n    display: inline-block;\n    width: 32px;\n    height: 32px;\n    > img,\n    > svg {\n      width: 32px;\n      height: 32px;\n    }\n  }\n  .layout-sidebar-badge {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      width: 10px;\n      height: 10px;\n      border-radius: 10px;\n      background-color: #fe4e44;\n      right: -2px;\n      top: 0;\n      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n    }\n  }\n  .layout-sidebar-link-text {\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 500;\n    text-align: center;\n    text-transform: capitalize;\n    letter-spacing: normal;\n  }\n  .layout-sidebar-divider {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &::after {\n      content: '';\n      display: inline-block;\n      width: 80px;\n      max-width: 100%;\n      border-bottom: 1px solid #ddd;\n    }\n  }\n  &.layout-sidebar-dense {\n    box-sizing: border-box;\n    height: 100%;\n    padding-top: 28px;\n    border-right: 1px solid #ddd;\n    .layout-sidebar-link {\n      flex-direction: row;\n      align-items: center;\n      padding: 10px 36px 10px 24px;\n    }\n    .layout-sidebar-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      margin-right: 12px;\n      > img,\n      > svg {\n        width: 20px;\n        height: 20px;\n      }\n    }\n    .layout-sidebar-badge {\n      &:after {\n        width: 6px;\n        height: 6px;\n        border-radius: 6px;\n        right: -2px;\n        top: 0;\n      }\n    }\n    .layout-sidebar-link-text {\n      margin-top: 0;\n      font-size: 14px;\n    }\n    .layout-sidebar-divider {\n      &::after {\n        content: '';\n        display: inline-block;\n        width: 100%;\n        margin: 12px 0;\n      }\n    }\n  }\n"])), props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
 
 var _default = Sidebar;
 exports.default = _default;

package/lib/Layout/dashboard-legacy/header.js

@@ -7,7 +7,7 @@ exports.default = Header;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
@@ -31,6 +31,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -43,10 +45,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
-  displayName: "header__StyledAppBar",
-  componentId: "sc-9jjwz7-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledAppBar = (0, _styled.default)(_AppBar.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    z-index: ", ";\n    background: ", ";\n    box-shadow: none;\n    top: 0;\n    height: auto;\n  }\n  .header-toolbar {\n    background: ", ";\n    color: ", ";\n    margin: ", "px 0;\n  }\n  .header-link {\n    display: flex;\n    text-decoration: none;\n    flex-shrink: 1;\n    overflow: hidden;\n  }\n  .header-logo {\n    margin-right: 20px;\n  }\n  .header-title {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n  }\n  .header-title__primary {\n    font-size: 24px;\n    font-weight: 800;\n    color: ", ";\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n  }\n  .header-title__secondary {\n    font-size: 14px;\n    line-height: 1.71;\n    color: ", ";\n  }\n\n  .header-addons {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 9999999;\n\n    .user-addon {\n      .header-avatar {\n        width: 32px;\n        border-radius: 16px;\n        height: auto;\n      }\n    }\n  }\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-title {\n      display: none;\n    }\n    .header-title__primary {\n      font-size: 20px;\n    }\n    .header-menu {\n      display: block;\n    }\n  }\n"])), props => props.theme.zIndex.drawer, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('md'));
 /*
   自定义 logo 相关:
   如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),

package/lib/Layout/dashboard-legacy/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
@@ -31,6 +31,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -43,10 +45,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-const Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "dashboard-legacy__Wrapper",
-  componentId: "sc-z8z10v-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard__body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard__main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n  }\n  .dashboard__content {\n    flex: 1;\n  }\n\n  .drawerPaper {\n    position: relative;\n    white-space: nowrap;\n    width: 120px;\n    background: ", ";\n    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ", ");\n    border: 0;\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
 
 function Dashboard(_ref) {
   let {

package/lib/Layout/dashboard-legacy/sidebar.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Sidebar;
 
 var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactRouterDom = require("react-router-dom");
 
@@ -27,10 +27,14 @@ var _Logo = _interopRequireDefault(require("../../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["location", "images", "links", "prefix", "addons", "logo"];
+var _templateObject, _templateObject2;
+
+const _excluded = ["images", "links", "prefix", "addons", "logo"];
 
 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; }
@@ -43,7 +47,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function Sidebar(_ref) {
   let {
-    location,
     images,
     links,
     prefix,
@@ -53,6 +56,7 @@ function Sidebar(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   const theme = (0, _styles.useTheme)();
+  const location = (0, _reactRouterDom.useLocation)();
 
   const isSelected = (url, name) => {
     const pattern = new RegExp("/".concat(name));
@@ -100,7 +104,6 @@ function Sidebar(_ref) {
 }
 
 Sidebar.propTypes = {
-  location: _propTypes.default.object.isRequired,
   images: _propTypes.default.object.isRequired,
   links: _propTypes.default.array.isRequired,
   prefix: _propTypes.default.string,
@@ -112,16 +115,6 @@ Sidebar.defaultProps = {
   addons: null,
   logo: null
 };
-const MenuItems = /*#__PURE__*/(0, _react.memo)(_styledComponents.default.div.withConfig({
-  displayName: "sidebar__MenuItems",
-  componentId: "sc-gtwxx4-0"
-})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
+const MenuItems = /*#__PURE__*/(0, _react.memo)(_styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n\n  && .sidebar-logo {\n    display: none;\n    border-bottom: 1px solid #eee;\n    background: ", ";\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    padding: 10px 0;\n    text-align: center;\n    font-size: 0;\n  }\n  ", " {\n    && .sidebar-logo {\n      display: block;\n    }\n  }\n"])), props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "sidebar__MenuItem",
-  componentId: "sc-gtwxx4-1"
-})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
-
-var _default = (0, _reactRouterDom.withRouter)(Sidebar);
-
-exports.default = _default;
+const MenuItem = (0, _styled.default)(_Button.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    transition: all 200ms ease-in-out;\n    background: ", ";\n    padding: 24px 0;\n    border-left: 2px solid ", ";\n    border-radius: 0;\n\n    &:hover {\n      background: ", ";\n      border-left-color: ", ";\n    }\n\n    .menu-title {\n      margin-top: 8px;\n      font-size: 12px;\n      font-weight: 500;\n      text-align: center;\n      text-transform: capitalize;\n      letter-spacing: normal;\n      width: 80%;\n      color: ", ";\n    }\n  }\n"])), props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);

package/lib/Layout/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 _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
@@ -47,10 +47,14 @@ var _Logo = _interopRequireDefault(require("../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["title", "brand", "description", "links", "logo", "showLogo", "addons", "footer", "baseUrl", "homeUrl", "children", "variant", "contentOnly"];
 
 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; }
@@ -268,12 +272,6 @@ Layout.defaultProps = {
   })
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "Layout__Div",
-  componentId: "sc-12bllvc-0"
-})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  .appbar {\n    &.appbar--border {\n      box-shadow: none;\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        bottom: -1px;\n        display: block;\n        background-color: rgba(0, 0, 0, 0.12);\n      }\n    }\n  }\n\n  .toolbar {\n    min-height: 56px;\n    background: inherit;\n    white-space: nowrap;\n    .menu-logo {\n      font-size: 0;\n      margin-right: 8px;\n    }\n\n    .nav-links {\n      display: flex;\n      align-items: center;\n      .nav-link {\n        margin: 8px 12px;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n      }\n\n      .highlight-nav {\n        font-weight: bolder;\n      }\n    }\n    .brand {\n      cursor: pointer;\n      text-decoration: none;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      flex-shrink: 1;\n    }\n    .description {\n      color: #999;\n      font-size: 15px;\n      margin-left: 10px;\n      font-weight: normal;\n      flex-shrink: 999999;\n    }\n  }\n\n  ", " {\n    .toolbar {\n      .menu-button {\n        display: none;\n      }\n      .menu-logo {\n        & + .brand {\n          padding-left: 45px;\n          margin-left: -45px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    .toolbar {\n      .nav-links,\n      .menu-logo,\n      .description {\n        display: none;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));
 
-const DrawerDiv = _styledComponents.default.nav.withConfig({
-  displayName: "Layout__DrawerDiv",
-  componentId: "sc-12bllvc-1"
-})(["width:240px;.drawer-paper{width:240px;}.toolbar{min-height:56px;}a:hover,a:active,a:visited,a:focus{text-decoration:none;}.drawer-highlight-nav{background-color:#eee;}.toolbar--drawer{font-size:18px;.menu-logo{display:inline-flex;}}"]);
+const DrawerDiv = _styled.default.nav(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 240px;\n  .drawer-paper {\n    width: 240px;\n  }\n  .toolbar {\n    min-height: 56px;\n  }\n\n  a:hover,\n  a:active,\n  a:visited,\n  a:focus {\n    text-decoration: none;\n  }\n\n  .drawer-highlight-nav {\n    background-color: #eee;\n  }\n\n  .toolbar--drawer {\n    font-size: 18px;\n    .menu-logo {\n      display: inline-flex;\n    }\n  }\n"])));

package/lib/Locale/selector.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 _styles = require("@mui/material/styles");
 
@@ -39,10 +39,14 @@ var _context = require("./context");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["showText", "popperProps", "popperType", "icon"];
 
 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; }
@@ -182,7 +186,4 @@ LocaleSelector.defaultProps = {
 var _default = LocaleSelector;
 exports.default = _default;
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "selector__Div",
-  componentId: "sc-wfz3sf-0"
-})(["display:inline-block;.trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;color:", ";}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n\n    .trigger-image {\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => props.size, props => props.size, props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

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;