@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/StepTracker/Step.js

@@ -3,19 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Step = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
+var _StackView = require("../StackView/StackView");
+var _Icon = require("../Icon/Icon");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectCompletedIconTokens = _ref => {
   let {
     completedIconColor,
@@ -120,7 +125,7 @@ const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
     stepLabelFontName,
     stepLabelLineHeight
   } = _ref6;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color: isCurrent ? labelCurrentColor : stepLabelColor,
     fontSize: stepLabelFontSize,
     lineHeight: stepLabelLineHeight,
@@ -139,7 +144,7 @@ const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
     labelFontName,
     labelLineHeight
   } = _ref7;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
@@ -168,7 +173,7 @@ const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
 /**
  * A single step of a StepTracker.
  */
-const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const Step = exports.Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     label,
     name,
@@ -193,8 +198,8 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   const isActive = isCompleted || isCurrent;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+  } = (0, _useTheme.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
     space: 0,
     tokens: {
       alignItems: 'stretch',
@@ -208,7 +213,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     children: [isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectBarContainerStyles(themeTokens, isCompleted, isCurrent),
       testID: getStepTestID(isCompleted, isCurrent)
-    }), !isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    }), !isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       direction: "row",
       space: 0,
       tokens: {
@@ -221,7 +226,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
         }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -235,7 +240,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
       children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         direction: "row",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, themeOptions, isCurrent)],
