@hi-ui/tabs 4.0.0-alpha.9 → 4.0.0-beta.10

package/lib/esm/TabItem.js

@@ -33,7 +33,9 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       itemRef = _ref.itemRef,
       draggable = _ref.draggable,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
+      type = _ref$type === void 0 ? 'line' : _ref$type,
+      _ref$closeable = _ref.closeable,
+      closeable = _ref$closeable === void 0 ? true : _ref$closeable,
       _ref$direction = _ref.direction,
       layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
 
@@ -47,7 +49,7 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _onClick = useCallback(function (e) {
     if (onTabClick) {
-      onTabClick(tabId);
+      onTabClick(tabId, e);
     }
   }, [onTabClick, tabId]);
 
@@ -68,8 +70,10 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
       if (_onDragStart) {
         _onDragStart(e, {
-          tabId: tabId,
-          tabTitle: tabTitle
+          dragNode: {
+            tabId: tabId,
+            tabTitle: tabTitle
+          }
         });
       }
     },
@@ -81,8 +85,10 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
       if (_onDragEnd) {
         _onDragEnd(e, {
-          tabId: tabId,
-          tabTitle: tabTitle
+          dragNode: {
+            tabId: tabId,
+            tabTitle: tabTitle
+          }
         });
       }
     },
@@ -120,8 +126,10 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
       if (_onDragOver) {
         _onDragOver(e, {
-          tabId: tabId,
-          tabTitle: tabTitle
+          targetNode: {
+            tabId: tabId,
+            tabTitle: tabTitle
+          }
         });
       }
     },
@@ -138,7 +146,7 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
             tabId: tabId,
             tabTitle: tabTitle
           },
-          dropNode: {
+          targetNode: {
             tabId: passedData.tabId,
             tabTitle: passedData.tabTitle
           },
@@ -150,7 +158,7 @@ var TabItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: prefixCls + "-item__title"
   }, tabTitle), type === 'desc' && /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "-item__desc"
-  }, tabDesc), editable && /*#__PURE__*/React.createElement("span", {
+  }, tabDesc), editable && closeable && /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__close-btn",
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -170,4 +178,3 @@ if (__DEV__) {
 }
 
 export { TabItem };
-//# sourceMappingURL=TabItem.js.map

package/lib/esm/TabList.js

@@ -14,6 +14,8 @@ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { TabInk } from './TabInk.js';
 import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
+import { isUndef } from '@hi-ui/type-assertion';
+import { IconButton } from '@hi-ui/icon-button';
 var _role = 'tabs';
 
 var _prefix = getPrefixCls(_role);
@@ -41,13 +43,20 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onDrop = _ref.onDrop,
       onDragEnd = _ref.onDragEnd,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type;
+      type = _ref$type === void 0 ? 'line' : _ref$type,
+      extra = _ref.extra;
 
-  var _a, _b;
+  var _a;
 
-  var _useUncontrolledState = useUncontrolledState(defaultActiveId || ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.tabId), activeId, onChange),
-      activeTab = _useUncontrolledState[0],
-      setActiveTab = _useUncontrolledState[1];
+  var _useUncontrolledState = useUncontrolledState(function () {
+    if (isUndef(defaultActiveId)) {
+      return data[0] ? data[0].tabId : '';
+    }
+
+    return defaultActiveId;
+  }, activeId, onChange),
+      activeTabId = _useUncontrolledState[0],
+      setActiveTabId = _useUncontrolledState[1];
 
   var _useState = useState(null),
       innerRef = _useState[0],
@@ -71,21 +80,23 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return direction === 'horizontal' ? (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientWidth) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientWidth) : (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.clientHeight) > (innerRef === null || innerRef === void 0 ? void 0 : innerRef.clientHeight);
     }
   }, [scrollRef, innerRef, direction]);
