@semcore/tab-panel 4.43.0-prerelease.0 → 4.43.0-prerelease.1

package/lib/cjs/TabPanel.js

@@ -1,6 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,41 +9,56 @@ exports.wrapTabPanel = exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _core = require("@semcore/core");
-var _baseComponents = require("@semcore/base-components");
-var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
-var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
-var _typography = require("@semcore/typography");
+var _index = require("@semcore/utils/lib/core/index");
+var _core = _interopRequireWildcard(require("@semcore/core"));
 var _react = _interopRequireDefault(require("react"));
+var _flexBox = require("@semcore/flex-box");
+var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
+var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
+var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___STabPanel_l0sw7_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_l0sw7_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_l0sw7_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_l0sw7_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_l0sw7_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_l0sw7_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_l0sw7_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_{cursor:default;pointer-events:none}.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_ .___SAddon_l0sw7_gg_,.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_ .___SText_l0sw7_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{color:var(--intergalactic-text-link, rgb(36, 93, 229));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_::after{border-bottom:none}.___SText_l0sw7_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_l0sw7_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"l0sw7_gg_"),
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1lfx6_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1lfx6_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_1lfx6_gg_ .___SText_1lfx6_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1lfx6_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1lfx6_gg_:active,.___STabPanelItem_1lfx6_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1lfx6_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_1lfx6_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SAddon_1lfx6_gg_,.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SText_1lfx6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_1lfx6_gg_.__keyboardFocused_1lfx6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{color:var(--intergalactic-text-link, rgb(36, 93, 229));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_::after{border-bottom:none}.___SText_1lfx6_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1lfx6_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1lfx6_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1lfx6_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_l0sw7_gg_",
-  "__SAddon": "___SAddon_l0sw7_gg_",
-  "__STabPanel": "___STabPanel_l0sw7_gg_",
-  "__STabPanelItem": "___STabPanelItem_l0sw7_gg_",
-  "_disabled": "__disabled_l0sw7_gg_",
-  "_selected": "__selected_l0sw7_gg_"
+  "__STabPanelItem": "___STabPanelItem_1lfx6_gg_",
+  "_keyboardFocused": "__keyboardFocused_1lfx6_gg_",
+  "__SText": "___SText_1lfx6_gg_",
+  "__SAddon": "___SAddon_1lfx6_gg_",
+  "__STabPanel": "___STabPanel_1lfx6_gg_",
+  "_disabled": "__disabled_1lfx6_gg_",
+  "_selected": "__selected_1lfx6_gg_"
 });
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+};
 var TabPanelRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(TabPanelRoot, _Component);
+  var _super = (0, _createSuper2["default"])(TabPanelRoot);
   function TabPanelRoot() {
     var _this;
     (0, _classCallCheck2["default"])(this, TabPanelRoot);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = (0, _callSuper2["default"])(this, TabPanelRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "buttonRefsList", []);
-    (0, _defineProperty2["default"])(_this, "handleClick", function (value) {
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (value) {
       return function (event) {
         _this.handlers.value(value, event);
       };
     });
-    (0, _defineProperty2["default"])(_this, "handleKeyDown", function (value) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (value) {
       return function (event) {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
@@ -52,8 +68,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _inherits2["default"])(TabPanelRoot, _Component);
-  return (0, _createClass2["default"])(TabPanelRoot, [{
+  (0, _createClass2["default"])(TabPanelRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -66,21 +81,11 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
       var value = this.asProps.value;
       var isSelected = value === props.value;
       return {
-        'selected': isSelected,
-        'onClick': this.handleClick(props.value),
-        'onKeyDown': this.handleKeyDown(props.value),
-        'tabIndex': isSelected ? 0 : -1,
-        'aria-selected': isSelected,
-        'buttonRefsList': this.buttonRefsList,
-        index: index
-      };
-    }
-  }, {
-    key: "getItemTextProps",
-    value: function getItemTextProps(_, index) {
-      return {
-        buttonRefsList: this.buttonRefsList,
-        index: index
+        selected: isSelected,
+        onClick: this.handleClick(props.value),
+        onKeyDown: this.handleKeyDown(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        'aria-selected': isSelected
       };
     }
   }, {
@@ -88,13 +93,14 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _ref = this.asProps,
         _ref5;
-      var STabPanel = _baseComponents.Box;
+      var STabPanel = _flexBox.Box;
       var styles = this.asProps.styles;
       return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanel, _ref5.cn("STabPanel", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "role": 'tablist'
       }, _ref))));
     }
   }]);
