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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +57 -0
  2. package/lib/cjs/TabItem.js +18 -10
  3. package/lib/cjs/TabItem.js.map +1 -1
  4. package/lib/cjs/TabList.js +44 -24
  5. package/lib/cjs/TabList.js.map +1 -1
  6. package/lib/cjs/Tabs.js +23 -20
  7. package/lib/cjs/Tabs.js.map +1 -1
  8. package/lib/cjs/styles/index.scss.js +1 -1
  9. package/lib/esm/TabItem.js +18 -10
  10. package/lib/esm/TabItem.js.map +1 -1
  11. package/lib/esm/TabList.js +42 -24
  12. package/lib/esm/TabList.js.map +1 -1
  13. package/lib/esm/Tabs.js +22 -21
  14. package/lib/esm/Tabs.js.map +1 -1
  15. package/lib/esm/styles/index.scss.js +1 -1
  16. package/lib/types/TabItem.d.ts +13 -7
  17. package/lib/types/TabList.d.ts +21 -11
  18. package/lib/types/TabPane.d.ts +1 -1
  19. package/lib/types/Tabs.d.ts +22 -12
  20. package/package.json +12 -10
package/README.md CHANGED
@@ -9,3 +9,60 @@ const Tabs = require('@hi-ui/tabs');
9
9
 
10
10
  // TODO: DEMONSTRATE API
