@hi-ui/tabs 4.0.0-beta.10 → 4.0.0-beta.13

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 (5) hide show
  1. package/lib/cjs/TabList.js +6 -5
  2. package/lib/cjs/styles/index.scss.js +1 -1
  3. package/lib/esm/TabList.js +7 -6
  4. package/lib/esm/styles/index.scss.js +1 -1
  5. package/package.json +5 -5
package/lib/cjs/TabList.js CHANGED
@@ -100,11 +100,12 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
100
100
  setTranslateY = _useState4[1];
101
101
 
102
102
  var itemsRef = React.useRef({});
103
- var showScrollBtn = React.useMemo(function () {
104
- if (scrollRef && innerRef) {
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);
106
- }
107
- }, [scrollRef, innerRef, direction]);
103
+ var showScrollBtn = false;
104
+
105
+ if (scrollRef && innerRef) {
106
+ showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
107
+ }
108
+
108
109
  var onClickTab = React.useCallback(function (key, event) {
109
110
  if (onTabClick) {
110
111
  onTabClick(key, event);
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.hi-v4-icon-button {\n font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {\n margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n cursor: pointer;\n color: var(--hi-v4-color-gray-500, #929aa6);\n margin-left: var(--hi-v4-spacing-2, 4px);\n -webkit-transition: color 0.3s;\n transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n position: relative;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: var(--hi-v4-color-gray-500, #929aa6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc {\n padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n background: var(--hi-v4-color-gray-50, #f5f7fa);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--prev {\n border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--next {\n border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--disabled {\n color: var(--hi-v4-color-gray-500, #929aa6) !important;\n cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n width: 100%;\n overflow: hidden;\n padding-top: var(--hi-v4-spacing-8, 16px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
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-md, 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-md, 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-md, 4px) var(--hi-v4-border-radius-md, 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-md, 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-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:focus {\n outline: 0; }\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
@@ -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
- import React, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
10
+ import React, { forwardRef, useState, useRef, useCallback } from 'react';
11
11
  import { __DEV__ } from '@hi-ui/env';
12
12
  import { TabItem } from './TabItem.js';
13
13
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -75,11 +75,12 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
75
75
  setTranslateY = _useState4[1];
76
76
 
77
77
  var itemsRef = useRef({});
78
- var showScrollBtn = useMemo(function () {
79
- if (scrollRef && innerRef) {
80
- 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);
81
- }
82
- }, [scrollRef, innerRef, direction]);
78
+ var showScrollBtn = false;
79
+
80
+ if (scrollRef && innerRef) {
81
+ showScrollBtn = direction === 'horizontal' ? scrollRef.clientWidth > innerRef.clientWidth : scrollRef.clientHeight > innerRef.clientHeight;
82
+ }
83
+
83
84
  var onClickTab = useCallback(function (key, event) {
84
85
  if (onTabClick) {
85
86
  onTabClick(key, event);
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.hi-v4-icon-button {\n font-size: var(--hi-v4-text-size-normal, 0.875rem); }\n.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {\n margin: var(--hi-v4-spacing-1, 2px); }\n.hi-v4-tabs__close-btn {\n cursor: pointer;\n color: var(--hi-v4-color-gray-500, #929aa6);\n margin-left: var(--hi-v4-spacing-2, 4px);\n -webkit-transition: color 0.3s;\n transition: color 0.3s; }\n.hi-v4-tabs__close-btn:hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--card .hi-v4-tabs__content {\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list {\n position: relative;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n color: var(--hi-v4-color-gray-500, #929aa6);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: hidden;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px) var(--hi-v4-border-radius-normal, 4px) 0 0;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc {\n padding: 0 var(--hi-v4-spacing-10, 20px); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item {\n background: var(--hi-v4-color-gray-50, #f5f7fa);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: var(--hi-v4-spacing-10, 20px) var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: var(--hi-v4-border-radius-normal, 4px) 0 0 var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--prev {\n border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--next {\n border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__item--disabled {\n color: var(--hi-v4-color-gray-500, #929aa6) !important;\n cursor: not-allowed; }\n.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis; }\n.hi-v4-tabs__content {\n width: 100%;\n overflow: hidden;\n padding-top: var(--hi-v4-spacing-8, 16px);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n";
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-md, 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-md, 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-md, 4px) var(--hi-v4-border-radius-md, 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-md, 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-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__list--inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n position: relative;\n overflow: hidden; }\n.hi-v4-tabs__list--scroll {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {\n padding-left: 16px;\n padding-top: 0; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {\n width: auto;\n display: block;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {\n border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-left: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {\n border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n border-right: none; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {\n position: absolute;\n left: 0;\n bottom: auto;\n width: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item {\n margin: 0;\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--card .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item {\n margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;\n padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--button .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-sm, 0.75rem);\n line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin: 0 0 var(--hi-v4-spacing-6, 12px) 0;\n padding: var(--hi-v4-spacing-8, 16px) var(--hi-v4-spacing-10, 20px);\n border-radius: var(--hi-v4-border-radius-md, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s;\n background: var(--hi-v4-color-gray-50, #f5f7fa); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item:not(.hi-v4-tabs__item--active):hover {\n background-color: var(--hi-v4-color-gray-200, #ebedf0);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-tabs__ink {\n position: absolute;\n bottom: 0;\n right: auto;\n top: auto;\n height: 2px;\n background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n -webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item {\n line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);\n margin: 0;\n cursor: pointer;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); }\n.hi-v4-tabs__item:focus {\n outline: 0; }\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.0.0-beta.10",
3
+ "version": "4.0.0-beta.13",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,10 +44,10 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^4.0.0-beta.0",
47
- "@hi-ui/core-css": "^4.0.0-beta.3",
47
+ "@hi-ui/core-css": "^4.0.0-beta.4",
48
48
  "@hi-ui/env": "^4.0.0-beta.0",
49
- "@hi-ui/icon-button": "^4.0.0-beta.5",
50
- "@hi-ui/icons": "^4.0.0-beta.7",
49
+ "@hi-ui/icon-button": "^4.0.0-beta.7",
50
+ "@hi-ui/icons": "^4.0.0-beta.9",
51
51
  "@hi-ui/type-assertion": "^4.0.0-beta.3",
52
52
  "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.3"
53
53
  },
@@ -60,5 +60,5 @@
60
60
  "react": "^17.0.1",
61
61
  "react-dom": "^17.0.1"
62
62
  },
63
- "gitHead": "81afa0b917a45440e9afd759b24e4c9a7fa9fec0"
63
+ "gitHead": "a7ee16f069a3d2a3396d497e932f834e2701882e"
64
64
  }