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

package/src/index.js

@@ -1,92 +1,192 @@
-export { default as A11yText } from './A11yText'
-export { default as ActionCard } from './ActionCard'
-export { default as ActivityIndicator } from './ActivityIndicator'
-export { default as Autocomplete } from './Autocomplete'
-export { default as Box } from './Box'
-export { default as Badge } from './Badge'
-export * from './Button'
-export { default as Card, PressableCardBase } from './Card'
-export { default as CardGroup } from './CardGroup'
-export * from './Carousel'
-export { default as FileUpload } from './FileUpload'
-export { default as Listbox } from './Listbox'
-export { default as Checkbox } from './Checkbox'
-export * from './Checkbox'
-export { default as CheckboxCard } from './CheckboxCard'
-export { default as CheckboxCardGroup } from './CheckboxCardGroup'
-export { default as ColourToggle } from './ColourToggle'
-export { default as DownloadApp } from './DownloadApp'
-export { default as Divider } from './Divider'
-export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
-export { default as ExpandCollapseMini } from './ExpandCollapseMini'
-export { default as Feedback } from './Feedback'
-export { default as Fieldset } from './Fieldset'
-export * from './FlexGrid'
-export { default as FlexGrid } from './FlexGrid'
-export { default as Footnote } from './Footnote'
-export {
-  default as HorizontalScroll,
-  horizontalScrollUtils,
-  HorizontalScrollButton
-} from './HorizontalScroll'
-export { default as Icon, IconText, iconComponentPropTypes } from './Icon'
-export { default as IconButton } from './IconButton'
-export { default as InputLabel } from './InputLabel'
-export { default as InputSupports } from './InputSupports'
-export * from './Link'
-export { default as List, ListItem, ListBase } from './List'
-export { default as Modal } from './Modal'
-export { default as MultiSelectFilter } from './MultiSelectFilter'
-export { default as Notification } from './Notification'
-export { default as OrderedList, OrderedListItem } from './OrderedList'
-export { default as Pagination } from './Pagination'
-export { default as PriceLockup } from './PriceLockup'
-export { default as ProductCard } from './ProductCard'
-export { default as ProductCardGroup } from './ProductCardGroup'
-export { default as Progress } from './Progress'
-export { default as QuickLinks } from './QuickLinks'
-export { default as QuickLinksFeature } from './QuickLinksFeature'
-export { default as Radio, RadioGroup } from './Radio'
-export { default as RadioCard, RadioCardGroup } from './RadioCard'
-export { default as Responsive } from './Responsive'
-export { default as Search } from './Search'
-export { default as Select } from './Select'
-export { default as Shortcuts, ShortcutsItem } from './Shortcuts'
-export { default as SideNav } from './SideNav'
-export { default as Skeleton } from './Skeleton'
-export { default as SkipLink } from './SkipLink'
-export { default as Spacer } from './Spacer'
-export { default as StackView, StackWrap, getStackedContent } from './StackView'
-export { default as Status } from './Status'
-export { default as StepTracker } from './StepTracker'
-export { default as Tabs } from './Tabs'
-export { default as TabBar } from './TabBar'
-export { default as Tags } from './Tags'
-export * from './TextInput'
-export { default as Timeline } from './Timeline'
-export * from './ToggleSwitch'
-export { default as Tooltip } from './Tooltip'
-export { default as TooltipButton } from './TooltipButton'
-export { default as Typography } from './Typography'
-
-export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
-export { default as BaseProvider } from './BaseProvider'
+export { A11yInfoProvider, useA11yInfo } from './A11yInfoProvider/A11yInfoProvider'
+export { A11yText } from './A11yText/A11yText'
+export { ActionCard } from './ActionCard/ActionCard'
+export { ActivityIndicator } from './ActivityIndicator/ActivityIndicator'
+export { Autocomplete } from './Autocomplete/Autocomplete'
+export { Badge } from './Badge/Badge'
+export { BaseProvider } from './BaseProvider/BaseProvider'
 export { useHydrationContext } from './BaseProvider/HydrationContext'
