@arcblock/ux 2.4.1 → 2.4.4

package/lib/Earth/index.js

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

package/lib/Empty/index.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["name", "color", "size", "children"];
@@ -31,7 +31,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
+const Wrapper = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: 100%;\n  min-height: 100px;\n  color: #999;\n  .empty-icon {\n    margin: 10px 0;\n  }\n"])));
 
 function Empty(_ref) {
   let {

package/lib/ErrorBoundary/fallback.js

@@ -8,14 +8,12 @@ exports.ErrorFallbackRetry = ErrorFallbackRetry;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
-
 var _colors = require("@mui/material/colors");
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -30,7 +28,7 @@ function InternalErrorFallback(_ref) {
     desc,
     retryFunc
   } = _ref;
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
     role: "alert",
     $theme: theme,
@@ -86,5 +84,4 @@ ErrorFallbackRetry.propTypes = {
   error: _propTypes.default.instanceOf(Error).isRequired,
   resetErrorBoundary: _propTypes.default.func.isRequired
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 2px solid ", ";\n  border-radius: 4px;\n  color: ", ";\n  background-color: ", ";\n  font-size: 14px;\n  h3 {\n    margin: 0;\n    font-size: 16px;\n  }\n  pre {\n    white-space: normal;\n  }\n"])), props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 2px solid ", ";\n  border-radius: 4px;\n  color: ", ";\n  background-color: ", ";\n  font-size: 14px;\n  h3 {\n    margin: 0;\n    font-size: 16px;\n  }\n  pre {\n    white-space: normal;\n  }\n"])), props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);

package/lib/Footer/index.js

