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

package/CHANGELOG.md

@@ -1,9 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 13 Mar 2026 20:33:41 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Mar 2026 02:26:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.0.0-alpha.0
+
+Fri, 20 Mar 2026 02:26:39 GMT
+
+### Major changes
+
+- Upgrade to React 19 and other major changes, please refer to the changelog for more details (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v4.0.0-alpha.0
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.0
+
+### Patches
+
+- `Modal`: Fix onPress error when backgroundDismissible is false (david.melara1@telus.com)
+- `ExpandCollapse`: columnwrap example fixed in mobile (josue.higueroscalderon@telus.com)
+
 ## 3.29.0
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/babel.config.cjs

@@ -2,7 +2,7 @@ module.exports = (api) => {
   // configuration for jest
   if (api.env('test')) {
     return {
-      presets: ['module:metro-react-native-babel-preset']
+      presets: ['module:@react-native/babel-preset']
     }
   }
 

package/lib/cjs/A11yInfoProvider/{index.js → A11yInfoProvider.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useA11yInfo = exports.default = void 0;
+exports.useA11yInfo = exports.A11yInfoProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
@@ -14,7 +14,7 @@ const ScreenReaderContext = /*#__PURE__*/_react.default.createContext(false);
 const ReducedMotionContext = /*#__PURE__*/_react.default.createContext(false);
 
 // eslint-disable-next-line no-unused-vars
-const A11yInfoProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
+const A11yInfoProvider = exports.A11yInfoProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
   let {
     children
   } = _ref;
@@ -61,7 +61,6 @@ A11yInfoProvider.displayName = 'A11yInfoProvider';
 A11yInfoProvider.propTypes = {
   children: _propTypes.default.node.isRequired
 };
-var _default = exports.default = A11yInfoProvider;
 const useA11yInfo = () => {
   const screenReaderEnabled = _react.default.useContext(ScreenReaderContext);
   const reduceMotionEnabled = _react.default.useContext(ReducedMotionContext);

package/lib/cjs/A11yText/{index.js → A11yText.js}

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.A11yText = 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 _props = require("../utils/props");
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
@@ -20,7 +22,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const A11yText = exports.A11yText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     text,
     heading,
@@ -71,5 +73,4 @@ const styles = _StyleSheet.default.create({
     // Ensures it is in the correct position on Native
     top: -1
   }
-});
-var _default = exports.default = A11yText;
+});

package/lib/cjs/ActionCard/ActionCard.js

@@ -3,20 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ActionCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Card = _interopRequireDefault(require("../Card"));
+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 _children = require("../utils/children");
+var _clickProps = require("../utils/props/clickProps");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Icon = require("../Icon/Icon");
+var _Card = require("../Card/Card");
 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.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps, _viewProps.viewProps]);
 const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
   if (styles[key]) acc[key] = styles[key];
   return acc;
@@ -93,7 +102,7 @@ const selectTitleTextStyles = _ref5 => {
     titleFontWeight,
     titleLineHeight
   } = _ref5;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontColor: titleFontColor,
     fontName: titleFontName,
     fontSize: titleFontSize,
@@ -123,7 +132,7 @@ const selectContentTextStyles = _ref7 => {
     contentFontWeight,
     contentLineHeight
   } = _ref7;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontColor: contentFontColor,
     fontName: contentFontName,
     fontSize: contentFontSize,
@@ -160,11 +169,11 @@ const selectActionIconStyles = _ref9 => {
     marginTop: actionIconMarginTop
   };
 };
-const selectActionIconProps = _ref10 => {
+const selectActionIconProps = _ref0 => {
   let {
     actionIcon,
     actionIconColor
-  } = _ref10;
+  } = _ref0;
   return {
     icon: actionIcon,
     tokens: {
@@ -193,7 +202,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100;
  *   </ActionCard>
  * )
  */
-const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+const ActionCard = exports.ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref1, ref) => {
   let {
     icon,
     title,
@@ -204,28 +213,28 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref11;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ActionCard', tokens, variant);
+  } = _ref1;
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ActionCard', tokens, variant);
   const actionIconAnimation = _react.default.useRef(new _Animated.default.Value(0)).current;
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = _clickProps.clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rawRest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: _linkProps.linkProps.handleHref({
       href,
       onPress
     }),
     hrefAttrs,
     ...rawRest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
     ref: ref,
     interactiveCard: {
       body: pressableState => {
@@ -239,7 +248,7 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
           style: staticStyles.container,
           children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: selectIconStyles(themeTokens),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               ...selectIconProps({
                 icon,
                 ...themeTokens
@@ -252,11 +261,11 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
                 style: [selectTitleStyles(themeTokens), staticStyles.title],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
-                  children: [(0, _utils.wrapStringsInText)(title, {
+                  children: [(0, _children.wrapStringsInText)(title, {
                     style: selectTitleTextStyles(themeTokens)
                   }), themeTokens.statusIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
                     style: staticStyles.statusIcon,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                       ...selectStatusIconProps(themeTokens)
                     })
                   })]
@@ -269,14 +278,14 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
                       translateX: actionIconAnimation
                     }]
                   }],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
                     ...selectActionIconProps(themeTokens)
                   })
                 })
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
               style: [staticStyles.body, selectContentStyles(themeTokens)],
