@arcblock/ux 2.3.0 → 2.4.0

package/lib/ActivityIndicator/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@mui/material/colors");
 
@@ -19,11 +19,15 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["messages", "interval"],
       _excluded2 = ["size", "orbitColor", "atomColor", "duration"];
 
 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; }
@@ -97,10 +101,7 @@ ActivityIndicator.defaultProps = {
   messages: ['Loading data...']
 };
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "ActivityIndicator__Div",
-  componentId: "sc-rsk6jb-0"
-})(["&&{box-sizing:border-box;padding:20px;width:100%;height:100%;min-height:360px;z-index:100;transition:opacity 0.5s linear;display:flex;align-items:center;flex-direction:column;justify-content:center;}.pm-loader-text{color:", ";font-size:14px;text-align:center;position:relative;height:70px;-webkit-user-select:none;}.pm-loader-container{width:100%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;flex:1;}.pm-loader-atoms{width:100px;height:100px;display:flex;position:relative;align-items:center;justify-content:center;}"], _Colors.default.grey[900]);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    box-sizing: border-box;\n    padding: 20px;\n    width: 100%;\n    height: 100%;\n    min-height: 360px;\n    z-index: 100;\n    transition: opacity 0.5s linear;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .pm-loader-text {\n    color: ", ";\n    font-size: 14px;\n    text-align: center;\n    position: relative;\n    height: 70px;\n    -webkit-user-select: none;\n  }\n\n  .pm-loader-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n    flex: 1;\n  }\n\n  .pm-loader-atoms {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n  }\n"])), _Colors.default.grey[900]);
 
 function Orbit(_ref2) {
   let {
@@ -137,10 +138,7 @@ Orbit.defaultProps = {
   duration: 2
 };
 
-const OrbitRoot = _styledComponents.default.div.withConfig({
-  displayName: "ActivityIndicator__OrbitRoot",
-  componentId: "sc-rsk6jb-1"
-})(["@keyframes orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}position:absolute;border-radius:50%;animation:orbit ", "s infinite;animation-timing-function:linear;transform-origin:center;> div{position:absolute;top:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;}"], _ref3 => {
+const OrbitRoot = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @keyframes orbit {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  position: absolute;\n  border-radius: 50%;\n  animation: orbit ", "s infinite;\n  animation-timing-function: linear;\n  transform-origin: center;\n\n  > div {\n    position: absolute;\n    top: 50%;\n    width: 6px;\n    height: 6px;\n    transform: translateX(-50%);\n    border-radius: 50%;\n  }\n"])), _ref3 => {
   let {
     $duration
   } = _ref3;

package/lib/Alert/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 _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -21,10 +21,14 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "children", "style", "className", "variant"];
 
 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; }
@@ -119,7 +123,4 @@ Alert.defaultProps = {
 var _default = Alert;
 exports.default = _default;
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "Alert__Container",
-  componentId: "sc-49s8s4-0"
-})(["display:flex;align-items:center;font-size:16px;margin:0;padding:16px;margin:16px 0;strong{margin:0 5px;}.alert-icon{margin-right:16px;}.alert-content{flex:1;display:flex;flex-direction:column;}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n  margin: 0;\n  padding: 16px;\n  margin: 16px 0;\n\n  strong {\n    margin: 0 5px;\n  }\n\n  .alert-icon {\n    margin-right: 16px;\n  }\n\n  .alert-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n  }\n"])));

package/lib/AnimationWaiter/index.js

