@blocklet/ui-react 2.3.0 → 2.4.0

package/lib/Footer/brand.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 _styles = require("@mui/material/styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["name", "logo", "description"];
 
 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; }
@@ -75,7 +79,4 @@ Brand.defaultProps = {
   description: ''
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "brand__Root",
-  componentId: "sc-6z2c3k-0"
-})(["display:flex;flex-direction:column;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{width:auto;height:44px;max-height:44px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}", "{.footer-brand-logo{img,svg{height:32px;max-height:32px;}}}"], props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-size: 14px;\n  a {\n    text-decoration: none;\n    color: inherit;\n  }\n  > div:first-child {\n    display: flex;\n    align-items: center;\n  }\n  .footer-brand-logo {\n    display: flex;\n    align-items: center;\n    margin-right: 16px;\n    line-height: 1;\n    img,\n    svg {\n      width: auto;\n      height: 44px;\n      max-height: 44px;\n    }\n  }\n  .footer-brand-name {\n    font-size: 16px;\n    font-weight: bold;\n  }\n  .footer-brand-desc {\n    margin-top: 16px;\n  }\n\n  ", " {\n    width: auto;\n  }\n\n  ", " {\n    .footer-brand-logo {\n      img,\n      svg {\n        height: 32px;\n        max-height: 32px;\n      }\n    }\n  }\n"])), props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/copyright.js

@@ -7,14 +7,18 @@ exports.default = Copyright;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["owner", "year"];
 
 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; }
@@ -46,7 +50,4 @@ Copyright.defaultProps = {
   year: "".concat(new Date().getFullYear())
 };
 
-const Root = _styledComponents.default.p.withConfig({
-  displayName: "copyright__Root",
-  componentId: "sc-g2r3zf-0"
-})(["margin:0;font-size:13px;"]);
+const Root = _styled.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 13px;\n"])));

package/lib/Footer/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -27,10 +27,14 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["meta"];
 
 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; }
@@ -111,10 +115,7 @@ Footer.propTypes = {
 Footer.defaultProps = {
   meta: {}
 };
-const StyledInternalFooter = (0, _styledComponents.default)(_internalFooter.default).withConfig({
-  displayName: "Footer__StyledInternalFooter",
-  componentId: "sc-1iwl1nd-0"
-})(["border-top:1px solid #eee;color:", ";", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';"], props => props.$theme.palette.grey[600], _ref2 => {
+const StyledInternalFooter = (0, _styled.default)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.$theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Footer/layout/plain.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 _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["elements"];
 
 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; }
@@ -59,10 +63,7 @@ PlainLayout.propTypes = {
   }).isRequired
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "plain__Root",
-  componentId: "sc-qoddfp-0"
-})(["padding:24px 0;border-top:1px solid #eee;.plain-layout-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 24px 0;\n  border-top: 1px solid #eee;\n  .plain-layout-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n"])));
 
 var _default = PlainLayout;
 exports.default = _default;

package/lib/Footer/layout/row.js

@@ -7,7 +7,7 @@ exports.default = Row;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -15,10 +15,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["children", "autoCenter"];
 
 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; }
@@ -60,7 +64,4 @@ Row.defaultProps = {
   autoCenter: false
 };
 
-const RowRoot = _styledComponents.default.div.withConfig({
-  displayName: "row__RowRoot",
-  componentId: "sc-1b3lw4c-0"
-})(["display:flex;justify-content:space-between;& + &{margin-top:24px;}&.footer-row-auto-center > *:only-child{margin:0 auto;}", "{align-items:stretch;flex-direction:column;gap:16px;> *{flex:1 0 100%;}&.footer-row-auto-center > *{margin:0 auto;}}"], props => props.$theme.breakpoints.down('md'));
+const RowRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  & + & {\n    margin-top: 24px;\n  }\n  &.footer-row-auto-center > *:only-child {\n    margin: 0 auto;\n  }\n\n  ", " {\n    align-items: stretch;\n    flex-direction: column;\n    gap: 16px;\n    > * {\n      flex: 1 0 100%;\n    }\n    &.footer-row-auto-center > * {\n      margin: 0 auto;\n    }\n  }\n"])), props => props.$theme.breakpoints.down('md'));

