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

package/lib/esm/utils/props/responsiveProps.js

@@ -21,7 +21,7 @@ const getByViewport = propType => ({
  * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
  *   either the provided proptype on its own, or the output of getTypeByViewport
  */
-export default {
+export const responsiveProps = {
   getByViewport,
   getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),
   getTypeOptionallyByViewport: propType => PropTypes.oneOfType([propType, PropTypes.shape(getByViewport(propType))])

package/lib/esm/utils/props/selectSystemProps.js

@@ -1,6 +1,6 @@
 // Returns a selector for requested prop kinds as well as the propTypes for
 // those props merged into one object
-export default function selectSystemProps(systemPropHelpers) {
+export function selectSystemProps(systemPropHelpers) {
   const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
     if (typeof propHelper?.select !== 'function') {
       throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);

package/lib/esm/utils/props/spacingProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import responsiveProps from './responsiveProps';
-import variantProp from './variantProp';
+import { responsiveProps } from './responsiveProps';
+import { variantProp } from './variantProp';
 
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
@@ -46,7 +46,7 @@ const spacingObjectPropType = PropTypes.shape({
  *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
  *   viewports or `space` to apply at all viewports.
  */
-export default {
+export const spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,

package/lib/esm/utils/props/textInputProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
@@ -164,7 +164,7 @@ const nativeOnly = {
   textBreakStrategy: PropTypes.string,
   underlineColorAndroid: PropTypes.string
 };
-export default {
+export const textInputProps = {
   /**
    * Subset of proptypes that can be passed down to a React Native or React Native Web
    * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.

package/lib/esm/utils/props/textProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 
 // These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
@@ -37,7 +37,7 @@ const webOnly = {
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
   lang: PropTypes.string
 };
-export default {
+export const textProps = {
   /**
    * Set of prop types specific to React Native and React Native Web `Text`,
    * which largely revolve around the behaviour of multiline non-pressable text.

package/lib/esm/utils/props/variantProp.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-export default {
+export const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *

package/lib/esm/utils/props/viewProps.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import getPropSelector from './getPropSelector';
+import { getPropSelector } from './getPropSelector';
 const viewPropTypes = {
   pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: PropTypes.func,
@@ -7,7 +7,7 @@ const viewPropTypes = {
   testID: PropTypes.string,
   dataSet: PropTypes.object
 };
-export default {
+export const viewProps = {
   /**
    * Subset of `View` proptypes that could conceivably be needed on any component
    * that renders a single View.

package/lib/esm/utils/resolveContentMaxWidth.js

@@ -9,7 +9,7 @@ const CONTENT_FULL_WIDTH = 'full';
  * @param {number} responsiveWidth - The responsive width to use when contentMaxWidthValue is CONTENT_MAX_WIDTH.
  * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
  */
-const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+export const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
   if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
     return null;
   }
@@ -20,5 +20,4 @@ const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
     return responsiveWidth;
   }
   return contentMaxWidthValue;
-};
-export default resolveContentMaxWidth;
+};

package/lib/esm/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -1,7 +1,7 @@
 import mediaQuery from 'css-mediaquery';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import { isMediaOrPseudo, isMedia } from '../utils/common';
-const createStyleSheet = stylesWithQuery => {
+export const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
     styles: {},
@@ -44,5 +44,4 @@ const createStyleSheet = stylesWithQuery => {
     styles: cleanStyles,
     fullStyles: stylesWithQuery
   };
-};
-export default createStyleSheet;
+};

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.android.js

@@ -1,2 +1 @@
-import createStyleSheet from './create-stylesheet-mobile';
-export default createStyleSheet;
+export { createStyleSheet } from './create-stylesheet-mobile';

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.ios.js

@@ -1,2 +1 @@
-import createStyleSheet from './create-stylesheet-mobile';
-export default createStyleSheet;
+export { createStyleSheet } from './create-stylesheet-mobile';

package/lib/esm/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,8 +1,8 @@
 import { addCss } from '../utils/inject';
-import createDeclarationBlock from '../utils/create-declaration-block';
-import hash from '../hash';
+import { createDeclarationBlock } from '../utils/create-declaration-block';
+import { hash } from '../hash';
 import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common';
-const createStyleSheet = stylesWithQuery => {
+export const createStyleSheet = stylesWithQuery => {
   if (!stylesWithQuery) return {
     ids: {},
     styles: {},
@@ -31,5 +31,4 @@ const createStyleSheet = stylesWithQuery => {
     styles: cleanStyles,
     fullStyles: stylesWithQuery
   };
-};
-export default createStyleSheet;
+};

package/lib/esm/utils/ssr-media-query/hash.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-export default function hash(text) {
+export function hash(text) {
   if (!text) {
     return '';
   }

package/lib/esm/utils/ssr-media-query/ssr-media-query.js

@@ -0,0 +1,7 @@
+import { createStyleSheet } from './create-stylesheet';
+import { createMediaQueryStyles } from './utils/create-media-query-styles';
+import { useAllViewportTokens } from './utils/use-all-viewport-tokens';
+const StyleSheet = {
+  create: createStyleSheet
+};
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens };

package/lib/esm/utils/ssr-media-query/utils/create-declaration-block.js

@@ -1,7 +1,7 @@
 import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle';
 import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles';
-import hyphenateStyleName from './hyphenate-style-name';
-const createDeclarationBlock = style => {
+import { hyphenateStyleName } from './hyphenate-style-name';
+export const createDeclarationBlock = style => {
   const domStyle = prefixStyles(createReactDOMStyle(style));
   const declarationsString = Object.keys(domStyle).map(property => {
     const value = domStyle[property];
@@ -12,5 +12,4 @@ const createDeclarationBlock = style => {
     return `${prop}:${value} !important`;
   }).sort().join(';');
   return `{${declarationsString};}`;
-};
-export default createDeclarationBlock;
+};

package/lib/esm/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -40,7 +40,7 @@ const inherit = _ref => {
  * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles) {
+export function createMediaQueryStyles(viewportStyles) {
   let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
   const viewportsArray = viewports.keys;
@@ -57,5 +57,4 @@ function createMediaQueryStyles(viewportStyles) {
     };
   }, {});
   return mediaQueries;
-}
-export default createMediaQueryStyles;
+}

package/lib/esm/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -2,11 +2,10 @@ const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
 const cache = {};
 const toHyphenLower = match => `-${match.toLowerCase()}`;
-const hyphenateStyleName = name => {
+export const hyphenateStyleName = name => {
   if (Object.prototype.hasOwnProperty.call(cache, name)) {
     return cache[name];
   }
   const hName = name.replace(uppercasePattern, toHyphenLower);
   return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
-};
-export default hyphenateStyleName;
+};

package/lib/esm/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -1,5 +1,5 @@
-import { useThemeTokens } from '../../../ThemeProvider';
-import { useViewport } from '../../../ViewportProvider';
+import { useThemeTokens } from '../../../ThemeProvider/useThemeTokens';
+import { useViewport } from '../../../ViewportProvider/useViewport';
 
 /**
  * Hook to get theme tokens for all viewports at once.
@@ -16,7 +16,7 @@ import { useViewport } from '../../../ViewportProvider';
  * const allTokens = useAllViewportTokens('StackView', tokens, variant)
  * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
  */
-const useAllViewportTokens = (componentName, tokens, variant) => {
+export const useAllViewportTokens = (componentName, tokens, variant) => {
   const viewport = useViewport();
   const xs = useThemeTokens(componentName, tokens, variant, {
     viewport: 'xs'
@@ -44,5 +44,4 @@ const useAllViewportTokens = (componentName, tokens, variant) => {
     xl,
     current
   };
-};
-export default useAllViewportTokens;
+};

package/lib/esm/utils/ssr.js

@@ -100,7 +100,6 @@ export const ssrStyles = function () {
     }
   };
 };
-export default ssrStyles;
 
 /**
  * @deprecated - use ssrStyles instead

package/lib/esm/utils/transformGradient.js

@@ -9,7 +9,4 @@
  * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
  * @returns {string} The CSS gradient string.
  */
-export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-export default {
-  transformGradient
-};
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;

package/lib/esm/utils/useCopy.js

@@ -27,7 +27,7 @@ export const DEFAULT_COPY = 'en';
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-function useCopy(_ref) {
+export function useCopy(_ref) {
   let {
     dictionary,
     copy = DEFAULT_COPY
@@ -38,5 +38,4 @@ function useCopy(_ref) {
 
   // support overriding the entire copy dictionary with an object for a single language
   return key => copy[key];
-}
-export default useCopy;
+}

package/lib/esm/utils/useDetectOutsideClick.js

@@ -11,7 +11,7 @@ import Platform from "react-native-web/dist/exports/Platform";
  *   Flag to enable or disable the outside-click detection at runtime.
  *   @deprecated Will be removed in next major release; detection will always be enabled.
  */
-function useDetectOutsideClick(ref, onOutside) {
+export function useDetectOutsideClick(ref, onOutside) {
   let enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   React.useEffect(() => {
     if (!enabled || Platform.OS !== 'web') {
@@ -27,5 +27,4 @@ function useDetectOutsideClick(ref, onOutside) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref, onOutside, enabled]);
-}
-export default useDetectOutsideClick;
+}

package/lib/esm/utils/useHash.js

@@ -16,7 +16,7 @@ const doAction = (action, event) => typeof action === 'function' && action(windo
  * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
-const useHash = function (action) {
+export const useHash = function (action) {
   let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const [isDone, setIsDone] = useState(false);
   // Do the action just once when ready after component mount, from hash on page load
@@ -34,5 +34,4 @@ const useHash = function (action) {
     window.addEventListener('hashchange', handleChange);
     return () => window.removeEventListener('hashchange', handleChange);
   }, [action]);
-};
-export default useHash;
+};

package/lib/esm/utils/useHash.native.js

@@ -2,5 +2,4 @@
  * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
  * is handled at OS level and deep links have completely different usage.
  */
-const useHash = () => {};
-export default useHash;
+export const useHash = () => {};

package/lib/esm/utils/useMediaQuerySpacing.js

@@ -1,4 +1,4 @@
-import { useThemeTokens } from '../ThemeProvider';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { resolveResponsiveProp } from './useResponsiveProp';
 
 /**
@@ -52,7 +52,7 @@ import { resolveResponsiveProp } from './useResponsiveProp';
  * - `sizeByViewport`: The actual pixel/number values for each viewport
  * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
  */
-const useMediaQuerySpacing = function (spaceValue) {
+export const useMediaQuerySpacing = function (spaceValue) {
   let tokenKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'spacingScale';
   let tokens = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let variant = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
@@ -112,5 +112,4 @@ const useMediaQuerySpacing = function (spaceValue) {
     sizeByViewport,
     tokensByViewport
   };
-};
-export default useMediaQuerySpacing;
+};

package/lib/esm/utils/useOverlaidPosition.js

@@ -116,7 +116,7 @@ function getOverlaidPosition(_ref2) {
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-const useOverlaidPosition = _ref3 => {
+export const useOverlaidPosition = _ref3 => {
   let {
     isShown = false,
     offsets,
@@ -233,5 +233,4 @@ const useOverlaidPosition = _ref3 => {
     onTargetLayout,
     isReady
   };
-};
-export default useOverlaidPosition;
+};

package/lib/esm/utils/useResponsiveProp.js

@@ -1,6 +1,6 @@
 import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../ViewportProvider';
-import hasOwnProperty from './hasOwnProperty';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { hasOwnProperty } from './hasOwnProperty';
 const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 
 /**
@@ -38,8 +38,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
  * @returns {*}
  */
-const useResponsiveProp = (prop, defaultValue) => {
+export const useResponsiveProp = (prop, defaultValue) => {
   const viewport = useViewport();
   return resolveResponsiveProp(prop, viewport, defaultValue);
-};
-export default useResponsiveProp;
+};

package/lib/esm/utils/useSafeLayoutEffect.js

@@ -9,7 +9,7 @@ const noop = () => {};
  *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
  *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
  */
-const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
+export const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
 : function (fn) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   const isHydrating = useHydrationContext();
@@ -24,5 +24,4 @@ const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensu
     // If there's no hydration in progress, behave like useLayoutEffect.
     return callback();
   }, [isHydrating, callback]);
-};
-export default useSafeLayoutEffect;
+};

package/lib/esm/utils/useScrollBlocking.js

@@ -21,7 +21,7 @@ const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
  * @param {boolean | boolean[]} conditionProps
  * @returns
  */
-const useScrollBlocking = conditionProps => {
+export const useScrollBlocking = conditionProps => {
   // useRef refs are null on first render and don't trigger a re-render when they get their
   // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
   const ref = useRef();
@@ -45,5 +45,4 @@ const useScrollBlocking = conditionProps => {
     // will re-run when conditionsMet or refIsMounted flip between true and false.
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
-};
-export default useScrollBlocking;
+};

package/lib/esm/utils/useScrollBlocking.native.js

@@ -1,2 +1,2 @@
 // This is a no-op to emphasize that the original hook is web-only
-export default () => {};
+export const useScrollBlocking = () => {};

package/lib/esm/utils/useSpacingScale.js

@@ -1,5 +1,5 @@
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { resolveResponsiveProp } from './useResponsiveProp';
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
@@ -101,7 +101,7 @@ const resolveSpacingOptions = space => {
  * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
  * @returns {number}
  */
-const useSpacingScale = spaceValue => {
+export const useSpacingScale = spaceValue => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = useViewport();
@@ -119,5 +119,4 @@ const useSpacingScale = spaceValue => {
     viewport
   });
   return Math.max(size - subtract, 0);
-};
-export default useSpacingScale;
+};

package/lib/esm/utils/useUniqueId.js

@@ -1,7 +1,6 @@
 import { useId } from 'react';
-function useUniqueId() {
+export function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const id = useId();
   return `${prefix ? `${prefix}-` : ''}${id}`;
-}
-export default useUniqueId;
+}

package/lib/esm/utils/useVariants.js

@@ -1,4 +1,5 @@
-import { getComponentTheme, useTheme } from '../ThemeProvider';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { getComponentTheme } from '../ThemeProvider/utils/theme-tokens';
 
 /**
  * Generates a label string for a variant based on the provided key and value.
@@ -20,7 +21,7 @@ const getVariantLabel = (key, value) => `${key}${typeof value === 'string' ? `:
  *   Returns [['default', {}]] if no componentName is provided.
  * @throws {Error} If the theme does not define appearances for the given component.
  */
-const useVariants = componentName => {
+export const useVariants = componentName => {
   const theme = useTheme();
   if (!componentName) return [['default', {}]];
   const {
@@ -37,5 +38,4 @@ const useVariants = componentName => {
     return type === 'variant' ? [...pairs, ...values.map(value => [key, value, getVariantLabel(key, value)])] : pairs;
   }, [[undefined, undefined, 'default style']]);
   return variants;
-};
-export default useVariants;
+};

package/lib/esm/utils/withLinkRouter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import hasOwnProperty from './hasOwnProperty';
+import { hasOwnProperty } from './hasOwnProperty';
 
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
@@ -31,7 +31,7 @@ import hasOwnProperty from './hasOwnProperty';
  * ```
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const withLinkRouter = Component => {
+export const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     let {
       LinkRouter,
@@ -80,5 +80,4 @@ const withLinkRouter = Component => {
 withLinkRouter.propTypes = {
   LinkRouter: PropTypes.elementType,
   linkRouterProps: PropTypes.object
-};
-export default withLinkRouter;
+};

package/lib/package.json

@@ -8,16 +8,15 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.1",
-    "@floating-ui/react-native": "^0.8.1",
+    "@floating-ui/react-native": "^0.10.7",
     "@gorhom/portal": "^1.0.14",
-    "@react-native-picker/picker": "^2.9.0",
-    "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
-    "airbnb-prop-types": "^2.16.0",
+    "@react-native-picker/picker": "^2.11.4",
+    "@telus-uds/system-constants": "^4.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
     "css-mediaquery": "^0.1.2",
-    "expo-document-picker": "^13.0.1",
-    "expo-linear-gradient": "^12.5.0",
-    "expo-modules-core": "^1.12.24",
+    "expo-document-picker": "^14.0.8",
+    "expo-linear-gradient": "^15.0.8",
+    "expo-modules-core": "^3.0.29",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -30,11 +29,9 @@
   "devDependencies": {
     "@babel/plugin-transform-private-methods": "^7.25.4",
     "@telus-uds/browserslist-config": "^1.0.5",
-    "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "~7.0.1",
-    "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "^18.0.0",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/react-native": "^13.3.3",
+    "babel-plugin-react-native-web": "^0.21.2",
     "webpack": "5.x"
   },
   "exports": {
@@ -56,11 +53,11 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": ">=18.2.0 <19.0.0",
-    "react-dom": ">=18.2.0 <19.0.0",
-    "react-native": "^0.74.5",
-    "react-native-svg": "15.7.1",
-    "react-native-web": "^0.19.10"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": "^0.74.5 || ^0.81.0",
+    "react-native-svg": "^15.7.1",
+    "react-native-web": "^0.19.10 || ^0.21.0"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -84,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.2",
+  "version": "4.0.0-alpha.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -8,16 +8,15 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.1",
-    "@floating-ui/react-native": "^0.8.1",
+    "@floating-ui/react-native": "^0.10.7",
     "@gorhom/portal": "^1.0.14",
-    "@react-native-picker/picker": "^2.9.0",
-    "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
-    "airbnb-prop-types": "^2.16.0",
+    "@react-native-picker/picker": "^2.11.4",
+    "@telus-uds/system-constants": "^4.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.0",
     "css-mediaquery": "^0.1.2",
-    "expo-document-picker": "^13.0.1",
-    "expo-linear-gradient": "^12.5.0",
-    "expo-modules-core": "^1.12.24",
+    "expo-document-picker": "^14.0.8",
+    "expo-linear-gradient": "^15.0.8",
+    "expo-modules-core": "^3.0.29",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -30,11 +29,9 @@
   "devDependencies": {
     "@babel/plugin-transform-private-methods": "^7.25.4",
     "@telus-uds/browserslist-config": "^1.0.5",
-    "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/react-hooks": "~7.0.1",
-    "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "^18.0.0",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/react-native": "^13.3.3",
+    "babel-plugin-react-native-web": "^0.21.2",
     "webpack": "5.x"
   },
   "exports": {
@@ -56,11 +53,11 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": ">=18.2.0 <19.0.0",
-    "react-dom": ">=18.2.0 <19.0.0",
-    "react-native": "^0.74.5",
-    "react-native-svg": "15.7.1",
-    "react-native-web": "^0.19.10"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": "^0.74.5 || ^0.81.0",
+    "react-native-svg": "^15.7.1",
+    "react-native-web": "^0.19.10 || ^0.21.0"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -84,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.2",
+  "version": "4.0.0-alpha.0",
   "types": "types/index.d.ts"
 }