@arcblock/ux 2.3.0 → 2.4.2

package/lib/Datatable/index.js

@@ -12,7 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react2 = require("@emotion/react");
 
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 
@@ -32,6 +34,8 @@ var _DatatableContext = require("./DatatableContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
 const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped", "verticalKeyWidth", "hideTableHeader", "components", "emptyNode", "durable", "durableKeys"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -40,6 +44,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -52,7 +58,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 function Datatable(_ref) {
   let props = Object.assign({}, _ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvide, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
   });
 }
@@ -417,12 +423,9 @@ const getDurableData = key => {
 };
 
 exports.getDurableData = getDurableData;
-const alignCss = (0, _styledComponents.css)([".MuiTableCell-head{[class*='MUIDataTableHeadCell-toolButton']{width:100%;> [class*='MUIDataTableHeadCell-sortAction']{width:100%;}}&.pc-align-center{text-align:center;[class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction']{justify-content:center;}}&.pc-align-right{text-align:right;[class*='MUIDataTableHeadCell-toolButton']{margin-right:0;padding-right:0;& > [class*='MUIDataTableHeadCell-sortAction']{justify-content:flex-end;}}}}.MuiTableCell-body{&.pc-align-center{text-align:center;}&.pc-align-right{text-align:right;}}"]);
+const alignCss = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableCell-head {\n    [class*='MUIDataTableHeadCell-toolButton'] {\n      width: 100%;\n      > [class*='MUIDataTableHeadCell-sortAction'] {\n        width: 100%;\n      }\n    }\n    &.pc-align-center {\n      text-align: center;\n      [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {\n        justify-content: center;\n      }\n    }\n    &.pc-align-right {\n      text-align: right;\n      [class*='MUIDataTableHeadCell-toolButton'] {\n        margin-right: 0;\n        padding-right: 0;\n        & > [class*='MUIDataTableHeadCell-sortAction'] {\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n  .MuiTableCell-body {\n    &.pc-align-center {\n      text-align: center;\n    }\n    &.pc-align-right {\n      text-align: right;\n    }\n  }\n"])));
 
-const TableContainer = _styledComponents.default.div.withConfig({
-  displayName: "Datatable__TableContainer",
-  componentId: "sc-1ju12vq-0"
-})(["&.datatable-hide-header{thead.MuiTableHead-root{display:none;}}td{&.vertical-align-top{align-items:flex-start;}&.vertical-align-center{align-items:center;}&.vertical-align-bottom{align-items:flex-end;}}height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{td.MuiTableCell-body{padding-right:0;}[class*='MUIDataTable-responsiveBase']{tr:not([class*='responsiveSimple']){td.MuiTableCell-body{display:flex;> div{width:auto;flex:1;&:first-child{font-weight:bold;font-size:14px;width:auto;flex:0 0 auto;padding-right:16px;&:empty{padding-right:0;}}}}}}}", "{", "}", "{[class*='responsiveSimple']{", "}}", " &.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
+const TableContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-child {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
   if (inProps.verticalKeyWidth) {
     return "\n        ".concat(inProps.theme.breakpoints.down('md'), " {\n          [class*='MUIDataTable-responsiveBase'] {\n            tr:not([class*='responsiveSimple']) {\n              td.MuiTableCell-body {\n                > div {\n                  &:first-child {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
   }
@@ -430,10 +433,7 @@ const TableContainer = _styledComponents.default.div.withConfig({
   return '';
 }, props => props.theme.palette.action.hover);
 
-const FilterLine = _styledComponents.default.div.withConfig({
-  displayName: "Datatable__FilterLine",
-  componentId: "sc-1ju12vq-1"
-})(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);
+const FilterLine = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-filter-content {\n    margin-bottom: 8px;\n  }\n  .toolbar-filter-title {\n    font-weight: 700;\n    font-size: 14px;\n  }\n"])));
 
 function WrapFilterList(props) {
   const {
@@ -476,7 +476,4 @@ function WrapTableFooter(props) {
   });
 }
 
-const FooterContainer = _styledComponents.default.div.withConfig({
-  displayName: "Datatable__FooterContainer",
-  componentId: "sc-1ju12vq-2"
-})(["display:flex;align-items:center;.datatable-footer{position:relative;margin-left:auto;&.datatable-footer-disabled{position:relative;.MuiTablePagination-root{opacity:0.6;}&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}", "{.MuiTableCell-footer,.MuiToolbar-gutters{padding:0;}div[variant='standard']{margin-left:4px;margin-right:16px;}.MuiTablePagination-actions{margin-left:10px;}}"], props => props.theme.breakpoints.down('sm'));
+const FooterContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .datatable-footer {\n    position: relative;\n    margin-left: auto;\n    &.datatable-footer-disabled {\n      position: relative;\n      .MuiTablePagination-root {\n        opacity: 0.6;\n      }\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  ", " {\n    .MuiTableCell-footer,\n    .MuiToolbar-gutters {\n      padding: 0;\n    }\n\n    div[variant='standard'] {\n      margin-left: 4px;\n      margin-right: 16px;\n    }\n\n    .MuiTablePagination-actions {\n      margin-left: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('sm'));

package/lib/Dialog/dialog.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 _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 
@@ -25,10 +25,14 @@ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -140,15 +144,9 @@ Dialog.defaultProps = {
   actionsPosition: 'right',
   PaperProps: {}
 };
-const StyledMuiDialog = (0, _styledComponents.default)(_Dialog.default).withConfig({
-  displayName: "dialog__StyledMuiDialog",
-  componentId: "sc-kt5gv0-0"
-})([".MuiDialog-paper{", ";}.MuiDialogContent-root{padding:16px 24px;}.MuiDialogActions-root{padding:8px 24px 16px 24px;}.MuiDialogActions-root.ux-dialog_actions--left{justify-content:flex-start;}.MuiDialogActions-root.ux-dialog_actions--right{justify-content:flex-end;}.MuiDialogActions-root.ux-dialog_actions--center{justify-content:center;}"], props => props.fullScreen ? 'border-radius: 0;' : '');
-
-const Header = _styledComponents.default.div.withConfig({
-  displayName: "dialog__Header",
-  componentId: "sc-kt5gv0-1"
-})(["display:flex;justify-content:space-between;align-items:center;padding:16px 24px;.ux-dialog_left{display:flex;justify-content:flex-start;align-items:center;min-width:0;}.ux-dialog_right{display:flex;justify-content:flex-end;align-items:center;}.ux-dialog_toolbar{display:flex;align-items:center;}.ux-dialog_title{margin:0;font-size:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.ux-dialog_closeButton{", "}"], props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
+const StyledMuiDialog = (0, _styled.default)(_Dialog.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paper {\n    ", ";\n  }\n  .MuiDialogContent-root {\n    padding: 16px 24px;\n  }\n  .MuiDialogActions-root {\n    padding: 8px 24px 16px 24px;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--left {\n    justify-content: flex-start;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--right {\n    justify-content: flex-end;\n  }\n  .MuiDialogActions-root.ux-dialog_actions--center {\n    justify-content: center;\n  }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
+
+const Header = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  .ux-dialog_left {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    min-width: 0;\n  }\n  .ux-dialog_right {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  .ux-dialog_toolbar {\n    display: flex;\n    align-items: center;\n  }\n  .ux-dialog_title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .ux-dialog_closeButton {\n    /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n    ", "\n  }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
 
 var _default = Dialog;
 exports.default = _default;

package/lib/Earth/index.js

@@ -11,7 +11,7 @@ var _useSpring = _interopRequireDefault(require("react-use/lib/useSpring"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var d3 = _interopRequireWildcard(require("d3-geo"));
 
@@ -25,12 +25,16 @@ var _util = _interopRequireDefault(require("./util"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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; }
@@ -444,12 +448,6 @@ Earth.defaultProps = {
   colors: {}
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Earth__Container",
-  componentId: "sc-406ond-0"
-})(["background-color:", ";width:", "px;height:", "px;position:relative;animation-name:zoomIn;animation-duration:1s;animation-iteration-count:1;animation-timing-function:ease;user-select:none;.defs{height:0;width:0;}.frame{fill:none;pointer-events:all;}.country{fill:", ";stroke:", ";stroke-width:0.5px;transition:fill 300ms ease;&:hover{fill:", ";}}.country--active{fill:", ";}.globe{fill:", ";stroke:rgba(255,255,255,0.5);stroke-width:0.25px;}.graticule{fill:none;stroke:", ";}.star{fill:#fff;stroke:rgba(255,255,255,0.5);stroke-width:0.25px;}.marker{.marker__outer{fill-opacity:0;animation:scaleIn 2s infinite ease-in-out;}}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.1,0.1,0.1);}50%{opacity:1;}}@keyframes scaleIn{from{fill-opacity:0.3;transform:scale3d(0.5,0.5,0.5);}to{fill-opacity:0;transform:scale3d(1.5,1.5,1.5);}}"], 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 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 = _styledComponents.default.div.withConfig({
-  displayName: "Earth__Tooltip",
-  componentId: "sc-406ond-1"
-})(["position:absolute;width:auto;min-width:90px;max-width:320px;padding:8px 12px;font-size:14px;background-color:#4a4a4a;border-radius:2px;animation-name:fadeIn;animation-duration:250ms;animation-iteration-count:1;animation-timing-function:ease;.title,.description{margin:0;font-size:16px;color:#fff;}.description{margin-top:", "px;color:#fff;font-size:12px;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"], props => props.theme.spacing(1));
+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));

package/lib/Empty/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -15,6 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["name", "color", "size", "children"];
 
+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; }
@@ -27,10 +29,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: "Empty__Wrapper",
-  componentId: "sc-g0b1j7-0"
-})(["display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;min-height:100px;color:#999;.empty-icon{margin:10px 0;}"]);
+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"])));
 
 function Empty(_ref) {
   let {

package/lib/ErrorBoundary/fallback.js

@@ -8,7 +8,7 @@ exports.ErrorFallbackRetry = ErrorFallbackRetry;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -18,8 +18,12 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 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 InternalErrorFallback(_ref) {
   let {
     title,
@@ -83,7 +87,4 @@ ErrorFallbackRetry.propTypes = {
   resetErrorBoundary: _propTypes.default.func.isRequired
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "fallback__Root",
-  componentId: "sc-1ajge2q-0"
-})(["padding:16px;border:2px solid ", ";border-radius:4px;color:", ";background-color:", ";font-size:14px;h3{margin:0;font-size:16px;}pre{white-space:normal;}"], props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);
+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]);

package/lib/Footer/index.js

@@ -7,7 +7,7 @@ exports.default = Footer;
 
 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,9 +19,12 @@ var _Logo = _interopRequireDefault(require("../Logo"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint-disable react/no-unused-prop-types */
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function Footer(props) {
   const newProps = (0, _Util.mergeProps)(props, Footer, ['dark', 'style']);
   const {
@@ -86,10 +89,7 @@ Footer.defaultProps = {
   style: {}
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Footer__Container",
-  componentId: "sc-1qpifuv-0"
-})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin-left:24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
+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 => {
   let {
     theme,
     dark

package/lib/Header/auto-hidden.js

@@ -7,16 +7,20 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["height"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -44,9 +48,6 @@ function AutoHidden(_ref) {
 AutoHidden.propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
 };
-const Root = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "auto-hidden__Root",
-  componentId: "sc-1vwixkj-0"
-})(["overflow:hidden;&:before{content:'';display:inline-block;width:1px;height:100%;float:left;}> *{float:left;white-space:nowrap;}"]);
+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"])));
 var _default = AutoHidden;
 exports.default = _default;

package/lib/Header/header.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 _Box = _interopRequireDefault(require("@mui/material/Box"));
 
@@ -19,10 +19,14 @@ var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align"];
 
 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; }
@@ -120,10 +124,7 @@ Header.defaultProps = {
   align: 'left'
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "header__Root",
-  componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:44px;margin-right:16px;img,svg{width:auto;height:100%;max-height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;justify-content:center;height:44px;margin-right:16px;line-height:1;a{color:inherit;text-decoration:none;}.header-brand-title{display:flex;align-items:center;h2{margin:0;font-size:16px;}}.header-brand-desc{margin-top:4px;color:#9397a1;}}.header-brand-addon{margin-right:16px;}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{.header-brand-title{h2{font-size:13px;}}.header-brand-desc{font-size:12px;}}.header-brand-addon{display:none;}}"], 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 = _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'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Header/responsive-header.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 _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
@@ -29,10 +29,14 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["menu", "prepend", "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; }
@@ -121,13 +125,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, _styledComponents.default)(_header.default).withConfig({
-  displayName: "responsive-header__Root",
-  componentId: "sc-1dugv47-0"
-})([".header-menu{display:none;}", "{.header-menu{display:flex;margin-right:12px;}}"], props => props.$theme.breakpoints.down('md'));
-const MenuPanel = (0, _styledComponents.default)(_Container.default).withConfig({
-  displayName: "responsive-header__MenuPanel",
-  componentId: "sc-1dugv47-1"
-})(["padding-top:8px;padding-bottom:16px;.navmenu{margin:0 -16px;.navmenu-root > .navmenu-item,.navmenu-root > .navmenu-sub{border:0;}}"]);
+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"])));
 var _default = ResponsiveHeader;
 exports.default = _default;

package/lib/Icon/image.js

@@ -7,16 +7,20 @@ exports.default = ImageIcon;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["name", "size", "alt", "color", "style", "prefix", "showBadge"];
 
 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; }
@@ -77,7 +81,4 @@ ImageIcon.defaultProps = {
   showBadge: false
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "image__Div",
-  componentId: "sc-1136r3s-0"
-})(["position:relative;.badge-point{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);}"]);
+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"])));

package/lib/Icon/index.js

@@ -9,16 +9,20 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["name", "color", "size", "variant", "rounded", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -89,10 +93,7 @@ Icon.defaultProps = {
   style: {}
 };
 
-const Span = _styledComponents.default.span.withConfig({
-  displayName: "Icon__Span",
-  componentId: "sc-3s68zh-0"
-})(["width:", "px;height:", "px;border-radius:50%;border:1px solid ", ";display:flex;justify-content:center;align-items:center;.fa,.fas,.fal,.far{line-height:", "px;}"], props => props.size * 2, props => props.size * 2, props => props.color, props => props.size);
+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);
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, _objectSpread(_objectSpread({}, props), {}, {
   forwardedRef: ref

package/lib/InfoRow/index.js

@@ -11,16 +11,20 @@ var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
 
 var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["name", "nameFormatter", "layout", "children", "valueComponent", "nameWidth"];
 
 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; }
@@ -78,10 +82,7 @@ InfoRow.defaultProps = {
   layout: 'horizontal'
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "InfoRow__Container",
-  componentId: "sc-8ablax-0"
-})(["display:flex;flex-direction:", ";justify-content:flex-start;align-items:", ";margin-bottom:16px;.info-row__name{width:", "px;margin-right:", ";margin-bottom:", ";text-transform:capitalize;}.info-row__value{flex:1;overflow:auto;word-wrap:break-word;font-weight:500;}@media (max-width:", "px){flex-direction:column;justify-content:flex-start;align-items:flex-start;.info-row__name{font-weight:bold;}.info-row__value{width:100%;font-size:12px;margin-top:8px;}}"], 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 = _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);
 
 var _default = InfoRow;
 exports.default = _default;

package/lib/Layout/dashboard/index.js

@@ -13,7 +13,7 @@ var _reactRouterDom = require("react-router-dom");
 
 var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -39,12 +39,16 @@ var _withExternalLink = require("./with-external-link");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["closeMenu"],
       _excluded2 = ["children", "title", "headerProps", "links", "fullWidth", "dense"],
       _excluded3 = ["legacy"];
 
 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; }
@@ -181,15 +185,9 @@ Dashboard.defaultProps = {
   dense: 'auto'
 };
 
-const Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "dashboard__Wrapper",
-  componentId: "sc-arvc7q-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:", "px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}&.dashboard-dense{.dashboard-sidebar{width:auto;}}", "{.header-logo{display:flex;justify-content:center;width:", "px;}&.dashboard-dense{.header-logo{width:auto;}}}"], props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+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, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
-  displayName: "dashboard__StyledUxHeader",
-  componentId: "sc-arvc7q-1"
-})([".header-container{max-width:100%;}"]); // 兼容旧版 dashboard
+const StyledUxHeader = (0, _styled.default)(_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,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; }
@@ -117,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;