@@ -7,7 +7,7 @@ exports.default = AnimationWaiter;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,10 +17,14 @@ var _defaultAnimation = _interopRequireDefault(require("./default-animation.json
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["animationData", "size", "message", "messageDuration", "messageLoop", "tips", "tipsDuration", "maybeDuration", "speed", "increaseSpeed"];
 
 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; }
@@ -203,7 +207,4 @@ AnimationWaiter.defaultProps = {
   increaseSpeed: 0
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "AnimationWaiter__Container",
-  componentId: "sc-1qcr25l-0"
-})(["display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;.waiter-message{position:relative;width:100%;font-weight:700;font-size:18px;line-height:22px;text-align:center;overflow:hidden;.message-block{position:absolute;left:0;width:100%;opacity:0;transition:all ease 0.3s;user-select:none;&.message-before{transform:translate(-20px,0);}&.message-after{transform:translate(20px,0);}&.show-message{transform:translate(0,0);opacity:1;user-select:text;z-index:2;}}.placeholder-message{user-select:none;display:none;opacity:0;&.show-message{display:block;}}}.waiter-tips-container{position:relative;margin-top:auto;width:100%;.waiter-tips-block{position:absolute;bottom:0;left:0;width:100%;opacity:0;pointer-events:none;z-index:1;transform:translate(-20px,0);transition:all ease 0.4s;&.show-tips{opacity:1;pointer-events:auto;z-index:2;transform:translate(0,0);}}}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .waiter-message {\n    position: relative;\n    width: 100%;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    text-align: center;\n    overflow: hidden;\n    .message-block {\n      position: absolute;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      transition: all ease 0.3s;\n      user-select: none;\n      &.message-before {\n        transform: translate(-20px, 0);\n      }\n      &.message-after {\n        transform: translate(20px, 0);\n      }\n      &.show-message {\n        transform: translate(0, 0);\n        opacity: 1;\n        user-select: text;\n        z-index: 2;\n      }\n    }\n\n    .placeholder-message {\n      user-select: none;\n      display: none;\n      opacity: 0;\n      &.show-message {\n        display: block;\n      }\n    }\n  }\n\n  .waiter-tips-container {\n    position: relative;\n    margin-top: auto;\n    width: 100%;\n    .waiter-tips-block {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      opacity: 0;\n      pointer-events: none;\n      z-index: 1;\n      transform: translate(-20px, 0);\n      transition: all ease 0.4s;\n      &.show-tips {\n        opacity: 1;\n        pointer-events: auto;\n        z-index: 2;\n        transform: translate(0, 0);\n      }\n    }\n  }\n"])));

package/lib/Badge/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
@@ -19,10 +19,14 @@ var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -99,7 +103,4 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/
 })));
 
 exports.default = _default;
-const Span = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "Badge__Span",
-  componentId: "sc-1kkh0ds-0"
-})(["&&{display:inline-flex;justify-content:center;align-items:center;padding:2px 10px;height:24px;line-height:24px;}"]);
+const Span = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 24px;\n    line-height: 24px;\n  }\n"])));

package/lib/Blocklet/blocklet.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletStore;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,6 +27,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["title", "did", "description", "cover", "version", "button", "buttonText", "buttonDisabled", "buttonLoading", "onButtonClick", "onMainClick", "className"];
 
