@zendeskgarden/react-tabs 9.0.0-next.2 → 9.0.0-next.21

package/README.md

@@ -17,7 +17,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 ```jsx
 import React, { useState } from 'react';
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Tabs, TabList, Tab, TabPanel } from '@zendeskgarden/react-tabs';
+import { Tabs } from '@zendeskgarden/react-tabs';
 
 const Example = () => {
   const [selectedTab, setSelectedTab] = useState('tab-1');
@@ -28,15 +28,15 @@ const Example = () => {
   return (
     <ThemeProvider>
       <Tabs selectedItem={selectedTab} onChange={setSelectedTab}>
-        <TabList>
-          <Tab item="tab-1">Tab 1</Tab>
-          <Tab item="tab-2">Tab 2</Tab>
-          <Tab disabled>Disabled Tab</Tab>
-          <Tab item="tab-3">Tab 3</Tab>
-        </TabList>
-        <TabPanel item="tab-1">Tab 1 content</TabPanel>
-        <TabPanel item="tab-2">Tab 2 content</TabPanel>
-        <TabPanel item="tab-3">Tab 3 content</TabPanel>
+        <Tabs.TabList>
+          <Tabs.Tab item="tab-1">Tab 1</Tabs.Tab>
+          <Tabs.Tab item="tab-2">Tab 2</Tabs.Tab>
+          <Tabs.Tab disabled>Disabled Tab</Tabs.Tab>
+          <Tabs.Tab item="tab-3">Tab 3</Tabs.Tab>
+        </Tabs.TabList>
+        <Tabs.TabPanel item="tab-1">Tab 1 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-2">Tab 2 content</Tabs.TabPanel>
+        <Tabs.TabPanel item="tab-3">Tab 3 content</Tabs.TabPanel>
       </Tabs>
     </ThemeProvider>
   );

package/dist/esm/elements/Tab.js

@@ -0,0 +1,50 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { mergeRefs } from 'react-merge-refs';
+import { StyledTab } from '../styled/StyledTab.js';
+import '../styled/StyledTabList.js';
+import '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const Tab = React.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  if (disabled || !tabsPropGetters) {
+    return React.createElement(StyledTab, Object.assign({
+      role: "tab",
+      "aria-disabled": disabled,
+      ref: ref,
+      $isVertical: tabsPropGetters?.isVertical
+    }, otherProps));
+  }
+  const {
+    ref: tabRef,
+    ...tabProps
+  } = tabsPropGetters.getTabProps({
+    value: item
+  });
+  return React.createElement(StyledTab, Object.assign({
+    $isSelected: item === tabsPropGetters.selectedValue,
+    $isVertical: tabsPropGetters.isVertical
+  }, tabProps, otherProps, {
+    ref: mergeRefs([tabRef, ref])
+  }));
+});
+Tab.displayName = 'Tabs.Tab';
+Tab.propTypes = {
+  disabled: PropTypes.bool,
+  item: PropTypes.any
+};
+
+export { Tab };

package/dist/esm/elements/TabList.js

@@ -0,0 +1,30 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import '../styled/StyledTab.js';
+import { StyledTabList } from '../styled/StyledTabList.js';
+import '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const TabList = React.forwardRef((props, ref) => {
+  const tabsPropGetters = useTabsContext();
+  if (!tabsPropGetters) {
+    return React.createElement(StyledTabList, Object.assign({
+      ref: ref
+    }, props));
+  }
+  const tabListProps = tabsPropGetters.getTabListProps();
+  return React.createElement(StyledTabList, Object.assign({
+    $isVertical: tabsPropGetters.isVertical
+  }, tabListProps, props, {
+    ref: ref
+  }));
+});
+TabList.displayName = 'Tabs.TabList';
+
+export { TabList };

package/dist/esm/elements/TabPanel.js

@@ -0,0 +1,41 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledTab.js';
+import '../styled/StyledTabList.js';
+import { StyledTabPanel } from '../styled/StyledTabPanel.js';
+import '../styled/StyledTabs.js';
+import { useTabsContext } from '../utils/useTabsContext.js';
+
+const TabPanel = React.forwardRef((_ref, ref) => {
+  let {
+    item,
+    ...otherProps
+  } = _ref;
+  const tabsPropGetters = useTabsContext();
+  if (!tabsPropGetters) {
+    return React.createElement(StyledTabPanel, Object.assign({
+      ref: ref
+    }, otherProps));
+  }
+  const tabPanelProps = tabsPropGetters.getTabPanelProps({
+    value: item
+  });
+  return React.createElement(StyledTabPanel, Object.assign({
+    "aria-hidden": tabsPropGetters.selectedValue !== item,
+    $isVertical: tabsPropGetters.isVertical
+  }, tabPanelProps, otherProps, {
+    ref: ref
+  }));
+});
+TabPanel.displayName = 'Tabs.TabPanel';
+TabPanel.propTypes = {
+  item: PropTypes.any
+};
+
+export { TabPanel };

package/dist/esm/elements/Tabs.js

@@ -0,0 +1,72 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef, useContext, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { useTabs } from '@zendeskgarden/container-tabs';
+import { getControlledValue } from '@zendeskgarden/container-utilities';
+import { toTabs } from '../utils/toTabs.js';
+import { TabsContext } from '../utils/useTabsContext.js';
+import { StyledTabs } from '../styled/StyledTabs.js';
+import { Tab } from './Tab.js';
+import { TabList } from './TabList.js';
+import { TabPanel } from './TabPanel.js';
+
+const TabsComponent = forwardRef((_ref, ref) => {
+  let {
+    isVertical,
+    children,
+    onChange,
+    selectedItem: controlledSelectedItem,
+    ...otherProps
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const [internalSelectedItem, setInternalSelectedItem] = useState();
+  const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
+  const tabs = useMemo(() => toTabs(children), [children]);
+  const tabsContextValue = useTabs({
+    tabs,
+    rtl: theme.rtl,
+    orientation: isVertical ? 'vertical' : 'horizontal',
+    selectedValue: selectedItem,
+    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
+    onSelect: item => {
+      if (onChange) {
+        onChange(item);
+      } else {
+        setInternalSelectedItem(item);
+      }
+    }
+  });
+  const contextValue = useMemo(() => ({
+    isVertical,
+    ...tabsContextValue
+  }), [isVertical, tabsContextValue]);
+  return React.createElement(TabsContext.Provider, {
+    value: contextValue
+  }, React.createElement(StyledTabs, Object.assign({
+    $isVertical: isVertical
+  }, otherProps, {
+    ref: ref
+  }), children));
+});
+TabsComponent.propTypes = {
+  isVertical: PropTypes.bool,
+  selectedItem: PropTypes.any,
+  onChange: PropTypes.func
+};
+TabsComponent.defaultProps = {
+  isVertical: false
+};
+TabsComponent.displayName = 'Tabs';
+const Tabs = TabsComponent;
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
+
+export { Tabs, TabsComponent };

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { Tab } from './elements/Tab.js';
+export { TabList } from './elements/TabList.js';
+export { TabPanel } from './elements/TabPanel.js';
+export { Tabs } from './elements/Tabs.js';

package/dist/esm/styled/StyledTab.js

@@ -0,0 +1,80 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
+import { stripUnit } from 'polished';
+
+const COMPONENT_ID = 'tabs.tab';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isSelected,
+    $isVertical
+  } = _ref;
+  const borderColor = $isSelected ? getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  }) : 'transparent';
+  const borderBlockEndColor = $isVertical ? undefined : borderColor;
+  const borderInlineColor = $isVertical ? borderColor : undefined;
+  const selectedColor = getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
+  const foregroundColor = $isSelected ? selectedColor : 'inherit';
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["border-bottom-color:", ";border-", "-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderBlockEndColor, theme.rtl ? 'right' : 'left', borderInlineColor, foregroundColor, selectedColor, focusStyles({
+    theme,
+    inset: true,
+    spacerWidth: null,
+    shadowWidth: 'sm',
+    selector: '&:focus-visible::before',
+    styles: {
+      color: selectedColor
+    }
+  }), selectedColor, disabledColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    $isVertical
+  } = _ref2;
+  const borderWidth = theme.borderWidths.md;
+  const focusHeight = `${theme.space.base * 5}px`;
+  let marginBottom;
+  let padding;
+  if ($isVertical) {
+    marginBottom = `${theme.space.base * 5}px`;
+    padding = `${theme.space.base}px ${theme.space.base * 2}px`;
+  } else {
+    const paddingTop = theme.space.base * 2.5;
+    const paddingHorizontal = theme.space.base * 7;
+    const paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
+    padding = `${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px`;
+  }
+  return css(["margin-bottom:", ";border-width:", ";padding:", ";&:focus-visible::before,&[data-garden-focus-visible]::before{height:", ";}&:last-of-type{margin-bottom:0;}"], marginBottom, borderWidth, padding, focusHeight);
+};
+const StyledTab = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTab",
+  componentId: "sc-x2pbow-0"
+})(["display:", ";position:relative;transition:color 0.25s ease-in-out;border-bottom:", ";border-", ":", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:", ";text-decoration:none;text-overflow:ellipsis;", ";", ";&:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isVertical ? 'block' : 'inline-block', props => props.$isVertical ? undefined : props.theme.borderStyles.solid, props => props.theme.rtl ? 'right' : 'left', props => props.$isVertical ? props.theme.borderStyles.solid : undefined, props => {
+  if (props.$isVertical) {
+    return props.theme.rtl ? 'right' : 'left';
+  }
+  return 'center';
+}, sizeStyles, colorStyles, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTab.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTab };

package/dist/esm/styled/StyledTabList.js

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tabs.tablist';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return css(["color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    $isVertical
+  } = _ref2;
+  const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
+  const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
+  return css(["margin-top:0;margin-bottom:", ";border-bottom-width:", ";padding:0;line-height:", ";font-size:", ";"], marginBottom, borderBottom, lineHeight, fontSize);
+};
+const StyledTabList = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTabList",
+  componentId: "sc-wa5aaj-0"
+})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabList };

package/dist/esm/styled/StyledTabPanel.js

@@ -0,0 +1,30 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tabs.tabpanel';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    $isVertical
+  } = _ref;
+  const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;
+  return css(["margin-", ":", ";"], theme.rtl ? 'right' : 'left', margin);
+};
+const StyledTabPanel = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTabPanel",
+  componentId: "sc-7lhrmp-0"
+})(["display:block;vertical-align:", ";color-scheme:only ", ";", ";&[aria-hidden='true']{display:none;}", ";"], props => props.$isVertical && 'top', p => p.theme.colors.base, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabPanel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabPanel };

package/dist/esm/styled/StyledTabs.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tabs.tabs';
+const StyledTabs = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTabs",
+  componentId: "sc-1qaor65-0"
+})(["display:", ";overflow:hidden;direction:", ";", ";"], props => props.$isVertical ? 'table' : 'block', props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTabs.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTabs };

package/dist/esm/utils/toTabs.js

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { Children, isValidElement } from 'react';
+
+const toTabs = children => Children.toArray(children).reduce((_items, child) => {
+  const retVal = _items;
+  if ( isValidElement(child)) {
+    if ('item' in child.props) {
+      const props = child.props;
+      retVal.push({
+        value: props.item,
+        disabled: props.disabled
+      });
+    } else {
+      const childItems = toTabs(child.props.children);
+      retVal.push(...childItems);
+    }
+  }
+  return retVal;
+}, []);
+
+export { toTabs };

package/dist/esm/utils/useTabsContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const TabsContext = createContext(undefined);
+const useTabsContext = () => {
+  return useContext(TabsContext);
+};
+
+export { TabsContext, useTabsContext };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -22,97 +21,140 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const COMPONENT_ID$3 = 'tabs.tab';
-const colorStyles = _ref => {
+const colorStyles$1 = _ref => {
   let {
     theme,
-    isSelected
+    $isSelected,
+    $isVertical
   } = _ref;
-  const selectedColor = reactTheming.getColor('primaryHue', 600, theme);
-  return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentcolor !important', isSelected ? selectedColor : 'inherit', selectedColor, reactTheming.focusStyles({
+  const borderColor = $isSelected ? reactTheming.getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  }) : 'transparent';
+  const borderBlockEndColor = $isVertical ? undefined : borderColor;
+  const borderInlineColor = $isVertical ? borderColor : undefined;
+  const selectedColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.primary'
+  });
+  const foregroundColor = $isSelected ? selectedColor : 'inherit';
+  const disabledColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return styled.css(["border-bottom-color:", ";border-", "-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderBlockEndColor, theme.rtl ? 'right' : 'left', borderInlineColor, foregroundColor, selectedColor, reactTheming.focusStyles({
     theme,
     inset: true,
     spacerWidth: null,
     shadowWidth: 'sm',
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
+    selector: '&:focus-visible::before',
     styles: {
       color: selectedColor
     }
-  }), selectedColor, props => reactTheming.getColor('neutralHue', 400, props.theme));
+  }), selectedColor, disabledColor);
 };
-const sizeStyles = _ref2 => {
+const sizeStyles$2 = _ref2 => {
   let {
-    theme
+    theme,
+    $isVertical
   } = _ref2;
-  const paddingTop = theme.space.base * 2.5;
-  const paddingHorizontal = theme.space.base * 7;
-  const paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
-  return styled.css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
+  const borderWidth = theme.borderWidths.md;
+  const focusHeight = `${theme.space.base * 5}px`;
+  let marginBottom;
+  let padding;
+  if ($isVertical) {
+    marginBottom = `${theme.space.base * 5}px`;
+    padding = `${theme.space.base}px ${theme.space.base * 2}px`;
+  } else {
+    const paddingTop = theme.space.base * 2.5;
+    const paddingHorizontal = theme.space.base * 7;
+    const paddingBottom = paddingTop - polished.stripUnit(theme.borderWidths.md) - polished.stripUnit(theme.borderWidths.sm);
+    padding = `${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px`;
+  }
+  return styled.css(["margin-bottom:", ";border-width:", ";padding:", ";&:focus-visible::before,&[data-garden-focus-visible]::before{height:", ";}&:last-of-type{margin-bottom:0;}"], marginBottom, borderWidth, padding, focusHeight);
 };
 const StyledTab = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTab",
   componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:", ";position:relative;transition:color 0.25s ease-in-out;border-bottom:", ";border-", ":", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:", ";text-decoration:none;text-overflow:ellipsis;", ";", ";&:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.$isVertical ? 'block' : 'inline-block', props => props.$isVertical ? undefined : props.theme.borderStyles.solid, props => props.theme.rtl ? 'right' : 'left', props => props.$isVertical ? props.theme.borderStyles.solid : undefined, props => {
+  if (props.$isVertical) {
+    return props.theme.rtl ? 'right' : 'left';
+  }
+  return 'center';
+}, sizeStyles$2, colorStyles$1, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledTab.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'tabs.tablist';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = reactTheming.getColor({
+    theme,
+    variable: 'border.default'
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return styled.css(["color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
+};
+const sizeStyles$1 = _ref2 => {
+  let {
+    theme,
+    $isVertical
+  } = _ref2;
+  const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
+  const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = reactTheming.getLineHeight(theme.space.base * 5, fontSize);
+  return styled.css(["margin-top:0;margin-bottom:", ";border-bottom-width:", ";padding:0;line-height:", ";font-size:", ";"], marginBottom, borderBottom, lineHeight, fontSize);
+};
 const StyledTabList = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTabList",
   componentId: "sc-wa5aaj-0"
-})(["display:block;margin-top:0;margin-bottom:", "px;border-bottom:", " ", " ", ";padding:0;line-height:", "px;white-space:nowrap;color:", ";font-size:", ";", ";"], props => props.theme.space.base * 5, props => props.theme.borderWidths.sm, props => props.theme.borderStyles.solid, props => reactTheming.getColor('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => reactTheming.getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles$1, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledTabList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$1 = 'tabs.tabpanel';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    $isVertical
+  } = _ref;
+  const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;
+  return styled.css(["margin-", ":", ";"], theme.rtl ? 'right' : 'left', margin);
+};
 const StyledTabPanel = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTabPanel",
   componentId: "sc-7lhrmp-0"
-})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["display:block;vertical-align:", ";color-scheme:only ", ";", ";&[aria-hidden='true']{display:none;}", ";"], props => props.$isVertical && 'top', p => p.theme.colors.base, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledTabPanel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'tabs.tabs';
-const verticalStyling = _ref => {
-  let {
-    theme
-  } = _ref;
-  return styled.css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before,&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
-};
 const StyledTabs = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTabs",
   componentId: "sc-1qaor65-0"
-})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:", ";overflow:hidden;direction:", ";", ";"], props => props.$isVertical ? 'table' : 'block', props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTabs.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -130,10 +172,11 @@ const Tab = React__default.default.forwardRef((_ref, ref) => {
   } = _ref;
   const tabsPropGetters = useTabsContext();
   if (disabled || !tabsPropGetters) {
-    return React__default.default.createElement(StyledTab, _extends({
+    return React__default.default.createElement(StyledTab, Object.assign({
       role: "tab",
       "aria-disabled": disabled,
-      ref: ref
+      ref: ref,
+      $isVertical: tabsPropGetters?.isVertical
     }, otherProps));
   }
   const {
@@ -142,13 +185,14 @@ const Tab = React__default.default.forwardRef((_ref, ref) => {
   } = tabsPropGetters.getTabProps({
     value: item
   });
-  return React__default.default.createElement(StyledTab, _extends({
-    isSelected: item === tabsPropGetters.selectedValue
+  return React__default.default.createElement(StyledTab, Object.assign({
+    $isSelected: item === tabsPropGetters.selectedValue,
+    $isVertical: tabsPropGetters.isVertical
   }, tabProps, otherProps, {
     ref: reactMergeRefs.mergeRefs([tabRef, ref])
   }));
 });
-Tab.displayName = 'Tab';
+Tab.displayName = 'Tabs.Tab';
 Tab.propTypes = {
   disabled: PropTypes__default.default.bool,
   item: PropTypes__default.default.any
@@ -157,16 +201,18 @@ Tab.propTypes = {
 const TabList = React__default.default.forwardRef((props, ref) => {
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
-    return React__default.default.createElement(StyledTabList, _extends({
+    return React__default.default.createElement(StyledTabList, Object.assign({
       ref: ref
     }, props));
   }
   const tabListProps = tabsPropGetters.getTabListProps();
-  return React__default.default.createElement(StyledTabList, _extends({}, tabListProps, props, {
+  return React__default.default.createElement(StyledTabList, Object.assign({
+    $isVertical: tabsPropGetters.isVertical
+  }, tabListProps, props, {
     ref: ref
   }));
 });
-TabList.displayName = 'TabList';
+TabList.displayName = 'Tabs.TabList';
 
 const TabPanel = React__default.default.forwardRef((_ref, ref) => {
   let {
@@ -175,20 +221,21 @@ const TabPanel = React__default.default.forwardRef((_ref, ref) => {
   } = _ref;
   const tabsPropGetters = useTabsContext();
   if (!tabsPropGetters) {
-    return React__default.default.createElement(StyledTabPanel, _extends({
+    return React__default.default.createElement(StyledTabPanel, Object.assign({
       ref: ref
     }, otherProps));
   }
   const tabPanelProps = tabsPropGetters.getTabPanelProps({
     value: item
   });
-  return React__default.default.createElement(StyledTabPanel, _extends({
-    "aria-hidden": tabsPropGetters.selectedValue !== item
+  return React__default.default.createElement(StyledTabPanel, Object.assign({
+    "aria-hidden": tabsPropGetters.selectedValue !== item,
+    $isVertical: tabsPropGetters.isVertical
   }, tabPanelProps, otherProps, {
     ref: ref
   }));
 });
-TabPanel.displayName = 'TabPanel';
+TabPanel.displayName = 'Tabs.TabPanel';
 TabPanel.propTypes = {
   item: PropTypes__default.default.any
 };
@@ -210,7 +257,7 @@ const toTabs = children => React.Children.toArray(children).reduce((_items, chil
   return retVal;
 }, []);
 
-const Tabs = React.forwardRef((_ref, ref) => {
+const TabsComponent = React.forwardRef((_ref, ref) => {
   let {
     isVertical,
     children,
@@ -236,23 +283,31 @@ const Tabs = React.forwardRef((_ref, ref) => {
       }
     }
   });
+  const contextValue = React.useMemo(() => ({
+    isVertical,
+    ...tabsContextValue
+  }), [isVertical, tabsContextValue]);
   return React__default.default.createElement(TabsContext.Provider, {
-    value: tabsContextValue
-  }, React__default.default.createElement(StyledTabs, _extends({
-    isVertical: isVertical
+    value: contextValue
+  }, React__default.default.createElement(StyledTabs, Object.assign({
+    $isVertical: isVertical
   }, otherProps, {
     ref: ref
   }), children));
 });
-Tabs.propTypes = {
+TabsComponent.propTypes = {
   isVertical: PropTypes__default.default.bool,
   selectedItem: PropTypes__default.default.any,
   onChange: PropTypes__default.default.func
 };
-Tabs.defaultProps = {
+TabsComponent.defaultProps = {
   isVertical: false
 };
-Tabs.displayName = 'Tabs';
+TabsComponent.displayName = 'Tabs';
+const Tabs = TabsComponent;
+Tabs.Tab = Tab;
+Tabs.TabList = TabList;
+Tabs.TabPanel = TabPanel;
 
 exports.Tab = Tab;
 exports.TabList = TabList;

package/dist/typings/elements/Tab.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ITabProps } from '../types';
 /**
+ * @deprecated use `Tabs.Tab` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/TabList.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Tabs.TabList` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const TabList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/TabPanel.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ITabPanelProps } from '../types';
 /**
+ * @deprecated use `Tabs.TabPanel` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const TabPanel: React.ForwardRefExoticComponent<ITabPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/Tabs.d.ts

@@ -6,7 +6,15 @@
  */
 import React from 'react';
 import { ITabsProps } from '../types';
+import { Tab } from './Tab';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+export declare const TabsComponent: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Tabs: React.ForwardRefExoticComponent<ITabsProps & React.RefAttributes<HTMLDivElement>> & {
+    Tab: typeof Tab;
+    TabList: typeof TabList;
+    TabPanel: typeof TabPanel;
+};

package/dist/typings/styled/StyledTab.d.ts

@@ -6,12 +6,11 @@
  */
 import { DefaultTheme } from 'styled-components';
 interface IStyledTabProps {
-    isSelected?: boolean;
+    $isSelected?: boolean;
+    $isVertical?: boolean;
 }
-/**
- * 1. Text truncation (requires `max-width`).
- * 2. Overflow compensation.
- * 3. Override default anchor styling
- */
-export declare const StyledTab: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTabProps, never>;
+export declare const StyledTab: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    'data-garden-id': string;
+    'data-garden-version': string;
+} & IStyledTabProps, "data-garden-id" | "data-garden-version">;
 export {};