+  return TabPanelRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(TabPanelRoot, "displayName", 'TabPanel');
 (0, _defineProperty2["default"])(TabPanelRoot, "style", style);
@@ -102,75 +108,54 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
   defaultValue: null,
   behavior: 'manual'
 });
-(0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])({
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-})]);
-;
+(0, _defineProperty2["default"])(TabPanelRoot, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;
-  var STabPanelItem = _baseComponents.Box;
+  var STabPanelItem = _flexBox.Box;
   var Children = props.Children,
     styles = props.styles,
     addonLeft = props.addonLeft,
-    addonRight = props.addonRight,
-    buttonRefsList = props.buttonRefsList,
-    index = props.index;
-  var buttonRef = _react["default"].useRef();
-  buttonRefsList[index] = buttonRef;
+    addonRight = props.addonRight;
   return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "type": 'button',
     "tag": 'button',
-    "tabIndex": 0,
-    "role": 'tab',
-    "ref": buttonRef
+    "role": 'tab'
   }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, (0, _addonTextChildren["default"])(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
     tag: addonRight
   }) : null);
 }
+TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  var SText = _typography.Text;
-  var styles = props.styles,
-    _props$ellipsis = props.ellipsis,
-    ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
-    buttonRefsList = props.buttonRefsList,
-    index = props.index;
+  var SText = _flexBox.Box;
+  var styles = props.styles;
   return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "size": 200,
-    "ellipsis": ellipsis,
-    "medium": true,
-    "hint:triggerRef": buttonRefsList[index]
+    "tag": 'span'
   }, _ref3))));
 }
 function Addon(props) {
   var _ref4 = arguments[0],
     _ref8;
-  var SAddon = _baseComponents.Box;
+  var SAddon = _flexBox.Box;
   var styles = props.styles;
   return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": 'span'
   }, _ref4))));
 }
-var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
+var TabPanel = (0, _core["default"])(TabPanelRoot, {
   Item: [TabPanelItem, {
     Text: Text,
     Addon: Addon
   }]
 });
