@hi-ui/tabs 4.0.0-beta.1 → 4.0.0-beta.4

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 (12) hide show
  1. package/lib/cjs/TabList.js +22 -11
  2. package/lib/cjs/TabList.js.map +1 -1
  3. package/lib/cjs/index.js +6 -3
  4. package/lib/cjs/index.js.map +1 -1
  5. package/lib/cjs/styles/index.scss.js +1 -1
  6. package/lib/esm/TabList.js +21 -11
  7. package/lib/esm/TabList.js.map +1 -1
  8. package/lib/esm/index.js +7 -1
  9. package/lib/esm/index.js.map +1 -1
  10. package/lib/esm/styles/index.scss.js +1 -1
  11. package/lib/types/index.d.ts +5 -1
  12. package/package.json +8 -7
package/lib/cjs/TabList.js CHANGED
@@ -31,6 +31,8 @@ var icons = require('@hi-ui/icons');
31
31
 
32
32
  var typeAssertion = require('@hi-ui/type-assertion');
33
33
 
34
+ var iconButton = require('@hi-ui/icon-button');
35
+
34
36
  function _interopDefaultLegacy(e) {
35
37
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
36
38
  'default': e
@@ -116,8 +118,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
116
118
  style: style,
117
119
  className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
118
120
  ref: ref
119
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
120
- 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),
121
125
  onClick: function onClick() {
122
126
  if (scrollRef && innerRef) {
123
127
  var canScroll = -translateX - innerRef.clientWidth;
@@ -132,8 +136,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
132
136
  setTranslateX(translateX + moveWidth);
133
137
  }
134
138
  }
135
- }, /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
136
- 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),
137
143
  onClick: function onClick() {
138
144
  if (scrollRef && innerRef) {
139
145
  var canScroll = -translateY - innerRef.clientHeight;
@@ -148,7 +154,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
148
154
  setTranslateY(translateY + moveWidth);
149
155
  }
150
156
  }
151
- }, /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null)), /*#__PURE__*/React__default['default'].createElement("div", {
157
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
152
158
  className: classname.cx(prefixCls + "__list--inner"),
153
159
  ref: setInnerRef
154
160
  }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -185,8 +191,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
185
191
  direction: direction,
186
192
  tabListRef: innerRef,
187
193
  itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
188
- }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default['default'].createElement("div", {
189
- className: prefixCls + "__add-btn",
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),
190
198
  onClick: function onClick() {
191
199
  if (scrollRef && innerRef) {
192
200
  var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
@@ -201,8 +209,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
201
209
  setTranslateX(translateX - moveWidth);
202
210
  }
203
211
  }
204
- }, /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React__default['default'].createElement("div", {
205
- 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),
206
216
  onClick: function onClick() {
207
217
  if (scrollRef && innerRef) {
208
218
  var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
@@ -217,10 +227,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
217
227
  setTranslateY(translateY - moveWidth);
218
228
  }
219
229
  }
220
- }, /*#__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),
221
232
  className: prefixCls + "__add-btn",
222
233
  onClick: onAdd
223
- }, /*#__PURE__*/React__default['default'].createElement(icons.PlusOutlined, null)), extra);
234
+ }) : null, extra);
224
235
  });
225
236
 
