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

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

package/src/Autocomplete/Loading.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ActivityIndicator from '../ActivityIndicator'
-import Typography from '../Typography'
-import Box from '../Box'
-import StackView from '../StackView'
+import { ActivityIndicator } from '../ActivityIndicator/ActivityIndicator'
+import { Typography } from '../Typography/Typography'
+import { Box } from '../Box/Box'
+import { StackView } from '../StackView/StackView'
 
-const Loading = React.forwardRef(({ label }, ref) => (
+export const Loading = React.forwardRef(({ label }, ref) => (
   <Box space={3} ref={ref}>
     <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
       <ActivityIndicator variant={{ size: 'large' }} />
@@ -17,5 +17,3 @@ const Loading = React.forwardRef(({ label }, ref) => (
 Loading.displayName = 'Loading'
 
 Loading.propTypes = { label: PropTypes.string }
-
-export default Loading

package/src/Autocomplete/Suggestions.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import A11yText from '../A11yText'
-import Typography from '../Typography'
-import Box from '../Box'
-import Listbox from '../Listbox'
+import { A11yText } from '../A11yText/A11yText'
+import { Typography } from '../Typography/Typography'
+import { Box } from '../Box/Box'
+import { Listbox } from '../Listbox/Listbox'
 
-const Suggestions = React.forwardRef(
+export const Suggestions = React.forwardRef(
   ({ hasResults, items = [], noResults, onClose, onSelect, parentRef }, ref) => {
     const pressableItems = items.map(({ id, ...rest }) => ({
       id,
@@ -50,5 +50,3 @@ Suggestions.propTypes = {
   onSelect: PropTypes.func.isRequired,
   parentRef: PropTypes.object.isRequired
 }
-
-export default Suggestions

package/src/Autocomplete/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     hasResults: 'Some results are available',
     loading: 'Searching...',

package/src/Badge/Badge.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens } from '../ThemeProvider'
-import Typography from '../Typography'
-import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Typography } from '../Typography/Typography'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
 const fontSizeMapping = {
   12: 'micro',
@@ -32,7 +36,7 @@ const getTypographyTokens = ({ fontName, fontWeight, color }) => ({ fontName, fo
 
 const getTypographyVariant = ({ fontSize }) => ({ size: fontSizeMapping[fontSize] })
 
-const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
+export const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Badge', tokens, variant)
 
   return (
@@ -65,8 +69,6 @@ Badge.propTypes = {
 
 Badge.displayName = 'Badge'
 
-export default Badge
-
 const staticStyles = StyleSheet.create({
   container: {
     display: 'flex',

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

@@ -2,13 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { PortalProvider } from '@gorhom/portal'
 import { viewports } from '@telus-uds/system-constants'
-import A11yInfoProvider from '../A11yInfoProvider'
-import ViewportProvider from '../ViewportProvider'
-import ThemeProvider from '../ThemeProvider'
+import { A11yInfoProvider } from '../A11yInfoProvider/A11yInfoProvider'
+import { ViewportProvider } from '../ViewportProvider/ViewportProvider'
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider'
 import { HydrationProvider } from './HydrationContext'
 
 // eslint-disable-next-line no-unused-vars
-const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
+export const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
   <HydrationProvider>
     <A11yInfoProvider>
       <ViewportProvider defaultViewport={themeOptions?.defaultViewport}>
@@ -31,5 +31,3 @@ BaseProvider.propTypes = {
     defaultViewport: PropTypes.oneOf(viewports.keys)
   })
 }
-
-export default BaseProvider

package/src/BaseProvider/HydrationContext.jsx

@@ -40,5 +40,3 @@ export const HydrationProvider = ({ children }) => {
 HydrationProvider.propTypes = {
   children: PropTypes.node
 }
-
-export default HydrationProvider

package/src/Box/Box.jsx

@@ -1,31 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
-import {
-  useTheme,
-  useThemeTokens,
-  useResponsiveThemeTokens,
-  useThemeTokensCallback
-} from '../ThemeProvider'
-import {
-  a11yProps,
-  createMediaQueryStyles,
-  getA11yPropsFromHtmlTag,
-  getTokensPropType,
-  layoutTags,
-  responsiveProps,
-  selectSystemProps,
-  spacingProps,
-  useResponsiveProp,
-  useSpacingScale,
-  variantProp,
-  viewProps,
-  StyleSheet as RNMQStyleSheet,
-  getSpacingScale,
-  formatImageSource
-} from '../utils'
-import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap'
-import { useViewport } from '../ViewportProvider'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useResponsiveThemeTokens } from '../ThemeProvider/useResponsiveThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { createMediaQueryStyles } from '../utils/ssr-media-query/utils/create-media-query-styles'
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics'
+import { getTokensPropType } from '../utils/props/tokens'
+import { responsiveProps } from '../utils/props/responsiveProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { spacingProps } from '../utils/props/spacingProps'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { StyleSheet as RNMQStyleSheet } from '../utils/ssr-media-query/ssr-media-query'
+import { getSpacingScale } from '../utils/getSpacingScale'
+import { formatImageSource } from '../utils/formatImageSource'
+import { backgroundImageStylesMap, backgroundPositions } from './backgroundImageStylesMap'
+import { useViewport } from '../ViewportProvider/useViewport'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -213,7 +207,7 @@ const setBackgroundImage = ({
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = React.forwardRef(
+export const Box = React.forwardRef(
   (
     {
       space,
@@ -472,8 +466,6 @@ Box.propTypes = {
   })
 }
 
-export default Box
-
 const staticStyles = StyleSheet.create({
   imageBackground: { width: '100%', height: '100%' },
   contentOverlay: {

package/src/Box/backgroundImageStylesMap.js

@@ -51,4 +51,4 @@ const nativeStyles = {
 
 export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {}
 
-export default Platform.OS === 'web' ? webStyles : nativeStyles
+export const backgroundImageStylesMap = Platform.OS === 'web' ? webStyles : nativeStyles

package/src/Button/Button.jsx

@@ -1,16 +1,14 @@
 import React from 'react'
 
-import ButtonBase from './ButtonBase'
-import buttonPropTypes, { textAndA11yText } from './propTypes'
-import {
-  useThemeTokensCallback,
-  useResponsiveThemeTokensCallback,
-  useTheme
-} from '../ThemeProvider'
-import { a11yProps } from '../utils/props'
-import { useViewport } from '../ViewportProvider'
-
-const Button = React.forwardRef(
+import { ButtonBase } from './ButtonBase'
+import { buttonPropTypes, textAndA11yText } from './propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useResponsiveThemeTokensCallback } from '../ThemeProvider/useResponsiveThemeTokensCallback'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { a11yProps } from '../utils/props/a11yProps'
+import { useViewport } from '../ViewportProvider/useViewport'
+
+export const Button = React.forwardRef(
   ({ accessibilityRole = 'button', tokens, variant, heightFull = true, ...props }, ref) => {
     const viewport = useViewport()
     const {
@@ -44,5 +42,3 @@ Button.propTypes = {
   ...buttonPropTypes,
   children: textAndA11yText
 }
-
-export default Button