-var wrapTabPanel = exports.wrapTabPanel = function wrapTabPanel(wrapper) {
+var wrapTabPanel = function wrapTabPanel(wrapper) {
   return wrapper;
 };
-var _default = exports["default"] = TabPanel;
+exports.wrapTabPanel = wrapTabPanel;
+var _default = TabPanel;
+exports["default"] = _default;
 //# sourceMappingURL=TabPanel.js.map

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","TabPanelRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","event","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","props","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","behavior","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","_props$ellipsis","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","exports","wrapper","_default"],"sources":["../../src/TabPanel.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/tab-panel.shadow.css';\nimport type { NSTabPanel } from './TabPanel.type';\n\nclass TabPanelRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Component>,\n  typeof TabPanelRoot.enhance,\n  NSTabPanel.Handlers\n> {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n\n  static enhance = [\n    a11yEnhance({\n      onNeighborChange: (neighborElement, props) => {\n        if (neighborElement) {\n          neighborElement.focus();\n          if (props.behavior === 'auto') {\n            neighborElement.click();\n          }\n        }\n      },\n      childSelector: ['role', 'tab'],\n    }),\n  ] as const;\n\n  buttonRefsList: Array<React.MutableRefObject<HTMLButtonElement | undefined>> = [];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value: NSTabPanel.Props['value']) => (event: React.MouseEvent<HTMLButtonElement>) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value: NSTabPanel.Props['value']) => (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props: NSTabPanel.Item.Props, index: number) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      'selected': isSelected,\n      'onClick': this.handleClick(props.value),\n      'onKeyDown': this.handleKeyDown(props.value),\n      'tabIndex': isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n      'buttonRefsList': this.buttonRefsList,\n      index,\n    };\n  }\n\n  getItemTextProps(_: NSTabPanel.Item.Text.Props, index: number) {\n    return {\n      buttonRefsList: this.buttonRefsList,\n      index,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n};\n\nfunction TabPanelItem(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Component,\n    typeof TabPanelRoot,\n    'Item'\n  >,\n) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight, buttonRefsList, index } = props;\n  const buttonRef = React.useRef<HTMLButtonElement>();\n\n  buttonRefsList[index] = buttonRef;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nfunction Text(\n  props: Intergalactic.InternalTypings.InferChildComponentProps<\n    NSTabPanel.Item.Text.Component,\n    typeof TabPanelRoot,\n    'ItemText'\n  >,\n) {\n  const SText = Root;\n  const { styles, ellipsis = true, buttonRefsList, index } = props;\n  return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\n}\n\nfunction Addon(\n  props: Intergalactic.InternalTypings.InferComponentProps<NSTabPanel.Item.Addon.Component>,\n) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n}) as unknown as NSTabPanel.Component;\n\nexport const wrapTabPanel = <PropsExtending extends {}>(wrapper: (\n  props: Intergalactic.InternalTypings.UntypeRefAndTag<\n    Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>\n  > &\n  PropsExtending,\n) => React.ReactNode) => wrapper as NSTabPanel.WrapperComponent<PropsExtending>;\n\nexport default TabPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabPanel.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","_keyboardFocusEnhance","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","event","handlers","key","preventDefault","_createClass2","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n  onNeighborChange: (neighborElement, props) => {\n    if (neighborElement) {\n      neighborElement.focus();\n      if (props.behavior === 'auto') {\n        neighborElement.click();\n      }\n    }\n  },\n  childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n  static displayName = 'TabPanel';\n  static style = style;\n  static defaultProps = {\n    defaultValue: null,\n    behavior: 'manual',\n  };\n  static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleClick = (value) => (event) => {\n    this.handlers.value(value, event);\n  };\n\n  handleKeyDown = (value) => (event) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handlers.value(value, event);\n    }\n  };\n\n  getItemProps(props, index) {\n    const { value } = this.asProps;\n    const isSelected = value === props.value;\n    return {\n      selected: isSelected,\n      onClick: this.handleClick(props.value),\n      onKeyDown: this.handleKeyDown(props.value),\n      tabIndex: isSelected ? 0 : -1,\n      'aria-selected': isSelected,\n    };\n  }\n\n  render() {\n    const STabPanel = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n  }\n}\n\nfunction TabPanelItem(props) {\n  const STabPanelItem = Root;\n  const { Children, styles, addonLeft, addonRight } = props;\n\n  return sstyled(styles)(\n    <STabPanelItem render={Box} type='button' tag='button' role='tab'>\n      {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n      {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n      {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n    </STabPanelItem>,\n  );\n}\n\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n  Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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"}

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n    UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Makes a tab selected. This property is determined automatically depending on the value. */\n    selected?: boolean;\n    /** Disabled state */\n    disabled?: boolean;\n    /** Tab value */\n    value?: TabPanelValue;\n    /** Left addon tag  */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n    PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n      PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":""}

package/lib/cjs/index.js

@@ -1,34 +1,25 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  wrapTabPanel: true
-};
+var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _TabPanel["default"];
   }
 });
-Object.defineProperty(exports, "wrapTabPanel", {
-  enumerable: true,
-  get: function get() {
-    return _TabPanel.wrapTabPanel;
-  }
-});
 var _TabPanel = _interopRequireWildcard(require("./TabPanel"));
-var _TabPanel2 = require("./TabPanel.type");
-Object.keys(_TabPanel2).forEach(function (key) {
+Object.keys(_TabPanel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _TabPanel2[key]) return;
+  if (key in exports && exports[key] === _TabPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _TabPanel2[key];
+      return _TabPanel[key];
     }
   });
 });

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","_TabPanel2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapTabPanel } from './TabPanel';\nexport * from './TabPanel.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,UAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,UAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,UAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_TabPanel","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TabPanel';\nexport * from './TabPanel';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,SAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,SAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,SAAA,CAAAM,GAAA;IAAA;EAAA;AAAA"}