226
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","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","onClick","canScroll","moveWidth","LeftOutlined","UpOutlined","transform","map","d","index","TabItem","node","current","itemRef","active","TabInk","translate","tabListRef","RightOutlined","DownOutlined","PlusOutlined","__DEV__","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,KAAK,GAAG,MAAd;;AACA,IAAMC,OAAO,GAAGC,sBAAAA,CAAaF,KAAbE,CAAhB;;IAEaC,OAAO,gBAAGC,gBAAAA,CACrB,cAAA,EAsBEC,GAtBF;;;MAEIC,YAAAA;MACAC,iBAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,uBAAAA;MACAC,gBAAAA;MACAC,kBAAAA;4BACAC;MAAAA,wCAAYZ;4BACZa;MAAAA,wCAAY;MACZC,gBAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,mBAAAA;MACAC,kBAAAA;MACAC,cAAAA;MACAC,iBAAAA;uBACAC;MAAAA,8BAAO;MACPC,aAAAA;;;;8BAIoCC,yCAAAA,CACpC;QACMC,qBAAAA,CAAQhB,eAARgB,GAA0B;aACrBpB,IAAI,CAAC,CAAD,CAAJA,GAAUA,IAAI,CAAC,CAAD,CAAJA,CAAQqB,KAAlBrB,GAA0B;;;WAG5BI;AAN+C,GAApBe,EAQpChB,QARoCgB,EASpCd,QAToCc;MAA/BG,WAAP;MAAoBC,cAApB;;kBAYgCC,cAAAA,CAAgC,IAAhCA;MAAzBC,QAAP;MAAiBC,WAAjB;;mBACkCF,cAAAA,CAAgC,IAAhCA;MAA3BG,SAAP;MAAkBC,YAAlB;;mBACoCJ,cAAAA,CAAiB,CAAjBA;MAA7BK,UAAP;MAAmBC,aAAnB;;mBACoCN,cAAAA,CAAiB,CAAjBA;MAA7BO,UAAP;MAAmBC,aAAnB;;MACMC,QAAQ,GAAGC,YAAAA,CAA8C,EAA9CA;MACXC,aAAa,GAAGC,aAAAA,CAAQ;QACxBT,SAAS,IAAIF,UAAU;aAClBjB,SAAS,KAAK,YAAdA,GACH,CAAAmB,SAAS,SAATA,IAAAA,SAAS,WAATA,SAAAA,GAAAA,SAAS,CAAEU,WAAX,KAAyBZ,QAAQ,SAARA,IAAAA,QAAQ,WAARA,SAAAA,GAAAA,QAAQ,CAAEY,WAAnC,CADG7B,GAEH,CAAAmB,SAAS,SAATA,IAAAA,SAAS,WAATA,SAAAA,GAAAA,SAAS,CAAEW,YAAX,KAA0Bb,QAAQ,SAARA,IAAAA,QAAQ,WAARA,SAAAA,GAAAA,QAAQ,CAAEa,YAApC;;AAJqB,GAAPF,EAMnB,CAACT,SAAD,EAAYF,QAAZ,EAAsBjB,SAAtB,CANmB4B;MAQhBG,UAAU,GAAGC,iBAAAA,CACjB,UAACC,GAAD,EAAuBC,KAAvB;QACMpC,YAAY;AACdA,MAAAA,UAAU,CAACmC,GAAD,EAAMC,KAAN,CAAVpC;;;QAEEmC,GAAG,KAAKnB,WAARmB,IAAuBlB,gBAAgB;AACzCA,MAAAA,cAAc,CAACkB,GAAD,CAAdlB;;AANwB,GAAXiB,EASjB,CAAClB,WAAD,EAAchB,UAAd,EAA0BiB,cAA1B,CATiBiB;sBAYjBG,yBAAAA,cAAAA,MAAAA;AACEzC,IAAAA,KAAK,EAAEA;AACPD,IAAAA,SAAS,EAAE2C,YAAAA,CAAMrC,SAAJ,WAAFqC,iBAA+BrC,SAA7B,aAA6BA,GAAoBU,QAASA,SAA5D2B,GAAoE3C,SAApE2C;AACX7C,IAAAA,GAAG,EAAEA;GAHP4C,EAKGR,aAAa,IAAI3B,SAAS,KAAK,YAA/B2B,iBACCQ,yBAAAA,cAAAA,MAAAA;AACE1C,IAAAA,SAAS,EAAKM,SAAL;AACTsC,IAAAA,OAAO,EAAE,gBAAA;UACHlB,SAAS,IAAIF,UAAU;YACnBqB,SAAS,GAAG,CAACjB,UAAD,GAAcJ,QAAQ,CAACY;YACrCU,SAAS,GAAG;;YACZD,SAAS,IAAI,GAAG;AAClBC,UAAAA,SAAS,GAAGtB,QAAQ,CAACY,WAArBU;AADF,eAEO;AACLA,UAAAA,SAAS,GAAG,CAAClB,UAAbkB;;;AAGFjB,QAAAA,aAAa,CAACD,UAAU,GAAGkB,SAAd,CAAbjB;;;GAZNa,eAgBEA,yBAAAA,cAAAA,CAACK,kBAADL,MAAAA,CAhBFA,CANJA,EAyBGR,aAAa,IAAI3B,SAAS,KAAK,UAA/B2B,iBACCQ,yBAAAA,cAAAA,MAAAA;AACE1C,IAAAA,SAAS,EAAKM,SAAL;AACTsC,IAAAA,OAAO,EAAE,gBAAA;UACHlB,SAAS,IAAIF,UAAU;YACnBqB,SAAS,GAAG,CAACf,UAAD,GAAcN,QAAQ,CAACa;YACrCS,SAAS,GAAG;;YACZD,SAAS,IAAI,GAAG;AAClBC,UAAAA,SAAS,GAAGtB,QAAQ,CAACa,YAArBS;AADF,eAEO;AACLA,UAAAA,SAAS,GAAG,CAAChB,UAAbgB;;;AAGFf,QAAAA,aAAa,CAACD,UAAU,GAAGgB,SAAd,CAAbf;;;GAZNW,eAgBEA,yBAAAA,cAAAA,CAACM,gBAADN,MAAAA,CAhBFA,CA1BJA,eA6CEA,yBAAAA,cAAAA,MAAAA;AAAK1C,IAAAA,SAAS,EAAE2C,YAAAA,CAAMrC,SAAJ,kBAAFqC;AAAiC7C,IAAAA,GAAG,EAAE2B;GAAtDiB,eACEA,yBAAAA,cAAAA,MAAAA;AACE1C,IAAAA,SAAS,EAAE2C,YAAAA,CAAMrC,SAAJ,mBAAFqC;AACX7C,IAAAA,GAAG,EAAE6B;AACL1B,IAAAA,KAAK,EACHiC,aAAa,GACT;AACEe,MAAAA,SAAS,EACP1C,SAAS,KAAK,YAAdA,mBACkBqB,kBADlBrB,mBAEkBuB;AAJtB,KADS,GAOT;GAXRY,EAcG3C,IAAI,CAACmD,GAALnD,CAAS,UAACoD,CAAD,EAAIC,KAAJ;wBACRV,yBAAAA,cAAAA,CAACW,eAADX;AACEF,MAAAA,GAAG,EAAEY;OACDD;AACJrD,MAAAA,GAAG,EAAE,YAAA,CAACwD,IAAD;AACHtB,QAAAA,QAAQ,CAACuB,OAATvB,MAAoBmB,CAAC,CAAC/B,KAAtBY,IAAiCsB,IAAjCtB;;AAEFhB,MAAAA,IAAI,EAAEA;AACNwC,MAAAA,OAAO,EAAExB,QAAQ,CAACuB,OAATvB,MAAoBmB,CAAC,CAAC/B,KAAtBY;AACToB,MAAAA,KAAK,EAAEA;AACPK,MAAAA,MAAM,EAAEpC,WAAW,KAAK8B,CAAC,CAAC/B;AAC1Bd,MAAAA,SAAS,EAAEA;AACXK,MAAAA,SAAS,EAAEA;AACXN,MAAAA,UAAU,EAAEiC;AACZ9B,MAAAA,QAAQ,EAAEA;AACVE,MAAAA,QAAQ,EAAEA;AACVE,MAAAA,WAAW,EAAEA;AACbC,MAAAA,UAAU,EAAEA;AACZC,MAAAA,MAAM,EAAEA;AACRC,MAAAA,SAAS,EAAEA;AACXR,MAAAA,SAAS,EAAEA;MAnBbmC;AADD,GAAA3C,CAdH2C,EAqCG1B,IAAI,KAAK,MAATA,iBACC0B,yBAAAA,cAAAA,CAACgB,aAADhB;AACEiB,IAAAA,SAAS,EAAEpD,SAAS,KAAK,YAAdA,GAA6BqB,UAA7BrB,GAA0CuB;AACrDxB,IAAAA,SAAS,EAAEA;AACXC,IAAAA,SAAS,EAAEA;AACXqD,IAAAA,UAAU,EAAEpC;AACZgC,IAAAA,OAAO,EAAE,MAAAxB,QAAQ,CAACuB,OAAT,UAAA,iBAAA,SAAA,MAAmBlC;GAL9BqB,CAtCJA,CADFA,CA7CFA,EA8FGR,aAAa,IAAI3B,SAAS,KAAK,YAA/B2B,iBACCQ,yBAAAA,cAAAA,MAAAA;AACE1C,IAAAA,SAAS,EAAKM,SAAL;AACTsC,IAAAA,OAAO,EAAE,gBAAA;UACHlB,SAAS,IAAIF,UAAU;YACnBqB,SAAS,GAAGnB,SAAS,CAACU,WAAVV,GAAwBF,QAAQ,CAACY,WAAjCV,GAA+CE;YAC7DkB,SAAS,GAAG;;YACZD,SAAS,IAAIrB,QAAQ,CAACY,aAAa;AACrCU,UAAAA,SAAS,GAAGtB,QAAQ,CAACY,WAArBU;AADF,eAEO;AACLA,UAAAA,SAAS,GAAGD,SAAZC;;;AAGFjB,QAAAA,aAAa,CAACD,UAAU,GAAGkB,SAAd,CAAbjB;;;GAZNa,eAgBEA,yBAAAA,cAAAA,CAACmB,mBAADnB,MAAAA,CAhBFA,CA/FJA,EAkHGR,aAAa,IAAI3B,SAAS,KAAK,UAA/B2B,iBACCQ,yBAAAA,cAAAA,MAAAA;AACE1C,IAAAA,SAAS,EAAKM,SAAL;AACTsC,IAAAA,OAAO,EAAE,gBAAA;UACHlB,SAAS,IAAIF,UAAU;YACnBqB,SAAS,GAAGnB,SAAS,CAACW,YAAVX,GAAyBF,QAAQ,CAACa,YAAlCX,GAAiDI;YAC/DgB,SAAS,GAAG;;YACZD,SAAS,IAAIrB,QAAQ,CAACa,cAAc;AACtCS,UAAAA,SAAS,GAAGtB,QAAQ,CAACa,YAArBS;AADF,eAEO;AACLA,UAAAA,SAAS,GAAGD,SAAZC;;;AAGFf,QAAAA,aAAa,CAACD,UAAU,GAAGgB,SAAd,CAAbf;;;GAZNW,eAgBEA,yBAAAA,cAAAA,CAACoB,kBAADpB,MAAAA,CAhBFA,CAnHJA,EAsIGlC,QAAQ,iBACPkC,yBAAAA,cAAAA,MAAAA;AAAK1C,IAAAA,SAAS,EAAKM,SAAL;AAA2BsC,IAAAA,OAAO,EAAEnC;GAAlDiC,eACEA,yBAAAA,cAAAA,CAACqB,kBAADrB,MAAAA,CADFA,CAvIJA,EA2IGzB,KA3IHyB;AA9D2B,CAAV7C;;AAiQvB,IAAImE,WAAJ,EAAa;AACXpE,EAAAA,OAAO,CAACqE,WAARrE,GAAsB,SAAtBA;;;"}
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/index.js CHANGED
@@ -15,14 +15,17 @@ Object.defineProperty(exports, '__esModule', {
15
15
 
16
16
  require('./styles/index.scss.js');
17
17
 
18
- var Tabs = require('./Tabs.js');
18
+ var Tabs$1 = require('./Tabs.js');
19
19
 
20
20
  var TabPane = require('./TabPane.js');
21
21
 
22
22
  var TabList = require('./TabList.js');
23
23
 
24
- exports.Tabs = Tabs.Tabs;
25
- exports["default"] = Tabs.Tabs;
24
+ var Tabs = Object.assign(Tabs$1.Tabs, {
25
+ Pane: TabPane.TabPane
26
+ });
27
+ exports.Tabs = Tabs$1.Tabs;
26
28
  exports.TabPane = TabPane.TabPane;
27
29
  exports.TabList = TabList.TabList;
30
+ exports["default"] = Tabs;
28
31
  //# sourceMappingURL=index.js.map
package/lib/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Tabs","Object","assign","_Tabs","Pane"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAKMA,IAAI,GAAGC,MAAM,CAACC,MAAPD,CAAcE,WAAdF,EAAqB;AAAEG,EAAAA,IAAI,EAAJA;AAAF,CAArBH;;;;"}
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--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-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: 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--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: 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--vertical .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--vertical .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--vertical .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--vertical .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--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\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: 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--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 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--vertical .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--vertical .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--vertical .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--vertical .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--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: 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--vertical .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--vertical .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--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: 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__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";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/TabList.js CHANGED
@@ -15,6 +15,7 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
15
15
  import { TabInk } from './TabInk.js';
16
16
  import { LeftOutlined, UpOutlined, RightOutlined, DownOutlined, PlusOutlined } from '@hi-ui/icons';
17
17
  import { isUndef } from '@hi-ui/type-assertion';
18
+ import { IconButton } from '@hi-ui/icon-button';
18
19
  var _role = 'tabs';
19
20
 
20
21
  var _prefix = getPrefixCls(_role);
@@ -92,8 +93,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
92
93
  style: style,
93
94
  className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
94
95
  ref: ref
95
- }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
96
- className: prefixCls + "__add-btn",
96
+ }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
97
+ className: prefixCls + "__left-btn",
98
+ effect: true,
99
+ icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
97
100
  onClick: function onClick() {
98
101
  if (scrollRef && innerRef) {
99
102
  var canScroll = -translateX - innerRef.clientWidth;
@@ -108,8 +111,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
108
111
  setTranslateX(translateX + moveWidth);
109
112
  }
110
113
  }