-  var onClickTab = useCallback(function (key) {
+  var onClickTab = useCallback(function (key, event) {
     if (onTabClick) {
-      onTabClick(key);
+      onTabClick(key, event);
     }
 
-    if (key !== activeTab && setActiveTab) {
-      setActiveTab(key);
+    if (key !== activeTabId && setActiveTabId) {
+      setActiveTabId(key);
     }
-  }, [activeTab, onTabClick, setActiveTab]);
+  }, [activeTabId, onTabClick, setActiveTabId]);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__add-btn",
+  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
+    className: prefixCls + "__left-btn",
+    effect: true,
+    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
     onClick: function onClick() {
       if (scrollRef && innerRef) {
         var canScroll = -translateX - innerRef.clientWidth;
@@ -100,8 +111,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setTranslateX(translateX + moveWidth);
       }
     }
-  }, /*#__PURE__*/React.createElement(LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__add-btn",
+  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
+    className: prefixCls + "__up-btn",
+    effect: true,
+    icon: /*#__PURE__*/React.createElement(UpOutlined, null),
     onClick: function onClick() {
       if (scrollRef && innerRef) {
         var canScroll = -translateY - innerRef.clientHeight;
@@ -116,7 +129,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setTranslateY(translateY + moveWidth);
       }
     }
-  }, /*#__PURE__*/React.createElement(UpOutlined, null)), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cx(prefixCls + "__list--inner"),
     ref: setInnerRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -135,7 +148,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       type: type,
       itemRef: itemsRef.current["" + d.tabId],
       index: index,
-      active: activeTab === d.tabId,
+      active: activeTabId === d.tabId,
       prefixCls: prefixCls,
       draggable: draggable,
       onTabClick: onClickTab,
@@ -147,14 +160,16 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onDragEnd: onDragEnd,
       direction: direction
     }));
-  }), type === 'default' && /*#__PURE__*/React.createElement(TabInk, {
+  }), type === 'line' && /*#__PURE__*/React.createElement(TabInk, {
     translate: direction === 'horizontal' ? translateX : translateY,
     prefixCls: prefixCls,
     direction: direction,
     tabListRef: innerRef,
-    itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
-  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__add-btn",
+    itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
+  }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
+    effect: true,
+    className: prefixCls + "__right-btn",
+    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
     onClick: function onClick() {
       if (scrollRef && innerRef) {
         var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
@@ -169,8 +184,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setTranslateX(translateX - moveWidth);
       }
     }
-  }, /*#__PURE__*/React.createElement(RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__add-btn",
+  }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
+    effect: true,
+    className: prefixCls + "__down-btn",
+    icon: /*#__PURE__*/React.createElement(DownOutlined, null),
     onClick: function onClick() {
       if (scrollRef && innerRef) {
         var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
@@ -185,10 +202,11 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         setTranslateY(translateY - moveWidth);
       }
     }
-  }, /*#__PURE__*/React.createElement(DownOutlined, null)), editable && /*#__PURE__*/React.createElement("div", {
+  }), editable ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
     className: prefixCls + "__add-btn",
     onClick: onAdd
-  }, /*#__PURE__*/React.createElement(PlusOutlined, null)));
+  }) : null, extra);
 });
 
 if (__DEV__) {
@@ -196,4 +214,3 @@ if (__DEV__) {
 }
 
 export { TabList };
-//# sourceMappingURL=TabList.js.map

package/lib/esm/TabPane.js

@@ -21,4 +21,3 @@ var TabPane = function TabPane(_ref) {
 };
 
 export { TabPane };
-//# sourceMappingURL=TabPane.js.map

package/lib/esm/Tabs.js

@@ -8,10 +8,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useMemo, useState, useCallback } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { TabList } from './TabList.js';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { isUndef } from '@hi-ui/type-assertion';
 var _role = 'tabs';
 
 var _prefix = getPrefixCls(_role);
@@ -21,10 +23,6 @@ var _prefix = getPrefixCls(_role);
 
 
 var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _cx;
-
-  var _b;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$role = _a.role,
@@ -36,8 +34,8 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
       onChange = _a.onChange,
       onTabClick = _a.onTabClick,
       editable = _a.editable,
-      _a$direction = _a.direction,
-      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      _a$placement = _a.placement,
+      placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
       onAdd = _a.onAdd,
       onDelete = _a.onDelete,
       _a$draggable = _a.draggable,
@@ -48,10 +46,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
       onDrop = _a.onDrop,
       style = _a.style,
       _a$type = _a.type,
-      type = _a$type === void 0 ? 'default' : _a$type,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "direction", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
+      type = _a$type === void 0 ? 'line' : _a$type,
+      extra = _a.extra,
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
 