package/lib/cjs/style/tab-panel.shadow.css

@@ -35,18 +35,27 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
+  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
 
+  & SText {
+    font-size: var(--intergalactic-fs-200, 14px);
+    line-height: var(--intergalactic-lh-200, 142%);
+    font-weight: var(--intergalactic-medium, 500);
+  }
+
   &::-moz-focus-inner {
     border: none;
     padding: 0;
   }
 
   &:active,
-  &:hover {
+  &:hover,
+  &:focus {
+    outline: 0;
     text-decoration: none;
   }
 
@@ -75,6 +84,10 @@ STabPanelItem[disabled] {
   }
 }
 
+STabPanelItem[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
+}
+
 STabPanelItem[selected] {
   color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
   border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
@@ -90,7 +103,11 @@ STabPanelItem[selected] {
 }
 
 SText {
+  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 SAddon {
@@ -110,4 +127,4 @@ SAddon:not(:only-child):last-child {
 SAddon:only-child {
   margin-right: var(--intergalactic-spacing-2x, 8px);
   margin-left: var(--intergalactic-spacing-2x, 8px);
-}
+}

package/lib/es6/TabPanel.js

@@ -1,46 +1,60 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { sstyled as _sstyled } from "@semcore/core";
+import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-import { Box } from '@semcore/base-components';
-import { createComponent, Component, sstyled, Root } from '@semcore/core';
-import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
-import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
-import { Text as UikitText } from '@semcore/typography';
 import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
+import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
+import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 /*!__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STabPanel_l0sw7_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_l0sw7_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanel_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_l0sw7_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_l0sw7_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_l0sw7_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_l0sw7_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_l0sw7_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_{cursor:default;pointer-events:none}.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_ .___SAddon_l0sw7_gg_,.___STabPanelItem_l0sw7_gg_.__disabled_l0sw7_gg_ .___SText_l0sw7_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{color:var(--intergalactic-text-link, rgb(36, 93, 229));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0%)){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___STabPanelItem_l0sw7_gg_.__selected_l0sw7_gg_::after{border-bottom:none}.___SText_l0sw7_gg_{margin:auto var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_l0sw7_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_l0sw7_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"l0sw7_gg_"),
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1lfx6_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1lfx6_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanel_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STabPanelItem_1lfx6_gg_ .___SText_1lfx6_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1lfx6_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1lfx6_gg_:active,.___STabPanelItem_1lfx6_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1lfx6_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}}.___STabPanelItem_1lfx6_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_::after{border-bottom:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SAddon_1lfx6_gg_,.___STabPanelItem_1lfx6_gg_.__disabled_1lfx6_gg_ .___SText_1lfx6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___STabPanelItem_1lfx6_gg_.__keyboardFocused_1lfx6_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{color:var(--intergalactic-text-link, rgb(36, 93, 229));border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));flex-shrink:0}@supports (color:color(display-p3 0 0 0)){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}@media (hover:hover){.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___STabPanelItem_1lfx6_gg_.__selected_1lfx6_gg_::after{border-bottom:none}.___SText_1lfx6_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1lfx6_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1lfx6_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lfx6_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}", /*__inner_css_end__*/"1lfx6_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_l0sw7_gg_",
-  "__SAddon": "___SAddon_l0sw7_gg_",
-  "__STabPanel": "___STabPanel_l0sw7_gg_",
-  "__STabPanelItem": "___STabPanelItem_l0sw7_gg_",
-  "_disabled": "__disabled_l0sw7_gg_",
-  "_selected": "__selected_l0sw7_gg_"
+  "__STabPanelItem": "___STabPanelItem_1lfx6_gg_",
+  "_keyboardFocused": "__keyboardFocused_1lfx6_gg_",
+  "__SText": "___SText_1lfx6_gg_",
+  "__SAddon": "___SAddon_1lfx6_gg_",
+  "__STabPanel": "___STabPanel_1lfx6_gg_",
+  "_disabled": "__disabled_1lfx6_gg_",
+  "_selected": "__selected_1lfx6_gg_"
 });
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === 'auto') {
+        neighborElement.click();
+      }
+    }
+  },
+  childSelector: ['role', 'tab']
+};
 var TabPanelRoot = /*#__PURE__*/function (_Component) {
+  _inherits(TabPanelRoot, _Component);
+  var _super = _createSuper(TabPanelRoot);
   function TabPanelRoot() {
     var _this;
     _classCallCheck(this, TabPanelRoot);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, TabPanelRoot, [].concat(args));
-    _defineProperty(_this, "buttonRefsList", []);
-    _defineProperty(_this, "handleClick", function (value) {
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (value) {
       return function (event) {
         _this.handlers.value(value, event);
       };
     });
-    _defineProperty(_this, "handleKeyDown", function (value) {
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (value) {
       return function (event) {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
@@ -50,8 +64,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _inherits(TabPanelRoot, _Component);
-  return _createClass(TabPanelRoot, [{
+  _createClass(TabPanelRoot, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -64,21 +77,11 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
       var value = this.asProps.value;
       var isSelected = value === props.value;
       return {
-        'selected': isSelected,
-        'onClick': this.handleClick(props.value),
-        'onKeyDown': this.handleKeyDown(props.value),
-        'tabIndex': isSelected ? 0 : -1,
-        'aria-selected': isSelected,
-        'buttonRefsList': this.buttonRefsList,
-        index: index
-      };
-    }
-  }, {
-    key: "getItemTextProps",
-    value: function getItemTextProps(_, index) {
-      return {
-        buttonRefsList: this.buttonRefsList,
-        index: index
+        selected: isSelected,
+        onClick: this.handleClick(props.value),
+        onKeyDown: this.handleKeyDown(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        'aria-selected': isSelected
       };
     }
   }, {
@@ -93,6 +96,7 @@ var TabPanelRoot = /*#__PURE__*/function (_Component) {
       }, _ref))));
     }
   }]);
+  return TabPanelRoot;
 }(Component);
 _defineProperty(TabPanelRoot, "displayName", 'TabPanel');
 _defineProperty(TabPanelRoot, "style", style);
@@ -100,18 +104,7 @@ _defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: 'manual'
 });
