@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Status/Status.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, transformGradient } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
     backgroundColor,
@@ -37,8 +30,8 @@ const selectContainerStyles = _ref => {
     paddingTop
   };
   if (backgroundGradient) {
-    if (_Platform.default.OS === 'web') {
-      styles.background = (0, _utils.transformGradient)(backgroundGradient);
+    if (Platform.OS === 'web') {
+      styles.background = transformGradient(backgroundGradient);
     } else {
       const {
         stops: [stopOne, stopTwo]
@@ -83,12 +76,12 @@ const selectTextStyles = _ref3 => {
     fontWeight,
     marginLeft
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     fontColor: textColor,
     fontName,
     fontSize,
     fontWeight,
-    lineHeight: _Platform.default.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
+    lineHeight: Platform.OS === 'web' ? textLineHeight : textLineHeight * 1.2,
     marginLeft
   });
 };
@@ -106,7 +99,7 @@ const selectTextStyles = _ref3 => {
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
  */
-const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     tokens,
     variant,
@@ -114,7 +107,7 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     customGradient,
     ...rest
   } = _ref4;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Status', tokens, variant);
+  const themeTokens = useThemeTokens('Status', tokens, variant);
   const {
     icon
   } = themeTokens;
@@ -122,17 +115,17 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     ...selectContainerStyles(themeTokens),
     ...staticStyles.container
   };
-  let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  let content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon ? /*#__PURE__*/_jsx(Icon, {
       ...selectIconProps(themeTokens)
-    }) : null, (0, _utils.wrapStringsInText)(children, {
+    }) : null, wrapStringsInText(children, {
       style: selectTextStyles(themeTokens)
     })]
   });
   if (typeof customGradient === 'function') {
     content = customGradient(containerStyles.gradient, containerStyles, content);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: containerStyles,
     ...selectProps(rest),
@@ -142,22 +135,22 @@ const Status = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
 Status.displayName = 'Status';
 Status.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Status'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('Status'),
+  variant: variantProp.propType,
   /**
    * The content to be displayed inside the status component.
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * The custom gradient function for the status component.
    */
-  customGradient: _propTypes.default.func
+  customGradient: PropTypes.func
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         display: 'inline-flex',
         width: 'fit-content'
@@ -169,5 +162,4 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-var _default = Status;
-exports.default = _default;
+export default Status;

package/lib/Status/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Status = _interopRequireDefault(require("./Status"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Status.default;
-exports.default = _default;
+import Status from './Status';
+export default Status;

package/lib/StepTracker/Step.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StackView from '../StackView';
+import Icon from '../Icon';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { applyTextStyles, useTheme } from '../ThemeProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectCompletedIconTokens = _ref => {
   let {
     completedIconColor,
@@ -120,7 +113,7 @@ const selectStepLabelStyles = (_ref6, themeOptions, isCurrent) => {
     stepLabelFontName,
     stepLabelLineHeight
   } = _ref6;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     color: isCurrent ? labelCurrentColor : stepLabelColor,
     fontSize: stepLabelFontSize,
     lineHeight: stepLabelLineHeight,
@@ -139,7 +132,7 @@ const selectLabelStyles = (_ref7, themeOptions, isCurrent) => {
     labelFontName,
     labelLineHeight
   } = _ref7;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     color: isCurrent ? labelCurrentColor : labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
@@ -161,7 +154,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     label,
     name,
@@ -185,8 +178,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, {
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(StackView, {
     space: 0,
     tokens: {
       alignItems: 'stretch',
@@ -197,7 +190,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     accessibilityCurrent: status === stepIndex,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: [/*#__PURE__*/_jsxs(StackView, {
       direction: "row",
       space: 0,
       tokens: {
@@ -205,28 +198,28 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         flexGrow: 0,
         justifyContent: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
-        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
           style: selectCurrentInnerStyles(themeTokens)
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
       })]
-    }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
-      children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      children: [showStepName && /*#__PURE__*/_jsx(Text, {
         style: [staticStyles.centeredText, selectStepLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: /*#__PURE__*/_jsx(Text, {
           style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, themeOptions, isCurrent)],
           children: label
         })
@@ -237,17 +230,16 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
 Step.displayName = 'Step';
 Step.propTypes = {
   ...selectedSystemPropTypes,
-  label: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  status: _propTypes.default.number.isRequired,
-  stepCount: _propTypes.default.number.isRequired,
-  stepIndex: _propTypes.default.number.isRequired,
-  tokens: (0, _utils.getTokensPropType)('StepTracker'),
-  variant: _utils.variantProp.propType
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  status: PropTypes.number.isRequired,
+  stepCount: PropTypes.number.isRequired,
+  stepIndex: PropTypes.number.isRequired,
+  tokens: getTokensPropType('StepTracker'),
+  variant: variantProp.propType
 };
-var _default = Step;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Step;
+const staticStyles = StyleSheet.create({
   centeredText: {
     textAlign: 'center'
   },

package/lib/StepTracker/StepTracker.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StackView from '../StackView';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import useCopy from '../utils/useCopy';
+import Step from './Step';
+import defaultDictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerPaddingBottom,
@@ -49,7 +42,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     labelFontName,
     labelLineHeight
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     color: labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
@@ -91,27 +84,27 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     current = 0,
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     steps = [],
     tokens,
     variant,
     ...rest
   } = _ref4;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const {
     showStepTrackerLabel,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('StepTracker', tokens, variant, {
+  } = useThemeTokens('StepTracker', tokens, variant, {
     viewport
   });
   const {
     textStepTrackerLabel
   } = themeTokens;
-  const getCopy = (0, _useCopy.default)({
+  const getCopy = useCopy({
     dictionary,
     copy
   });
@@ -125,7 +118,7 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = useTheme();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -139,16 +132,16 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     },
     ...rest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: selectContainerStyles(themeTokens),
     ...selectedProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: staticStyles.stepsContainer,
         children: steps.map((label, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+          return /*#__PURE__*/_jsx(Step, {
             status: current,
             label: label,
             name: getStepLabel(index),
@@ -157,9 +150,9 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             tokens: themeTokens
           }, label);
         })
-      }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: /*#__PURE__*/_jsx(Text, {
           style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
           children: stepTrackerLabel
         })
@@ -170,37 +163,36 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
 StepTracker.displayName = 'StepTracker';
 
 // If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = _propTypes.default.shape({
-  stepLabel: _propTypes.default.string.isRequired,
-  stepTrackerLabel: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
 });
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The current step, 0-based number
    */
-  current: _propTypes.default.number,
+  current: PropTypes.number,
   /**
    * The language to use for the labels
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), dictionaryContentShape]),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   /**
    * Custom dictionary containing the labels to use for the steps
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
   /**
    * An array of strings defining the step titles
    */
-  steps: _propTypes.default.arrayOf(_propTypes.default.string),
-  tokens: (0, _utils.getTokensPropType)('StepTracker'),
-  variant: _utils.variantProp.propType
+  steps: PropTypes.arrayOf(PropTypes.string),
+  tokens: getTokensPropType('StepTracker'),
+  variant: variantProp.propType
 };
-var _default = StepTracker;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default StepTracker;
+const staticStyles = StyleSheet.create({
   stepsContainer: {
     alignItems: 'flex-start',
     flexDirection: 'row',

package/lib/StepTracker/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     1: {
       stepLabel: 'Step %{stepNumber}',
@@ -33,5 +27,4 @@ var _default = {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     }
   }
-};
-exports.default = _default;
+};

package/lib/StepTracker/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _StepTracker = _interopRequireDefault(require("./StepTracker"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _StepTracker.default;
-exports.default = _default;
+import StepTracker from './StepTracker';
+export default StepTracker;

package/lib/TabBar/TabBar.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import TabBarItem from './TabBarItem';
+import { useThemeTokens } from '../ThemeProvider';
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectTabBarContainerStyles = _ref => {
   let {
     paddingTop,
@@ -41,7 +34,7 @@ const selectTabBarItemContainerStyles = _ref2 => {
     gap
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * TabBar component renders a navigation bar with multiple TabBarItems.
@@ -62,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * )
  */
 
-const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     items = [],
     initiallySelectedItem = '0',
@@ -71,19 +64,19 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tokens,
     ...rest
   } = _ref3;
-  const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TabBar', tokens, variant);
+  const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
+  const themeTokens = useThemeTokens('TabBar', tokens, variant);
   const handlePress = itemId => {
     setIsSelected(itemId);
-    onChange === null || onChange === void 0 ? void 0 : onChange(itemId);
+    onChange === null || onChange === void 0 || onChange(itemId);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.tabBar, selectTabBarContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: /*#__PURE__*/_jsx(View, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
-      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
+      children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
         label: item.label,
         href: item.href,
         isSelected: isSelected === item.id,
@@ -100,23 +93,23 @@ TabBar.displayName = 'TabBar';
 TabBar.propTypes = {
   ...selectedSystemPropTypes,
   /** Array of TabBarItems to be displayed in TabBar */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    icon: _propTypes.default.node,
-    iconActive: _propTypes.default.node,
-    label: _propTypes.default.string.isRequired,
-    href: _propTypes.default.string
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    icon: PropTypes.node,
+    iconActive: PropTypes.node,
+    label: PropTypes.string.isRequired,
+    href: PropTypes.string
   })).isRequired,
   /** Id of the initially selected item. */
-  initiallySelectedItem: _propTypes.default.number,
+  initiallySelectedItem: PropTypes.number,
   /** Callback function to handle item selection change. */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /** Variant of TabBar for styling purposes. */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: (0, _utils.getTokensPropType)('TabBar')
+  tokens: getTokensPropType('TabBar')
 };
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   tabBar: {
     flex: 1,
     justifyContent: 'center',
@@ -129,5 +122,4 @@ const styles = _StyleSheet.default.create({
     width: '100%'
   }
 });
-var _default = TabBar;
-exports.default = _default;
+export default TabBar;