-  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = direction === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
   var tabList = useMemo(function () {
     var list = [];
     React.Children.map(children, function (child) {
@@ -75,18 +73,17 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     return list;
   }, [children]);
 
-  var _useState = useState(activeId || defaultActiveId || ((_b = tabList[0]) === null || _b === void 0 ? void 0 : _b.tabId)),
-      activePane = _useState[0],
-      setActivePane = _useState[1];
-
-  var _onChange = useCallback(function (tabId) {
-    if (onChange) {
-      onChange(tabId);
+  var _useUncontrolledState = useUncontrolledState(function () {
+    if (isUndef(defaultActiveId)) {
+      return tabList[0] ? tabList[0].tabId : '';
     }
 
-    setActivePane(tabId);
-  }, [onChange]);
+    return defaultActiveId;
+  }, activeId, onChange),
+      activeTabId = _useUncontrolledState[0],
+      setActiveTabId = _useUncontrolledState[1];
 
+  var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, type && prefixCls + "--type-" + type);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
@@ -96,9 +93,9 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     prefixCls: prefixCls,
     data: tabList,
     activeId: activeId,
-    onChange: _onChange,
+    onChange: setActiveTabId,
     onTabClick: onTabClick,
-    direction: direction,
+    direction: placement,
     editable: editable,
     onAdd: onAdd,
     onDelete: onDelete,
@@ -107,13 +104,16 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
     onDragOver: onDragOver,
     onDrop: onDrop,
     type: type,
-    onDragStart: onDragStart
+    onDragStart: onDragStart,
+    extra: extra
   }), /*#__PURE__*/React.createElement("div", {
     className: _prefix + "__content"
   }, React.Children.map(children, function (child) {
-    return child && /*#__PURE__*/React.cloneElement(child, {
-      active: activePane === child.props.tabId
-    });
+    return child ? /*#__PURE__*/React.cloneElement(child, {
+      key: child.props.tabId,
+      className: cx(_prefix + "-tab-pane", child.props.className),
+      active: activeTabId === child.props.tabId
+    }) : null;
   })));
 });
 
@@ -122,4 +122,3 @@ if (__DEV__) {
 }
 
 export { Tabs };
-//# sourceMappingURL=Tabs.js.map

package/lib/esm/index.js

@@ -8,7 +8,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import './styles/index.scss.js';
-export { Tabs, Tabs as default } from './Tabs.js';
+import { Tabs as Tabs$1 } from './Tabs.js';
+export { Tabs } from './Tabs.js';
+import { TabPane } from './TabPane.js';
 export { TabPane } from './TabPane.js';
 export { TabList } from './TabList.js';
-//# sourceMappingURL=index.js.map
+var Tabs = Object.assign(Tabs$1, {
+  Pane: TabPane
+});
+export { Tabs as default };

package/lib/esm/styles/index.scss.js

