@ucloud-fe/react-components 1.14.0 → 1.15.0

package/lib/components/Tag/Group.js

@@ -9,60 +9,204 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));
+
+var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
+
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _Menu = _interopRequireDefault(require("../../components/Menu"));
+
+var _Tag = _interopRequireDefault(require("../../components/Tag"));
 
 var _style = require("./style");
 
+var _excluded = ["children", "exposeCount", "lens", "popoverProps"],
+    _excluded2 = ["children", "exposeCount", "lens"],
+    _excluded3 = ["autoAdjustment", "compact", "children"];
+
+var _this = void 0;
+
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var _uid = 0;
+var ID_KEY = 'data-urc-tag_list-id';
+
+var TagMenu = function TagMenu(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var list = _ref.list,
+      popoverProps = _ref.popoverProps;
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  if (!list.length) return null;
+
+  var renderList = function renderList(list) {
+    var _this3 = this;
+
+    (0, _newArrowCheck2.default)(this, _this2);
+    return list.map(function (info, i) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return /*#__PURE__*/_react.default.createElement(_style.TagPopoverWrap, {
+        key: i
+      }, info);
+    }.bind(this));
+  }.bind(this);
+
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
+    trigger: ['hover'],
+    popup: /*#__PURE__*/_react.default.createElement(_style.TagMenuWapper, null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      selectable: false,
+      customStyle: {
+        maxHeight: '380px'
+      }
+    }, renderList(list)))
+  }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_style.TagMoreWapper, null, /*#__PURE__*/_react.default.createElement(_Tag.default, null, "+", list.length)));
+}.bind(void 0);
+
+var PureTagList = function PureTagList(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var children = props.children,
+      exposeCount = props.exposeCount,
+      lens = props.lens,
+      popoverProps = props.popoverProps,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var childArray = _react.default.Children.toArray(children);
+
+  var _exposeCount = exposeCount || 0;
+
+  var tagList, menuList;
+
+  if (lens > _exposeCount + 1) {
+    tagList = childArray.slice(0, exposeCount);
+    menuList = childArray.slice(exposeCount);
+  } else {
+    tagList = childArray;
+    menuList = [];
+  }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  return exposeCount === void 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tagList) : /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
+    exposeCount: exposeCount,
+    sharedProps: {
+      size: 'sm'
+    }
+  }), tagList, menuList.length ? /*#__PURE__*/_react.default.createElement(TagMenu, {
+    list: menuList,
+    popoverProps: popoverProps
+  }) : null);
+}.bind(void 0);
 
-var Group = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Group, _Component);
+PureTagList.propTypes = {
+  children: _propTypes.default.node,
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
+};
+
+var AutoAdjustmentTagList = function AutoAdjustmentTagList(props) {
+  var _this4 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var children = props.children,
+      _props$exposeCount = props.exposeCount,
+      _exposeCount = _props$exposeCount === void 0 ? 3 : _props$exposeCount,
+      lens = props.lens,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+
+  var _useState = (0, _react.useState)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    return _uid++;
+  }.bind(this)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      uid = _useState2[0];
+
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
+  }.bind(this), [uid]);
+  var maxCount = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this4);
+    var maxCount = Math.min(lens, Math.max(_exposeCount, 0));
+    return maxCount;
+  }.bind(this), [_exposeCount, lens]);
+
+  var _useOverflow = (0, _useOverflow3.default)({
+    containerRef: containerRef,
+    defaultCount: maxCount,
+    maxCount: maxCount
+  }),
+      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 1),
+      exposeCount = _useOverflow2[0];
+
+  return /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({}, rest, {
+    lens: lens,
+    children: children,
+    exposeCount: exposeCount
+  }, (0, _defineProperty2.default)({}, ID_KEY, uid)));
+}.bind(void 0);
+
+AutoAdjustmentTagList.propTypes = {
+  children: _propTypes.default.node,
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
+};
 