@@ -253,10 +258,9 @@ Step.propTypes = {
   status: _propTypes.default.number.isRequired,
   stepCount: _propTypes.default.number.isRequired,
   stepIndex: _propTypes.default.number.isRequired,
-  tokens: (0, _utils.getTokensPropType)('StepTracker'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('StepTracker'),
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = Step;
 const staticStyles = _StyleSheet.default.create({
   centeredText: {
     textAlign: 'center'

package/lib/cjs/StepTracker/StepTracker.js

@@ -3,24 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StepTracker = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-var _Step = _interopRequireDefault(require("./Step"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _StackView = require("../StackView/StackView");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useCopy = require("../utils/useCopy");
+var _Step = require("./Step");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const STYLE_BAR_VARIANT = 'bar';
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerPaddingBottom,
@@ -51,7 +57,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     labelFontName,
     labelLineHeight
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color: labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
@@ -101,28 +107,28 @@ const selectStepsContainerStyles = _ref4 => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const StepTracker = exports.StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     steps = [],
     tokens,
     variant,
     ...rest
   } = _ref5;
   const isBarVariant = variant?.style === STYLE_BAR_VARIANT;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     showStepTrackerLabel,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('StepTracker', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('StepTracker', tokens, variant, {
     viewport
   });
   const {
     textStepTrackerLabel
   } = themeTokens;
-  const getCopy = (0, _useCopy.default)({
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
@@ -135,7 +141,7 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -154,13 +160,13 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     ref: ref,
     style: selectContainerStyles(themeTokens),
     ...selectedProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)],
         accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.Step, {
             status: current,
             label: label,
             name: getStepLabel(index),
@@ -212,10 +218,9 @@ StepTracker.propTypes = {
    * An array of strings defining the step titles
    */
   steps: _propTypes.default.arrayOf(_propTypes.default.string),
-  tokens: (0, _utils.getTokensPropType)('StepTracker'),
-  variant: _utils.variantProp.propType
+  tokens: (0, _tokens.getTokensPropType)('StepTracker'),
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = StepTracker;
 const staticStyles = _StyleSheet.default.create({
   stepsContainer: {
     alignItems: 'flex-start',

package/lib/cjs/StepTracker/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     1: {
       stepLabel: 'Step %{stepNumber}',

package/lib/cjs/TabBar/TabBar.js

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TabBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _TabBarItem = require("./TabBarItem");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectTabBarContainerStyles = _ref => {
@@ -41,7 +45,7 @@ const selectTabBarItemContainerStyles = _ref2 => {
     gap
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * TabBar component renders a navigation bar with multiple TabBarItems.
@@ -58,21 +62,23 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
-const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const TabBar = exports.TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     items = [],
     initiallySelectedItem = '0',
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TabBar', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('TabBar', tokens, variant);
   const handlePress = itemId => {
     setIsSelected(itemId);
     onChange?.(itemId);
@@ -83,7 +89,9 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
-      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
+      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.TabBarItem, {
         label: item.label,
         href: item.href,
         isSelected: isSelected === item.id,
@@ -91,7 +99,6 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -107,16 +114,18 @@ TabBar.propTypes = {
     iconActive: _propTypes.default.node,
     label: _propTypes.default.string.isRequired,
     href: _propTypes.default.string,
-    tokens: (0, _utils.getTokensPropType)('TabBarItem')
+    tokens: (0, _tokens.getTokensPropType)('TabBarItem')
   })).isRequired,
   /** Id of the initially selected item. */
   initiallySelectedItem: _propTypes.default.number,
   /** Callback function to handle item selection change. */
   onChange: _propTypes.default.func,
   /** Variant of TabBar for styling purposes. */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: (0, _utils.getTokensPropType)('TabBar')
+  tokens: (0, _tokens.getTokensPropType)('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: _propTypes.default.string
 };
 const styles = _StyleSheet.default.create({
   tabBar: {
@@ -130,5 +139,4 @@ const styles = _StyleSheet.default.create({
     justifyContent: 'space-between',
     width: '100%'
   }
-});
-var _default = exports.default = TabBar;
+});

package/lib/cjs/TabBar/TabBarItem.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.TabBarItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
+var _tokens = require("../utils/props/tokens");
+var _pressability = require("../utils/pressability");
+var _variantProp = require("../utils/props/variantProp");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Typography = require("../Typography/Typography");
+var _Spacer = require("../Spacer/Spacer");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectTypographyStyles = (_ref, isSelected) => {
@@ -64,7 +66,7 @@ const selectContainerStyles = _ref4 => {
     alignItems: 'center'
   };
 };
-const TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const TabBarItem = exports.TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     href,
     variant,
@@ -77,14 +79,14 @@ const TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     iconActive: IconActiveComponent,
     accessibilityRole = 'tab'
   } = _ref5;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabBarItem', tokens, variant);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('TabBarItem', tokens, variant);
   const getPressableStyle = _ref6 => {
     let {
       pressed,
       focused,
       hovered
     } = _ref6;
-    const resolvedTokens = (0, _utils.resolvePressableTokens)(getTokens, {
+    const resolvedTokens = (0, _pressability.resolvePressableTokens)(getTokens, {
       pressed,
       focused,
       hovered
@@ -126,16 +128,16 @@ const TabBarItem = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           }) : IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
             ...selectIconStyles(resolvedTokens)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
           space: 1
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           variant: {
             size: 'micro'
           },
           tokens: selectTypographyStyles(resolvedTokens, isSelected),
           align: "center",
           children: label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
           space: 1
         })]
       });
@@ -149,9 +151,9 @@ TabBarItem.propTypes = {
   /** The icon to be displayed when the item is selected. */
   iconActive: _propTypes.default.elementType,
   /** Tokens for theming and styling the TabBarItem. */
-  tokens: (0, _utils.getTokensPropType)('TabBarItem'),
+  tokens: (0, _tokens.getTokensPropType)('TabBarItem'),
   /** Variant of the TabBarItem for styling purposes. */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /** Callback function to handle press events. */
   onPress: _propTypes.default.func,
   /** URL to navigate to when the item is pressed. */
@@ -178,5 +180,4 @@ const styles = _StyleSheet.default.create({
     minHeight: 40,
     aspectRatio: 1.1
   }
-});
-var _default = exports.default = TabBarItem;
+});

package/lib/cjs/Tabs/Tabs.js

@@ -3,23 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Tabs = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _utils = require("../utils");
-var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
-var _TabsItem = _interopRequireDefault(require("./TabsItem"));
-var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _StackView = require("../StackView/StackView");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _handlerProps = require("../utils/props/handlerProps");
+var _pressProps = require("../utils/props/pressProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useHash = require("../utils/useHash");
+var _input = require("../utils/input");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
+var _HorizontalScrollButton = require("../HorizontalScroll/HorizontalScrollButton");
+var _TabsItem = require("./TabsItem");
+var _TabsDropdown = require("./TabsDropdown");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _pressProps.pressProps, _viewProps.viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -59,7 +67,7 @@ const getStackViewTokens = variant => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Tabs = exports.Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     itemTokens,
@@ -76,17 +84,17 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     space,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Tabs', tokens, variant);
+  } = (0, _useThemeTokens.useThemeTokens)('Tabs', tokens, variant);
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange
   });
   const [itemPositions, isPositioningReady] = useItemPositions();
-  (0, _utils.useHash)(_react.default.useCallback((hash, event) => {
+  (0, _useHash.useHash)(_react.default.useCallback((hash, event) => {
     const hashItem = hash && items.find(_ref2 => {
       let {
         href
@@ -102,7 +110,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const stackViewTokens = getStackViewTokens(variant);
 
   // Render dropdown only if explicitly requested via variant AND viewport is xs or sm
-  const isSmallViewport = (0, _utils.useResponsiveProp)({
+  const isSmallViewport = (0, _useResponsiveProp.useResponsiveProp)({
     xs: true,
     sm: true,
     md: false,
@@ -111,7 +119,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, false);
   const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport;
   if (shouldRenderDropdown) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsDropdown.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsDropdown.TabsDropdown, {
       ref: ref,
       tokens: tokens,
       itemTokens: itemTokens,
@@ -125,15 +133,15 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...restProps
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.HorizontalScroll, {
     ref: ref,
-    ScrollButton: _HorizontalScroll.HorizontalScrollButton,
+    ScrollButton: _HorizontalScrollButton.HorizontalScrollButton,
     itemPositions: itemPositions,
     tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
     accessibilityRole: parentAccessibilityRole,
     ...restProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
       space: space,
       direction: "row",
       tokens: stackViewTokens,
@@ -157,7 +165,7 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           setValue(itemId, event);
         };
         const itemProps = selectItemProps(itemRest);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.TabsItem, {
           ref: itemRef,
           id: itemId,
           href: href,
@@ -184,17 +192,19 @@ const Tabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
+  ..._withLinkRouter.withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     ...selectedItemPropTypes,
-    ..._utils.withLinkRouter.propTypes,
+    ..._withLinkRouter.withLinkRouter.propTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
-    ref: _airbnbPropTypes.default.ref(),
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.any
+    })]),
     render: _propTypes.default.func
   })),
   /**
@@ -206,15 +216,14 @@ Tabs.propTypes = {
    * Callback for when the selected tab changes
    */
   onChange: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('Tabs'),
+  tokens: (0, _tokens.getTokensPropType)('Tabs'),
   /**
    * Custom tokens for `TabsItem`
    */
-  itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
+  itemTokens: (0, _tokens.getTokensPropType)('TabsItem'),
   /**
    * Custom tokens for `HorizontalScrollButton`
    */
-  scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = Tabs;
+  scrollButtonTokens: (0, _tokens.getTokensPropType)('HorizontalScrollButton'),
+  variant: _variantProp.variantProp.propType
+};