-_defineProperty(TabPanelRoot, "enhance", [a11yEnhance({
-  onNeighborChange: function onNeighborChange(neighborElement, props) {
-    if (neighborElement) {
-      neighborElement.focus();
-      if (props.behavior === 'auto') {
-        neighborElement.click();
-      }
-    }
-  },
-  childSelector: ['role', 'tab']
-})]);
-;
+_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
 function TabPanelItem(props) {
   var _ref2 = arguments[0],
     _ref6;
@@ -119,37 +112,25 @@ function TabPanelItem(props) {
   var Children = props.Children,
     styles = props.styles,
     addonLeft = props.addonLeft,
-    addonRight = props.addonRight,
-    buttonRefsList = props.buttonRefsList,
-    index = props.index;
-  var buttonRef = React.useRef();
-  buttonRefsList[index] = buttonRef;
+    addonRight = props.addonRight;
   return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
     "type": 'button',
     "tag": 'button',
-    "tabIndex": 0,
-    "role": 'tab',
-    "ref": buttonRef
+    "role": 'tab'
   }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
   }) : null, addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
     tag: addonRight
   }) : null);
 }
+TabPanelItem.enhance = [keyboardFocusEnhance()];
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
-  var SText = UikitText;
-  var styles = props.styles,
-    _props$ellipsis = props.ellipsis,
-    ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
-    buttonRefsList = props.buttonRefsList,
-    index = props.index;
+  var SText = Box;
+  var styles = props.styles;
   return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps3({
-    "size": 200,
-    "ellipsis": ellipsis,
-    "medium": true,
-    "hint:triggerRef": buttonRefsList[index]
+    "tag": 'span'
   }, _ref3))));
 }
 function Addon(props) {