package/lib/Footer/layout/standard.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"));
 
@@ -17,10 +17,14 @@ var _row = _interopRequireDefault(require("./row"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["elements"];
 
 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; }
@@ -75,10 +79,7 @@ Footer.propTypes = {
   }).isRequired
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "standard__Root",
-  componentId: "sc-13y30cb-0"
-})(["padding:48px 0;"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 48px 0;\n"])));
 
 var _default = Footer;
 exports.default = _default;

package/lib/Footer/links.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -17,10 +17,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["links", "flowLayout"];
 
 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; }
@@ -133,7 +137,4 @@ Links.defaultProps = {
   flowLayout: false
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "links__Root",
-  componentId: "sc-19wysi2-0"
-})(["overflow:hidden;color:", ";.footer-links-inner{display:flex;justify-content:space-between;margin:0 -8px;}.footer-links-group,.footer-links-sub{display:flex;flex-direction:column;}.footer-links-item{display:inline-block;padding:0 8px;font-size:14px;line-height:1.6;}.footer-links-group + .footer-links-group{margin-left:128px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-weight:bold;}.footer-links-sub{margin-top:8px;}}}a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}&.footer-links--flow{display:inline-flex;.footer-links-inner{justify-content:center;flex-wrap:wrap;margin:0 -8px;.footer-links-item{padding:0 8px;}}}", "{.footer-links-group + .footer-links-group{margin-left:56px;}}", "{.footer-links-group + .footer-links-group{margin-left:40px;}}", "{.footer-links-inner{flex-direction:column;margin:0;}.footer-links-sub{display:none;}.footer-links-group{padding:12px 0;border-top:1px solid ", ";}.footer-links-group + .footer-links-group{margin-left:0;}.footer-links-group--active{.footer-links-sub{display:flex;flex-direction:row;flex-wrap:wrap;.footer-links-item{flex:0 0 50%;}}}.footer-links-item{padding:0;font-size:13px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-size:14px;}}}&.footer-links--flow{.footer-links-inner{flex-direction:row;}}}"], props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  color: ", ";\n  .footer-links-inner {\n    display: flex;\n    justify-content: space-between;\n    margin: 0 -8px;\n  }\n  .footer-links-group,\n  .footer-links-sub {\n    display: flex;\n    flex-direction: column;\n  }\n  .footer-links-item {\n    display: inline-block;\n    padding: 0 8px;\n    font-size: 14px;\n    line-height: 1.6;\n  }\n  .footer-links-group + .footer-links-group {\n    margin-left: 128px;\n  }\n  &.footer-links--grouped {\n    .footer-links-group {\n      > .footer-links-item {\n        font-weight: bold;\n      }\n      .footer-links-sub {\n        margin-top: 8px;\n      }\n    }\n  }\n  a {\n    color: inherit;\n    text-decoration: none;\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.footer-links--flow {\n    display: inline-flex;\n    .footer-links-inner {\n      justify-content: center;\n      flex-wrap: wrap;\n      margin: 0 -8px;\n      .footer-links-item {\n        padding: 0 8px;\n      }\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 56px;\n    }\n  }\n\n  ", " {\n    .footer-links-group + .footer-links-group {\n      margin-left: 40px;\n    }\n  }\n\n  ", " {\n    .footer-links-inner {\n      flex-direction: column;\n      margin: 0;\n    }\n    .footer-links-sub {\n      display: none;\n    }\n    .footer-links-group {\n      padding: 12px 0;\n      border-top: 1px solid ", ";\n    }\n    .footer-links-group + .footer-links-group {\n      margin-left: 0;\n    }\n    .footer-links-group--active {\n      .footer-links-sub {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        .footer-links-item {\n          flex: 0 0 50%;\n        }\n      }\n    }\n    .footer-links-item {\n      padding: 0;\n      font-size: 13px;\n    }\n    &.footer-links--grouped {\n      .footer-links-group {\n        > .footer-links-item {\n          font-size: 14px;\n        }\n      }\n    }\n\n    &.footer-links--flow {\n      .footer-links-inner {\n        flex-direction: row;\n      }\n    }\n  }\n"])), props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);

package/lib/Footer/social-media.js

@@ -7,7 +7,7 @@ exports.default = SocialMedia;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -15,10 +15,14 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 const _excluded = ["items"];
 
 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 @@ SocialMedia.defaultProps = {
   items: null
 };
 
-const Root = _styledComponents.default.div.withConfig({
-  displayName: "social-media__Root",
-  componentId: "sc-w4ariy-0"
-})(["display:inline-flex;align-items:center;a + a{margin-left:12px;}"]);
+const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  a + a {\n    margin-left: 12px;\n  }\n"])));

package/lib/Header/index.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _styles = require("@mui/material/styles");
 
@@ -45,10 +45,14 @@ var _utils = require("../utils");
 
 var _blocklets = require("../blocklets");
 
+var _templateObject;
+
 const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink"];
 
 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; }
@@ -261,10 +265,7 @@ Header.defaultProps = {
   },
   homeLink: _blocklets.publicPath
 };
