@semcore/tab-panel 4.42.1 → 16.0.0-prerelease.10

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [16.0.0] - 2025-02-13
+
+### Changed
+
+- `keyboardFocusEnhance` to css `:focus-visible` property.
+
 ## [4.42.1] - 2025-03-20
 
 ### Changed

package/lib/cjs/TabPanel.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,22 +12,19 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
 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 _index = require("@semcore/utils/lib/core/index");
-var _core = _interopRequireWildcard(require("@semcore/core"));
+var _core = 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"));
+var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
+var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
 /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1slc9_gg_") /*__reshadow_css_end__*/, {
-  "__STabPanelItem": "___STabPanelItem_1slc9_gg_",
-  "_keyboardFocused": "__keyboardFocused_1slc9_gg_",
-  "__SText": "___SText_1slc9_gg_",
-  "__SAddon": "___SAddon_1slc9_gg_",
-  "__STabPanel": "___STabPanel_1slc9_gg_",
-  "_disabled": "__disabled_1slc9_gg_",
-  "_selected": "__selected_1slc9_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1uh8o_gg_") /*__reshadow_css_end__*/, {
+  "__SText": "___SText_1uh8o_gg_",
+  "__SAddon": "___SAddon_1uh8o_gg_",
+  "__STabPanel": "___STabPanel_1uh8o_gg_",
+  "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
+  "_disabled": "__disabled_1uh8o_gg_",
+  "_selected": "__selected_1uh8o_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -118,6 +114,7 @@ function TabPanelItem(props) {
   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'
   }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
     tag: addonLeft
@@ -125,7 +122,6 @@ function TabPanelItem(props) {
     tag: addonRight
   }) : null);
 }
-TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;
@@ -144,7 +140,7 @@ function Addon(props) {
     "tag": 'span'
   }, _ref4))));
 }