@@ -7,8 +7,6 @@ exports.default = Footer;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
@@ -17,6 +15,8 @@ var _Util = require("../Util");
 
 var _Logo = _interopRequireDefault(require("../Logo"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -88,8 +88,7 @@ Footer.defaultProps = {
   className: '',
   style: {}
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 64px;\n  padding: 24px 0 32px;\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  width: 100%;\n\n  @media (max-width: 540px) {\n    padding: 8px 0;\n  }\n\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    .footer-item {\n      color: ", ";\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      font-size: 0.9rem;\n    }\n\n    .footer-brand {\n      margin-left: 8px;\n      margin-right: 8px;\n    }\n\n    .logo-container {\n      margin-left: 24px;\n      width: 90px;\n      opacity: 0.5;\n    }\n\n    @media (max-width: 540px) {\n      .footer-item {\n        font-size: 0.7rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 16px;\n        width: 70px;\n        height: 40px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      .footer-item {\n        font-size: 0.65rem;\n      }\n\n      .logo-container {\n        margin: 0 0 0 8px;\n        height: 24px;\n      }\n    }\n  }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
   let {
     theme,
     dark

package/lib/Header/auto-hidden.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -48,6 +48,6 @@ function AutoHidden(_ref) {
 AutoHidden.propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
 };
-const Root = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  &:before {\n    content: '';\n    display: inline-block;\n    width: 1px;\n    height: 100%;\n    float: left;\n  }\n  > * {\n    float: left;\n    white-space: nowrap;\n  }\n"])));
+const Root = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  &:before {\n    content: '';\n    display: inline-block;\n    width: 1px;\n    height: 100%;\n    float: left;\n  }\n  > * {\n    float: left;\n    white-space: nowrap;\n  }\n"])));
 var _default = AutoHidden;
 exports.default = _default;

package/lib/Header/header.js

@@ -7,16 +7,14 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _styles = require("@mui/material/styles");
-
 var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -54,7 +52,7 @@ function Header(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
     $theme: theme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
@@ -123,8 +121,6 @@ Header.defaultProps = {
   prepend: null,
   align: 'left'
 };
-
-const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n  .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n    > a {\n      height: 100%;\n      line-height: 1;\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  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n"])), props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
-
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n  .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n    > a {\n      height: 100%;\n      line-height: 1;\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  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n"])), props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 var _default = Header;
 exports.default = _default;

package/lib/Header/responsive-header.js

@@ -9,8 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
@@ -19,14 +17,14 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _styles = require("@mui/material/styles");
-
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 
 var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
 
 var _header = _interopRequireDefault(require("./header"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -62,7 +60,7 @@ function ResponsiveHeader(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
 
@@ -125,7 +123,7 @@ ResponsiveHeader.propTypes = _objectSpread(_objectSpread({}, _header.default.Pro
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 });
 ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
-const Root = (0, _styled.default)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-menu {\n      display: flex;\n      margin-right: 12px;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));
-const MenuPanel = (0, _styled.default)(_Container.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 8px;\n  padding-bottom: 16px;\n  .navmenu {\n    margin: 0 -16px;\n    .navmenu-root > .navmenu-item,\n    .navmenu-root > .navmenu-sub {\n      border: 0;\n    }\n  }\n"])));
+const Root = (0, _Theme.styled)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .header-menu {\n    display: none;\n  }\n  ", " {\n    .header-menu {\n      display: flex;\n      margin-right: 12px;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));
+const MenuPanel = (0, _Theme.styled)(_Container.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: 8px;\n  padding-bottom: 16px;\n  .navmenu {\n    margin: 0 -16px;\n    .navmenu-root > .navmenu-item,\n    .navmenu-root > .navmenu-sub {\n      border: 0;\n    }\n  }\n"])));
 var _default = ResponsiveHeader;
 exports.default = _default;

package/lib/Icon/image.js

@@ -7,10 +7,10 @@ exports.default = ImageIcon;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Img = _interopRequireDefault(require("../Img"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -80,5 +80,4 @@ ImageIcon.defaultProps = {
   prefix: '/images',
   showBadge: false
 };
-
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .badge-point {\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"])));
+const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .badge-point {\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"])));

package/lib/Icon/index.js

@@ -9,10 +9,10 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Colors = _interopRequireDefault(require("../Colors"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -92,8 +92,7 @@ Icon.defaultProps = {
   size: 24,
   style: {}
 };
-
-const Span = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .fa,\n  .fas,\n  .fal,\n  .far {\n    line-height: ", "px;\n  }\n"])), props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
+const Span = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .fa,\n  .fas,\n  .fal,\n  .far {\n    line-height: ", "px;\n  }\n"])), props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref

package/lib/Img/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styles = require("@mui/material/styles");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _material = require("@mui/material");
@@ -19,6 +17,8 @@ var _Alert = _interopRequireDefault(require("mdi-material-ui/Alert"));
 
 var _Image = _interopRequireDefault(require("mdi-material-ui/Image"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
@@ -39,7 +39,7 @@ const PREFIX = 'Img';
 const classes = {
   root: "".concat(PREFIX, "-root")
 };
-const Root = (0, _styles.styled)('div')(() => ({
+const Root = (0, _Theme.styled)('div')(() => ({
   ["& .".concat(classes.root)]: {
     position: 'relative',
     overflow: 'hidden',

package/lib/InfoRow/index.js

@@ -11,10 +11,10 @@ var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 
 var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -81,8 +81,6 @@ InfoRow.defaultProps = {
   valueComponent: 'div',
   layout: 'horizontal'
 };
-
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-start;\n  align-items: ", ";\n  margin-bottom: 16px;\n\n  .info-row__name {\n    width: ", "px;\n    margin-right: ", ";\n    margin-bottom: ", ";\n    text-transform: capitalize;\n  }\n\n  .info-row__value {\n    flex: 1;\n    overflow: auto;\n    word-wrap: break-word;\n    font-weight: 500;\n  }\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    .info-row__name {\n      font-weight: bold;\n    }\n\n    .info-row__value {\n      width: 100%;\n      font-size: 12px;\n      margin-top: 8px;\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? 'flex-start' : 'center', props => props.width, props => props.layout === 'vertical' ? '0' : '8px', props => props.layout === 'vertical' ? '8px' : '0', props => props.theme.breakpoints.values.md);
-
+const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-start;\n  align-items: ", ";\n  margin-bottom: 16px;\n\n  .info-row__name {\n    width: ", "px;\n    margin-right: ", ";\n    margin-bottom: ", ";\n    text-transform: capitalize;\n  }\n\n  .info-row__value {\n    flex: 1;\n    overflow: auto;\n    word-wrap: break-word;\n    font-weight: 500;\n  }\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: flex-start;\n    .info-row__name {\n      font-weight: bold;\n    }\n\n    .info-row__value {\n      width: 100%;\n      font-size: 12px;\n      margin-top: 8px;\n    }\n  }\n"])), props => props.layout === 'vertical' ? 'column' : 'row', props => props.layout === 'vertical' ? 'flex-start' : 'center', props => props.width, props => props.layout === 'vertical' ? '0' : '8px', props => props.layout === 'vertical' ? '8px' : '0', props => props.theme.breakpoints.values.md);
 var _default = InfoRow;
 exports.default = _default;

package/lib/Layout/dashboard/index.js

@@ -13,10 +13,6 @@ var _reactRouterDom = require("react-router-dom");
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
-
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
@@ -37,6 +33,8 @@ var _sidebar = _interopRequireDefault(require("./sidebar"));
 
 var _withExternalLink = require("./with-external-link");
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -106,7 +104,7 @@ function Dashboard(_ref2) {
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
   const navItems = (0, _react.useMemo)(() => formatLinks(links, location), [location, links]);
   const flattendNavItems = navItems.flat();
@@ -184,10 +182,8 @@ Dashboard.defaultProps = {
   sidebarWidth: 120,
   dense: 'auto'
 };
-
-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-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    &:hover {\n      overflow-y: auto;\n    }\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  &.dashboard-dense {\n    .dashboard-sidebar {\n      width: auto;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
-
-const StyledUxHeader = (0, _styled.default)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
+const Wrapper = (0, _Theme.styled)('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-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    &:hover {\n      overflow-y: auto;\n    }\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  &.dashboard-dense {\n    .dashboard-sidebar {\n      width: auto;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"]))); // 兼容旧版 dashboard
 
 function DashboardWrapper(_ref4) {
   let {

package/lib/Layout/dashboard/sidebar.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _colors = require("@mui/material/colors");
@@ -17,6 +15,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _withExternalLink = require("./with-external-link");
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -120,8 +120,6 @@ Sidebar.defaultProps = {
   dense: false
 };
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
-
-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);
-
+const Root = (0, _Theme.styled)('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,8 +7,6 @@ exports.default = Header;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
@@ -27,6 +25,8 @@ var _reactRouterDom = require("react-router-dom");
 
 var _Logo = _interopRequireDefault(require("../../Logo"));
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "brand", "brandAddon", "description", "addons", "onToggleMenu", "homeUrl", "logo"];
@@ -47,7 +47,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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'));
+const StyledAppBar = (0, _Theme.styled)(_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,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
@@ -27,6 +25,8 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _Footer = _interopRequireDefault(require("../../Footer"));
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
@@ -47,7 +47,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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);
+const Wrapper = (0, _Theme.styled)('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

@@ -9,12 +9,8 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _reactRouterDom = require("react-router-dom");
 
-var _styles = require("@mui/material/styles");
-
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -25,6 +21,8 @@ var _image = _interopRequireDefault(require("../../Icon/image"));
 
 var _Logo = _interopRequireDefault(require("../../Logo"));
 
+var _Theme = require("../../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -55,7 +53,7 @@ function Sidebar(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const location = (0, _reactRouterDom.useLocation)();
 
   const isSelected = (url, name) => {
@@ -115,6 +113,6 @@ Sidebar.defaultProps = {
   addons: null,
   logo: null
 };
-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 MenuItems = /*#__PURE__*/(0, _react.memo)((0, _Theme.styled)('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, _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);
+const MenuItem = (0, _Theme.styled)(_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,8 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
 var _Link = _interopRequireDefault(require("@mui/material/Link"));
@@ -45,6 +43,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Logo = _interopRequireDefault(require("../Logo"));
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -271,7 +271,5 @@ Layout.defaultProps = {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})
   })
 };
-
-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 = _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"])));
+const Div = (0, _Theme.styled)('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 = (0, _Theme.styled)('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,10 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _styles = require("@mui/material/styles");
-
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
@@ -37,6 +33,8 @@ var _Util = require("../Util");
 
 var _context = require("./context");
 
+var _Theme = require("../Theme");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -74,7 +72,7 @@ function LocaleSelector(props) {
   } = (0, _react.useContext)(_context.LocaleContext);
   const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
-  const theme = (0, _styles.useTheme)();
+  const theme = (0, _Theme.useTheme)();
   const dark = (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.mode) === 'dark';
 
   const onSelect = newLocale => {
@@ -185,5 +183,4 @@ LocaleSelector.defaultProps = {
 };
 var _default = LocaleSelector;
 exports.default = _default;
-
-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));
+const Div = (0, _Theme.styled)('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,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Theme = require("../Theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -142,5 +142,4 @@ Logo.defaultProps = {
   showText: true,
   showLogo: true
 };
-
-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;');
+const Container = (0, _Theme.styled)('span')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  .logo-text {\n    ", "\n    ", ";\n  }\n"])), props => props.layout === 'horizontal' ? 'row' : 'column', props => props.layout === 'vertical' ? 'margin-top: 8px;' : '', props => props.layout === 'vertical' ? '' : 'margin-left: 8px;');