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

package/src/ProductCardGroup/ProductCardGroup.jsx

@@ -1,53 +1,57 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils'
-
-import ProductCard from '../ProductCard'
-import { StackWrap } from '../StackView'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { viewProps } from '../utils/props/viewProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { ProductCard } from '../ProductCard/ProductCard'
+import { StackWrap } from '../StackView/StackWrap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
 
-const ProductCardGroup = React.forwardRef(({ productCards, maxSelection = 1, ...rest }, ref) => {
-  const [selectedCardIds, setSelectedCardIds] = React.useState([])
+export const ProductCardGroup = React.forwardRef(
+  ({ productCards, maxSelection = 1, ...rest }, ref) => {
+    const [selectedCardIds, setSelectedCardIds] = React.useState([])
 
-  const handleSelect = (id) => {
-    const isAlreadySelected = selectedCardIds.includes(id)
-    let updatedSelectedCardIds
+    const handleSelect = (id) => {
+      const isAlreadySelected = selectedCardIds.includes(id)
+      let updatedSelectedCardIds
 
-    if (isAlreadySelected) {
-      updatedSelectedCardIds = selectedCardIds.filter((cardId) => cardId !== id)
-    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
-      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id)
-    } else {
-      updatedSelectedCardIds = [...selectedCardIds, id]
-    }
+      if (isAlreadySelected) {
+        updatedSelectedCardIds = selectedCardIds.filter((cardId) => cardId !== id)
+      } else if (maxSelection && selectedCardIds.length >= maxSelection) {
+        updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id)
+      } else {
+        updatedSelectedCardIds = [...selectedCardIds, id]
+      }
 
-    setSelectedCardIds(updatedSelectedCardIds)
-  }
+      setSelectedCardIds(updatedSelectedCardIds)
+    }
 
-  return (
-    <View {...selectProps(rest)} ref={ref}>
-      <StackWrap direction={{ xs: 'column', lg: 'row' }} space={4}>
-        {productCards.map((cardProperties, index) => {
-          const cardId = cardProperties.id || index
+    return (
+      <View {...selectProps(rest)} ref={ref}>
+        <StackWrap direction={{ xs: 'column', lg: 'row' }} space={4}>
+          {productCards.map((cardProperties, index) => {
+            const cardId = cardProperties.id || index
 
-          return (
-            <View key={cardId}>
-              <ProductCard
-                key={cardId}
-                cardId={cardId}
-                isSelected={selectedCardIds.includes(cardId)}
-                onSelect={handleSelect}
-                {...cardProperties}
-              />
-            </View>
-          )
-        })}
-      </StackWrap>
-    </View>
-  )
-})
+            return (
+              <View key={cardId}>
+                <ProductCard
+                  key={cardId}
+                  cardId={cardId}
+                  isSelected={selectedCardIds.includes(cardId)}
+                  onSelect={handleSelect}
+                  {...cardProperties}
+                />
+              </View>
+            )
+          })}
+        </StackWrap>
+      </View>
+    )
+  }
+)
 
 ProductCardGroup.displayName = 'ProductCardGroup'
 
@@ -71,5 +75,3 @@ ProductCardGroup.propTypes = {
     })
   ).isRequired
 }
-
-export default ProductCardGroup

package/src/Progress/Progress.jsx