111
- }, /*#__PURE__*/React.createElement(LeftOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
112
- className: prefixCls + "__add-btn",
114
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
115
+ className: prefixCls + "__up-btn",
116
+ effect: true,
117
+ icon: /*#__PURE__*/React.createElement(UpOutlined, null),
113
118
  onClick: function onClick() {
114
119
  if (scrollRef && innerRef) {
115
120
  var canScroll = -translateY - innerRef.clientHeight;
@@ -124,7 +129,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
124
129
  setTranslateY(translateY + moveWidth);
125
130
  }
126
131
  }
127
- }, /*#__PURE__*/React.createElement(UpOutlined, null)), /*#__PURE__*/React.createElement("div", {
132
+ }), /*#__PURE__*/React.createElement("div", {
128
133
  className: cx(prefixCls + "__list--inner"),
129
134
  ref: setInnerRef
130
135
  }, /*#__PURE__*/React.createElement("div", {
@@ -161,8 +166,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
161
166
  direction: direction,
162
167
  tabListRef: innerRef,
163
168
  itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
164
- }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement("div", {
165
- className: prefixCls + "__add-btn",
169
+ }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
170
+ effect: true,
171
+ className: prefixCls + "__right-btn",
172
+ icon: /*#__PURE__*/React.createElement(RightOutlined, null),
166
173
  onClick: function onClick() {
167
174
  if (scrollRef && innerRef) {
168
175
  var canScroll = scrollRef.clientWidth - innerRef.clientWidth + translateX;
@@ -177,8 +184,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
177
184
  setTranslateX(translateX - moveWidth);
178
185
  }
179
186
  }
180
- }, /*#__PURE__*/React.createElement(RightOutlined, null)), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement("div", {
181
- className: prefixCls + "__add-btn",
187
+ }), showScrollBtn && direction === 'vertical' && /*#__PURE__*/React.createElement(IconButton, {
188
+ effect: true,
189
+ className: prefixCls + "__down-btn",
190
+ icon: /*#__PURE__*/React.createElement(DownOutlined, null),
182
191
  onClick: function onClick() {
183
192
  if (scrollRef && innerRef) {
184
193
  var canScroll = scrollRef.clientHeight - innerRef.clientHeight + translateY;
@@ -193,10 +202,11 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
193
202
  setTranslateY(translateY - moveWidth);
194
203
  }
195
204
  }
196
- }, /*#__PURE__*/React.createElement(DownOutlined, null)), editable && /*#__PURE__*/React.createElement("div", {
205
+ }), editable ? /*#__PURE__*/React.createElement(IconButton, {
206
+ icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
197
207
  className: prefixCls + "__add-btn",
198
208
  onClick: onAdd
199
- }, /*#__PURE__*/React.createElement(PlusOutlined, null)), extra);
209
+ }) : null, extra);
200
210
  });