-var TabPanel = (0, _core["default"])(TabPanelRoot, {
+var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
   Item: [TabPanelItem, {
     Text: Text,
     Addon: Addon

package/lib/cjs/TabPanel.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"TabPanel.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","style","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","_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/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\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' tabIndex={0} 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\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.map

@@ -1 +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":""}
+{"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/core/lib/utils/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/style/tab-panel.shadow.css

@@ -35,7 +35,6 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -53,9 +52,7 @@ STabPanelItem {
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
   }
 }
 
-STabPanelItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
 STabPanelItem[selected] {
   color: var(--intergalactic-text-link, #006dca);
   border-color: var(--intergalactic-border-primary, #c4c7cf);
@@ -127,4 +120,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

@@ -5,26 +5,24 @@ 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/utils/lib/core/index";
+import { sstyled as _sstyled } from "@semcore/core";
 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 React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
+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';
+import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
+import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
 /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1slc9_gg_") /*__reshadow_css_end__*/, {
-  "__STabPanelItem": "___STabPanelItem_1slc9_gg_",
-  "_keyboardFocused": "__keyboardFocused_1slc9_gg_",
-  "__SText": "___SText_1slc9_gg_",
-  "__SAddon": "___SAddon_1slc9_gg_",
-  "__STabPanel": "___STabPanel_1slc9_gg_",
-  "_disabled": "__disabled_1slc9_gg_",
-  "_selected": "__selected_1slc9_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1uh8o_gg_") /*__reshadow_css_end__*/, {
+  "__SText": "___SText_1uh8o_gg_",
+  "__SAddon": "___SAddon_1uh8o_gg_",
+  "__STabPanel": "___STabPanel_1uh8o_gg_",
+  "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
+  "_disabled": "__disabled_1uh8o_gg_",
+  "_selected": "__selected_1uh8o_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -114,6 +112,7 @@ function TabPanelItem(props) {
   return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
     "type": 'button',
     "tag": 'button',
+    "tabIndex": 0,
     "role": 'tab'
   }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
     tag: addonLeft
@@ -121,7 +120,6 @@ function TabPanelItem(props) {
     tag: addonRight
   }) : null);
 }
-TabPanelItem.enhance = [keyboardFocusEnhance()];
 function Text(props) {
   var _ref3 = arguments[0],
     _ref7;

package/lib/es6/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"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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"}
+{"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"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/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\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' tabIndex={0} 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\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/es6/index.d.js.map

@@ -1 +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":""}
+{"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/core/lib/utils/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/es6/style/tab-panel.shadow.css

@@ -35,7 +35,6 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
@@ -53,9 +52,7 @@ STabPanelItem {
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
   }
 }
 
-STabPanelItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
 STabPanelItem[selected] {
   color: var(--intergalactic-text-link, #006dca);
   border-color: var(--intergalactic-border-primary, #c4c7cf);
@@ -127,4 +120,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/esm/TabPanel.mjs

@@ -1,125 +1,147 @@
-import m from "@babel/runtime/helpers/esm/objectSpread2";
-import v from "@babel/runtime/helpers/esm/classCallCheck";
-import x from "@babel/runtime/helpers/esm/createClass";
-import f from "@babel/runtime/helpers/esm/assertThisInitialized";
-import y from "@babel/runtime/helpers/esm/inherits";
-import S from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as T } from "@semcore/utils/lib/core/index";
-import P, { sstyled as u, assignProps as b, Component as I } from "@semcore/core";
-import c from "react";
-import { Box as p } from "@semcore/flex-box";
-import k from "@semcore/utils/lib/addonTextChildren";
-import w from "@semcore/utils/lib/enhances/a11yEnhance";
-import A from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-var C = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
+import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
+var style = (
   /*__reshadow_css_start__*/
-  (T.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
-    "1slc9_gg_"
+    '.___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);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}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
+    "1uh8o_gg_"
   ), {
-    __STabPanelItem: "___STabPanelItem_1slc9_gg_",
-    _keyboardFocused: "__keyboardFocused_1slc9_gg_",
-    __SText: "___SText_1slc9_gg_",
-    __SAddon: "___SAddon_1slc9_gg_",
-    __STabPanel: "___STabPanel_1slc9_gg_",
-    _disabled: "__disabled_1slc9_gg_",
-    _selected: "__selected_1slc9_gg_"
+    "__SText": "___SText_1uh8o_gg_",
+    "__SAddon": "___SAddon_1uh8o_gg_",
+    "__STabPanel": "___STabPanel_1uh8o_gg_",
+    "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
+    "_disabled": "__disabled_1uh8o_gg_",
+    "_selected": "__selected_1uh8o_gg_"
   })
-), E = {
-  onNeighborChange: function(a, e) {
-    a && (a.focus(), e.behavior === "auto" && a.click());
+);
+var optionsA11yEnhance = {
+  onNeighborChange: function onNeighborChange(neighborElement, props) {
+    if (neighborElement) {
+      neighborElement.focus();
+      if (props.behavior === "auto") {
+        neighborElement.click();
+      }
+    }
   },
   childSelector: ["role", "tab"]
-}, d = /* @__PURE__ */ function(r) {
-  y(e, r);
-  var a = S(e);
-  function e() {
-    var t;
-    v(this, e);
-    for (var n = arguments.length, l = new Array(n), o = 0; o < n; o++)
-      l[o] = arguments[o];
-    return t = a.call.apply(a, [this].concat(l)), s(f(t), "handleClick", function(_) {
-      return function(i) {
-        t.handlers.value(_, i);
+};
+var TabPanelRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(TabPanelRoot2, _Component);
+  var _super = _createSuper(TabPanelRoot2);
+  function TabPanelRoot2() {
+    var _this;
+    _classCallCheck(this, TabPanelRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function(value) {
+      return function(event) {
+        _this.handlers.value(value, event);
       };
-    }), s(f(t), "handleKeyDown", function(_) {
-      return function(i) {
-        (i.key === "Enter" || i.key === " ") && (i.preventDefault(), t.handlers.value(_, i));
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(value) {
+      return function(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          _this.handlers.value(value, event);
+        }
       };
-    }), t;
+    });
+    return _this;
   }
-  return x(e, [{
+  _createClass(TabPanelRoot2, [{
     key: "uncontrolledProps",
-    value: function() {
+    value: function uncontrolledProps() {
       return {
         value: null
       };
     }
   }, {
     key: "getItemProps",
-    value: function(n, l) {
-      var o = this.asProps.value, _ = o === n.value;
+    value: function getItemProps(props, index) {
+      var value = this.asProps.value;
+      var isSelected = value === props.value;
       return {
-        selected: _,
-        onClick: this.handleClick(n.value),
-        onKeyDown: this.handleKeyDown(n.value),
-        tabIndex: _ ? 0 : -1,
-        "aria-selected": _
+        selected: isSelected,
+        onClick: this.handleClick(props.value),
+        onKeyDown: this.handleKeyDown(props.value),
+        tabIndex: isSelected ? 0 : -1,
+        "aria-selected": isSelected
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, l, o = p, _ = this.asProps.styles;
-      return l = u(_), /* @__PURE__ */ c.createElement(o, l.cn("STabPanel", m({}, b({
-        role: "tablist"
-      }, n))));
+    value: function render() {
+      var _ref = this.asProps, _ref5;
+      var STabPanel = Box;
+      var styles = this.asProps.styles;
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanel, _ref5.cn("STabPanel", _objectSpread({}, assignProps({
+        "role": "tablist"
+      }, _ref))));
     }
-  }]), e;
-}(I);
-s(d, "displayName", "TabPanel");
-s(d, "style", C);
-s(d, "defaultProps", {
+  }]);
+  return TabPanelRoot2;
+}(Component);
+_defineProperty(TabPanelRoot, "displayName", "TabPanel");
+_defineProperty(TabPanelRoot, "style", style);
+_defineProperty(TabPanelRoot, "defaultProps", {
   defaultValue: null,
   behavior: "manual"
 });
-s(d, "enhance", [w(E)]);
-function h(r) {
-  var a = arguments[0], e, t = p, n = r.Children, l = r.styles, o = r.addonLeft, _ = r.addonRight;
-  return e = u(l), /* @__PURE__ */ c.createElement(t, e.cn("STabPanelItem", m({}, b({
-    type: "button",
-    tag: "button",
-    role: "tab"
-  }, a))), o ? /* @__PURE__ */ c.createElement(g.Item.Addon, {
-    tag: o
-  }) : null, k(n, g.Item.Text, g.Item.Addon), _ ? /* @__PURE__ */ c.createElement(g.Item.Addon, {
-    tag: _
+_defineProperty(TabPanelRoot, "enhance", [a11yEnhance(optionsA11yEnhance)]);
+function TabPanelItem(props) {
+  var _ref2 = arguments[0], _ref6;
+  var STabPanelItem = Box;
+  var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, assignProps({
+    "type": "button",
+    "tag": "button",
+    "tabIndex": 0,
+    "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);
 }
-h.enhance = [A()];
-function z(r) {
-  var a = arguments[0], e, t = p, n = r.styles;
-  return e = u(n), /* @__PURE__ */ c.createElement(t, e.cn("SText", m({}, b({
-    tag: "span"
-  }, a))));
+function Text(props) {
+  var _ref3 = arguments[0], _ref7;
+  var SText = Box;
+  var styles = props.styles;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref3))));
 }
-function R(r) {
-  var a = arguments[0], e, t = p, n = r.styles;
-  return e = u(n), /* @__PURE__ */ c.createElement(t, e.cn("SAddon", m({}, b({
-    tag: "span"
-  }, a))));
+function Addon(props) {
+  var _ref4 = arguments[0], _ref8;
+  var SAddon = Box;
+  var styles = props.styles;
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref4))));
 }
-var g = P(d, {
-  Item: [h, {
-    Text: z,
-    Addon: R
+var TabPanel = createComponent(TabPanelRoot, {
+  Item: [TabPanelItem, {
+    Text,
+    Addon
   }]
-}), O = function(a) {
-  return a;
+});
+var wrapTabPanel = function wrapTabPanel2(wrapper) {
+  return wrapper;
 };
 export {
-  g as default,
-  O as wrapTabPanel
+  TabPanel as default,
+  wrapTabPanel
 };

package/lib/esm/index.mjs

@@ -1,5 +1,5 @@
-import { default as r, wrapTabPanel as f } from "./TabPanel.mjs";
+import { default as default2, wrapTabPanel } from "./TabPanel.mjs";
 export {
-  r as default,
-  f as wrapTabPanel
+  default2 as default,
+  wrapTabPanel
 };

package/lib/types/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
 import { Box, BoxProps } from '@semcore/flex-box';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 
 export type TabPanelValue = string | number | boolean;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "4.42.1",
+  "version": "16.0.0-prerelease.10",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,13 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.48.1",
-    "@semcore/flex-box": "5.41.1"
+    "@semcore/flex-box": "16.0.0-prerelease.10"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.10"
   },
   "repository": {
     "type": "git",