-              children: typeof children === 'string' ? (0, _utils.wrapStringsInText)(children, {
+              children: typeof children === 'string' ? (0, _children.wrapStringsInText)(children, {
                 style: selectContentTextStyles(themeTokens)
               }) : children
             })]
@@ -292,8 +301,8 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
 ActionCard.displayName = 'ActionCard';
 ActionCard.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ActionCard'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ActionCard'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Icon for the ActionCard
    */
@@ -345,5 +354,4 @@ const staticStyles = _StyleSheet.default.create({
   statusIcon: {
     marginLeft: 4
   }
-});
-var _default = exports.default = ActionCard;
+});

package/lib/cjs/ActivityIndicator/{index.js → ActivityIndicator.js}

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ActivityIndicator = 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 _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _props = require("../utils/props");
-var _FullScreenIndicator = _interopRequireDefault(require("./FullScreenIndicator"));
-var _OverlayIndicator = _interopRequireDefault(require("./OverlayIndicator"));
-var _InlineIndicator = _interopRequireDefault(require("./InlineIndicator"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useScrollBlocking = require("../utils/useScrollBlocking");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _FullScreenIndicator = require("./FullScreenIndicator");
+var _OverlayIndicator = require("./OverlayIndicator");
+var _InlineIndicator = require("./InlineIndicator");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const labelMapping = {
@@ -26,7 +27,7 @@ const labelMapping = {
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ActivityIndicator = exports.ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
     tokens,
@@ -47,8 +48,8 @@ const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     indicatorBackgroundColor,
     fullScreenOverlayBackground,
     thickness
-  } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
-  (0, _utils.useScrollBlocking)([_Platform.default.OS === 'web' && fullScreen]);
+  } = (0, _useThemeTokens.useThemeTokens)('ActivityIndicator', tokens, variant);
+  (0, _useScrollBlocking.useScrollBlocking)([_Platform.default.OS === 'web' && fullScreen]);
   const variantProps = {
     variant,
     dotSize,
@@ -69,27 +70,27 @@ const ActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   };
   switch (true) {
     case fullScreen:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullScreenIndicator.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullScreenIndicator.FullScreenIndicator, {
         ...commonProps,
         backgroundColor: fullScreenBackgroundColor || fullScreenOverlayBackground
       });
     case overlay:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayIndicator.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayIndicator.OverlayIndicator, {
         ...commonProps,
         inline: inline,
         isActive: overlay,
         children: children
       });
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineIndicator.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineIndicator.InlineIndicator, {
         ...commonProps
       });
   }
 });
 ActivityIndicator.displayName = 'ActivityIndicator';
 ActivityIndicator.propTypes = {
-  variant: _props.variantProp.propType,
-  tokens: (0, _props.getTokensPropType)('ActivityIndicator'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ActivityIndicator'),
   /**
    * A visually hidden accessible label describing the action taking place
    */
@@ -126,5 +127,4 @@ ActivityIndicator.propTypes = {
    * Background color of the full screen overlay
    */
   fullScreenBackgroundColor: _propTypes.default.string
-};
-var _default = exports.default = ActivityIndicator;
+};

package/lib/cjs/ActivityIndicator/Dots.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Dots = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _shared = require("./shared");
-var _A11yInfoProvider = require("../A11yInfoProvider");
+var _A11yInfoProvider = require("../A11yInfoProvider/A11yInfoProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CY_PROPS = {
@@ -27,7 +27,7 @@ const OPACITY_PROPS = {
   dur: `${_shared.DOTS_TOTAL_ANIMATION_DURATION}ms`,
   repeatCount: 'indefinite'
 };
-const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Dots = exports.Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -161,5 +161,4 @@ const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Dots.displayName = 'Dots';
-Dots.propTypes = _shared.propTypes;
-var _default = exports.default = Dots;
+Dots.propTypes = _shared.propTypes;

package/lib/cjs/ActivityIndicator/Dots.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Dots = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -11,13 +11,12 @@ var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _shared = require("./shared");
-var _A11yInfoProvider = require("../A11yInfoProvider");
+var _A11yInfoProvider = require("../A11yInfoProvider/A11yInfoProvider");
 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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AnimatedCircle = _Animated.default.createAnimatedComponent(_reactNativeSvg.Circle);
-const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Dots = exports.Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -217,5 +216,4 @@ const styles = _StyleSheet.default.create({
     alignItems: 'center',
     justifyContent: 'center'
   }
-});
-var _default = exports.default = Dots;
+});