-  var _super = _createSuper(Group);
+var Group = function Group(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var autoAdjustment = props.autoAdjustment,
+      compact = props.compact,
+      children = props.children,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
-  function Group() {
-    (0, _classCallCheck2.default)(this, Group);
-    return _super.apply(this, arguments);
+  if (!children) {
+    return null;
   }
 
-  (0, _createClass2.default)(Group, [{
-    key: "render",
-    value: function render() {
-      var rest = (0, _extends2.default)({}, this.props);
-      return /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, rest);
-    }
-  }]);
-  return Group;
-}(_react.Component);
+  var lens = Array.isArray(children) ? children.length : 1;
+  return !compact ? /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
+    compact: false
+  }, rest), autoAdjustment ? /*#__PURE__*/_react.default.createElement(AutoAdjustmentTagList, (0, _extends2.default)({
+    lens: lens,
+    children: children
+  }, rest)) : /*#__PURE__*/_react.default.createElement(PureTagList, (0, _extends2.default)({
+    lens: lens,
+    children: children
+  }, rest))) : /*#__PURE__*/_react.default.createElement(_style.TagGroupWrapper, (0, _extends2.default)({
+    compact: compact,
+    children: children
+  }, rest));
+}.bind(void 0);
 
 Group.propTypes = {
-  /** @ignore */
   children: _propTypes.default.node,
-
-  /**
-   * 紧凑型布局
-   */
-  compact: _propTypes.default.bool
+  compact: _propTypes.default.bool,
+  exposeCount: _propTypes.default.number,
+  autoAdjustment: _propTypes.default.bool,
+  popoverProps: _propTypes.default.any
 };
-var _default = Group;
+
+var _default = /*#__PURE__*/_react.default.memo(Group);
+
 exports.default = _default;

package/lib/components/Tag/Icon.d.ts

@@ -13,6 +13,18 @@ declare class Icon extends React.PureComponent<any, any, any> {
          * 样式风格
          */
         styleType: PropTypes.Requireable<string>;
+        /**
+         * icon 大小
+         */
+        iconSize: PropTypes.Requireable<string>;
+        /**
+         * 是否开启border样式
+         */
+        border: PropTypes.Requireable<boolean>;
+        /**
+         * border 类型
+         */
+        borderType: PropTypes.Requireable<string>;
         /**
          * 自定义样式
          */
@@ -25,6 +37,11 @@ declare class Icon extends React.PureComponent<any, any, any> {
             background: PropTypes.Requireable<string>;
         }>>;
     };
+    static defaultProps: {
+        borderType: string;
+        iconSize: string;
+        border: boolean;
+    };
     constructor(props: any);
     constructor(props: any, context: any);
     render(): JSX.Element;

package/lib/components/Tag/Icon.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -29,7 +31,7 @@ var _style = require("./style");
 
 var _Tag = require("./Tag");
 
-var _excluded = ["children", "icon", "prefix"];
+var _excluded = ["children", "icon", "prefix", "borderType", "iconSize", "border"];
 
 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); }
 
@@ -57,8 +59,15 @@ var Icon = /*#__PURE__*/function (_PureComponent) {
           children = _this$props.children,
           icon = _this$props.icon,
           prefix = _this$props.prefix,
+          borderType = _this$props.borderType,
+          iconSize = _this$props.iconSize,
+          border = _this$props.border,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_style.IconTagWrapper, rest, typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.IconTag, {
+      return /*#__PURE__*/_react.default.createElement(_style.IconTagWrapper, (0, _extends2.default)({
+        borderType: borderType,
+        iconSize: iconSize,
+        border: border
+      }, rest), typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.IconTag, {
         type: icon,
         prefix: prefix
       }) : icon);
@@ -84,6 +93,21 @@ Icon.propTypes = {
    */
   styleType: _propTypes.default.oneOf(_Tag.StyleType),
 
+  /**
+   * icon 大小
+   */
+  iconSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
+
+  /**
+   * 是否开启border样式
+   */
+  border: _propTypes.default.bool,
+
+  /**
+   * border 类型
+   */
+  borderType: _propTypes.default.oneOf(['default', 'circle']),
+
   /**
    * 自定义样式
    */
@@ -98,5 +122,10 @@ Icon.propTypes = {
     background: _propTypes.default.string
   })
 };
+Icon.defaultProps = {
+  borderType: 'default',
+  iconSize: 'sm',
+  border: true
+};
 var _default = Icon;
 exports.default = _default;

package/lib/components/Tag/Tag.d.ts

@@ -19,6 +19,22 @@ declare class Tag extends React.PureComponent<any, any, any> {
          * 自定义前置 icon
          */
         icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /**
+         * icon 大小
+         */
+        iconSize: PropTypes.Requireable<string>;
+        /**
+         * 是否开启border样式
+         */
+        border: PropTypes.Requireable<boolean>;
+        /**
+         * border 类型
+         */
+        borderType: PropTypes.Requireable<string>;
+        /**
+         * 后缀
+         */
+        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
          * 是否禁用
          */
@@ -39,6 +55,9 @@ declare class Tag extends React.PureComponent<any, any, any> {
     };
     static defaultProps: {
         styleType: string;
+        borderType: string;
+        iconSize: string;
+        border: boolean;
     };
     constructor(props: any);
     constructor(props: any, context: any);

package/lib/components/Tag/Tag.js

@@ -27,9 +27,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
 var _style = require("./style");
 
-var _excluded = ["children", "styleType", "closable", "icon", "disabled", "onClose"];
+var _excluded = ["children", "styleType", "closable", "icon", "disabled", "onClose", "iconSize", "border", "borderType", "suffix"];
 
 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); }
 