11
11
  ```
12
+
13
+ ## Props
14
+
15
+ ### Tabs
16
+
17
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
18
+ | --------------- | ------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------- | ------------ |
19
+ | type | 标签类型 | string | 'desc' \| 'card' \| 'button' \| 'default' | 'default' |
20
+ | placement | 水平或竖直展示标签 | string | 'vertical' \| 'horizontal' | 'horizontal' |
21
+ | defaultActiveId | 设置默认激活的标签 | React.ReactText | - | 第一个选项卡 |
22
+ | activeId | 设置激活的标签，设置此值后变为受控模式 | React.ReactText | - | - |
23
+ | draggable | 是否支持拖拽 | boolean | true \| false | false |
24
+ | editable | 是否可编辑 | boolean | true \| false | false |
25
+ | extra | 右侧扩展区域 | React.ReactNode | - | - |
26
+
27
+ ### Tabs.Pane
28
+
29
+ | 参数 | 说明 | 类型 | 可选值 | 默认值 |
30
+ | --------- | -------------------------------------------- | ------------------- | ------------- | ------ |
31
+ | tabTitle | 选项卡头显示文字 | ReactNode | - | - |
32
+ | tabDesc | 选项卡头描述文字，仅对 type='desc'时生效 | ReactNode | - | - |
33
+ | tabId | 每个标签的唯一标识 | string \| number | - | - |
34
+ | disabled | 标签是否禁用 | boolean | true \| false | false |
35
+ | closeable | 标签是否可以关闭，仅对 editable 为true时生效 | boolean | true \| false | true |
36
+
37
+ ## Events
38
+
39
+ | 名称 | 说明 | 类型 | 参数 | 返回值 |
40
+ | -------------- | ----------------------------------------------------------- | ------------------------------------ | --------------------------------------------------- | ------------------------------ |
41
+ | onTabClick | 点击标签页时触发，回调值为点击点击标签的 id | (tabId, event) => void | tabKey: 点击的标签 id, event: MouseEvent |
42
+ | onChange | 点击标签页变更时触发，回调值为点击点击标签的 id | (tabId, event) => void | tabKey: 点击的标签 id, event: MouseEvent | - |
43
+ | onDragStart | 节点开始拖拽时触发 | (e: React.DragEvent,{dragNode: TabNode}) => void | dragNode: 拖拽节点 |
44
+ | onDragOver | 节点开始拖拽时触发 | (e: React.DragEvent,{targetNode: TabNode}) => void | dragNode: 拖拽节点 |
45
+ | onDragEnd | 节点开始拖拽时触发 | (e: React.DragEvent,{targetNode: TabNode}) => void | dragNode: 拖拽节点 | - |- |
46
+ | onDrop | 节点拖拽时触发 | (e: React.DragEvent,{dragNode, targetNode, direction, }) => void | dragNode: 拖拽节点 | - |
47
+ | onAdd | 节点增加时触发 | () => void | - | - |
48
+ | onDelete | 点击删除节点按钮时触发 | (deletedNode: TabNode,index) => void | deletedNode: 删除的节点, index: 删除的节点索引 | - |
49
+
50
+ ## CHANGELOG
51
+ *** 拖拽事件全面向原生看齐 ***
52
+ | 参数 | 变更类型 | 变更内容 | 解决的问题 |
53
+ | ------------ | ------------------------------- | ------------------------------------------------------------------------------ | ---------------------------- |
54
+
55
+
56
+ | onBeforeDelete | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 |
57
+ | onDropEnd | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 |
58
+ | canScroll | deprecated | 现在不需要canScroll，会自动计算是否可滚动 | 优化易用性 |
59
+ | max | deprecated | 现在不再内置收起效果，该字段没有存在意义 | 优化易用性 |
60
+ | animation | deprecated | 动画效果为内置 | 优化易用性，删减无意义的配置项 |
61
+ | onDragStart | update | 入参调整 | |
62
+ | onDragOver | feature | 新增钩子 | |
63
+ | onDragEnd | feature | 新增钩子 | |
64
+ |extra | feature | 右侧额外操作区 | 功能增强 |
65
+ | onDrop | update | 入参调整 | |
66
+ | type | update | 选项移除 'editable'类型，, 默认type由'card'类型改为'line' | editable 拆为配置项更合理，根据通用场景，'line‘模式用的更多，故更改默认类型 |
67
+ | editable | feature | 选项移除type 的 'editable'类型，迁移为一个配置项 | editable 拆为配置项更合理，解决editable 和 type的组合问题 |
68
+
package/lib/cjs/TabItem.js CHANGED
@@ -53,7 +53,9 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
53
53
  itemRef = _ref.itemRef,
54
54
  draggable = _ref.draggable,
55
55
  _ref$type = _ref.type,
56
- type = _ref$type === void 0 ? 'default' : _ref$type,
56
+ type = _ref$type === void 0 ? 'line' : _ref$type,
57
+ _ref$closeable = _ref.closeable,
58
+ closeable = _ref$closeable === void 0 ? true : _ref$closeable,
57
59
  _ref$direction = _ref.direction,
58
60
  layout = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
59
61
 
@@ -67,7 +69,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
67
69
 
68
70
  var _onClick = React.useCallback(function (e) {
69
71
  if (onTabClick) {
70
- onTabClick(tabId);
72
+ onTabClick(tabId, e);
71
73
  }
72
74
  }, [onTabClick, tabId]);
73
75
 
@@ -88,8 +90,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
88
90
 
89
91
  if (_onDragStart) {
90
92
  _onDragStart(e, {
91
- tabId: tabId,
92
- tabTitle: tabTitle
93
+ dragNode: {
94
+ tabId: tabId,
95
+ tabTitle: tabTitle
96
+ }
93
97
  });
94
98
  }
95
99
  },
@@ -101,8 +105,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
101
105
 
102
106
  if (_onDragEnd) {
103
107
  _onDragEnd(e, {
104
- tabId: tabId,
105
- tabTitle: tabTitle
108
+ dragNode: {
109
+ tabId: tabId,
110
+ tabTitle: tabTitle
111
+ }
106
112
  });
107
113
  }
108
114
  },
@@ -140,8 +146,10 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
140
146
 
141
147
  if (_onDragOver) {
142
148
  _onDragOver(e, {
143
- tabId: tabId,
144
- tabTitle: tabTitle
149
+ targetNode: {
150
+ tabId: tabId,
151
+ tabTitle: tabTitle
152
+ }
145
153
  });
146
154
  }
147
155
  },
@@ -158,7 +166,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
158
166
  tabId: tabId,
159
167
  tabTitle: tabTitle
160
168
  },
161
- dropNode: {
169
+ targetNode: {
162
170
  tabId: passedData.tabId,
163
171
  tabTitle: passedData.tabTitle
164
172
  },
@@ -170,7 +178,7 @@ var TabItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
170
178
  className: prefixCls + "-item__title"
171
179
  }, tabTitle), type === 'desc' && /*#__PURE__*/React__default['default'].createElement("span", {
172
180
  className: prefixCls + "-item__desc"
173
- }, tabDesc), editable && /*#__PURE__*/React__default['default'].createElement("span", {
181
+ }, tabDesc), editable && closeable && /*#__PURE__*/React__default['default'].createElement("span", {
174
182
  className: prefixCls + "__close-btn",
175
183
  onClick: function onClick(e) {
176
184
  e.stopPropagation();
package/lib/cjs/TabItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","tabDesc","prefixCls","tabId","onTabClick","active","editable","onDelete","index","onDragStart","onDragOver","onDrop","onDragEnd","itemRef","draggable","type","direction","layout","useState","dragId","setDragId","setDirection","_onClick","useCallback","e","React","cx","tabIndex","onClick","stopPropagation","dataTransfer","setData","JSON","stringify","preventDefault","clearData","onDragLeave","targetBoundingRect","getBoundingClientRect","hoverTargetSortY","bottom","top","hoverTargetSortX","right","left","hoverClientY","clientY","hoverClientX","clientX","passedData","parse","getData","dragNode","dropNode","CloseOutlined","__DEV__","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"TabItem.js","sources":["../../src/TabItem.tsx"],"sourcesContent":[null],"names":["TabItem","forwardRef","ref","className","style","disabled","tabTitle","tabDesc","prefixCls","tabId","onTabClick","active","editable","onDelete","index","onDragStart","onDragOver","onDrop","onDragEnd","itemRef","draggable","type","closeable","direction","layout","useState","dragId","setDragId","setDirection","_onClick","useCallback","e","React","cx","tabIndex","onClick","stopPropagation","dataTransfer","setData","JSON","stringify","dragNode","preventDefault","clearData","onDragLeave","targetBoundingRect","getBoundingClientRect","hoverTargetSortY","bottom","top","hoverTargetSortX","right","left","hoverClientY","clientY","hoverClientX","clientX","targetNode","passedData","parse","getData","CloseOutlined","__DEV__","displayName"],"mappings":"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"}
package/lib/cjs/TabList.js CHANGED
@@ -29,6 +29,10 @@ var TabInk = require('./TabInk.js');
29
29
 
30
30
  var icons = require('@hi-ui/icons');
31
31
 
32
+ var typeAssertion = require('@hi-ui/type-assertion');
33
+
34
+ var iconButton = require('@hi-ui/icon-button');
35
+
32
36
  function _interopDefaultLegacy(e) {
33
37
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
34
38
  'default': e
@@ -64,13 +68,20 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
68
  onDrop = _ref.onDrop,
65
69
  onDragEnd = _ref.onDragEnd,
66
70
  _ref$type = _ref.type,
67
- type = _ref$type === void 0 ? 'default' : _ref$type;
71
+ type = _ref$type === void 0 ? 'line' : _ref$type,
72
+ extra = _ref.extra;
68
73
 
69
- var _a, _b;
74
+ var _a;
75
+
76
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
77
+ if (typeAssertion.isUndef(defaultActiveId)) {
78
+ return data[0] ? data[0].tabId : '';
79
+ }
70
80
 
71
- var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId || ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.tabId), activeId, onChange),
72
- activeTab = _useUncontrolledState[0],
73
- setActiveTab = _useUncontrolledState[1];
81
+ return defaultActiveId;
82
+ }, activeId, onChange),
83
+ activeTabId = _useUncontrolledState[0],
84
+ setActiveTabId = _useUncontrolledState[1];
74
85
 
75
86
  var _useState = React.useState(null),
76
87
  innerRef = _useState[0],
@@ -94,21 +105,23 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
94
105
  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);
95
106
  }
96
107
  }, [scrollRef, innerRef, direction]);
97
- var onClickTab = React.useCallback(function (key) {
108
+ var onClickTab = React.useCallback(function (key, event) {
98
109
  if (onTabClick) {
99
- onTabClick(key);
110
+ onTabClick(key, event);
100
111
  }
101
112
 
102
- if (key !== activeTab && setActiveTab) {
103
- setActiveTab(key);
113
+ if (key !== activeTabId && setActiveTabId) {
114
+ setActiveTabId(key);
104
115
  }
105
- }, [activeTab, onTabClick, setActiveTab]);
116
+ }, [activeTabId, onTabClick, setActiveTabId]);
106
117
  return /*#__PURE__*/React__default['default'].createElement("div", {
107
118
  style: style,
108
119
  className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
109
120
  ref: ref
110
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
111
- className: prefixCls + "__add-btn",
121
+ }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
122
+ className: prefixCls + "__left-btn",
123
+ effect: true,
124
+ icon: /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null),
112
125
  onClick: function onClick() {
113
126
  if (scrollRef && innerRef) {
114
127
  var canScroll = -translateX - innerRef.clientWidth;
@@ -123,8 +136,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
123
136
  setTranslateX(translateX + moveWidth);
124
137
  }
125
138
  }
126
- }, /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
127
- className: prefixCls + "__add-btn",
139
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
140
+ className: prefixCls + "__up-btn",
141
+ effect: true,
142
+ icon: /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null),
128
143
  onClick: function onClick() {
129
144
  if (scrollRef && innerRef) {
130
145
  var canScroll = -translateY - innerRef.clientHeight;
@@ -139,7 +154,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
139
154
  setTranslateY(translateY + moveWidth);
140
155
  }
141
156
  }
142
- }, /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null)), /*#__PURE__*/React__default['default'].createElement("div", {
157
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
143
158
  className: classname.cx(prefixCls + "__list--inner"),
144
159
  ref: setInnerRef
145
160
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -158,7 +173,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
158
173
  type: type,
159
174
  itemRef: itemsRef.current["" + d.tabId],
160
175
  index: index,
161
- active: activeTab === d.tabId,
176
+ active: activeTabId === d.tabId,
162
177
  prefixCls: prefixCls,
163
178
  draggable: draggable,
164
179
  onTabClick: onClickTab,
@@ -170,14 +185,16 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
170
185
  onDragEnd: onDragEnd,
171
186
  direction: direction
172
187
  }));
173
- }), type === 'default' && /*#__PURE__*/React__default['default'].createElement(TabInk.TabInk, {
188
+ }), type === 'line' && /*#__PURE__*/React__default['default'].createElement(TabInk.TabInk, {
174
189
  translate: direction === 'horizontal' ? translateX : translateY,
175
190
  prefixCls: prefixCls,
176
191
  direction: direction,
177
192
  tabListRef: innerRef,
178
- itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTab]
179
- }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
180
- className: prefixCls + "__add-btn",
193
+ itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
194
+ }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
195
+ effect: true,
196
+ className: prefixCls + "__right-btn",
197
+ icon: /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null),
181
198
  onClick: function onClick() {
182
199
  if (scrollRef && innerRef) {
183
200
  var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
@@ -192,8 +209,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
192
209
  setTranslateX(translateX - moveWidth);
193
210
  }
194
211
  }
195
- }, /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
196
- className: prefixCls + "__add-btn",
212
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
213
+ effect: true,
214
+ className: prefixCls + "__down-btn",
215
+ icon: /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
197
216
  onClick: function onClick() {
198
217
  if (scrollRef && innerRef) {
199
218
  var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
@@ -208,10 +227,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
208
227
  setTranslateY(translateY - moveWidth);
209
228
  }
210
229
  }
211
- }, /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)), editable && /*#__PURE__*/React__default['default'].createElement("div", {
230
+ }), editable ? /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
231
+ icon: /*#__PURE__*/React__default['default'].createElement(icons.PlusOutlined, null),
212
232
  className: prefixCls + "__add-btn",
213
233
  onClick: onAdd
214
- }, /*#__PURE__*/React__default['default'].createElement(icons.PlusOutlined, null)));
234
+ }) : null, extra);
215
235
  });
216
236
 
217
237
  if (env.__DEV__) {
package/lib/cjs/TabList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","direction","editable","onAdd","onDelete","draggable","onDragStart","onDragOver","onDrop","onDragEnd","type","useUncontrolledState","tabId","activeTab","setActiveTab","useState","innerRef","setInnerRef","scrollRef","setScrollRef","translateX","setTranslateX","translateY","setTranslateY","itemsRef","useRef","showScrollBtn","useMemo","clientWidth","clientHeight","onClickTab","useCallback","key","React","cx","onClick","canScroll","moveWidth","LeftOutlined","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"TabList.js","sources":["../../src/TabList.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","TabList","forwardRef","ref","data","className","style","activeId","defaultActiveId","onChange","onTabClick","prefixCls","direction","editable","onAdd","onDelete","draggable","onDragStart","onDragOver","onDrop","onDragEnd","type","extra","useUncontrolledState","isUndef","tabId","activeTabId","setActiveTabId","useState","innerRef","setInnerRef","scrollRef","setScrollRef","translateX","setTranslateX","translateY","setTranslateY","itemsRef","useRef","showScrollBtn","useMemo","clientWidth","clientHeight","onClickTab","useCallback","key","event","React","cx","IconButton","effect","icon","LeftOutlined","onClick","canScroll","moveWidth","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":"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"}
package/lib/cjs/Tabs.js CHANGED
@@ -25,6 +25,10 @@ var env = require('@hi-ui/env');
25
25
 
26
26
  var TabList = require('./TabList.js');
27
27
 
28
+ var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
29
+
30
+ var typeAssertion = require('@hi-ui/type-assertion');
31
+
28
32
  function _interopDefaultLegacy(e) {
29
33
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
30
34
  'default': e
@@ -44,8 +48,6 @@ var _prefix = classname.getPrefixCls(_role);
44
48
  var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
45
49
  var _cx;
46
50
 
47
- var _b;
48
-
49
51
  var _a$prefixCls = _a.prefixCls,
50
52
  prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
51
53
  _a$role = _a.role,
@@ -57,8 +59,8 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
57
59
  onChange = _a.onChange,
58
60
  onTabClick = _a.onTabClick,
59
61
  editable = _a.editable,
60
- _a$direction = _a.direction,
61
- direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
62
+ _a$placement = _a.placement,
63
+ placement = _a$placement === void 0 ? 'horizontal' : _a$placement,
62
64
  onAdd = _a.onAdd,
63
65
  onDelete = _a.onDelete,
64
66
  _a$draggable = _a.draggable,
@@ -69,10 +71,11 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
69
71
  onDrop = _a.onDrop,
70
72
  style = _a.style,
71
73
  _a$type = _a.type,
72
- type = _a$type === void 0 ? 'default' : _a$type,
73
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "direction", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type"]);
74
+ type = _a$type === void 0 ? 'line' : _a$type,
75
+ extra = _a.extra,
76
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
74
77
 
75
- var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = direction === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
78
+ var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--vertical"] = placement === 'vertical', _cx[prefixCls + "--" + type] = type, _cx));
76
79
  var tabList = React.useMemo(function () {
77
80
  var list = [];
78
81
  React__default['default'].Children.map(children, function (child) {
@@ -96,17 +99,15 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
99
  return list;
97
100
  }, [children]);
98
101
 
99
- var _useState = React.useState(activeId || defaultActiveId || ((_b = tabList[0]) === null || _b === void 0 ? void 0 : _b.tabId)),
100
- activePane = _useState[0],
101
- setActivePane = _useState[1];
102
-
103
- var _onChange = React.useCallback(function (tabId) {
104
- if (onChange) {
105
- onChange(tabId);
102
+ var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
103
+ if (typeAssertion.isUndef(defaultActiveId)) {
104
+ return tabList[0] ? tabList[0].tabId : '';
106
105
  }
107
106
 
108
- setActivePane(tabId);
109
- }, [onChange]);
107
+ return defaultActiveId;
108
+ }, activeId, onChange),
109
+ activeTabId = _useUncontrolledState[0],
110
+ setActiveTabId = _useUncontrolledState[1];
110
111
 
111
112
  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
112
113
  ref: ref,
@@ -117,9 +118,9 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
117
118
  prefixCls: prefixCls,
118
119
  data: tabList,
119
120
  activeId: activeId,
120
- onChange: _onChange,
121
+ onChange: setActiveTabId,
121
122
  onTabClick: onTabClick,
122
- direction: direction,
123
+ direction: placement,
123
124
  editable: editable,
124
125
  onAdd: onAdd,
125
126
  onDelete: onDelete,
@@ -128,12 +129,14 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
128
129
  onDragOver: onDragOver,
129
130
  onDrop: onDrop,
130
131
  type: type,
131
- onDragStart: onDragStart
132
+ onDragStart: onDragStart,
133
+ extra: extra
132
134
  }), /*#__PURE__*/React__default['default'].createElement("div", {
133
135
  className: _prefix + "__content"
134
136
  }, React__default['default'].Children.map(children, function (child) {
135
137
  return child && /*#__PURE__*/React__default['default'].cloneElement(child, {
136
- active: activePane === child.props.tabId
138
+ className: classname.cx(_prefix + "-tab-pane", child.props.className),
139
+ active: activeTabId === child.props.tabId
137
140
  });
138
141
  })));
139
142
  });
package/lib/cjs/Tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","editable","direction","onAdd","onDelete","draggable","onDragStart","onDragOver","onDragEnd","onDrop","style","type","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useState","activePane","setActivePane","_onChange","useCallback","TabList","data","cloneElement","active","__DEV__","displayName"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"names":["_role","_prefix","getPrefixCls","Tabs","forwardRef","_a","ref","prefixCls","role","className","children","defaultActiveId","activeId","onChange","onTabClick","editable","placement","onAdd","onDelete","draggable","onDragStart","onDragOver","onDragEnd","onDrop","style","type","extra","rest","cls","cx","tabList","useMemo","list","React","Children","map","child","props","tabTitle","tabId","tabDesc","closeable","disabled","item","push","useUncontrolledState","isUndef","activeTabId","setActiveTabId","TabList","data","direction","cloneElement","active","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;AAEA;;;;;IAGaC,IAAI,gBAAGC,gBAAAA,CAClB,UACEC,EADF,EAwBEC,GAxBF;;;wBAEIC;MAAAA,sCAAYN;mBACZO;MAAAA,4BAAOR;MACPS,eAAAA;MACAC,cAAAA;MACAC,qBAAAA;MACAC,cAAAA;MACAC,cAAAA;MACAC,gBAAAA;MACAC,cAAAA;wBACAC;MAAAA,sCAAY;MACZC,WAAAA;MACAC,cAAAA;wBACAC;MAAAA,sCAAY;MACZC,iBAAAA;MACAC,gBAAAA;MACAC,eAAAA;MACAC,YAAAA;MACAC,WAAAA;mBACAC;MAAAA,4BAAO;MACPC,WAAAA;MACGC,wBArBL,YAAA,QAAA,aAAA,YAAA,mBAAA,YAAA,YAAA,cAAA,YAAA,aAAA,SAAA,YAAA,aAAA,eAAA,cAAA,aAAA,UAAA,SAAA,QAAA,SAAA;;MAyBMC,GAAG,GAAGC,YAAAA,CAAGtB,SAAHsB,EAAcpB,SAAdoB,iBACNtB,SADQ,mBACgBS,SAAS,KAAK,gBACtCT,SAFQ,OAERA,GAAckB,QAASA,SAFjBI;MAKNC,OAAO,GAAGC,aAAAA,CAAQ;QAChBC,IAAI,GAAmB;AAC7BC,IAAAA,yBAAAA,CAAMC,QAAND,CAAeE,GAAfF,CAAmBvB,QAAnBuB,EAA6B,UAACG,KAAD;UACvBA,OAAO;2BACiDA,KAAK,CAACC;YAAxDC,QAAR,gBAAQA;YAAUC,KAAlB,gBAAkBA;YAAOC,OAAzB,gBAAyBA;YAASC,SAAlC,gBAAkCA;YAAWC,QAA7C,gBAA6CA;YACvCC,IAAI,GAAG;AAAEL,UAAAA,QAAQ,EAARA,QAAF;AAAYC,UAAAA,KAAK,EAALA,KAAZ;AAAmBC,UAAAA,OAAO,EAAPA,OAAnB;AAA4BC,UAAAA,SAAS,EAATA,SAA5B;AAAuCC,UAAAA,QAAQ,EAARA;AAAvC;AAEbV,QAAAA,IAAI,CAACY,IAALZ,CAAUW,IAAVX;;AALJ,KAAAC;WAQOD;AAVc,GAAPD,EAWb,CAACrB,QAAD,CAXaqB;;8BAasBc,yCAAAA,CACpC;QACMC,qBAAAA,CAAQnC,eAARmC,GAA0B;aACrBhB,OAAO,CAAC,CAAD,CAAPA,GAAaA,OAAO,CAAC,CAAD,CAAPA,CAAWS,KAAxBT,GAAgC;;;WAGlCnB;AAN+C,GAApBkC,EAQpCjC,QARoCiC,EASpChC,QAToCgC;MAA/BE,WAAP;MAAoBC,cAApB;;sBAaEf,yBAAAA,cAAAA,MAAAA;AAAK3B,IAAAA,GAAG,EAAEA;AAAKE,IAAAA,IAAI,EAAEA;AAAMC,IAAAA,SAAS,EAAEmB;AAAKJ,IAAAA,KAAK,EAAEA;KAAWG,KAA7DM,eACEA,yBAAAA,cAAAA,CAACgB,eAADhB;AACE1B,IAAAA,SAAS,EAAEA;AACX2C,IAAAA,IAAI,EAAEpB;AACNlB,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,QAAQ,EAAEmC;AACVlC,IAAAA,UAAU,EAAEA;AACZqC,IAAAA,SAAS,EAAEnC;AACXD,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,KAAK,EAAEA;AACPC,IAAAA,QAAQ,EAAEA;AACVC,IAAAA,SAAS,EAAEA;AACXG,IAAAA,SAAS,EAAEA;AACXD,IAAAA,UAAU,EAAEA;AACZE,IAAAA,MAAM,EAAEA;AACRE,IAAAA,IAAI,EAAEA;AACNL,IAAAA,WAAW,EAAEA;AACbM,IAAAA,KAAK,EAAEA;GAhBTO,CADFA,eAmBEA,yBAAAA,cAAAA,MAAAA;AAAKxB,IAAAA,SAAS,EAAKR,OAAL;GAAdgC,EACGA,yBAAAA,CAAMC,QAAND,CAAeE,GAAfF,CAAmBvB,QAAnBuB,EAA6B,UAACG,KAAD;WAE1BA,KAAK,iBACLH,yBAAAA,CAAMmB,YAANnB,CAAmBG,KAAnBH,EAA0B;AACxBxB,MAAAA,SAAS,EAAEoB,YAAAA,CAAM5B,OAAJ,cAAF4B,EAA0BO,KAAK,CAACC,KAAND,CAAY3B,SAAtCoB,CADa;AAExBwB,MAAAA,MAAM,EAAEN,WAAW,KAAKX,KAAK,CAACC,KAAND,CAAYG;AAFZ,KAA1BN;AAHH,GAAAA,CADHA,CAnBFA;AA1DwB,CAAV7B;;AAmLpB,IAAIkD,WAAJ,EAAa;AACXnD,EAAAA,IAAI,CAACoD,WAALpD,GAAmB,MAAnBA;;;"}
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- 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";
15
+ 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: 0.875rem;\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: 2px;\n margin: var(--hi-v4-spacing-1, 2px); }\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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff); }\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-primary-500, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #e2f3fe;\n background-color: var(--hi-v4-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: #237ffa;\n color: var(--hi-v4-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: #237ffa;\n color: var(--hi-v4-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--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-primary-500, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: #e2f3fe;\n background-color: var(--hi-v4-primary-50, 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-primary-500, 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-primary-500, 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-primary-500, 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-primary-500, 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-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__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-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: 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-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n color: #237ffa;\n color: var(--hi-v4-primary-500, 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-primary-500, 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-primary-500, 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";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18