-export { default as Validator } from './Validator'
-export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
+export { Box } from './Box/Box'
+export { Button } from './Button/Button'
+export { ButtonLink } from './Button/ButtonLink'
+export { ButtonGroup } from './Button/ButtonGroup'
+export { ButtonDropdown } from './Button/ButtonDropdown'
+export { Card } from './Card/Card'
+export { PressableCardBase } from './Card/PressableCardBase'
+export { CardGroup } from './CardGroup/CardGroup'
+export { Carousel } from './Carousel/Carousel'
+export { CarouselItem } from './Carousel/CarouselItem/CarouselItem'
+export { CarouselProvider, useCarousel } from './Carousel/CarouselContext'
+export { Checkbox } from './Checkbox/Checkbox'
+export { CheckboxGroup } from './Checkbox/CheckboxGroup'
+export { CheckboxCard } from './CheckboxCard/CheckboxCard'
+export { CheckboxCardGroup } from './CheckboxCardGroup/CheckboxCardGroup'
+export { ColourToggle } from './ColourToggle/ColourToggle'
+export { Divider } from './Divider/Divider'
+export { DownloadApp } from './DownloadApp/DownloadApp'
+export { ExpandCollapse } from './ExpandCollapse/ExpandCollapse'
+export { ExpandCollapseAccordion } from './ExpandCollapse/ExpandCollapseAccordion'
+export { ExpandCollapsePanel } from './ExpandCollapse/ExpandCollapsePanel'
+export { ExpandCollapseMini } from './ExpandCollapseMini/ExpandCollapseMini'
+export { Feedback } from './Feedback/Feedback'
+export { Fieldset } from './Fieldset/Fieldset'
+export { FileUpload } from './FileUpload/FileUpload'
+export { FlexGrid } from './FlexGrid/FlexGrid'
+export { FlexGridRow } from './FlexGrid/FlexGridRow/FlexGridRow'
+export { FlexGridCol } from './FlexGrid/FlexGridCol/FlexGridCol'
+export { Footnote } from './Footnote/Footnote'
+export { FootnoteLink } from './Footnote/FootnoteLink'
+export { HorizontalScroll, horizontalScrollUtils } from './HorizontalScroll/HorizontalScroll'
+export { HorizontalScrollButton } from './HorizontalScroll/HorizontalScrollButton'
+export { Icon, iconComponentPropTypes } from './Icon/Icon'
+export { IconText } from './Icon/IconText'
+export { IconButton, IconButtonBase } from './IconButton/IconButton'
+export { InputLabel } from './InputLabel/InputLabel'
+export { InputSupports } from './InputSupports/InputSupports'
+export { ChevronLink } from './Link/ChevronLink'
+export { Link } from './Link/Link'
+export { LinkBase } from './Link/LinkBase'
+export { TextButton } from './Link/TextButton'
+export { List } from './List/List'
+export { ListItem } from './List/ListItem'
+export { Listbox } from './Listbox/Listbox'
+export { ListboxOverlay } from './Listbox/ListboxOverlay'
+export { Modal } from './Modal/Modal'
+export { MultiSelectFilter } from './MultiSelectFilter/MultiSelectFilter'
+export { Notification } from './Notification/Notification'
+export { OrderedList } from './OrderedList/OrderedList'
+export { OrderedListItem } from './OrderedList/OrderedListItem'
+export { Pagination } from './Pagination/Pagination'
+export { PaginationPageButton, PaginationPageButtonBase } from './Pagination/PaginationPageButton'
+export { Portal } from './Portal/Portal'
+export { PriceLockup } from './PriceLockup/PriceLockup'
+export { ProductCard } from './ProductCard/ProductCard'
+export { ProductCardGroup } from './ProductCardGroup/ProductCardGroup'
+export { Progress } from './Progress/Progress'
+export { ProgressBar } from './Progress/ProgressBar'
+export { QuickLinks } from './QuickLinks/QuickLinks'
+export { QuickLinksItem, QuickLinksItemBase } from './QuickLinks/QuickLinksItem'
+export { QuickLinksFeature } from './QuickLinksFeature/QuickLinksFeature'
 export {
-  default as ThemeProvider,
-  useTheme,
-  useSetTheme,
-  useThemeTokens,
-  useThemeTokensCallback,
-  getThemeTokens,
-  applyOuterBorder,
-  applyTextStyles,
-  applyShadowToken,
-  useResponsiveThemeTokens,
-  useResponsiveThemeTokensCallback
-} from './ThemeProvider'
+  QuickLinksFeatureItem,
+  QuickLinksFeatureItemBase
+} from './QuickLinksFeature/QuickLinksFeatureItem'
+export { Radio } from './Radio/Radio'
+export { RadioGroup } from './Radio/RadioGroup'
+export { RadioCard } from './RadioCard/RadioCard'
+export { RadioCardGroup } from './RadioCard/RadioCardGroup'
+export { Responsive } from './Responsive/Responsive'
+export { Search } from './Search/Search'
+export { Select } from './Select/Select'
+export { SelectItem } from './Select/SelectItem'
+export { SelectGroup } from './Select/SelectGroup'
+export { Shortcuts } from './Shortcuts/Shortcuts'
+export { ShortcutsItem } from './Shortcuts/ShortcutsItem'
+export { SideNav } from './SideNav/SideNav'
+export { SideNavItem } from './SideNav/SideNavItem'
+export { SideNavItemsGroup } from './SideNav/SideNavItemsGroup'
+export { Skeleton } from './Skeleton/Skeleton'
+export { SkipLink, SkipLinkBase } from './SkipLink/SkipLink'
+export { Spacer } from './Spacer/Spacer'
+export { StackView } from './StackView/StackView'
+export { StackWrap } from './StackView/StackWrap'
+export { getStackedContent } from './StackView/getStackedContent'
+export { Status } from './Status/Status'
+export { StepTracker } from './StepTracker/StepTracker'
+export { TabBar } from './TabBar/TabBar'
+export { TabBarItem } from './TabBar/TabBarItem'
+export { Tabs } from './Tabs/Tabs'
+export { Tags } from './Tags/Tags'
+export { TextInput } from './TextInput/TextInput'
+export { TextArea } from './TextInput/TextArea'
+export { ThemeProvider } from './ThemeProvider/ThemeProvider'
+export { useResponsiveThemeTokens } from './ThemeProvider/useResponsiveThemeTokens'
+export { useResponsiveThemeTokensCallback } from './ThemeProvider/useResponsiveThemeTokensCallback'
+export { useSetTheme } from './ThemeProvider/useSetTheme'
+export { useTheme } from './ThemeProvider/useTheme'
+export { useThemeTokens, useThemeTokensCallback } from './ThemeProvider/useThemeTokens'
+export { getThemeTokens, getComponentTheme } from './ThemeProvider/utils/theme-tokens'
+export { applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider/utils/styles'
+export { Timeline } from './Timeline/Timeline'
+export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch'
+export { ToggleSwitchGroup } from './ToggleSwitch/ToggleSwitchGroup'
+export { Tooltip } from './Tooltip/Tooltip.native'
+export { TooltipButton } from './TooltipButton/TooltipButton'
+export { Typography } from './Typography/Typography'
+export { Validator } from './Validator/Validator'
+export { useViewport, ViewportContext } from './ViewportProvider/useViewport'
+export { ViewportProvider } from './ViewportProvider/ViewportProvider'
 
-export * from './utils'
-export { default as Portal } from './Portal'
+// utils
+export { scaleWithText, getMaxFontMultiplier } from './utils/a11y/textSize'
+export {
+  tagsToRoles,
+  headingTags,
+  supportedTags,
+  layoutTags,
+  textTags,
+  getHeadingLevel,
+  getA11yPropsFromHtmlTag
+} from './utils/a11y/semantics'
+export { useVerticalExpandAnimation } from './utils/animation/useVerticalExpandAnimation'
+export { unpackFragment, wrapStringsInText } from './utils/children'
+export { useInputValue, useMultipleInputValues } from './utils/input'
+export {
+  getCursorStyle,
+  resolvePressableState,
+  resolvePressableTokens,
+  getPressHandlersWithArgs
+} from './utils/pressability'
+export {
+  getTokenNames,
+  selectTokens,
+  getTokensPropType,
+  getTokensSetPropType
+} from './utils/props/tokens'
+export { focusHandlerProps, textInputHandlerProps } from './utils/props/handlerProps'
+export { a11yProps } from './utils/props/a11yProps'
+export { clickProps } from './utils/props/clickProps'
+export { copyPropTypes } from './utils/props/copyPropTypes'
+export { componentPropType } from './utils/props/componentPropType'
+export { hrefAttrsProp } from './utils/props/hrefAttrsProp'
+export { inputSupportsProps } from './utils/props/inputSupportsProps'
+export { linkProps } from './utils/props/linkProps'
+export { pressProps } from './utils/props/pressProps'
+export { paddingProp } from './utils/props/paddingProp'
+export { rectProp } from './utils/props/rectProp'
+export { responsiveProps } from './utils/props/responsiveProps'
+export { spacingProps } from './utils/props/spacingProps'
+export { selectSystemProps } from './utils/props/selectSystemProps'
+export { textInputProps } from './utils/props/textInputProps'
+export { textProps } from './utils/props/textProps'
+export { variantProp } from './utils/props/variantProp'
+export { viewProps } from './utils/props/viewProps'
+export { contentfulProps } from './utils/props/contentfulProps'
+export {
+  StyleSheet,
+  createMediaQueryStyles,
+  useAllViewportTokens
+} from './utils/ssr-media-query/ssr-media-query'
+export { info } from './utils/info/info'
+export { useCopy } from './utils/useCopy'
+export { useHash } from './utils/useHash'
+export { useSpacingScale } from './utils/useSpacingScale'
+export { useMediaQuerySpacing } from './utils/useMediaQuerySpacing'
+export { useResponsiveProp } from './utils/useResponsiveProp'
+export { useOverlaidPosition } from './utils/useOverlaidPosition'
+export { useSafeLayoutEffect } from './utils/useSafeLayoutEffect'
+export { useScrollBlocking } from './utils/useScrollBlocking'
+export { resolveResponsiveProp } from './utils/useResponsiveProp'
+export { useUniqueId } from './utils/useUniqueId'
+export { withLinkRouter } from './utils/withLinkRouter'
+export { ssrStyles, getReactNativeWebSSRStyles, getSSRStyles } from './utils/ssr'
+export { containUniqueFields } from './utils/containUniqueFields'
+export { BaseView } from './utils/BaseView/BaseView'
+export { htmlAttrs } from './utils/htmlAttrs'
+export { transformGradient } from './utils/transformGradient'
+export { convertFromMegaByteToByte } from './utils/convertFromMegaByteToByte'
+export { formatImageSource } from './utils/formatImageSource'
+export { getSpacingScale } from './utils/getSpacingScale'
+export { useVariants } from './utils/useVariants'
+export { isTouchDevice } from './utils/isTouchDevice'
+export { resolveContentMaxWidth } from './utils/resolveContentMaxWidth'

package/src/server.js

@@ -1,4 +1,4 @@
-export { default as selectSystemProps } from './utils/props/selectSystemProps'
+export { selectSystemProps } from './utils/props/selectSystemProps'
 export { getTokensPropType } from './utils/props/tokens'
-export { default as htmlAttrs } from './utils/htmlAttrs'
+export { htmlAttrs } from './utils/htmlAttrs'
 export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens'

package/src/utils/BaseView/BaseView.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { View as NativeView, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { useTheme } from '../../ThemeProvider'
+import { useTheme } from '../../ThemeProvider/useTheme'
 
 /**
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
  */
-const BaseView = React.forwardRef(({ children, style, ...rest }, ref) => {
+export const BaseView = React.forwardRef(({ children, style, ...rest }, ref) => {
   const { themeOptions } = useTheme()
   const styleProp = Array.isArray(style) ? [...style] : [style]
 
@@ -34,5 +34,3 @@ BaseView.propTypes = {
   children: PropTypes.node,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
 }
-
-export default BaseView

package/src/utils/BaseView/BaseView.native.jsx

@@ -1,6 +1,4 @@
-import { View as BaseView } from 'react-native'
-
 /**
  * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
  */
-export default BaseView
+export { View as BaseView } from 'react-native'

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
 import { Animated, Easing, Platform } from 'react-native'
 
-import useSafeLayoutEffect from '../useSafeLayoutEffect'
+import { useSafeLayoutEffect } from '../useSafeLayoutEffect'
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
-function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
+export function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
   const [isAnimating, setIsAnimating] = useState(false)
   const [wasExpanded, setWasExpanded] = useState(isExpanded)
   const expandStateChanged = isExpanded !== wasExpanded
@@ -57,7 +57,7 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       containerStyles.display = 'none'
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
-      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      // Without some form of hiding, some children leak through even when closed e.g. `ListItem` bullets.
       containerStyles.opacity = 0
     }
   }
@@ -92,5 +92,3 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
 
   return [containerStyles, elementRef]
 }
-
-export default useVerticalExpandAnimation

package/src/utils/children.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from 'react-native'
-import A11yText from '../A11yText'
+import { A11yText } from '../A11yText/A11yText'
 
 /**
  * Unpacks top-level fragments, so that common compositional patterns such as the following examples

package/src/utils/containUniqueFields.js

@@ -3,7 +3,7 @@
 // otherwise.
 // Note that if a value of a field in an item is not set, it will be
 // excluded from comparison.
-const containUniqueFields = (items, fields) => {
+export const containUniqueFields = (items, fields) => {
   const map = new Map()
 
   const itemsHaveDuplicateFields = items.some((item) =>
@@ -28,5 +28,3 @@ const containUniqueFields = (items, fields) => {
 
   return !itemsHaveDuplicateFields
 }
-
-export default containUniqueFields

package/src/utils/convertFromMegaByteToByte.js

@@ -6,6 +6,6 @@
  */
 const BYTES_IN_A_MEGABYTE = 1024 * 1024
 
-export default function convertFromMegaByteToByte(megaByte) {
+export function convertFromMegaByteToByte(megaByte) {
   return megaByte * BYTES_IN_A_MEGABYTE
 }

package/src/utils/formatImageSource.js

@@ -21,9 +21,7 @@
  * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
  * @returns {object|string} - The formatted image source.
  */
-const formatImageSource = (source) =>
+export const formatImageSource = (source) =>
   typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:'))
     ? { uri: source }
     : source
-
-export default formatImageSource

package/src/utils/getSpacingScale.js

@@ -32,7 +32,7 @@ const resolveSpacingOptions = (space) => {
  * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
  * @returns {number} The calculated spacing scale, ensuring it is non-negative.
  */
-const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+export const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
   const { tokens, variant, overridden, subtract = 0 } = resolveSpacingOptions(spaceValue)
   const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0))
 
@@ -46,5 +46,3 @@ const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
   )
   return Math.max(size - subtract, 0)
 }
-
-export default getSpacingScale

package/src/utils/hasOwnProperty.js

@@ -6,6 +6,6 @@
  * @param {String} key
  * @returns {Boolean}
  */
-export default function hasOwnProperty(object, key) {
+export function hasOwnProperty(object, key) {
   return Object.prototype.hasOwnProperty.call(object, key)
 }

package/src/utils/htmlAttrs.js

@@ -13,7 +13,7 @@ const htmlAttrTypes = {
   title: PropTypes.string
 }
 
-export default {
+export const htmlAttrs = {
   types: htmlAttrTypes,
   select: (props) =>
     Object.entries(props).reduce(

package/src/utils/info/info.js

@@ -0,0 +1,7 @@
+import { platform } from './platform/platform'
+import { versions } from './versions'
+
+export const info = {
+  platform,
+  versions
+}

package/src/utils/info/platform/platform.android.js

@@ -1 +1 @@
-export default '.android'
+export const fileSuffix = '.android'

package/src/utils/info/platform/platform.ios.js

@@ -1 +1 @@
-export default '.ios'
+export const fileSuffix = '.ios'

package/src/utils/info/platform/platform.js

@@ -1 +1,10 @@
-export default '.web (default)'
+import { Platform } from 'react-native'
+
+// Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+export const fileSuffix = '.web (default)'
+export const platform = { OS: Platform.OS, fileSuffix }

package/src/utils/info/platform/platform.native.js

@@ -1,4 +1,4 @@
 // This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
 // If this gets picked, either an unsupported React Native platform is being used somehow
 // (e.g. a native Windows app), or there's a serious config problem somewhere.
-export default '.native'
+export const fileSuffix = '.native'

package/src/utils/info/versions.js

@@ -1,6 +1,6 @@
 import pkgJson from '../../../package.json'
 
 // Add more versions if they are useful e.g. theme schema version
-export default {
+export const versions = {
   uds: pkgJson.version
 }

package/src/utils/isTouchDevice.js

@@ -5,7 +5,7 @@ import { Platform } from 'react-native'
  *
  * @returns {boolean} True if the device supports touch, false otherwise
  */
-const isTouchDevice = () => {
+export const isTouchDevice = () => {
   if (Platform.OS !== 'web') {
     return true
   }
@@ -30,5 +30,3 @@ const isTouchDevice = () => {
 
   return false
 }
-
-export default isTouchDevice

package/src/utils/pressability.js

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet } from 'react-native'
-import pressProps from './props/pressProps'
+import { pressProps } from './props/pressProps'
 
 /**
  * @typedef {import('react').ReactNode} ReactNode

package/src/utils/props/a11yProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
 // so we have to define them ourselves.
@@ -193,7 +193,7 @@ if (Platform.OS === 'web') {
   })
 }
 
-export default {
+export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.

package/src/utils/props/clickProps.js

@@ -6,7 +6,7 @@ const clickHandlerMapping = {
   onMouseUp: 'onPressOut'
 }
 
-export default {
+export const clickProps = {
   /**
    * Web-oriented HTML click handlers that may be mapped to React Native press handlers
    */

package/src/utils/props/componentPropType.js

@@ -7,7 +7,7 @@
  * @param {string|string[]} passedName
  * @return {function}
  */
-export default function componentPropType(passedName) {
+export function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName
 
   const checkProp = (props, propName, componentName) => {

package/src/utils/props/contentfulProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 const contentfulPropsTypes = {
   ...Platform.select({
@@ -12,7 +12,7 @@ const contentfulPropsTypes = {
   })
 }
 
-export default {
+export const contentfulProps = {
   /**
    * Set of contentful properties used for the content preview inspector.
    */

package/src/utils/props/copyPropTypes.js

@@ -1,3 +1,3 @@
 import PropTypes from 'prop-types'
 
-export default PropTypes.oneOf(['en', 'fr'])
+export const copyPropTypes = PropTypes.oneOf(['en', 'fr'])

package/src/utils/props/getPropSelector.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge'
-import hasOwnProperty from '../hasOwnProperty'
+import { hasOwnProperty } from '../hasOwnProperty'
 
 /**
  * @callback PropSelectorCallback - a callback called for each prop passed to a component
@@ -37,7 +37,7 @@ const applyCallback = (callback, items, key, value) => {
  * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
  * @returns {object} - valid props for this component
  */
-export default function getPropSelector(propTypes, regexp, callback) {
+export function getPropSelector(propTypes, regexp, callback) {
   return (props) =>
     Object.entries(props).reduce(
       (items, [key, value]) =>

package/src/utils/props/handlerProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 const focusHandlerProps = {
   types: {

package/src/utils/props/hrefAttrsProp.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 // Props related to HTML <a> anchor link attributes.
 const targetValues = ['_self', '_blank', '_parent', '_top']
-export default {
+export const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"

package/src/utils/props/inputSupportsProps.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import tooltipPropTypes from '../../Tooltip/shared'
+import { propTypes as tooltipPropTypes } from '../../Tooltip/shared'
 
-export default {
+export const inputSupportsProps = {
   types: {
     /**
      * Whether the English or French copy will be used (e.g. for accessibility labels).

package/src/utils/props/linkProps.js

@@ -1,9 +1,9 @@
 import { Linking, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { pressPropTypes } from './pressProps'
-import a11yProps from './a11yProps'
-import hrefAttrsProp from './hrefAttrsProp'
-import getPropSelector from './getPropSelector'
+import { a11yProps } from './a11yProps'
+import { hrefAttrsProp } from './hrefAttrsProp'
+import { getPropSelector } from './getPropSelector'
 
 const linkPropTypes = {
   ...pressPropTypes,
@@ -12,7 +12,7 @@ const linkPropTypes = {
   ...a11yProps.types
 }
 
-export default {
+export const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */

package/src/utils/props/paddingProp.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-export default {
+export const paddingProp = {
   propType: PropTypes.shape({
     paddingBottom: PropTypes.number,
     paddingLeft: PropTypes.number,