@@ -62,13 +64,26 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           icon = _this$props.icon,
           disabled = _this$props.disabled,
           onClose = _this$props.onClose,
+          iconSize = _this$props.iconSize,
+          border = _this$props.border,
+          borderType = _this$props.borderType,
+          suffix = _this$props.suffix,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_style.TagWrapper, (0, _extends2.default)({
         styleType: styleType,
-        disabled: disabled
-      }, rest), icon && /*#__PURE__*/_react.default.createElement(_style.PrefixIconWrapper, null, typeof icon === 'string' ? /*#__PURE__*/_react.default.createElement(_style.PrefixIcon, {
-        type: icon
-      }) : icon), /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, children), closable && /*#__PURE__*/_react.default.createElement(_style.CloseIconWrapper, {
+        disabled: disabled,
+        border: border,
+        borderType: borderType,
+        closable: closable
+      }, rest), icon && /*#__PURE__*/_react.default.createElement(_style.PrefixIconWrapper, null, typeof icon === 'string' ? icon === 'loading' ? /*#__PURE__*/_react.default.createElement(_style.SvgIconWrapper, {
+        size: iconSize
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        type: "loading-line",
+        spin: true
+      })) : /*#__PURE__*/_react.default.createElement(_style.PrefixIcon, {
+        type: icon,
+        size: iconSize
+      }) : icon), /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, children), suffix && /*#__PURE__*/_react.default.createElement(_style.SuffixIconWrapper, null, suffix), closable && /*#__PURE__*/_react.default.createElement(_style.CloseIconWrapper, {
         onClick: disabled ? undefined : onClose
       }, /*#__PURE__*/_react.default.createElement(_style.CloseIcon, {
         type: "cross"
@@ -102,6 +117,26 @@ Tag.propTypes = {
    */
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
 
+  /**
+   * icon 大小
+   */
+  iconSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
+
+  /**
+   * 是否开启border样式
+   */
+  border: _propTypes.default.bool,
+
+  /**
+   * border 类型
+   */
+  borderType: _propTypes.default.oneOf(['default', 'circle', 'corner']),
+
+  /**
+   * 后缀
+   */
+  suffix: _propTypes.default.node,
+
   /**
    * 是否禁用
    */
@@ -125,7 +160,10 @@ Tag.propTypes = {
   })
 };
 Tag.defaultProps = {
-  styleType: 'default'
+  styleType: 'default',
+  borderType: 'default',
+  iconSize: 'sm',
+  border: true
 };
 var _default = Tag;
 exports.default = _default;

package/lib/components/Tag/index.d.ts

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import Tag from './Tag';
-import Group from './Group';
 import IconTag from './Icon';
 declare const ExportTag: typeof Tag & {
-    Group: typeof Group;
+    Group: import("react").MemoExoticComponent<(props: import("./Group").TagGroupProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element | null>;
     Icon: typeof IconTag;
 };
 export default ExportTag;

package/lib/components/Tag/style/index.d.ts

@@ -1,17 +1,24 @@
 export const prefixCls: string;
+export const menuCls: string;
 export const iconCls: string;
 export namespace styleMap {
     namespace gray {
         const color: string;
+        const icon: string;
         const border: string;
+        const divider: string;
         const bg: string;
         const iconHoverBG: string;
     }
     namespace green {
         const color_1: string;
         export { color_1 as color };
+        const icon_1: string;
+        export { icon_1 as icon };
         const border_1: string;
         export { border_1 as border };
+        const divider_1: string;
+        export { divider_1 as divider };
         const bg_1: string;
         export { bg_1 as bg };
         const iconHoverBG_1: string;
@@ -20,8 +27,12 @@ export namespace styleMap {
     namespace yellow {
         const color_2: string;
         export { color_2 as color };
+        const icon_2: string;
+        export { icon_2 as icon };
         const border_2: string;
         export { border_2 as border };
+        const divider_2: string;
+        export { divider_2 as divider };
         const bg_2: string;
         export { bg_2 as bg };
         const iconHoverBG_2: string;
@@ -30,8 +41,12 @@ export namespace styleMap {
     namespace red {
         const color_3: string;
         export { color_3 as color };
+        const icon_3: string;
+        export { icon_3 as icon };
         const border_3: string;
         export { border_3 as border };
+        const divider_3: string;
+        export { divider_3 as divider };
         const bg_3: string;
         export { bg_3 as bg };
         const iconHoverBG_3: string;
@@ -40,8 +55,12 @@ export namespace styleMap {
     namespace primary {
         const color_4: string;
         export { color_4 as color };
+        const icon_4: string;
+        export { icon_4 as icon };
         const border_4: string;
         export { border_4 as border };
+        const divider_4: string;
+        export { divider_4 as divider };
         const bg_4: string;
         export { bg_4 as bg };
         const iconHoverBG_4: string;
@@ -50,8 +69,12 @@ export namespace styleMap {
     namespace purple {
         const color_5: string;
         export { color_5 as color };
+        const icon_5: string;
+        export { icon_5 as icon };
         const border_5: string;
         export { border_5 as border };
+        const divider_5: string;
+        export { divider_5 as divider };
         const bg_5: string;
         export { bg_5 as bg };
         const iconHoverBG_5: string;
@@ -60,8 +83,12 @@ export namespace styleMap {
     namespace lightblue {
         const color_6: string;
         export { color_6 as color };
+        const icon_6: string;
+        export { icon_6 as icon };
         const border_6: string;
         export { border_6 as border };
+        const divider_6: string;
+        export { divider_6 as divider };
         const bg_6: string;
         export { bg_6 as bg };
         const iconHoverBG_6: string;
@@ -70,8 +97,12 @@ export namespace styleMap {
     namespace blue {
         const color_7: string;
         export { color_7 as color };
+        const icon_7: string;
+        export { icon_7 as icon };
         const border_7: string;
         export { border_7 as border };
+        const divider_7: string;
+        export { divider_7 as divider };
         const bg_7: string;
         export { bg_7 as bg };
         const iconHoverBG_7: string;
@@ -80,8 +111,12 @@ export namespace styleMap {
     namespace orange {
         const color_8: string;
         export { color_8 as color };
+        const icon_8: string;
+        export { icon_8 as icon };
         const border_8: string;
         export { border_8 as border };
+        const divider_8: string;
+        export { divider_8 as divider };
         const bg_8: string;
         export { bg_8 as bg };
         const iconHoverBG_8: string;
@@ -90,8 +125,12 @@ export namespace styleMap {
     namespace cyan {
         const color_9: string;
         export { color_9 as color };
+        const icon_9: string;
+        export { icon_9 as icon };
         const border_9: string;
         export { border_9 as border };
+        const divider_9: string;
+        export { divider_9 as divider };
         const bg_9: string;
         export { bg_9 as bg };
         const iconHoverBG_9: string;
@@ -100,11 +139,17 @@ export namespace styleMap {
 }
 export const CloseIcon: import("@emotion/styled-base").StyledComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<SvgIcon>, Pick<Pick<any, string | number | symbol> & import("react").RefAttributes<SvgIcon>, string | number | symbol>, object>;
 export const CloseIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
-export const PrefixIcon: import("@emotion/styled-base").StyledComponent<import("../../Icon/Icon").IconProps & Omit<import("react").HTMLAttributes<HTMLElement>, keyof import("../../Icon/Icon").IconProps>, Pick<import("../../Icon/Icon").IconProps & Omit<import("react").HTMLAttributes<HTMLElement>, keyof import("../../Icon/Icon").IconProps>, "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | keyof import("../../Icon/Icon").IconProps>, object>;
+export const PrefixIcon: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
+export const SvgIconWrapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
 export const PrefixIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
+export const SuffixIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
 export const TagWrapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
 export const ContentWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;
 export const IconTag: import("@emotion/styled-base").StyledComponent<import("../../Icon/Icon").IconProps & Omit<import("react").HTMLAttributes<HTMLElement>, keyof import("../../Icon/Icon").IconProps>, Pick<import("../../Icon/Icon").IconProps & Omit<import("react").HTMLAttributes<HTMLElement>, keyof import("../../Icon/Icon").IconProps>, "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | keyof import("../../Icon/Icon").IconProps>, object>;
 export const IconTagWrapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
 export const TagGroupWrapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
+export const SWrap: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
+export const TagMenuWapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
+export const TagPopoverWrap: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
+export const TagMoreWapper: import("react").SFC<import("emotion-theming/types/helper").AddOptionalTo<Pick<any, string | number | symbol> & import("react").RefAttributes<any>, "theme">>;
 import SvgIcon from "../../../components/SvgIcon";