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

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.29.0",
+  "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.29.0",
+  "version": "4.0.0-alpha.0",
   "types": "types/index.d.ts"
 }

package/src/A11yInfoProvider/{index.jsx → A11yInfoProvider.jsx}

@@ -6,7 +6,7 @@ const ScreenReaderContext = React.createContext(false)
 const ReducedMotionContext = React.createContext(false)
 
 // eslint-disable-next-line no-unused-vars
-const A11yInfoProvider = React.forwardRef(({ children }, _) => {
+export const A11yInfoProvider = React.forwardRef(({ children }, _) => {
   const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false)
   const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false)
 
@@ -65,8 +65,6 @@ A11yInfoProvider.propTypes = {
   children: PropTypes.node.isRequired
 }
 
-export default A11yInfoProvider
-
 export const useA11yInfo = () => {
   const screenReaderEnabled = React.useContext(ScreenReaderContext)
   const reduceMotionEnabled = React.useContext(ReducedMotionContext)

package/src/A11yText/{index.jsx → A11yText.jsx}

@@ -2,7 +2,9 @@ import React from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
+import { a11yProps } from '../utils/props/a11yProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -12,7 +14,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * 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 = React.forwardRef(({ text, heading, role = 'text', ...rest }, ref) => {
+export const A11yText = React.forwardRef(({ text, heading, role = 'text', ...rest }, ref) => {
   const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -58,5 +60,3 @@ const styles = StyleSheet.create({
     top: -1
   }
 })
-
-export default A11yText

package/src/ActionCard/ActionCard.jsx

@@ -2,20 +2,19 @@ import React from 'react'
 import { Animated, View, StyleSheet, Text } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText,
-  clickProps,
-  hrefAttrsProp,
-  linkProps
-} from '../utils'
-import Icon from '../Icon'
-import Card from '../Card'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { wrapStringsInText } from '../utils/children'
+import { clickProps } from '../utils/props/clickProps'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Icon } from '../Icon/Icon'
+import { Card } from '../Card/Card'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
@@ -155,7 +154,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100
  *   </ActionCard>
  * )
  */
-const ActionCard = React.forwardRef(
+export const ActionCard = React.forwardRef(
   (
     { icon, title, children, href, direction = true, accessibilityRole, tokens, variant, ...rest },
     ref
@@ -302,5 +301,3 @@ const staticStyles = StyleSheet.create({
     marginLeft: 4
   }
 })
-
-export default ActionCard

package/src/ActivityIndicator/{index.jsx → ActivityIndicator.jsx}

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import { useScrollBlocking } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils/props'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useScrollBlocking } from '../utils/useScrollBlocking'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
 
-import FullScreenIndicator from './FullScreenIndicator'
-import OverlayIndicator from './OverlayIndicator'
-import InlineIndicator from './InlineIndicator'
+import { FullScreenIndicator } from './FullScreenIndicator'
+import { OverlayIndicator } from './OverlayIndicator'
+import { InlineIndicator } from './InlineIndicator'
 
 const labelMapping = {
   top: 'column-reverse',
@@ -20,7 +21,7 @@ const labelMapping = {
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = React.forwardRef(
+export const ActivityIndicator = React.forwardRef(
   (
     {
       variant,
@@ -133,5 +134,3 @@ ActivityIndicator.propTypes = {
    */
   fullScreenBackgroundColor: PropTypes.string
 }
-
-export default ActivityIndicator

package/src/ActivityIndicator/Dots.jsx

@@ -18,7 +18,7 @@ import {
   DOT3_ANIMATION_KEYTIMES,
   propTypes
 } from './shared'
-import { useA11yInfo } from '../A11yInfoProvider'
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider'
 
 const CY_PROPS = {
   attributeName: 'cy',
@@ -41,7 +41,7 @@ const OPACITY_PROPS = {
   repeatCount: 'indefinite'
 }
 
-const Dots = React.forwardRef(
+export const Dots = React.forwardRef(
   ({ size, color, indicatorBackgroundColor, label, isStatic = false }, ref) => {
     const { reduceMotionEnabled } = useA11yInfo()
     const reduceMotion = reduceMotionEnabled || isStatic
@@ -196,5 +196,3 @@ const Dots = React.forwardRef(
 
 Dots.displayName = 'Dots'
 Dots.propTypes = propTypes
-
-export default Dots

package/src/ActivityIndicator/Dots.native.jsx

@@ -16,11 +16,11 @@ import {
   DOT3_ANIMATION_INPUT_RANGE,
   propTypes
 } from './shared'
-import { useA11yInfo } from '../A11yInfoProvider'
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider'
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)
 
-const Dots = React.forwardRef(
+export const Dots = React.forwardRef(
   ({ size, color, indicatorBackgroundColor, label, isStatic = false }, ref) => {
     const { reduceMotionEnabled } = useA11yInfo()
     const reduceMotion = reduceMotionEnabled || isStatic
@@ -209,5 +209,3 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   }
 })
-
-export default Dots

package/src/ActivityIndicator/FullScreenIndicator.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import StackView from '../StackView'
-import Typography from '../Typography'
-import RenderActivityIndicator from './RenderActivityIndicator'
+import { StackView } from '../StackView/StackView'
+import { Typography } from '../Typography/Typography'
+import { RenderActivityIndicator } from './RenderActivityIndicator'
 import { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
 import { activityIndicatorCommonProps } from './sharedProptypes'
 
-const FullScreenIndicator = React.forwardRef(
+export const FullScreenIndicator = React.forwardRef(
   ({ variantProps, label, labelPosition, labelMapping, backgroundColor, showLabel }, ref) => (
     <View style={[staticStyles.fullScreenOverlay, { backgroundColor }]}>
       <StackView
@@ -61,5 +61,3 @@ FullScreenIndicator.propTypes = {
    * */
   backgroundColor: PropTypes.string.isRequired
 }
-
-export default FullScreenIndicator

package/src/ActivityIndicator/InlineIndicator.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import StackView from '../StackView'
-import Typography from '../Typography'
-import RenderActivityIndicator from './RenderActivityIndicator'
+import { StackView } from '../StackView/StackView'
+import { Typography } from '../Typography/Typography'
+import { RenderActivityIndicator } from './RenderActivityIndicator'
 import { activityIndicatorCommonProps } from './sharedProptypes'
 import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
 
-const InlineIndicator = React.forwardRef(
+export const InlineIndicator = React.forwardRef(
   ({ variantProps, label, labelPosition, labelMapping, showLabel }, ref) => (
     <View style={staticStyles.container}>
       <StackView
@@ -43,5 +43,3 @@ InlineIndicator.propTypes = {
    * */
   inline: PropTypes.bool
 }
-
-export default InlineIndicator

package/src/ActivityIndicator/OverlayIndicator.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import StackView from '../StackView'
-import Typography from '../Typography'
-import RenderActivityIndicator from './RenderActivityIndicator'
+import { StackView } from '../StackView/StackView'
+import { Typography } from '../Typography/Typography'
+import { RenderActivityIndicator } from './RenderActivityIndicator'
 import { BACKDROP_Z_INDEX, BACKDROP_OPACITY, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
 import { activityIndicatorCommonProps } from './sharedProptypes'
 
@@ -20,7 +20,7 @@ const recursiveMap = (nodeChildren, fn) =>
     return fn(child)
   })
 
-const OverlayIndicator = React.forwardRef(
+export const OverlayIndicator = React.forwardRef(
   (
     {
       variantProps,
@@ -136,5 +136,3 @@ OverlayIndicator.propTypes = {
    * */
   isActive: PropTypes.bool
 }
-
-export default OverlayIndicator

package/src/ActivityIndicator/RenderActivityIndicator.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Spinner from './Spinner'
-import Dots from './Dots'
+import { Spinner } from './Spinner'
+import { Dots } from './Dots'
 import { DOTS_STYLE } from './shared'
 
 /**
  * Return <Dots/> or <Spinner/> based on `variant?.dots`.
  * Reused in all the variants of the component.
  */
-const RenderActivityIndicator = React.forwardRef(
+export const RenderActivityIndicator = React.forwardRef(
   (
     { variant = {}, dotSize, size, color, indicatorBackgroundColor, thickness, label, isStatic },
     ref
@@ -78,5 +78,3 @@ RenderActivityIndicator.propTypes = {
    * */
   isStatic: PropTypes.bool
 }
-
-export default RenderActivityIndicator

package/src/ActivityIndicator/Spinner.jsx

@@ -14,14 +14,14 @@ import {
   SPINNER_DASHOFFSET_FACTOR,
   propTypes
 } from './shared'
-import { useA11yInfo } from '../A11yInfoProvider'
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider'
 
 const animateProps = {
   keyTimes: SPINNER_KEYTIMES,
   repeatCount: 'indefinite'
 }
 
-const Spinner = React.forwardRef(
+export const Spinner = React.forwardRef(
   ({ size, color, indicatorBackgroundColor, thickness, label, isStatic = false }, ref) => {
     const { reduceMotionEnabled } = useA11yInfo()
     const reduceMotion = reduceMotionEnabled || isStatic
@@ -115,5 +115,3 @@ const Spinner = React.forwardRef(
 
 Spinner.displayName = 'Spinner'
 Spinner.propTypes = propTypes
-
-export default Spinner

package/src/ActivityIndicator/Spinner.native.jsx

@@ -12,9 +12,9 @@ import {
   SPINNER_DASHOFFSET_FACTOR,
   propTypes
 } from './shared'
-import { useA11yInfo } from '../A11yInfoProvider'
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider'
 
-const Spinner = React.forwardRef(
+export const Spinner = React.forwardRef(
   ({ size, color, indicatorBackgroundColor, thickness, label, isStatic = false }, ref) => {
     const { reduceMotionEnabled } = useA11yInfo()
     const reduceMotion = reduceMotionEnabled || isStatic
@@ -129,5 +129,3 @@ const Spinner = React.forwardRef(
 
 Spinner.displayName = 'Spinner'
 Spinner.propTypes = propTypes
-
-export default Spinner

package/src/Autocomplete/Autocomplete.jsx

@@ -3,24 +3,22 @@ import PropTypes from 'prop-types'
 import { Dimensions, Platform, View, StyleSheet } from 'react-native'
 import throttle from 'lodash.throttle'
 import matchAll from 'string.prototype.matchall'
-import {
-  inputSupportsProps,
-  selectSystemProps,
-  textInputProps,
-  textInputHandlerProps,
-  useCopy,
-  htmlAttrs,
-  useOverlaidPosition,
-  useSafeLayoutEffect,
-  getTokensPropType
-} from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import Listbox from '../Listbox'
-import Typography from '../Typography'
-import { TextInput } from '../TextInput'
-import InputSupports from '../InputSupports'
-import Loading from './Loading'
-import Suggestions from './Suggestions'
+import { inputSupportsProps } from '../utils/props/inputSupportsProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { textInputProps } from '../utils/props/textInputProps'
+import { textInputHandlerProps } from '../utils/props/handlerProps'
+import { useCopy } from '../utils/useCopy'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { useOverlaidPosition } from '../utils/useOverlaidPosition'
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect'
+import { getTokensPropType } from '../utils/props/tokens'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { ListboxOverlay } from '../Listbox/ListboxOverlay'
+import { Typography } from '../Typography/Typography'
+import { TextInput } from '../TextInput/TextInput'
+import { InputSupports } from '../InputSupports/InputSupports'
+import { Loading } from './Loading'
+import { Suggestions } from './Suggestions'
 import {
   DEFAULT_MAX_SUGGESTIONS,
   DEFAULT_MIN_TO_SUGGESTION,
@@ -28,7 +26,7 @@ import {
   INPUT_LEFT_PADDING,
   MIN_LISTBOX_WIDTH
 } from './constants'
-import dictionary from './dictionary'
+import { dictionary } from './dictionary'
 
 const staticStyles = StyleSheet.create({
   container: {
@@ -108,7 +106,7 @@ const highlight = (items = [], text = '', color) =>
     return [...acc, item]
   }, [])
 
-const Autocomplete = React.forwardRef(
+export const Autocomplete = React.forwardRef(
   (
     {
       children,
@@ -424,7 +422,7 @@ const Autocomplete = React.forwardRef(
           isInputVisible &&
           (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && (
             <>
-              <Listbox.Overlay
+              <ListboxOverlay
                 overlaidPosition={overlaidPosition}
                 isReady={isReady}
                 minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
@@ -454,7 +452,7 @@ const Autocomplete = React.forwardRef(
                     ref={targetRef}
                   />
                 )}
-              </Listbox.Overlay>
+              </ListboxOverlay>
               {targetRef?.current && (
                 <View
                   // This catches and shifts focus to other interactive elements.
@@ -558,5 +556,3 @@ Autocomplete.propTypes = {
    */
   value: PropTypes.string
 }
-
-export default Autocomplete