@@ -2,9 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import ProgressContext from './ProgressContext'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+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 { ProgressContext } from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -60,7 +65,7 @@ const selectProgressStyles = ({
  * role.
  *
  */
-const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
+export const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
   // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false
@@ -95,8 +100,6 @@ Progress.propTypes = {
   variant: variantProp.propType
 }
 
-export default Progress
-
 const staticStyles = StyleSheet.create({
   progressContainer: {
     position: 'relative'

package/src/Progress/ProgressBar.jsx

@@ -2,11 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
-import ProgressBarBackground from './ProgressBarBackground'
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { ProgressBarBackground } from './ProgressBarBackground'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+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 { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants'
-import ProgressContext from './ProgressContext'
+import { ProgressContext } from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -59,7 +64,7 @@ const selectBarStyles = ({ themeTokens, calculatedPercentage, barPosition, layer
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = React.forwardRef(
+export const ProgressBar = React.forwardRef(
   (
     {
       children = null,
@@ -151,8 +156,6 @@ ProgressBar.propTypes = {
   })
 }
 
-export default ProgressBar
-
 const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',

package/src/Progress/ProgressBarBackground.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 import { ImageBackground, StyleSheet } from 'react-native'
 import { INACTIVE_VARIANT, NEGATIVE_VARIANT } from './constants'
 
-import { variantProp } from '../utils'
+import { variantProp } from '../utils/props/variantProp'
 
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`
 
-const ProgressBarBackground = React.forwardRef(({ variant }, ref) => {
+export const ProgressBarBackground = React.forwardRef(({ variant }, ref) => {
   let source = null
   // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
   if (variant?.inactive || variant?.style === INACTIVE_VARIANT) {
@@ -35,6 +35,4 @@ ProgressBarBackground.propTypes = {
   variant: variantProp.propType
 }
 
-export default ProgressBarBackground
-
 const staticStyles = StyleSheet.create({ imageBackground: { height: '100%' } })

package/src/Progress/ProgressContext.js

@@ -1,5 +1,3 @@
 import { createContext } from 'react'
 
-const ProgressContext = createContext({ layers: false })
-
-export default ProgressContext
+export const ProgressContext = createContext({ layers: false })

package/src/QuickLinks/QuickLinks.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
 
-import List from '../List'
-import StackWrap from '../StackView/StackWrap'
-import QuickLinksCard from './QuickLinksCard'
+import { List } from '../List/List'
+import { StackWrap } from '../StackView/StackWrap'
+import { QuickLinksCard } from './QuickLinksCard'
 
 /**
  * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
@@ -15,7 +16,7 @@ import QuickLinksCard from './QuickLinksCard'
  *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
-const QuickLinks = React.forwardRef(
+export const QuickLinks = React.forwardRef(
   ({ tokens, variant, listTokens, cardTokens, children, tag = 'ul', ...rest }, ref) => {
     const viewport = useViewport()
     const { dividers, list, card, stackSpace, stackGap, stackJustify } = useThemeTokens(
@@ -66,5 +67,3 @@ QuickLinks.propTypes = {
   variant: variantProp.propType,
   children: PropTypes.node
 }
-
-export default QuickLinks

package/src/QuickLinks/QuickLinksCard.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
-import CardBase from '../Card/CardBase'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { CardBase } from '../Card/CardBase'
 
 /**
  * Private subcomponent for use within QuickLinks.
@@ -11,7 +12,7 @@ import CardBase from '../Card/CardBase'
  * Restyled Card with identical behaviour to Card, but themed according to the
  * QuickLinksCard theme rather than the Card theme.
  */
-const QuickLinksList = React.forwardRef(({ tokens, variant, children }, ref) => {
+export const QuickLinksCard = React.forwardRef(({ tokens, variant, children }, ref) => {
   const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)
 
   return (
@@ -21,12 +22,10 @@ const QuickLinksList = React.forwardRef(({ tokens, variant, children }, ref) =>
   )
 })
 
-QuickLinksList.displayName = 'QuickLinksList'
+QuickLinksCard.displayName = 'QuickLinksCard'
 
-QuickLinksList.propTypes = {
+QuickLinksCard.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),
   variant: variantProp.propType,
   children: PropTypes.node
 }
-
-export default QuickLinksList

package/src/QuickLinks/QuickLinksItem.jsx

@@ -1,19 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { getTokensPropType, variantProp, withLinkRouter } from '../utils'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
 
-import PressableListItemBase from '../List/PressableListItemBase'
-import ButtonBase from '../Button/ButtonBase'
+import { PressableListItemBase } from '../List/PressableListItemBase'
+import { ButtonBase } from '../Button/ButtonBase'
 
 /**
- * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ * Public component exported as QuickLinksItem, for use as children of QuickLinks.
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
-const QuickLinksItem = React.forwardRef(({ tokens, variant, children, ...rest }, ref) => {
+const QuickLinksItemBase = React.forwardRef(({ tokens, variant, children, ...rest }, ref) => {
   const viewport = useViewport()
   const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })
 
@@ -32,9 +34,9 @@ const QuickLinksItem = React.forwardRef(({ tokens, variant, children, ...rest },
   )
 })
 
-QuickLinksItem.displayName = 'QuickLinksItem'
+QuickLinksItemBase.displayName = 'QuickLinksItem'
 
-QuickLinksItem.propTypes = {
+QuickLinksItemBase.propTypes = {
   ...withLinkRouter.propTypes,
   ...PressableListItemBase.propTypes,
   ...ButtonBase.propTypes,
@@ -43,4 +45,7 @@ QuickLinksItem.propTypes = {
   children: PropTypes.node
 }
 
-export default withLinkRouter(QuickLinksItem)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { QuickLinksItemBase }
+
+export const QuickLinksItem = withLinkRouter(QuickLinksItemBase)

package/src/QuickLinksFeature/QuickLinksFeature.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StackWrap } from '../StackView'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { StackWrap } from '../StackView/StackWrap'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+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'
 
 // pass through and type relevant system props - add more sets for interactive components
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -15,9 +19,9 @@ const isQuickListItem = (element) => {
 
 /**
  * QuickLinksFeature renders a list of interactive items.
- *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeatureItem`
  */
-const QuickLinksFeature = React.forwardRef(
+export const QuickLinksFeature = React.forwardRef(
   ({ tokens, variant, tag = 'ul', children, ...rest }, ref) => {
     const viewport = useViewport()
     const { stackGap, stackJustify, stackSpace } = useThemeTokens(
@@ -61,9 +65,7 @@ QuickLinksFeature.propTypes = {
    */
   tag: PropTypes.string,
   /**
-   * QuickLinksFeature.Item component
+   * QuickLinksFeatureItem component
    */
   children: PropTypes.node
 }
-
-export default QuickLinksFeature

package/src/QuickLinksFeature/QuickLinksFeatureItem.jsx

@@ -2,18 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { Image, Platform, Text, View } from 'react-native'
-import {
-  getTokensPropType,
-  variantProp,
-  withLinkRouter,
-  a11yProps,
-  linkProps,
-  selectSystemProps
-} from '../utils'
-import { useViewport } from '../ViewportProvider'
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import { Link } from '../Link'
-import { StackWrap } from '../StackView'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { a11yProps } from '../utils/props/a11yProps'
+import { linkProps } from '../utils/props/linkProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { Link } from '../Link/Link'
+import { StackWrap } from '../StackView/StackWrap'
 
 // pass through and type relevant system props - add more sets for interactive components
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps])
@@ -48,7 +47,7 @@ const selectLinkToken = ({ outerBorderColor }) => ({ outerBorderColor })
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = React.forwardRef(
+const QuickLinksFeatureItemBase = React.forwardRef(
   ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
     const viewport = useViewport()
     const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant)
@@ -97,9 +96,9 @@ const QuickLinksFeatureItem = React.forwardRef(
   }
 )
 
-QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem'
+QuickLinksFeatureItemBase.displayName = 'QuickLinksFeatureItem'
 
-QuickLinksFeatureItem.propTypes = {
+QuickLinksFeatureItemBase.propTypes = {
   ...withLinkRouter.propTypes,
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('QuickLinksFeatureItem'),
@@ -118,4 +117,7 @@ QuickLinksFeatureItem.propTypes = {
   imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 }
 
-export default withLinkRouter(QuickLinksFeatureItem)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { QuickLinksFeatureItemBase }
+
+export const QuickLinksFeatureItem = withLinkRouter(QuickLinksFeatureItemBase)

package/src/Radio/Radio.jsx

@@ -2,20 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
-import RadioLabel from '../InputLabel/LabelContent'
-import RadioButton, { selectRadioButtonTokens } from './RadioButton'
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useInputValue,
-  useUniqueId,
-  variantProp,
-  viewProps
-} from '../utils'
-import StackView from '../StackView'
+import { LabelContent } from '../InputLabel/LabelContent'
+import { RadioButton, selectRadioButtonTokens } from './RadioButton'
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useInputValue } from '../utils/input'
+import { useUniqueId } from '../utils/useUniqueId'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { StackView } from '../StackView/StackView'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -111,7 +110,7 @@ const selectLabelStyles = ({
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = React.forwardRef(
+export const Radio = React.forwardRef(
   (
     {
       checked,
@@ -200,7 +199,7 @@ const Radio = React.forwardRef(
                 </View>
                 {Boolean(label) && (
                   <Text style={labelStyles}>
-                    <RadioLabel forId={inputId}>{label}</RadioLabel>
+                    <LabelContent forId={inputId}>{label}</LabelContent>
                   </Text>
                 )}
               </View>
@@ -275,8 +274,6 @@ Radio.propTypes = {
   variant: variantProp.propType
 }
 
-export default Radio
-
 const staticStyles = StyleSheet.create({
   container: { flexDirection: 'row', alignItems: 'center' },
   alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },

package/src/Radio/RadioButton.jsx

@@ -2,21 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
-import RadioInput from './RadioInput'
-import {
-  applyOuterBorder,
-  applyShadowToken,
-  resolveThemeTokens,
-  validateThemeTokens,
-  useThemeTokens
-} from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensSetPropType,
-  selectSystemProps,
-  selectTokens,
-  viewProps
-} from '../utils'
+import { RadioInput } from './RadioInput'
+import { applyOuterBorder, applyShadowToken } from '../ThemeProvider/utils/styles'
+import { resolveThemeTokens, validateThemeTokens } from '../ThemeProvider/utils/theme-tokens'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensSetPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -116,7 +109,7 @@ const selectOuterBorderStyles = ({
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-const RadioButton = React.forwardRef(
+export const RadioButton = React.forwardRef(
   (
     {
       isChecked,
@@ -200,5 +193,3 @@ RadioButton.propTypes = {
 const staticStyles = StyleSheet.create({
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' }
 })
-
-export default RadioButton

package/src/Radio/RadioGroup.jsx

@@ -1,22 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useInputValue,
-  variantProp,
-  viewProps
-} from '../utils'
-import { getStackedContent } from '../StackView'
-import Radio from './Radio'
-import Fieldset from '../Fieldset'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useInputValue } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { getStackedContent } from '../StackView/getStackedContent'
+import { Radio } from './Radio'
+import { Fieldset } from '../Fieldset/Fieldset'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -73,7 +70,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioGroup = React.forwardRef(
+export const RadioGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -217,7 +214,7 @@ RadioGroup.propTypes = {
       id: PropTypes.string,
       onChange: PropTypes.func,
       description: PropTypes.string,
-      ref: ABBPropTypes.ref()
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])
     })
   ),
   /**
@@ -272,5 +269,3 @@ RadioGroup.propTypes = {
    */
   name: PropTypes.string
 }
-
-export default RadioGroup

package/src/Radio/RadioInput.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 /**
  * On Web we need to include an actual input but hide it.
  */
-const RadioInput = React.forwardRef(
+export const RadioInput = React.forwardRef(
   (
     {
       checked,
@@ -54,5 +54,3 @@ RadioInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 }
-
-export default RadioInput

package/src/Radio/RadioInput.native.jsx

@@ -1,6 +1,4 @@
 /**
  * There's no radio button input on native platforms, so this is a noop.
  */
-const RadioInput = () => null
-
-export default RadioInput
+export const RadioInput = () => null