-const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
-  displayName: "Header__StyledUxHeader",
-  componentId: "sc-kcf4st-0"
-})(["", " font-family:Lato,Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';.header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}.header-nav.navmenu--horizontal{.navmenu-root > .navmenu-sub,.navmenu-root > .navmenu-item{padding:16px 4px;}}"], _ref3 => {
+const StyledUxHeader = (0, _styled.default)(_Header.ResponsiveHeader)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  .header-logo {\n    min-width: 44px;\n  }\n  ", " {\n    .header-logo {\n      min-width: 32px;\n    }\n  }\n  .header-nav {\n    .navmenu-sub .navmenu-item {\n      min-width: 80px;\n    }\n  }\n  .header-nav.navmenu--horizontal {\n    .navmenu-root > .navmenu-sub,\n    .navmenu-root > .navmenu-item {\n      padding: 16px 4px;\n    }\n  }\n"])), _ref3 => {
   let {
     $bgcolor
   } = _ref3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,13 +30,14 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.3.0",
-    "@arcblock/ux": "^2.3.0",
+    "@arcblock/did-connect": "^2.4.0",
+    "@arcblock/ux": "^2.4.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
-    "@mui/material": "^5.9.3",
+    "@mui/material": "^5.10.0",
     "core-js": "^3.24.1",
-    "react-error-boundary": "^3.1.4",
-    "styled-components": "^5.3.5"
+    "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
@@ -49,9 +50,8 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "babel-plugin-styled-components": "^1.13.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "1d17ca422c95117bbf74c199b21692e478aa5003"
+  "gitHead": "202771a046cab27fc550d31e73588075a90c75fd"
 }

package/src/Footer/brand.js

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 
 export default function Brand({ name, logo, description, ...rest }) {

package/src/Footer/copyright.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export default function Copyright({ owner, year, ...rest }) {
   return (

package/src/Footer/index.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

package/src/Footer/layout/plain.js

@@ -1,6 +1,6 @@
 import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Container from '@mui/material/Container';
 
 /**

package/src/Footer/layout/row.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import clsx from 'clsx';
 

package/src/Footer/layout/standard.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Row from './row';

package/src/Footer/links.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import clsx from 'clsx';
 

package/src/Footer/social-media.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useTheme } from '@mui/material/styles';
 import Icon from '../Icon';
 

package/src/Header/index.js

@@ -2,7 +2,7 @@ import { useContext, useMemo, createElement } from 'react';
 // FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
 import { Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { ThemeProvider } from '@mui/material/styles';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';