@@ -7,11 +7,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn {\n  cursor: pointer; }\n.hi-v4-tabs__close-btn {\n  cursor: pointer;\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  margin-left: 4px;\n  margin-left: var(--hi-v4-spacing-2, 4px);\n  -webkit-transition: color 0.3s;\n  transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list {\n  position: relative;\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #929aa6;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    background-color: #ebedf0;\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    margin: 0;\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px 4px 0 0;\n    border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #fff;\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n    margin: 4px 4px 4px 0;\n    margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n    padding: 4px 20px;\n    padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n    border-radius: 4px;\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa);\n      background-color: #e2f3fe;\n      background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc {\n    padding: 0 20px;\n    padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 20px 12px 20px 0;\n      margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs--vertical {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item {\n      margin: 0;\n      padding: 8px 20px;\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      background-color: #ebedf0;\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: 4px 0 0 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #fff;\n        background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item {\n      margin: 0 0 4px 0;\n      margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n      padding: 4px 20px;\n      padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: #1f2733;\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: #929aa6;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: 0.75rem;\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: 1.25rem;\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 0 0 12px 0;\n      margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n      padding: 16px 20px;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: 4px;\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      background: #f5f7fa;\n      background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: #ebedf0;\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: #929aa6;\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: #237ffa;\n        color: var(--hi-v4-color-brandblue-500, #237ffa);\n        background-color: #e2f3fe;\n        background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: #237ffa;\n          color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--inner {\n      width: auto;\n      display: block;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__list--scroll {\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item {\n    line-height: 1.5rem;\n    line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n    padding: 8px 20px;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    margin: 0;\n    -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--prev {\n      border-top: 1px dashed #237ffa;\n      border-top: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-left: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__item--next {\n      border-bottom: 1px dashed #237ffa;\n      border-bottom: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa);\n      border-right: none; }\n.hi-v4-tabs--vertical .hi-v4-tabs__content {\n    padding-left: 16px;\n    padding-top: 0; }\n.hi-v4-tabs--vertical .hi-v4-tabs__ink {\n    position: absolute;\n    left: 0;\n    bottom: auto;\n    width: 2px;\n    background-color: #237ffa;\n    background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n    -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n    transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: #237ffa;\n  background-color: var(--hi-v4-color-brandblue-500, #237ffa);\n  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n  line-height: 1.5rem;\n  line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n  padding: 8px 20px;\n  padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n  margin: 0;\n  cursor: pointer;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--active {\n    color: #237ffa;\n    color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--prev {\n    border-left: 1px dashed #237ffa;\n    border-left: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--next {\n    border-right: 1px dashed #237ffa;\n    border-right: 1px dashed var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-tabs__item--disabled {\n    color: #929aa6 !important;\n    color: var(--hi-v4-color-gray-500, #929aa6) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: 16px;\n  padding-top: var(--hi-v4-spacing-8, 16px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
+var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-tabs__add-btn.hi-v4-icon-button {\n  font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {\n  margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n  cursor: pointer;\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  margin-left: var(--hi-v4-spacing-2, 4px);\n  -webkit-transition: color 0.3s;\n  transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n  background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n  position: relative;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: var(--hi-v4-color-gray-500, #929aa6);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n    background-color: var(--hi-v4-color-gray-200, #ebedf0);\n    margin: 0;\n    padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n    border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n    margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n    padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n    border-radius: var(--hi-v4-border-radius-normal, 4px);\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc {\n    padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      background: var(--hi-v4-color-gray-50, #f5f7fa);\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    position: relative;\n    overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-transition: all 0.3s;\n    transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n    padding-left: 16px;\n    padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n      width: auto;\n      display: block;\n      position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n      line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      margin: 0;\n      -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n        border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n        border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n      position: absolute;\n      left: 0;\n      bottom: auto;\n      width: 2px;\n      background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n      transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n      margin: 0;\n      padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n      background-color: var(--hi-v4-color-gray-200, #ebedf0);\n      border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n      margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n      padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      font-size: var(--hi-v4-text-size-sm, 0.75rem);\n      line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-orient: vertical;\n      -webkit-box-direction: normal;\n          -ms-flex-direction: column;\n              flex-direction: column;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n      padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n      border-radius: var(--hi-v4-border-radius-normal, 4px);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s;\n      background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n        background-color: var(--hi-v4-color-gray-200, #ebedf0);\n        color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n        background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n          color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  top: auto;\n  height: 2px;\n  background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n  line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n  padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n  margin: 0;\n  cursor: pointer;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n    color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--prev {\n    border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--next {\n    border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--disabled {\n    color: var(--hi-v4-color-gray-500, #929aa6) !important;\n    cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n  width: 100%;\n  overflow: hidden;\n  padding-top: var(--hi-v4-spacing-8, 16px);\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box; }\n";
 
 var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
 
 __styleInject__(css_248z);
 
-export default css_248z;
-//# sourceMappingURL=index.scss.js.map
+export { css_248z as default };

package/lib/types/TabInk.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const TabInk: React.FC<TabInkProps>;
 interface TabInkProps {
     disabled?: boolean;
     prefixCls?: string;
@@ -7,5 +8,4 @@ interface TabInkProps {
     direction: 'vertical' | 'horizontal';
     translate: number;
 }
-export declare const TabInk: React.FC<TabInkProps>;
-export default TabInk;
+export {};

package/lib/types/TabItem.d.ts

@@ -1,24 +1,30 @@
 import React from 'react';
 import { TabPaneProps } from './TabPane';
+export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
 interface TabItemProps extends TabPaneProps {
     active: boolean;
     draggable?: boolean;
-    onTabClick: (key: string) => void;
+    onTabClick: (key: React.ReactText, event: React.MouseEvent) => void;
     prefixCls?: string;
     editable?: boolean;
     onDelete?: (deletedNode: TabPaneProps, index: number) => void;
     index: number;
-    onDragStart?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
         dragNode: TabPaneProps;
-        dropNode: TabPaneProps;
+        targetNode: TabPaneProps;
         direction: 'prev' | 'next' | null;
     }) => void;
-    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, dragNode: TabPaneProps) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
     itemRef: HTMLDivElement | null;
     direction: 'horizontal' | 'vertical';
-    type: 'desc' | 'default' | 'button' | 'card';
+    type: 'desc' | 'line' | 'button' | 'card';
 }
-export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
 export {};

package/lib/types/TabList.d.ts

@@ -7,19 +7,23 @@ export interface TabListProps {
     prefixCls?: string;
     data: TabPaneProps[];
     direction?: 'horizontal' | 'vertical';
-    onChange?: (tabId: string) => void;
-    onTabClick?: (tabId: string) => void;
+    onChange?: (tabId: React.ReactText) => void;
+    onTabClick?: (tabId: React.ReactText, event: React.MouseEvent) => void;
     /**
      * 默认高亮id
      */
-    defaultActiveId?: string;
+    defaultActiveId?: React.ReactText;
     /**
      * 高亮id
      */
-    activeId?: string;
+    activeId?: React.ReactText;
     editable?: boolean;
     draggable?: boolean;
-    type?: 'desc' | 'card' | 'button' | 'default';
+    type?: 'desc' | 'card' | 'button' | 'line';
+    /**
+     * 右侧的拓展区域
+     */
+    extra?: React.ReactNode;
     /**
      * 节点增加时触发
      */
@@ -28,12 +32,18 @@ export interface TabListProps {
      * 节点删除时时触发
      */
     onDelete?: (deletedNode: TabPaneProps, index: number) => void;
-    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
+        dragNode: TabPaneProps;
+        targetNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
-        dropNode: TabPaneProps;
-        direction: string | null;
     }) => void;
-    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
 }

package/lib/types/TabPane.d.ts

@@ -4,7 +4,7 @@ export interface TabPaneProps {
     style?: React.CSSProperties;
     className?: string;
     disabled?: boolean;
-    tabId: string;
+    tabId: React.ReactText;
     tabTitle: React.ReactNode;
     tabDesc?: React.ReactNode;
     closeable?: boolean;

package/lib/types/Tabs.d.ts

@@ -36,27 +36,31 @@ export interface TabsProps {
     /**
      * 默认高亮id
      */
-    defaultActiveId?: string;
+    defaultActiveId?: React.ReactText;
     /**
      * 高亮id
      */
-    activeId?: string;
+    activeId?: React.ReactText;
     /**
      * 布局方向
      */
-    direction?: 'horizontal' | 'vertical';
+    placement?: 'horizontal' | 'vertical';
     /**
      * 布局类型
      */
-    type?: 'desc' | 'card' | 'button' | 'default';
+    type?: 'desc' | 'card' | 'button' | 'line';
     /**
      * `activeId` 改变的回调
      */
-    onChange?: (tabId: string) => void;
+    onChange?: (tabId: React.ReactText) => void;
     /**
      * 标签点击触发回调
      */
-    onTabClick?: (tabId: string) => void;
+    onTabClick?: (tabId: React.ReactText) => void;
+    /**
+     * 右侧的拓展区域
+     */
+    extra?: React.ReactNode;
     /**
      * 节点增加时触发
      */
@@ -65,12 +69,18 @@ export interface TabsProps {
      * 节点删除时时触发
      */
     onDelete?: (deletedNode: TabPaneProps, index: number) => void;
-    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, dropNode, direction, }: {
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
+        dragNode: TabPaneProps;
+    }) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
+        targetNode: TabPaneProps;
+    }) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
+        dragNode: TabPaneProps;
+        targetNode: TabPaneProps;
+        direction: 'prev' | 'next' | null;
+    }) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
-        dropNode: TabPaneProps;
-        direction: string | null;
     }) => void;
-    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
 }

package/lib/types/index.d.ts

@@ -1,5 +1,9 @@
+/// <reference types="react" />
 import './styles/index.scss';
+declare const Tabs: import("react").ForwardRefExoticComponent<import("./Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement | null>> & {
+    Pane: import("react").FC<import("./TabPane").TabPaneProps>;
+};
+export default Tabs;
 export * from './Tabs';
 export * from './TabPane';
 export * from './TabList';
-export { Tabs as default } from './Tabs';