@blocklet/list 0.9.1 → 0.9.4

package/lib/base.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _Sort = _interopRequireDefault(require("@mui/icons-material/Sort"));
 
@@ -33,8 +33,12 @@ var _search = _interopRequireDefault(require("./components/search"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3;
+
 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 ListBase() {
   var _sortOptions$find, _priceOptions$find;
 
@@ -127,20 +131,11 @@ function ListBase() {
   });
 }
 
-const StyledMin = _styledComponents.default.main.withConfig({
-  displayName: "base__StyledMin",
-  componentId: "sc-wumzlv-0"
-})(["display:flex;flex-direction:column;flex:1;width:100%;height:100%;.filter-bar{justify-content:space-between;margin-bottom:", ";}.sort-button{white-space:nowrap;}.search-container{flex:2;margin-left:0px;}.filter-container{flex:1;display:flex;justify-content:flex-end;}@media (max-width:", "px){.search-container{width:100%;margin-bottom:", ";}.filter-container{margin-left:0;display:flex;justify-content:flex-start;}.filter-bar{display:flex;flex-direction:column;align-items:flex-start;}}@media (max-width:", "px){.sort-button{font-size:12px;}}"], props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
-const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig({
-  displayName: "base__StyledSearch",
-  componentId: "sc-wumzlv-1"
-})(["background-color:", ";"], props => props.theme.palette.grey[50]);
+const StyledSearch = (0, _styled.default)(_search.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), props => props.theme.palette.grey[50]);
 
-const FilterContainer = _styledComponents.default.div.withConfig({
-  displayName: "base__FilterContainer",
-  componentId: "sc-wumzlv-2"
-})(["position:sticky;top:0;z-index:999;background-color:white;"]);
+const FilterContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 999;\n  background-color: white;\n"])));
 
 var _default = ListBase;
 exports.default = _default;

package/lib/components/aside.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _filter = require("../contexts/filter");
 
@@ -13,8 +13,12 @@ var _filter2 = require("./filter");
 
 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 Aside() {
   const {
     selectedCategory,
@@ -47,10 +51,7 @@ function Aside() {
   });
 }
 
-const StyledAside = _styledComponents.default.aside.withConfig({
-  displayName: "aside__StyledAside",
-  componentId: "sc-1wkvsv6-0"
-})(["width:220px;margin-right:", ";height:100%;position:sticky;top:0;overflow-y:auto;z-index:999;"], props => props.theme.spacing(2));
+const StyledAside = _styled.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 220px;\n  margin-right: ", ";\n  height: 100%;\n  position: sticky;\n  top: 0;\n  overflow-y: auto;\n  z-index: 999;\n"])), props => props.theme.spacing(2));
 
 Aside.propTypes = {};
 Aside.defaultProps = {};

package/lib/components/custom-select/button.js

@@ -11,12 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _material = require("@mui/material");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "rounded", "loading", "disabled"];
 