package/dist/typings/styled/StyledTabList.d.ts

@@ -4,10 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/**
- * 1. List element reset.
- */
-export declare const StyledTabList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+import { DefaultTheme } from 'styled-components';
+interface IStyledTabListProps {
+    $isVertical?: boolean;
+}
+export declare const StyledTabList: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;
+} & IStyledTabListProps, "data-garden-id" | "data-garden-version">;
+export {};

package/dist/typings/styled/StyledTabPanel.d.ts

@@ -4,10 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/**
- * Accepts all `<div>` props
- */
-export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+import { DefaultTheme } from 'styled-components';
+interface IStyledTabPanelProps {
+    $isVertical?: boolean;
+}
+export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-}, "data-garden-id" | "data-garden-version">;
+} & IStyledTabPanelProps, "data-garden-id" | "data-garden-version">;
+export {};

package/dist/typings/styled/StyledTabs.d.ts

@@ -4,15 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { DefaultTheme } from 'styled-components';
 interface IStyledTabsProps {
-    /**
-     * Displays vertical TabList styling
-     */
-    isVertical?: boolean;
+    $isVertical?: boolean;
 }
 /**
  * Accepts all `<div>` props
  */
-export declare const StyledTabs: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTabsProps, never>;
+export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IStyledTabsProps, never>;
 export {};

