@carbon/react 1.87.0-rc.0 → 1.87.0

package/lib/components/Tabs/Tabs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var iconsReact = require('@carbon/icons-react');
 var layout = require('@carbon/layout');
@@ -38,21 +36,15 @@ var useEvent = require('../../internal/useEvent.js');
 var useMatchMedia = require('../../internal/useMatchMedia.js');
 require('../Text/index.js');
 var index = require('../BadgeIndicator/index.js');
-var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
+var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.js');
 var Text = require('../Text/Text.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _ChevronLeft, _ChevronRight, _BadgeIndicator;
 const verticalTabHeight = 64;
 
 // Used to manage the overall state of the Tabs
 
-const TabsContext = /*#__PURE__*/React__default["default"].createContext({
+const TabsContext = /*#__PURE__*/React.createContext({
   baseId: '',
   activeIndex: 0,
   defaultSelectedIndex: 0,
@@ -64,7 +56,7 @@ const TabsContext = /*#__PURE__*/React__default["default"].createContext({
 });
 
 // Used to keep track of position in a tablist
-const TabContext = /*#__PURE__*/React__default["default"].createContext({
+const TabContext = /*#__PURE__*/React.createContext({
   index: 0,
   hasSecondaryLabel: false
 });
@@ -72,7 +64,7 @@ const lgMediaQuery = `(min-width: ${layout.breakpoints.lg.width})`;
 const smMediaQuery = `(max-width: ${layout.breakpoints.md.width})`;
 
 // Used to keep track of position in a list of tab panels
-const TabPanelContext = /*#__PURE__*/React__default["default"].createContext(0);
+const TabPanelContext = /*#__PURE__*/React.createContext(0);
 
 /**
  * Tabs
@@ -110,7 +102,7 @@ function Tabs({
     selectedIndex,
     setSelectedIndex
   };
-  return /*#__PURE__*/React__default["default"].createElement(TabsContext.Provider, {
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
     value: value
   }, children);
 }
@@ -119,21 +111,21 @@ Tabs.propTypes = {
    * Provide child elements to be rendered inside the `Tabs`.
    * These elements should render either `TabsList` or `TabsPanels`
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify which content tab should be initially selected when the component
    * is first rendered
    */
-  defaultSelectedIndex: PropTypes__default["default"].number,
+  defaultSelectedIndex: PropTypes.number,
   /**
    * Whether the render Tab children should be dismissable.
    */
-  dismissable: PropTypes__default["default"].bool,
+  dismissable: PropTypes.bool,
   /**
    * Provide an optional function which is called whenever the state of the
    * `Tabs` changes
    */
-  onChange: PropTypes__default["default"].func,
+  onChange: PropTypes.func,
   /**
    * If specifying the `onTabCloseRequest` prop, provide a callback function
    * responsible for removing the tab when close button is pressed on one of the Tab elements
@@ -148,7 +140,7 @@ Tabs.propTypes = {
    * Control which content panel is currently selected. This puts the component
    * in a controlled mode and should be used along with `onChange`
    */
-  selectedIndex: PropTypes__default["default"].number
+  selectedIndex: PropTypes.number
 };
 function TabsVertical({
   children,
@@ -177,40 +169,40 @@ function TabsVertical({
     return (
       /*#__PURE__*/
       // eslint-disable-next-line react/forbid-component-props
-      React__default["default"].createElement(Grid.Grid, {
+      React.createElement(Grid.Grid, {
         style: {
           height: height
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Tabs, props, children))
+      }, /*#__PURE__*/React.createElement(Tabs, props, children))
     );
   }
-  return /*#__PURE__*/React__default["default"].createElement(Tabs, props, children);
+  return /*#__PURE__*/React.createElement(Tabs, props, children);
 }
 TabsVertical.propTypes = {
   /**
    * Provide child elements to be rendered inside the `TabsVertical`.
    * These elements should render either `TabsListVertical` or `TabsPanels`
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify which content tab should be initially selected when the component
    * is first rendered
    */
-  defaultSelectedIndex: PropTypes__default["default"].number,
+  defaultSelectedIndex: PropTypes.number,
   /**
    * Option to set a height style only if using vertical variation
    */
-  height: PropTypes__default["default"].string,
+  height: PropTypes.string,
   /**
    * Provide an optional function which is called whenever the state of the
    * `Tabs` changes
    */
-  onChange: PropTypes__default["default"].func,
+  onChange: PropTypes.func,
   /**
    * Control which content panel is currently selected. This puts the component
    * in a controlled mode and should be used along with `onChange`
    */
-  selectedIndex: PropTypes__default["default"].number
+  selectedIndex: PropTypes.number
 };
 
 /**
@@ -276,7 +268,7 @@ function TabList({
     setSelectedIndex,
     setActiveIndex,
     dismissable
-  } = React__default["default"].useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const prefix = usePrefix.usePrefix();
   const ref = React.useRef(null);
   const previousButton = React.useRef(null);
@@ -285,14 +277,14 @@ function TabList({
   const [scrollLeft, setScrollLeft] = React.useState(0);
   let hasSecondaryLabelTabs = false;
   if (contained) {
-    hasSecondaryLabelTabs = React__default["default"].Children.toArray(children).some(child => {
+    hasSecondaryLabelTabs = React.Children.toArray(children).some(child => {
       const _child = child;
-      return /*#__PURE__*/React__default["default"].isValidElement(child) && !!_child.props.secondaryLabel;
+      return /*#__PURE__*/React.isValidElement(child) && !!_child.props.secondaryLabel;
     });
   }
   const isLg = useMatchMedia.useMatchMedia(lgMediaQuery);
-  const distributeWidth = fullWidth && contained && isLg && React__default["default"].Children.toArray(children).length < 9;
-  const className = cx__default["default"](`${prefix}--tabs`, {
+  const distributeWidth = fullWidth && contained && isLg && React.Children.toArray(children).length < 9;
+  const className = cx(`${prefix}--tabs`, {
     [`${prefix}--tabs--contained`]: contained,
     [`${prefix}--tabs--light`]: light,
     [`${prefix}--tabs__icon--default`]: iconSize === 'default',
@@ -315,10 +307,10 @@ function TabList({
   //   AND SCROLL_LEFT + CLIENT_WIDTH < SCROLL_WIDTH
   const [isNextButtonVisible, setIsNextButtonVisible] = React.useState(ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false);
   const isPreviousButtonVisible = ref.current ? isScrollable && scrollLeft > 0 : false;
-  const previousButtonClasses = cx__default["default"](`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
+  const previousButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--previous`, {
     [`${prefix}--tab--overflow-nav-button--hidden`]: !isPreviousButtonVisible
   });
-  const nextButtonClasses = cx__default["default"](`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, {
+  const nextButtonClasses = cx(`${prefix}--tab--overflow-nav-button`, `${prefix}--tab--overflow-nav-button--next`, {
     [`${prefix}--tab--overflow-nav-button--hidden`]: !isNextButtonVisible
   });
   const tabs = React.useRef([]);
@@ -420,7 +412,7 @@ function TabList({
       }
     }
   }, []);
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     if (ref.current) {
       // adding 1 in calculation for firefox support
       setIsScrollable(ref.current.scrollWidth > ref.current.clientWidth + 1);
@@ -440,20 +432,20 @@ function TabList({
   }, []);
 
   // updates scroll location for all scroll behavior.
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     if (scrollLeft !== null && ref.current) {
       ref.current.scrollLeft = scrollLeft;
     }
   }, [scrollLeft]);
 
   // scroll manual tabs when active index changes (focus outline movement)
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     const tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
     scrollTabIntoView(tab);
   }, [activation, activeIndex]);
 
   // scroll tabs when selected index changes
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     const tab = tabs.current[selectedIndex];
     scrollTabIntoView(tab);
   }, [selectedIndex, isScrollable, children]);
@@ -481,16 +473,16 @@ function TabList({
       return createLongPressBehavior(ref, 'forward', setScrollLeft);
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-label": "Scroll left",
     ref: previousButton,
     className: previousButtonClasses,
     type: "button"
-  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronLeft, null))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }, leftOverflowButtonProps), _ChevronLeft || (_ChevronLeft = /*#__PURE__*/React.createElement(iconsReact.ChevronLeft, null))), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-label": label,
     ref: ref,
     role: "tablist",
@@ -498,82 +490,82 @@ function TabList({
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React__default["default"].Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+  }), React.Children.map(children, (child, index) => {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: hasSecondaryLabelTabs,
         contained
       }
-    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: node => {
         tabs.current[index] = node;
       }
     }));
-  })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  })), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-label": "Scroll right",
     ref: nextButton,
     className: nextButtonClasses,
     type: "button"
-  }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, null))));
+  }, rightOverflowButtonProps), _ChevronRight || (_ChevronRight = /*#__PURE__*/React.createElement(iconsReact.ChevronRight, null))));
 }
 TabList.propTypes = {
   /**
    * Specify whether the content tab should be activated automatically or
    * manually
    */
-  activation: PropTypes__default["default"].oneOf(['automatic', 'manual']),
+  activation: PropTypes.oneOf(['automatic', 'manual']),
   /**
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes__default["default"].string,
+  'aria-label': PropTypes.string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the container node
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify whether component is contained type
    */
-  contained: PropTypes__default["default"].bool,
+  contained: PropTypes.bool,
   /**
    * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
    */
-  fullWidth: PropTypes__default["default"].bool,
+  fullWidth: PropTypes.bool,
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
-  iconSize: PropTypes__default["default"].oneOf(['default', 'lg']),
+  iconSize: PropTypes.oneOf(['default', 'lg']),
   /**
    * Provide the props that describe the left overflow button
    */
-  leftOverflowButtonProps: PropTypes__default["default"].object,
+  leftOverflowButtonProps: PropTypes.object,
   /**
    * Specify whether to use the light component variant
    */
-  light: deprecate.deprecate(PropTypes__default["default"].bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+  light: deprecate.deprecate(PropTypes.bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
    * Provide the props that describe the right overflow button
    */
-  rightOverflowButtonProps: PropTypes__default["default"].object,
+  rightOverflowButtonProps: PropTypes.object,
   /**
    * Optionally provide a delay (in milliseconds) passed to the lodash
    * debounce of the onScroll handler. This will impact the responsiveness
    * of scroll arrow buttons rendering when scrolling to the first or last tab.
    */
-  scrollDebounceWait: PropTypes__default["default"].number,
+  scrollDebounceWait: PropTypes.number,
   /**
    * Choose whether to automatically scroll
    * to newly selected tabs on component rerender
    */
-  scrollIntoView: PropTypes__default["default"].bool
+  scrollIntoView: PropTypes.bool
 };
 
 /**
@@ -595,13 +587,13 @@ function TabListVertical({
     selectedIndex,
     setSelectedIndex,
     setActiveIndex
-  } = React__default["default"].useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const prefix = usePrefix.usePrefix();
   const ref = React.useRef(null);
   const [isOverflowingBottom, setIsOverflowingBottom] = React.useState(false);
   const [isOverflowingTop, setIsOverflowingTop] = React.useState(false);
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
-  const className = cx__default["default"](`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
+  const className = cx(`${prefix}--tabs`, `${prefix}--tabs--vertical`, `${prefix}--tabs--contained`, customClassName);
   const tabs = React.useRef([]);
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowDown, keys.ArrowUp, keys.Home, keys.End])) {
@@ -681,34 +673,34 @@ function TabListVertical({
     };
   });
   if (isSm) {
-    return /*#__PURE__*/React__default["default"].createElement(TabList, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    return /*#__PURE__*/React.createElement(TabList, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-label": label,
       contained: true
     }), children);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, isOverflowingTop && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isOverflowingTop && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tab--list-gradient_top`
-  }), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }), /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-label": label,
     ref: ref,
     role: "tablist",
     className: `${prefix}--tab--list`,
     onKeyDown: onKeyDown,
     onBlur: handleBlur
-  }), React__default["default"].Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+  }), React.Children.map(children, (child, index) => {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabContext.Provider, {
       value: {
         index,
         hasSecondaryLabel: false
       }
-    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: node => {
         tabs.current[index] = node;
       }
     }));
-  })), isOverflowingBottom && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), isOverflowingBottom && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tab--list-gradient_bottom`
   }));
 }
@@ -717,21 +709,21 @@ TabListVertical.propTypes = {
    * Specify whether the content tab should be activated automatically or
    * manually
    */
-  activation: PropTypes__default["default"].oneOf(['automatic', 'manual']),
+  activation: PropTypes.oneOf(['automatic', 'manual']),
   /**
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes__default["default"].string,
+  'aria-label': PropTypes.string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to the container node
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 
 /**
@@ -797,15 +789,15 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     baseId,
     dismissable,
     onTabCloseRequest
-  } = React__default["default"].useContext(TabsContext);
+  } = React.useContext(TabsContext);
   const {
     index: index$1,
     hasSecondaryLabel,
     contained
-  } = React__default["default"].useContext(TabContext);
+  } = React.useContext(TabContext);
   const {
     badgeIndicator
-  } = React__default["default"].useContext(IconTabContext) || {};
+  } = React.useContext(IconTabContext) || {};
   const dismissIconRef = React.useRef(null);
   const tabRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, tabRef]);
@@ -817,7 +809,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
-  const className = cx__default["default"](`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
+  const className = cx(`${prefix}--tabs__nav-item`, `${prefix}--tabs__nav-link`, {
     [`${prefix}--tabs__nav-item--selected`]: selectedIndex === index$1,
     [`${prefix}--tabs__nav-item--disabled`]: disabled,
     [`${prefix}--tabs__nav-item--hover-off`]: ignoreHover
@@ -838,7 +830,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
   };
   useEvent.useEvent(dismissIconRef, 'mouseover', onDismissIconMouseEnter);
   useEvent.useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     function handler() {
       const elementTabId = document.getElementById(`${id}`) || tabRef.current;
       if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
@@ -881,18 +873,18 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     }
     onKeyDown?.(event);
   };
-  const DismissIcon = /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]({
+  const DismissIcon = /*#__PURE__*/React.createElement("div", {
+    className: cx({
       [`${prefix}--tabs__nav-item--close`]: dismissable,
       [`${prefix}--tabs__nav-item--close--hidden`]: !dismissable
     })
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     tabIndex: selectedIndex === index$1 && dismissable ? 0 : -1,
     "aria-disabled": disabled,
     "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     disabled: disabled,
-    className: cx__default["default"]({
+    className: cx({
       [`${prefix}--tabs__nav-item--close-icon`]: dismissable,
       [`${prefix}--visually-hidden`]: !dismissable,
       [`${prefix}--tabs__nav-item--close-icon--selected`]: selectedIndex === index$1,
@@ -901,7 +893,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     onClick: handleClose,
     title: `Remove ${typeof children === 'string' ? children : ''} tab`,
     ref: dismissIconRef
-  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+  }, /*#__PURE__*/React.createElement(iconsReact.Close, {
     "aria-hidden": selectedIndex === index$1 && dismissable ? 'false' : 'true',
     "aria-label": `Press delete to remove ${typeof children === 'string' ? children : ''} tab`
   })));
@@ -909,14 +901,14 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
 
   // should only happen for vertical variation, so no dismissable icon is needed here
   if (isEllipsisApplied) {
-    return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
       label: children,
       align: "top",
       leaveDelayMs: 0,
       autoAlign: true,
       onMouseEnter: () => false,
       closeOnActivation: true
-    }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    }, /*#__PURE__*/React.createElement(BaseComponent, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-controls": panelId,
       "aria-disabled": disabled,
       "aria-selected": selectedIndex === index$1,
@@ -936,17 +928,17 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
       onKeyDown: handleKeyDown,
       tabIndex: selectedIndex === index$1 ? '0' : '-1',
       type: "button"
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--tabs__nav-item-label-wrapper`
-    }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    }, /*#__PURE__*/React.createElement(Text.Text, {
       className: `${prefix}--tabs__nav-item-label`
-    }, children)), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+    }, children)), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React.createElement(Text.Text, {
       as: "div",
       className: `${prefix}--tabs__nav-item-secondary-label`,
       title: secondaryLabel
     }, secondaryLabel)));
   }
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseComponent, _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-controls": panelId,
     "aria-disabled": disabled,
     "aria-selected": selectedIndex === index$1,
@@ -965,66 +957,66 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab({
     onKeyDown: handleKeyDown,
     tabIndex: selectedIndex === index$1 ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tabs__nav-item-label-wrapper`
-  }, dismissable && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, dismissable && Icon && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--tabs__nav-item--icon-left`
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     size: 16
-  })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  })), /*#__PURE__*/React.createElement(Text.Text, {
     className: `${prefix}--tabs__nav-item-label`
-  }, children), !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"](`${prefix}--tabs__nav-item--icon`, {
+  }, children), !dismissable && Icon && /*#__PURE__*/React.createElement("div", {
+    className: cx(`${prefix}--tabs__nav-item--icon`, {
       [`${prefix}--visually-hidden`]: !hasIcon
     })
-  }, !dismissable && Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, !dismissable && Icon && /*#__PURE__*/React.createElement(Icon, {
     size: 16
-  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }))), hasSecondaryLabel && secondaryLabel && /*#__PURE__*/React.createElement(Text.Text, {
     as: "div",
     className: `${prefix}--tabs__nav-item-secondary-label`,
     title: secondaryLabel
-  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, null)))), DismissIcon);
+  }, secondaryLabel), !disabled && badgeIndicator && (_BadgeIndicator || (_BadgeIndicator = /*#__PURE__*/React.createElement(index.BadgeIndicator, null)))), DismissIcon);
 });
 Tab.propTypes = {
   /**
    * Provide a custom element to render instead of the default button
    */
-  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * Provide child elements to be rendered inside `Tab`.
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to your Tab
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Whether your Tab is disabled.
    */
-  disabled: PropTypes__default["default"].bool,
+  disabled: PropTypes.bool,
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
-  onClick: PropTypes__default["default"].func,
+  onClick: PropTypes.func,
   /**
    * Provide a handler that is invoked on the key down event for the control
    */
-  onKeyDown: PropTypes__default["default"].func,
+  onKeyDown: PropTypes.func,
   /**
    * An optional parameter to allow overriding the anchor rendering.
    * Useful for using Tab along with react-router or other client
    * side router libraries.
    */
-  renderButton: PropTypes__default["default"].func,
+  renderButton: PropTypes.func,
   /**
    * A component used to render an icon.
    */
-  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * An optional label to render under the primary tab label.
    * Only useful for contained tabs.
    */
-  secondaryLabel: PropTypes__default["default"].string
+  secondaryLabel: PropTypes.string
 };
 
 /**
@@ -1032,7 +1024,7 @@ Tab.propTypes = {
  */
 
 const IconTabContext = /*#__PURE__*/React.createContext(false);
-const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab({
+const IconTab = /*#__PURE__*/React.forwardRef(function IconTab({
   badgeIndicator,
   children,
   className: customClassName,
@@ -1047,19 +1039,19 @@ const IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconT
     badgeIndicator
   }), [badgeIndicator]);
   const hasSize20 = /*#__PURE__*/React.isValidElement(children) && children.props.size === 20;
-  const classNames = cx__default["default"](`${prefix}--tabs__nav-item--icon-only`, customClassName, {
+  const classNames = cx(`${prefix}--tabs__nav-item--icon-only`, customClassName, {
     [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20
   });
-  return /*#__PURE__*/React__default["default"].createElement(IconTabContext.Provider, {
+  return /*#__PURE__*/React.createElement(IconTabContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
     className: `${prefix}--icon-tooltip`,
     enterDelayMs: enterDelayMs,
     label: label,
     leaveDelayMs: leaveDelayMs
-  }, /*#__PURE__*/React__default["default"].createElement(Tab, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React.createElement(Tab, _rollupPluginBabelHelpers.extends({
     className: classNames,
     ref: ref
   }, rest), children)));
@@ -1068,23 +1060,23 @@ IconTab.propTypes = {
   /**
    * **Experimental**: Display an empty dot badge on the Tab.
    */
-  badgeIndicator: PropTypes__default["default"].bool,
+  badgeIndicator: PropTypes.bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to your Tab
    */
-  className: PropTypes__default["default"].string,
+  className: PropTypes.string,
   /**
    * Specify whether the tooltip for the icon should be open when it first renders
    */
-  defaultOpen: PropTypes__default["default"].bool,
+  defaultOpen: PropTypes.bool,
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
    */
-  enterDelayMs: PropTypes__default["default"].number,
+  enterDelayMs: PropTypes.number,
   /**
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -1092,18 +1084,18 @@ IconTab.propTypes = {
    * announced to the screen reader. If using the badgeIndicator then provide a
    * label with describing that there is a new notification.
    */
-  label: PropTypes__default["default"].node.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Specify the duration in milliseconds to delay before hiding the tooltip
    */
-  leaveDelayMs: PropTypes__default["default"].number
+  leaveDelayMs: PropTypes.number
 };
 
 /**
  * TabPanel
  */
 
-const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPanel({
+const TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel({
   children,
   className: customClassName,
   ...rest
@@ -1116,11 +1108,11 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
   const {
     selectedIndex,
     baseId
-  } = React__default["default"].useContext(TabsContext);
-  const index = React__default["default"].useContext(TabPanelContext);
+  } = React.useContext(TabsContext);
+  const index = React.useContext(TabPanelContext);
   const id = `${baseId}-tabpanel-${index}`;
   const tabId = `${baseId}-tab-${index}`;
-  const className = cx__default["default"](`${prefix}--tab-content`, customClassName, {
+  const className = cx(`${prefix}--tab-content`, customClassName, {
     [`${prefix}--tab-content--interactive`]: interactiveContent
   });
   React.useEffect(() => {
@@ -1157,7 +1149,7 @@ const TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabP
     });
     return () => observer.disconnect();
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
@@ -1171,11 +1163,11 @@ TabPanel.propTypes = {
   /**
    * Provide child elements to be rendered inside `TabPanel`.
    */
-  children: PropTypes__default["default"].node,
+  children: PropTypes.node,
   /**
    * Specify an optional className to be added to TabPanel.
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 
 /**
@@ -1188,7 +1180,7 @@ function TabPanels({
   const prefix = usePrefix.usePrefix();
   const refs = React.useRef([]);
   const hiddenStates = React.useRef([]);
-  useIsomorphicEffect["default"](() => {
+  useIsomorphicEffect.default(() => {
     const tabContainer = refs.current[0]?.previousElementSibling;
     const isVertical = tabContainer?.classList.contains(`${prefix}--tabs--vertical`);
     const parentHasHeight = tabContainer?.parentElement?.style.height;
@@ -1217,10 +1209,10 @@ function TabPanels({
       });
     }
   });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(children, (child, index) => {
-    return !reactIs.isElement(child) ? null : /*#__PURE__*/React__default["default"].createElement(TabPanelContext.Provider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, (child, index) => {
+    return !reactIs.isElement(child) ? null : /*#__PURE__*/React.createElement(TabPanelContext.Provider, {
       value: index
-    }, /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }, /*#__PURE__*/React.cloneElement(child, {
       ref: element => {
         refs.current[index] = element;
       }
@@ -1231,7 +1223,7 @@ TabPanels.propTypes = {
   /**
    * Provide child elements to be rendered inside `TabPanels`.
    */
-  children: PropTypes__default["default"].node
+  children: PropTypes.node
 };
 
 exports.IconTab = IconTab;