+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; }
@@ -29,10 +31,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 StyledButton = (0, _styledComponents.default)(_material.Button).withConfig({
-  displayName: "button__StyledButton",
-  componentId: "sc-8rpkj0-0"
-})(["border-radius:4px;"]);
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledButton = (0, _styled.default)(_material.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n"])));
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,

package/lib/components/custom-select/custom-select.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+var _styles = require("@mui/material/styles");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,10 +23,14 @@ var _button = _interopRequireDefault(require("./button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2;
+
 const _excluded = ["title", "value", "icon", "prepend", "options", "onChange", "itemRender"];
 
 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; }
@@ -50,7 +54,7 @@ function CustomSelect(_ref) {
       buttonProps = _objectWithoutProperties(_ref, _excluded);
 
   const anchorRef = (0, _react.useRef)(null);
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _styles.useTheme)();
   const [open, setOpen] = (0, _react.useState)(false);
   const [currentValue, setCurrentValue] = (0, _react.useState)(value !== null ? value : '');
   const isSm = (0, _material.useMediaQuery)(theme.breakpoints.down('sm'));
@@ -152,13 +156,7 @@ CustomSelect.defaultProps = {
   itemRender: null,
   onChange: () => {}
 };
-const StyledButton = (0, _styledComponents.default)(_button.default).withConfig({
-  displayName: "custom-select__StyledButton",
-  componentId: "sc-15u16ye-0"
-})(["border:1px solid #f0f0f0;padding:6px 8px 6px 12px;font-weight:", ";font-size:16px;color:#666;line-height:1;text-transform:none;min-width:100px;& + &{margin-left:10px;}&.my-select__selector--active{&,.my-select__arrowdown,.my-select__icon svg{color:", ";}}.my-select__arrowdown{color:#999;font-size:16px;margin-left:6px;}.my-select__icon{font-size:0;svg{color:#999;font-size:18px;margin-right:3px;}}"], props => props.theme.typography.fontWeightBold, props => props.theme.palette.primary.main);
-const StyledMenuList = (0, _styledComponents.default)(_material.MenuList).withConfig({
-  displayName: "custom-select__StyledMenuList",
-  componentId: "sc-15u16ye-1"
-})([".my-select__option__icon{color:transparent;font-size:16px;margin:0 3px 0 -5px;}.my-select__option{font-size:16px;color:#999;}.my-select__option--active{&,.my-select__option__icon{color:", ";}}"], props => props.theme.palette.primary.main);
+const StyledButton = (0, _styled.default)(_button.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid #f0f0f0;\n  padding: 6px 8px 6px 12px;\n  font-weight: ", ";\n  font-size: 16px;\n  color: #666;\n  line-height: 1;\n  text-transform: none;\n  min-width: 100px;\n  & + & {\n    margin-left: 10px;\n  }\n  &.my-select__selector--active {\n    &,\n    .my-select__arrowdown,\n    .my-select__icon svg {\n      color: ", ";\n    }\n  }\n  .my-select__arrowdown {\n    color: #999;\n    font-size: 16px;\n    margin-left: 6px;\n  }\n  .my-select__icon {\n    font-size: 0;\n    svg {\n      color: #999;\n      font-size: 18px;\n      margin-right: 3px;\n    }\n  }\n"])), props => props.theme.typography.fontWeightBold, props => props.theme.palette.primary.main);
+const StyledMenuList = (0, _styled.default)(_material.MenuList)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .my-select__option__icon {\n    color: transparent;\n    font-size: 16px;\n    margin: 0 3px 0 -5px;\n  }\n  .my-select__option {\n    font-size: 16px;\n    color: #999;\n  }\n  .my-select__option--active {\n    &,\n    .my-select__option__icon {\n      color: ", ";\n    }\n  }\n"])), props => props.theme.palette.primary.main);
 var _default = CustomSelect;
 exports.default = _default;

package/lib/components/filter/custom-chip.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 _material = require("@mui/material");
 
@@ -15,6 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["label", "icon", "onDelete"];
 
+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 StyleDiv = _styledComponents.default.div.withConfig({
-  displayName: "custom-chip__StyleDiv",
-  componentId: "sc-4q1qqt-0"
-})([".MuiChip-root{border-radius:4px;height:initial;text-transform:capitalize;margin-right:", ";padding:4px 0;}"], props => props.theme.spacing(2));
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyleDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiChip-root {\n    border-radius: 4px;\n    height: initial;\n    text-transform: capitalize;\n    margin-right: ", ";\n    padding: 4px 0;\n  }\n"])), props => props.theme.spacing(2));
 
 function FilterChip(_ref) {
   let {

package/lib/components/filter/group.js

@@ -7,12 +7,16 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject;
+
 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 FilterGroup(_ref) {
   let {
     options,
@@ -39,10 +43,7 @@ function FilterGroup(_ref) {
   });
 }
 
-const StyledDiv = _styledComponents.default.div.withConfig({
-  displayName: "group__StyledDiv",
-  componentId: "sc-1lj02tr-0"
-})([".title{font-size:18px;font-weight:bold;margin-bottom:", ";}.list{}.item{font-size:16px;padding:", ";color:#9397a1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize;cursor:pointer;&:hover{background-color:", ";color:initial;font-weight:bold;}}.select{color:", ";font-weight:bold;}"], props => props.theme.spacing(1), props => props.theme.spacing(1), props => props.theme.palette.grey[50], props => props.theme.palette.primary.main);
+const StyledDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .title {\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: ", ";\n  }\n  .list {\n  }\n  .item {\n    font-size: 16px;\n    padding: ", ";\n    color: #9397a1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-transform: capitalize;\n    cursor: pointer;\n    &:hover {\n      background-color: ", ";\n      color: initial;\n      font-weight: bold;\n    }\n  }\n  .select {\n    color: ", ";\n    font-weight: bold;\n  }\n"])), props => props.theme.spacing(1), props => props.theme.spacing(1), props => props.theme.palette.grey[50], props => props.theme.palette.primary.main);
 
 FilterGroup.propTypes = {
   title: _propTypes.default.string.isRequired,

package/lib/components/filter/icon.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 _FilterAltOutlined = _interopRequireDefault(require("@mui/icons-material/FilterAltOutlined"));
 
@@ -21,8 +21,12 @@ var _group = _interopRequireDefault(require("./group"));
 
 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 FilterIcon() {
   const {
     selectedCategory,
@@ -85,10 +89,7 @@ function FilterIcon() {
   });
 }
 
-const StyledDiv = _styledComponents.default.div.withConfig({
-  displayName: "icon__StyledDiv",
-  componentId: "sc-17rafy1-0"
-})([".filter-button{margin-right:16px;border-color:rgb(240,240,240);padding:5px 8px;min-width:initial;}.filter-icon{cursor:pointer;color:", ";}"], props => props.theme.palette.grey[500]);
+const StyledDiv = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .filter-button {\n    margin-right: 16px;\n    border-color: rgb(240, 240, 240);\n    padding: 5px 8px;\n    min-width: initial;\n  }\n  .filter-icon {\n    cursor: pointer;\n    color: ", ";\n  }\n"])), props => props.theme.palette.grey[500]);
 
 FilterIcon.propTypes = {};
 FilterIcon.defaultProps = {};

package/lib/components/list/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 _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 
@@ -29,10 +29,14 @@ var _filter = require("../../contexts/filter");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3;
+
 const _excluded = ["blocklets"];
 
 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; }
@@ -163,15 +167,6 @@ BlockletList.propTypes = {
   blocklets: _propTypes.default.array.isRequired
 };
 BlockletList.defaultProps = {};
-const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
-  displayName: "list__StyledGrid",
-  componentId: "sc-1guvpon-0"
-})(["&.MuiGrid-root{width:100%;margin:0 -16px;}"]);
-const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _styledComponents.default)(_Grid.default).withConfig({
-  displayName: "list__StyledGridItem",
-  componentId: "sc-1guvpon-1"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2)));
-const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
-  displayName: "list__CustomEmpty",
-  componentId: "sc-1guvpon-2"
-})(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));
+const StyledGrid = (0, _styled.default)(_Grid.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.MuiGrid-root {\n    width: 100%;\n    margin: 0 -16px;\n  }\n"])));
+const StyledGridItem = /*#__PURE__*/(0, _react.memo)((0, _styled.default)(_Grid.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    &.MuiGrid-item {\n      padding-bottom: 0px;\n    }\n  }\n  @media (min-width: ", "px) {\n    &.MuiGrid-item {\n      margin-bottom: ", ";\n    }\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2)));
+const CustomEmpty = (0, _styled.default)(_Empty.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-align: center;\n  .primary {\n    color: ", ";\n  }\n  .tips {\n    margin-top: ", ";\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/lib/components/search.js

@@ -17,16 +17,20 @@ var _material = require("@mui/material");
 
 var _ahooks = require("ahooks");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _filter = require("../contexts/filter");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _templateObject, _templateObject2, _templateObject3;
+
 const _excluded = ["placeholder"];
 
 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,17 +101,8 @@ Search.propTypes = {
 Search.defaultProps = {
   placeholder: 'Type to search...'
 };
-const StyledSearch = (0, _styledComponents.default)(_material.OutlinedInput).withConfig({
-  displayName: "search__StyledSearch",
-  componentId: "sc-1ehlqka-0"
-})(["background-color:#fff;font-size:14px;border-radius:6px;.MuiInputBase-input{padding:8px 0 8px 10px;}.MuiOutlinedInput-notchedOutline{border:none;}.Mui-focused{background-color:#f6f6f6;.MuiInputBase-input::placeholder{color:transparent;}}"]);
-const StyledSearchIcon = (0, _styledComponents.default)(_Search.default).withConfig({
-  displayName: "search__StyledSearchIcon",
-  componentId: "sc-1ehlqka-1"
-})(["color:", ";font-size:28px;@media (max-width:", "px){font-size:24px;}"], props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
-const StyledCloseIcon = (0, _styledComponents.default)(_Close.default).withConfig({
-  displayName: "search__StyledCloseIcon",
-  componentId: "sc-1ehlqka-2"
-})(["color:", ";font-size:16px;cursor:pointer;"], props => props.theme.palette.grey[500]);
+const StyledSearch = (0, _styled.default)(_material.OutlinedInput)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: #fff;\n  font-size: 14px;\n  border-radius: 6px;\n  .MuiInputBase-input {\n    padding: 8px 0 8px 10px;\n  }\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n  }\n  .Mui-focused {\n    background-color: #f6f6f6;\n    .MuiInputBase-input::placeholder {\n      color: transparent;\n    }\n  }\n"])));
+const StyledSearchIcon = (0, _styled.default)(_Search.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  @media (max-width: ", "px) {\n    font-size: 24px;\n  }\n"])), props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
+const StyledCloseIcon = (0, _styled.default)(_Close.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n"])), props => props.theme.palette.grey[500]);
 var _default = Search;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -34,11 +34,10 @@
   },
   "peerDependencies": {
     "@mui/material": ">=5.6.4",
-    "@mui/styles": ">=5.6.2",
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.2.0",
+    "@arcblock/ux": "^2.4.0",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
@@ -49,7 +48,6 @@
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-infinite-scroll-hook": "^4.0.3",
-    "styled-components": "5.3.5",
     "url-join": "^4.0.1"
   },
   "devDependencies": {
@@ -60,9 +58,8 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/babel-plugin": "^11.10.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
-    "babel-plugin-styled-components": "^1.13.3",
     "eslint": "^8.21.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "22d308f630ec17c18162f750edaf6d71012efaac"
+  "gitHead": "13e84872c589d4b967c290bb2ba6248ffc242730"
 }

package/src/base.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import SortIcon from '@mui/icons-material/Sort';
 import { Box, Hidden } from '@mui/material';
 import FaceIcon from '@mui/icons-material/Face';

package/src/components/aside.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useFilterContext } from '../contexts/filter';
 import { FilterGroup } from './filter';

package/src/components/custom-select/button.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Button as MuiButton, CircularProgress } from '@mui/material';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledButton = styled(MuiButton)`
   border-radius: 4px;

package/src/components/custom-select/custom-select.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import useTheme from '@mui/styles/useTheme';
-import styled from 'styled-components';
+import { useTheme } from '@mui/material/styles';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import { ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper, SvgIcon, useMediaQuery } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

package/src/components/filter/custom-chip.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Chip } from '@mui/material';
 
 const StyleDiv = styled.div`

package/src/components/filter/group.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 function FilterGroup({ options, onChange, title, value }) {
   return (

package/src/components/filter/icon.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import Button from '@mui/material/Button';

package/src/components/list/index.js

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Empty from '@arcblock/ux/lib/Empty';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';

package/src/components/search.js

@@ -4,7 +4,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import CloseIcon from '@mui/icons-material/Close';
 import { OutlinedInput, InputAdornment } from '@mui/material';
 import { useDebounceFn } from 'ahooks';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useFilterContext } from '../contexts/filter';