package/dist/typings/utils/useTabsContext.d.ts

@@ -6,5 +6,9 @@
  */
 /// <reference types="react" />
 import { IUseTabsReturnValue } from '@zendeskgarden/container-tabs';
-export declare const TabsContext: import("react").Context<IUseTabsReturnValue<any> | undefined>;
-export declare const useTabsContext: () => IUseTabsReturnValue<any> | undefined;
+interface ITabsContext extends IUseTabsReturnValue<any> {
+    isVertical?: boolean;
+}
+export declare const TabsContext: import("react").Context<ITabsContext | undefined>;
+export declare const useTabsContext: () => ITabsContext | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tabs",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.21",
   "description": "Components and render prop containers relating to the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -21,20 +21,20 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-tabs": "^2.0.1",
+    "@zendeskgarden/container-tabs": "^2.0.10",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.2"
+    "@zendeskgarden/react-theming": "^9.0.0-next.21"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
+  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
 }

package/dist/index.esm.js

@@ -1,249 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-import React, { createContext, useContext, Children, isValidElement, forwardRef, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { mergeRefs } from 'react-merge-refs';
-import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
-import { stripUnit } from 'polished';
-import { useTabs } from '@zendeskgarden/container-tabs';
-import { getControlledValue } from '@zendeskgarden/container-utilities';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const COMPONENT_ID$3 = 'tabs.tab';
-const colorStyles = _ref => {
-  let {
-    theme,
-    isSelected
-  } = _ref;
-  const selectedColor = getColor('primaryHue', 600, theme);
-  return css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], isSelected && 'currentcolor !important', isSelected ? selectedColor : 'inherit', selectedColor, focusStyles({
-    theme,
-    inset: true,
-    spacerWidth: null,
-    shadowWidth: 'sm',
-    selector: '&:focus-visible::before, &[data-garden-focus-visible="true"]::before',
-    styles: {
-      color: selectedColor
-    }
-  }), selectedColor, props => getColor('neutralHue', 400, props.theme));
-};
-const sizeStyles = _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  const paddingTop = theme.space.base * 2.5;
-  const paddingHorizontal = theme.space.base * 7;
-  const paddingBottom = paddingTop - stripUnit(theme.borderWidths.md) - stripUnit(theme.borderWidths.sm);
-  return css(["padding:", "px ", "px ", "px;"], paddingTop, paddingHorizontal, paddingBottom);
-};
-const StyledTab = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTab",
-  componentId: "sc-x2pbow-0"
-})(["display:inline-block;position:relative;transition:color 0.25s ease-in-out;border-bottom:", " transparent;border-width:", ";cursor:pointer;overflow:hidden;vertical-align:top;user-select:none;text-align:center;text-decoration:none;text-overflow:ellipsis;", " ", " &:focus{text-decoration:none;}&::before{transition:box-shadow 0.1s ease-in-out;content:'';}&:focus-visible::before,&[data-garden-focus-visible]::before{position:absolute;top:", "px;right:", "px;left:", "px;border-radius:", ";height:", "px;pointer-events:none;}&:active::before{box-shadow:none;}&[aria-disabled='true']{cursor:default;}", ";"], props => props.theme.borderStyles.solid, props => props.theme.borderWidths.md, sizeStyles, colorStyles, props => props.theme.space.base * 2.5, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.theme.borderRadii.md, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledTab.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'tabs.tablist';
-const StyledTabList = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTabList",
-  componentId: "sc-wa5aaj-0"
-})(["display:block;margin-top:0;margin-bottom:", "px;border-bottom:", " ", " ", ";padding:0;line-height:", "px;white-space:nowrap;color:", ";font-size:", ";", ";"], props => props.theme.space.base * 5, props => props.theme.borderWidths.sm, props => props.theme.borderStyles.solid, props => getColor('neutralHue', 300, props.theme), props => props.theme.space.base * 5, props => getColor('neutralHue', 600, props.theme), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledTabList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tabs.tabpanel';
-const StyledTabPanel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTabPanel",
-  componentId: "sc-7lhrmp-0"
-})(["display:block;&[aria-hidden='true']{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTabPanel.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tabs.tabs';
-const verticalStyling = _ref => {
-  let {
-    theme
-  } = _ref;
-  return css(["display:table;", "{display:table-cell;margin-bottom:0;border-bottom:none;vertical-align:top;}", "{display:block;margin-bottom:", "px;margin-left:", ";border-left:", ";border-bottom-style:none;border-", "-style:", ";border-", "-color:transparent;padding:", "px ", "px;text-align:", ";&:last-of-type{margin-bottom:0;}&:focus-visible::before,&[data-garden-focus-visible]::before{top:", "px;right:", "px;left:", "px;}}", "{margin-", ":", "px;vertical-align:top;}"], StyledTabList, StyledTab, theme.space.base * 5, theme.rtl && '0', theme.rtl && '0', theme.rtl ? 'right' : 'left', theme.borderStyles.solid, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base * 2, theme.rtl ? 'right' : 'left', theme.space.base, theme.space.base, theme.space.base, StyledTabPanel, theme.rtl ? 'right' : 'left', theme.space.base * 8);
-};
-const StyledTabs = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTabs",
-  componentId: "sc-1qaor65-0"
-})(["display:block;overflow:hidden;direction:", ";", ";", ";"], props => props.theme.rtl && 'rtl', props => props.isVertical && verticalStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTabs.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const TabsContext = createContext(undefined);
-const useTabsContext = () => {
-  return useContext(TabsContext);
-};
-
-const Tab = React.forwardRef((_ref, ref) => {
-  let {
-    disabled,
-    item,
-    ...otherProps
-  } = _ref;
-  const tabsPropGetters = useTabsContext();
-  if (disabled || !tabsPropGetters) {
-    return React.createElement(StyledTab, _extends({
-      role: "tab",
-      "aria-disabled": disabled,
-      ref: ref
-    }, otherProps));
-  }
-  const {
-    ref: tabRef,
-    ...tabProps
-  } = tabsPropGetters.getTabProps({
-    value: item
-  });
-  return React.createElement(StyledTab, _extends({
-    isSelected: item === tabsPropGetters.selectedValue
-  }, tabProps, otherProps, {
-    ref: mergeRefs([tabRef, ref])
-  }));
-});
-Tab.displayName = 'Tab';
-Tab.propTypes = {
-  disabled: PropTypes.bool,
-  item: PropTypes.any
-};
-
-const TabList = React.forwardRef((props, ref) => {
-  const tabsPropGetters = useTabsContext();
-  if (!tabsPropGetters) {
-    return React.createElement(StyledTabList, _extends({
-      ref: ref
-    }, props));
-  }
-  const tabListProps = tabsPropGetters.getTabListProps();
-  return React.createElement(StyledTabList, _extends({}, tabListProps, props, {
-    ref: ref
-  }));
-});
-TabList.displayName = 'TabList';
-
-const TabPanel = React.forwardRef((_ref, ref) => {
-  let {
-    item,
-    ...otherProps
-  } = _ref;
-  const tabsPropGetters = useTabsContext();
-  if (!tabsPropGetters) {
-    return React.createElement(StyledTabPanel, _extends({
-      ref: ref
-    }, otherProps));
-  }
-  const tabPanelProps = tabsPropGetters.getTabPanelProps({
-    value: item
-  });
-  return React.createElement(StyledTabPanel, _extends({
-    "aria-hidden": tabsPropGetters.selectedValue !== item
-  }, tabPanelProps, otherProps, {
-    ref: ref
-  }));
-});
-TabPanel.displayName = 'TabPanel';
-TabPanel.propTypes = {
-  item: PropTypes.any
-};
-
-const toTabs = children => Children.toArray(children).reduce((_items, child) => {
-  const retVal = _items;
-  if ( isValidElement(child)) {
-    if ('item' in child.props) {
-      const props = child.props;
-      retVal.push({
-        value: props.item,
-        disabled: props.disabled
-      });
-    } else {
-      const childItems = toTabs(child.props.children);
-      retVal.push(...childItems);
-    }
-  }
-  return retVal;
-}, []);
-
-const Tabs = forwardRef((_ref, ref) => {
-  let {
-    isVertical,
-    children,
-    onChange,
-    selectedItem: controlledSelectedItem,
-    ...otherProps
-  } = _ref;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const [internalSelectedItem, setInternalSelectedItem] = useState();
-  const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
-  const tabs = useMemo(() => toTabs(children), [children]);
-  const tabsContextValue = useTabs({
-    tabs,
-    rtl: theme.rtl,
-    orientation: isVertical ? 'vertical' : 'horizontal',
-    selectedValue: selectedItem,
-    defaultSelectedValue: tabs.find(tab => !tab.disabled)?.value,
-    onSelect: item => {
-      if (onChange) {
-        onChange(item);
-      } else {
-        setInternalSelectedItem(item);
-      }
-    }
-  });
-  return React.createElement(TabsContext.Provider, {
-    value: tabsContextValue
-  }, React.createElement(StyledTabs, _extends({
-    isVertical: isVertical
-  }, otherProps, {
-    ref: ref
-  }), children));
-});
-Tabs.propTypes = {
-  isVertical: PropTypes.bool,
-  selectedItem: PropTypes.any,
-  onChange: PropTypes.func
-};
-Tabs.defaultProps = {
-  isVertical: false
-};
-Tabs.displayName = 'Tabs';
-
-export { Tab, TabList, TabPanel, Tabs };