+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; }
@@ -39,10 +41,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 Div = _styledComponents.default.div.withConfig({
-  displayName: "blocklet__Div",
-  componentId: "sc-atxvkd-0"
-})(["&.arcblock-blocklet{padding:", " ", " 0 ", ";}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:", ";overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:", ";}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin-top:", ";color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: ", " ", " 0\n      ", ";\n  }\n  .arcblock-blocklet__content {\n    cursor: pointer;\n    display: flex;\n    ", " {\n      align-items: center;\n    }\n  }\n  .arcblock-blocklet__cover {\n    width: 64px;\n    height: 64px;\n    margin-right: ", ";\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n    ", " {\n      width: 80px;\n      height: 80px;\n      margin-bottom: 12px;\n    }\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    border-bottom: 1px solid ", ";\n    padding-bottom: ", ";\n  }\n  .arcblock-blocklet__text {\n    height: 57px;\n    overflow: hidden;\n  }\n  /* \u8BBE\u7F6E\u591A\u884C\u6587\u672C\u6EA2\u51FA\u663E\u793A\u7701\u7565\u53F7 \u517C\u5BB9fireFox\u3001safari */\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin-top: ", ";\n    color: ", ";\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 17px;\n    max-height: 34px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n  .arcblock-blocklet__version {\n    color: ", ";\n    font-size: 12px;\n  }\n"])), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.spacing(2), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.spacing(2), props => props.theme.spacing(0.5), props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {

package/lib/Blocklet/utils.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ActionButton = _styledComponents.default.div.withConfig({
-  displayName: "utils__ActionButton",
-  componentId: "sc-1po1ir-0"
-})(["background-color:transparent !important;& >:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;border-radius:2px;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}& >:not(.Mui-disabled){background-color:transparent !important;color:", "!important;}& >:not(.Mui-disabled){&:hover{color:", "!important;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const ActionButton = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent !important;\n  & > :not(.Mui-disabled) {\n    position: relative;\n    z-index: 1;\n    &::before {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      top: 0;\n      transition: opacity 0.3s;\n    }\n    &:hover::before {\n      opacity: 0;\n    }\n    &::after {\n      content: '';\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      border-radius: 2px;\n      background-color: ", ";\n      transform: scale(0.1);\n      opacity: 0;\n      z-index: -1;\n      transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n    }\n    &:hover::after {\n      opacity: 1;\n      transform-origin: center;\n      transform: scale(1);\n    }\n  }\n  & > :not(.Mui-disabled) {\n    background-color: transparent !important;\n    color: ", "!important;\n  }\n  & > :not(.Mui-disabled) {\n    &:hover {\n      color: ", "!important;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 var _default = ActionButton;
 exports.default = _default;

package/lib/BlockletNFT/index.js

@@ -7,7 +7,7 @@ exports.default = BlockletNFT;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,6 +33,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["title", "did", "description", "cover", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
 
+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; }
@@ -45,6 +47,8 @@ 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; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 /**
  * 美化数字 1000-->1k
  * @param {*} _size
@@ -65,10 +69,7 @@ function prettySize(_size) {
   return _size && "".concat(size).concat(list[index]);
 }
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "BlockletNFT__Div",
-  componentId: "sc-19lczgp-0"
-})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__title{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.arcblock-blocklet {\n    padding: 0 16px;\n    background: ", ";\n    overflow: hidden;\n    box-shadow: 0px 0px 8px #f0f0f0;\n    &:hover {\n      box-shadow: 0px 2px 12px #f0f0f0;\n    }\n  }\n  .arcblock-blocklet__content {\n    padding: 16px 0 0 0;\n  }\n  .arcblock-blocklet__content--main {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .arcblock-blocklet__content--body {\n    overflow: hidden;\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n  }\n  .arcblock-blocklet__addons {\n    padding: 16px 0;\n  }\n  .arcblock-blocklet__cover {\n    width: 80px;\n    height: 80px;\n    margin-right: 12px;\n    overflow: hidden;\n    border-radius: 12px;\n    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */\n    transform: translateZ(0);\n  }\n  .arcblock-blocklet__button--hover {\n    &:not(.Mui-disabled) {\n      position: relative;\n      z-index: 1;\n      &::before {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        left: 0;\n        top: 0;\n        transition: opacity 0.3s;\n      }\n      &:hover::before {\n        opacity: 0;\n      }\n      &::after {\n        content: '';\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        top: 0;\n        left: 0;\n        background-color: ", ";\n        transform: scale(0.1);\n        opacity: 0;\n        z-index: -1;\n        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;\n      }\n      &:hover::after {\n        opacity: 1;\n        transform-origin: center;\n        transform: scale(1);\n      }\n    }\n\n    &:not(.Mui-disabled) {\n      background-color: transparent !important;\n      color: ", ";\n    }\n    &:not(.Mui-disabled) {\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .arcblock-blocklet__info {\n    flex: 1;\n    overflow: hidden;\n    .arcblock-blocklet__button {\n      margin-top: 16px;\n      display: inline-block;\n    }\n  }\n  .arcblock-blocklet__title {\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .arcblock-blocklet__describe {\n    margin: 0 0 2px 0;\n    color: #999;\n    font-size: 14px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .arcblock-blocklet__addons {\n    display: flex;\n    justify-content: space-between;\n    color: #999;\n    font-size: 14px;\n    position: relative;\n  }\n  .arcblock-blocklet__addons--item {\n    white-space: nowrap;\n  }\n  &.arcblock-blocklet--size-md {\n    &:hover {\n      position: relative;\n    }\n    .arcblock-blocklet__title {\n      height: 2.3em;\n      margin-bottom: 3px;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n      overflow: hidden;\n      text-overflow: initial;\n      white-space: initial;\n      word-break: break-all;\n    }\n    .arcblock-blocklet__describe {\n      white-space: normal;\n      height: 2.86em;\n    }\n    .arcblock-blocklet__button {\n      margin-top: 5px;\n    }\n  }\n  &.arcblock-blocklet--size-sm,\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__cover {\n      width: 40px;\n      height: 40px;\n      border-radius: 6px;\n    }\n    .arcblock-blocklet__content {\n      padding: 16px 0;\n    }\n    .arcblock-blocklet__addons {\n      padding: 8px 0;\n      .arcblock-blocklet__addons--item {\n        font-size: 12px;\n      }\n    }\n  }\n  &.arcblock-blocklet--size-xs {\n    .arcblock-blocklet__addons {\n      display: none !important;\n    }\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 function BlockletIcon(_ref) {
   let {

package/lib/Center/index.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Center;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 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) } })); }
+
 /**
  *
  * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
@@ -38,10 +42,7 @@ function Center(_ref) {
   });
 }
 
-const Div = _styledComponents.default.div.withConfig({
-  displayName: "Center__Div",
-  componentId: "sc-1kmxe8v-0"
-})(["flex:1;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;"]);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  width: 100vw;\n  height: 100vh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 
 Center.propTypes = {
   children: _propTypes.default.any.isRequired,

package/lib/ClickToCopy/index.js

@@ -19,7 +19,7 @@ var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _hook = _interopRequireDefault(require("./hook"));
 
@@ -31,6 +31,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _copyButton = _interopRequireDefault(require("./copy-button"));
 
+var _templateObject;
+
 const _excluded = ["children", "content", "tip", "copiedTip", "tipPlacement", "locale", "style"];
 
 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); }
@@ -39,6 +41,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 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; }
@@ -127,7 +131,4 @@ ClickToCopy.defaultProps = {
   locale: 'en',
   style: {}
 };
-const Container = (0, _styledComponents.default)(_Typography.default).withConfig({
-  displayName: "ClickToCopy__Container",
-  componentId: "sc-1vo2vcj-0"
-})(["display:inline;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;align-items:center;justify-content:start;border-radius:15px;padding:1px 12px;background-color:rgba(0,0,0,0.08);cursor:pointer;"]);
+const Container = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  align-items: center;\n  justify-content: start;\n  border-radius: 15px;\n  padding: 1px 12px;\n  background-color: rgba(0, 0, 0, 0.08);\n  cursor: pointer;\n"])));

package/lib/CodeBlock/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 
@@ -57,10 +57,14 @@ var _Colors = _interopRequireDefault(require("../Colors"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["code", "language", "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; }
@@ -187,7 +191,4 @@ CodeBlock.defaultProps = {
 };
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
 
-const Pre = _styledComponents.default.pre.withConfig({
-  displayName: "CodeBlock__Pre",
-  componentId: "sc-1bpapaq-0"
-})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:flex;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);
+const Pre = _styled.default.pre(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: #fff;\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: none;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    border-radius: 4px;\n\n    &,\n    &:hover,\n    &.Mui-disabled {\n      background: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n    }\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    color: #fff;\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/lib/ContactForm/index.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
@@ -24,8 +24,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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 async function submitContactForm(_ref, fields, context) {
@@ -215,7 +219,4 @@ _defineProperty(ContactForm, "defaultProps", {
 
 const getInputWidth = props => props.layout === 'vertical' ? '100%' : "".concat(Math.max(95 / (props.fieldCount + 1), 20), "%");
 
-const Form = _styledComponents.default.form.withConfig({
-  displayName: "ContactForm__Form",
-  componentId: "sc-1ps0j3m-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;@media (max-width:", "px){width:100% !important;}max-width:800px;margin:0px auto;.title{font-size:30px;text-align:center;color:", ";}.form-controls{width:100%;flex-direction:", ";justify-content:space-between;align-items:center;.input{width:", ";height:50px;border:none;border-bottom:1px solid ", ";font-size:16px;letter-spacing:1.8px;outline:none;margin:", ";background:transparent;&:first-of-type{margin-top:40px;}}.subscribe-btn-empty{margin-top:", ";width:", ";}}.error,.success{margin-top:20px;}"], props => props.theme.breakpoints.values.sm, props => props.theme.typography.color.main, props => props.layout === 'vertical' ? 'column' : 'row', props => getInputWidth(props), props => props.theme.typography.color.main, props => props.layout === 'vertical' ? '12px 0' : '12px', props => props.layout === 'vertical' ? '40px' : '0', props => props.layout === 'vertical' ? '100%' : 'auto');
+const Form = _styled.default.form(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: ", "px) {\n    width: 100% !important;\n  }\n  max-width: 800px;\n  margin: 0px auto;\n\n  .title {\n    font-size: 30px;\n    text-align: center;\n    color: ", ";\n  }\n\n  .form-controls {\n    width: 100%;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .input {\n      width: ", ";\n      height: 50px;\n      border: none;\n      border-bottom: 1px solid ", ";\n      font-size: 16px;\n      letter-spacing: 1.8px;\n      outline: none;\n      margin: ", ";\n      background: transparent;\n\n      &:first-of-type {\n        margin-top: 40px;\n      }\n    }\n\n    .subscribe-btn-empty {\n      margin-top: ", ";\n      width: ", ";\n    }\n  }\n\n  .error,\n  .success {\n    margin-top: 20px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.typography.color.main, props => props.layout === 'vertical' ? 'column' : 'row', props => getInputWidth(props), props => props.theme.typography.color.main, props => props.layout === 'vertical' ? '12px 0' : '12px', props => props.layout === 'vertical' ? '40px' : '0', props => props.layout === 'vertical' ? '100%' : 'auto');

package/lib/CookieConsent/index.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "resetCookieConsentValue", {
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 
@@ -21,6 +21,8 @@ var _reactCookieConsent = _interopRequireWildcard(require("react-cookie-consent"
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children", "locale", "style"];
 
 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); }
@@ -29,6 +31,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; }
@@ -108,7 +112,4 @@ DefaultCookieConsent.defaultProps = {
   locale: 'en'
 };
 
-const Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "CookieConsent__Wrapper",
-  componentId: "sc-xilwg4-0"
-})(["box-sizing:border-box;position:fixed;right:20px;bottom:20px;z-index:999;max-width:440px;padding:16px 24px;font-size:16px;color:#666;background:#fff;border-radius:6px;box-shadow:0 0 18px rgba(0,0,0,0.2);&:empty{display:none;}button{min-width:200px;}@media screen and (max-width:480px){left:16px;right:16px;bottom:16px;width:auto;button{display:block;width:100%;}}"]);
+const Wrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  z-index: 999;\n  max-width: 440px;\n  padding: 16px 24px;\n  font-size: 16px;\n  color: #666;\n  background: #fff;\n  border-radius: 6px;\n  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);\n  &:empty {\n    display: none;\n  }\n  button {\n    min-width: 200px;\n  }\n\n  @media screen and (max-width: 480px) {\n    left: 16px;\n    right: 16px;\n    bottom: 16px;\n    width: auto;\n    button {\n      display: block;\n      width: 100%;\n    }\n  }\n"])));

package/lib/CountDown/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 _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["dark", "endTime"];
 
 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; }
@@ -166,7 +170,4 @@ CountDown.defaultProps = {
 };
 const textBackground = "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\nlinear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))";
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "CountDown__Container",
-  componentId: "sc-i2a9gr-0"
-})(["color:", ";font-size:50px;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;.num-group{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 60px;@media (max-width:", "px){margin:0 20px;}@media (max-width:", "px){margin:0;}.num-items{display:flex;flex-direction:row;}.num-item{display:inline-block;width:40px;height:60px;line-height:60px;background-image:", ";text-align:center;&:first-of-type{margin-right:10px;@media (max-width:", "px){margin:0;}}}.num-label{margin-top:20px;font-size:24px;color:", ";}}"], props => (0, _Util.getColor)(props), props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.sm, props => props.dark ? textBackground : 'none', props => props.theme.breakpoints.values.sm, props => (0, _Util.getColor)(props));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 50px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: flex-start;\n\n  .num-group {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin: 0 60px;\n\n    @media (max-width: ", "px) {\n      margin: 0 20px;\n    }\n    @media (max-width: ", "px) {\n      margin: 0;\n    }\n\n    .num-items {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .num-item {\n      display: inline-block;\n      width: 40px;\n      height: 60px;\n      line-height: 60px;\n      background-image: ", ";\n      text-align: center;\n\n      &:first-of-type {\n        margin-right: 10px;\n        @media (max-width: ", "px) {\n          margin: 0;\n        }\n      }\n    }\n\n    .num-label {\n      margin-top: 20px;\n      font-size: 24px;\n      color: ", ";\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.sm, props => props.dark ? textBackground : 'none', props => props.theme.breakpoints.values.sm, props => (0, _Util.getColor)(props));

package/lib/Datatable/CustomToolbar.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _muiDatatables = require("mui-datatables");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactToPrint = _interopRequireWildcard(require("react-to-print"));
 
@@ -53,12 +53,16 @@ var _DatatableContext = require("./DatatableContext");
 
 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 useMobile() {
   const theme = (0, _styles.useTheme)();
   return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
@@ -387,12 +391,6 @@ CustomToolbar.defaultProps = {
   searchText: null
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "CustomToolbar__Container",
-  componentId: "sc-cvz3dp-0"
-})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}.custom-toolbar-icon{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;overflow:hidden;}}.toobar-title-hidden{opacity:0;cursor:none;}"]);
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 56px;\n  .custom-toobar-title {\n    position: relative;\n    flex: 1;\n    font-size: 18px;\n    font-weight: 800;\n    height: 56px;\n    transition: all ease 0.3s;\n    &-inner {\n      line-height: 56px;\n      width: 100%;\n      height: 56px;\n      position: absolute;\n      left: 0;\n      top: 0;\n      span {\n        display: inline-block;\n        max-width: 100%;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n    }\n  }\n  .custom-toobar-btns {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    &.toobar-btns-disabled {\n      position: relative;\n      opacity: 0.5;\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    .custom-toolbar-icon {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 24px;\n      height: 24px;\n      font-size: 20px;\n      overflow: hidden;\n    }\n  }\n  .toobar-title-hidden {\n    opacity: 0;\n    cursor: none;\n  }\n"])));
 
-const ProgressContainer = _styledComponents.default.div.withConfig({
-  displayName: "CustomToolbar__ProgressContainer",
-  componentId: "sc-cvz3dp-1"
-})(["width:100%;height:2px;.toolbar-progress{height:2px;}"]);
+const ProgressContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  .toolbar-progress {\n    height: 2px;\n  }\n"])));

package/lib/Datatable/DatatableContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DatatableProvide = DatatableProvide;
+exports.DatatableProvider = DatatableProvider;
 exports.useDatatableContext = useDatatableContext;
 
 var _react = require("react");
@@ -15,7 +15,7 @@ const {
   Provider
 } = DatatableContext; // eslint-disable-next-line react/prop-types
 
-function DatatableProvide(_ref) {
+function DatatableProvider(_ref) {
   let {
     children
   } = _ref;

package/lib/Datatable/TableSearch.js

@@ -19,7 +19,7 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
 var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -27,8 +27,12 @@ var _DatatableContext = require("./DatatableContext");
 
 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 TableSearch(_ref) {
   let {
     search,
@@ -139,7 +143,4 @@ TableSearch.defaultProps = {
   onSearchOpen: () => {}
 };
 
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "TableSearch__Container",
-  componentId: "sc-43ylue-0"
-})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;", "{width:200px;}", "{width:180px;}&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}&.search-always-open{.MuiFormControl-root{margin:0 12px 0 0;}.toolbar-btn-show{padding-left:0;}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-search-area {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    .MuiFormControl-root {\n      width: inherit;\n      margin: 0 12px;\n    }\n    &.toolbar-btn-show {\n      width: 260px;\n      padding-left: 8px;\n\n      ", " {\n        width: 200px;\n      }\n\n      ", " {\n        width: 180px;\n      }\n      &.small-textfield {\n        width: 200px;\n      }\n    }\n  }\n  .toolbar-search-close {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    &.toolbar-btn-show {\n      width: 40px;\n    }\n  }\n  .toolbar-search-icon-placeholder {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n  }\n  &.search-always-open {\n    .MuiFormControl-root {\n      margin: 0 12px 0 0;\n    }\n    .toolbar-btn-show {\n      padding-left: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));