package/lib/cjs/ActivityIndicator/FullScreenIndicator.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FullScreenIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _StackView = require("../StackView/StackView");
+var _Typography = require("../Typography/Typography");
+var _RenderActivityIndicator = require("./RenderActivityIndicator");
 var _shared = require("./shared");
 var _sharedProptypes = require("./sharedProptypes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FullScreenIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FullScreenIndicator = exports.FullScreenIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -29,17 +29,17 @@ const FullScreenIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
     style: [staticStyles.fullScreenOverlay, {
       backgroundColor
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
       tokens: {
         alignItems: 'center'
       },
       direction: labelMapping[labelPosition],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.RenderActivityIndicator, {
         ...variantProps,
         ref: ref,
         label: label
-      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
         children: label
       })]
     })
@@ -85,5 +85,4 @@ FullScreenIndicator.propTypes = {
    * Background color for overlay
    * */
   backgroundColor: _propTypes.default.string.isRequired
-};
-var _default = exports.default = FullScreenIndicator;
+};

package/lib/cjs/ActivityIndicator/InlineIndicator.js

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.InlineIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _StackView = require("../StackView/StackView");
+var _Typography = require("../Typography/Typography");
+var _RenderActivityIndicator = require("./RenderActivityIndicator");
 var _sharedProptypes = require("./sharedProptypes");
 var _shared = require("./shared");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const InlineIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const InlineIndicator = exports.InlineIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -26,17 +26,17 @@ const InlineIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
       direction: labelMapping[labelPosition],
       tokens: {
         alignItems: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.RenderActivityIndicator, {
         ...variantProps,
         ref: ref,
         label: label
-      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
         children: label
       })]
     })
@@ -60,5 +60,4 @@ InlineIndicator.propTypes = {
    * Whether the indicator sits inline with text/other elements
    * */
   inline: _propTypes.default.bool
-};
-var _default = exports.default = InlineIndicator;
+};

package/lib/cjs/ActivityIndicator/OverlayIndicator.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OverlayIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _RenderActivityIndicator = _interopRequireDefault(require("./RenderActivityIndicator"));
+var _StackView = require("../StackView/StackView");
+var _Typography = require("../Typography/Typography");
+var _RenderActivityIndicator = require("./RenderActivityIndicator");
 var _shared = require("./shared");
 var _sharedProptypes = require("./sharedProptypes");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +25,7 @@ const recursiveMap = (nodeChildren, fn) => _react.default.Children.map(nodeChild
   }
   return fn(child);
 });
-const OverlayIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OverlayIndicator = exports.OverlayIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variantProps,
     label,
@@ -49,7 +49,7 @@ const OverlayIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         children: safeChildren
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: staticStyles.buttonOverlaySpinner,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.RenderActivityIndicator, {
           ...variantProps,
           ref: ref,
           label: label
@@ -66,17 +66,17 @@ const OverlayIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       children: safeChildren
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.overlayContainer, _Platform.default.OS === 'web' && staticStyles.webOverlayContainer],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
         space: showLabel ? _shared.SPACE_WITH_LABEL : _shared.SPACE_WITHOUT_LABEL,
         tokens: {
           alignItems: 'center'
         },
         direction: labelMapping[labelPosition],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderActivityIndicator.RenderActivityIndicator, {
           ...variantProps,
           ref: ref,
           label: label
-        }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        }), showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           children: label
         })]
       })
@@ -152,5 +152,4 @@ OverlayIndicator.propTypes = {
    * Controls whether the overlay is active and should apply the presentation role
    * */
   isActive: _propTypes.default.bool
-};
-var _default = exports.default = OverlayIndicator;
+};

package/lib/cjs/ActivityIndicator/RenderActivityIndicator.js

@@ -3,18 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.RenderActivityIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-var _Dots = _interopRequireDefault(require("./Dots"));
+var _Spinner = require("./Spinner");
+var _Dots = require("./Dots");
 var _shared = require("./shared");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Return <Dots/> or <Spinner/> based on `variant?.dots`.
  * Reused in all the variants of the component.
- */const RenderActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const RenderActivityIndicator = exports.RenderActivityIndicator = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant = {},
     dotSize,
@@ -30,14 +31,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     style
   } = variant || {};
   const isDots = dots === true || style === _shared.DOTS_STYLE;
-  return isDots ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots.default, {
+  return isDots ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots.Dots, {
     ref: ref,
     size: dotSize,
     color: color,
     indicatorBackgroundColor: indicatorBackgroundColor,
     label: label,
     isStatic: isStatic
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
     ref: ref,
     size: size,
     color: color,
@@ -84,5 +85,4 @@ RenderActivityIndicator.propTypes = {
    * if true, there's no animation for ActivityIndicator
    * */
   isStatic: _propTypes.default.bool
-};
-var _default = exports.default = RenderActivityIndicator;
+};