201
211
 
202
212
  if (__DEV__) {
package/lib/esm/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","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","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/esm/index.js CHANGED
@@ -8,7 +8,13 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import './styles/index.scss.js';
11
- export { Tabs, Tabs as default } from './Tabs.js';
11
+ import { Tabs as Tabs$1 } from './Tabs.js';
12
+ export { Tabs } from './Tabs.js';
13
+ import { TabPane } from './TabPane.js';
12
14
  export { TabPane } from './TabPane.js';
13
15
  export { TabList } from './TabList.js';
16
+ var Tabs = Object.assign(Tabs$1, {
17
+ Pane: TabPane
18
+ });
19
+ export default Tabs;
14
20
  //# sourceMappingURL=index.js.map
package/lib/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Tabs","Object","assign","_Tabs","Pane"],"mappings":";;;;;;;;;;;;;;;IAKMA,IAAI,GAAGC,MAAM,CAACC,MAAPD,CAAcE,MAAdF,EAAqB;AAAEG,EAAAA,IAAI,EAAJA;AAAF,CAArBH;"}
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- 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--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-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";
10
+ 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--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: 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--vertical .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--vertical .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--vertical .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--vertical .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--vertical .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\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: 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--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 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--vertical .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--vertical .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--vertical .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--vertical .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--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: 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--vertical .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--vertical .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--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: 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__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";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
package/lib/types/index.d.ts CHANGED
@@ -1,5 +1,9 @@
1
+ /// <reference types="react" />
1
2
  import './styles/index.scss';
3
+ declare const Tabs: import("react").ForwardRefExoticComponent<import("./Tabs").TabsProps & import("react").RefAttributes<HTMLDivElement | null>> & {
4
+ Pane: import("react").FC<import("./TabPane").TabPaneProps>;
5
+ };
6
+ export default Tabs;
2
7
  export * from './Tabs';
3
8
  export * from './TabPane';
4
9
  export * from './TabList';
5
- export { Tabs as default } from './Tabs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.0.0-beta.1",
3
+ "version": "4.0.0-beta.4",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,20 +44,21 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^4.0.0-beta.0",
47
- "@hi-ui/core-css": "^4.0.0-beta.0",
47
+ "@hi-ui/core-css": "^4.0.0-beta.2",
48
48
  "@hi-ui/env": "^4.0.0-beta.0",
49
- "@hi-ui/icons": "^4.0.0-beta.0",
50
- "@hi-ui/type-assertion": "^4.0.0-beta.0",
51
- "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.0"
49
+ "@hi-ui/icon-button": "^4.0.0-beta.2",
50
+ "@hi-ui/icons": "^4.0.0-beta.2",
51
+ "@hi-ui/type-assertion": "^4.0.0-beta.1",
52
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.1"
52
53
  },
53
54
  "peerDependencies": {
54
55
  "react": ">=16.8.6",
55
56
  "react-dom": ">=16.8.6"
56
57
  },
57
58
  "devDependencies": {
58
- "@hi-ui/hi-build": "^4.0.0-beta.0",
59
+ "@hi-ui/hi-build": "^4.0.0-beta.1",
59
60
  "react": "^17.0.1",
60
61
  "react-dom": "^17.0.1"
61
62
  },
62
- "gitHead": "8c9da3cb4d48eac23fa12dd86feeb491cfdab355"
63
+ "gitHead": "34009f66090d5e0003a9453c9f0f743e74438815"
63
64
  }