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

package/src/Tabs/TabsItem.jsx

@@ -2,21 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
-import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  clickProps,
-  getTokensPropType,
-  linkProps,
-  resolvePressableTokens,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import Spacer from '../Spacer'
-import { horizontalScrollUtils } from '../HorizontalScroll'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { clickProps } from '../utils/props/clickProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { linkProps } from '../utils/props/linkProps'
+import { resolvePressableTokens } from '../utils/pressability'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { Spacer } from '../Spacer/Spacer'
+import { horizontalScrollUtils } from '../HorizontalScroll/HorizontalScroll'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -82,7 +81,7 @@ const selectContainerStyles = ({
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-const TabsItem = React.forwardRef(
+const TabsItemInner = React.forwardRef(
   (
     {
       href,
@@ -199,9 +198,9 @@ const TabsItem = React.forwardRef(
     )
   }
 )
-TabsItem.displayName = 'TabsItem'
+TabsItemInner.displayName = 'TabsItem'
 
-TabsItem.propTypes = {
+TabsItemInner.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('TabsItem'),
   variant: variantProp.propType,
@@ -237,4 +236,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default withLinkRouter(TabsItem)
+export const TabsItem = withLinkRouter(TabsItemInner)

package/src/Tabs/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     selectTab: 'Select tab'
   },

package/src/Tags/Tags.jsx

@@ -1,25 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 import { Platform, Text, View } from 'react-native'
 
-import ButtonBase from '../Button/ButtonBase'
-import Icon from '../Icon'
-import { StackWrap, getStackedContent } from '../StackView'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  getTokensPropType,
-  pressProps,
-  selectSystemProps,
-  selectTokens,
-  useMultipleInputValues,
-  variantProp,
-  viewProps
-} from '../utils'
+import { ButtonBase } from '../Button/ButtonBase'
+import { Icon } from '../Icon/Icon'
+import { StackWrap } from '../StackView/StackWrap'
+import { getStackedContent } from '../StackView/getStackedContent'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { containUniqueFields } from '../utils/containUniqueFields'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { pressProps } from '../utils/props/pressProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -74,7 +71,7 @@ const separateIconTextTokens = (
 const selectIconTextTokens = (tokens) => separateIconTextTokens(tokens, false)
 const selectNonIconTextTokens = (tokens) => separateIconTextTokens(tokens, true)
 
-const Tags = React.forwardRef(
+export const Tags = React.forwardRef(
   (
     {
       variant,
@@ -229,7 +226,7 @@ Tags.propTypes = {
       /**
        * An optional ref for one individual Tag button in the tags
        */
-      ref: ABBPropTypes.ref()
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])
     })
   ),
   /**
@@ -255,5 +252,3 @@ Tags.propTypes = {
    */
   accessibilityRole: PropTypes.string
 }
-
-export default Tags

package/src/TextInput/TextArea.jsx

@@ -1,21 +1,18 @@
 import React from 'react'
 
 import { Platform } from 'react-native'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  inputSupportsProps,
-  selectSystemProps,
-  textInputHandlerProps,
-  textInputProps,
-  variantProp,
-  viewProps
-} from '../utils'
-import InputSupports from '../InputSupports'
-import TextInputBase from './TextInputBase'
-import { useThemeTokens } from '../ThemeProvider'
-import textInputPropTypes from './propTypes'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps, textInputHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { inputSupportsProps } from '../utils/props/inputSupportsProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { textInputProps } from '../utils/props/textInputProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { InputSupports } from '../InputSupports/InputSupports'
+import { TextInputBase } from './TextInputBase'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { textInputPropTypes } from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -50,7 +47,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+export const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
   const [inputHeight, setInputHeight] = React.useState()
 
@@ -110,5 +107,3 @@ TextArea.propTypes = {
   tokens: getTokensPropType('TextArea', 'TextInput'), // TODO: support both TextArea and TextInput tokens
   variant: variantProp.propType
 }
-
-export default TextArea

package/src/TextInput/TextInput.jsx

@@ -1,19 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  inputSupportsProps,
-  selectSystemProps,
-  textInputHandlerProps,
-  textInputProps,
-  variantProp,
-  viewProps
-} from '../utils'
-import InputSupports from '../InputSupports'
-import TextInputBase from './TextInputBase'
-import textInputPropTypes from './propTypes'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps, textInputHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { inputSupportsProps } from '../utils/props/inputSupportsProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { textInputProps } from '../utils/props/textInputProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { InputSupports } from '../InputSupports/InputSupports'
+import { TextInputBase } from './TextInputBase'
+import { textInputPropTypes } from './propTypes'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -42,7 +39,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
+export const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
@@ -82,5 +79,3 @@ TextInput.propTypes = {
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }
-
-export default TextInput

package/src/TextInput/TextInputBase.jsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
-import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import StackView from '../StackView'
-import IconButton from '../IconButton'
-import Icon from '../Icon'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  textInputHandlerProps,
-  textInputProps,
-  useCopy,
-  useInputValue,
-  useSpacingScale,
-  variantProp,
-  viewProps
-} from '../utils'
-import dictionary from './dictionary'
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { StackView } from '../StackView/StackView'
+import { IconButton } from '../IconButton/IconButton'
+import { Icon } from '../Icon/Icon'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { textInputHandlerProps } from '../utils/props/handlerProps'
+import { textInputProps } from '../utils/props/textInputProps'
+import { useCopy } from '../utils/useCopy'
+import { useInputValue } from '../utils/input'
+import { useSpacingScale } from '../utils/useSpacingScale'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { dictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -182,7 +182,7 @@ const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, maste
   return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
 }
 
-const TextInputBase = React.forwardRef(
+export const TextInputBase = React.forwardRef(
   (
     {
       buttons = [],
@@ -450,8 +450,6 @@ TextInputBase.propTypes = {
   variant: variantProp.propType
 }
 
-export default TextInputBase
-
 const staticStyles = StyleSheet.create({
   buttonsContainer: {
     position: 'absolute',

package/src/TextInput/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     clearButtonAccessibilityLabel: 'Clear',
     showPasswordAccessibilityLabel: 'Show Password',

package/src/TextInput/propTypes.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
 // for generic React Native props and HTML input attrs that are passed through.
-const textInputPropTypes = {
+export const textInputPropTypes = {
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
@@ -31,5 +31,3 @@ const textInputPropTypes = {
    */
   onChange: PropTypes.func
 }
-
-export default textInputPropTypes

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { validateThemeTokensVersion } from './utils'
-import responsiveProps from '../utils/props/responsiveProps'
+import { validateThemeTokensVersion } from './utils/theme-tokens'
+import { responsiveProps } from '../utils/props/responsiveProps'
 
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider')
 
@@ -20,30 +20,35 @@ const defaultThemeOptions = {
   enableMediaQueryStyleSheet: false
 }
 
-const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
-  const [theme, setTheme] = React.useState(defaultTheme)
+export const ThemeProvider = React.forwardRef(
+  // eslint-disable-next-line no-unused-vars
+  ({ children, defaultTheme, themeOptions = {} }, _) => {
+    const [theme, setTheme] = React.useState(defaultTheme)
 
-  React.useEffect(() => {
-    if (theme.metadata.name !== defaultTheme.metadata.name) {
-      setTheme(defaultTheme)
-    }
-  }, [theme.metadata.name, defaultTheme])
+    React.useEffect(() => {
+      if (theme.metadata.name !== defaultTheme.metadata.name) {
+        setTheme(defaultTheme)
+      }
+    }, [theme.metadata.name, defaultTheme])
 
-  const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
+    const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
 
-  // Validate the theme tokens version on every render.
-  // This will intentionally break the application when attempting to use an invalid theme.
-  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
-  validateThemeTokensVersion(theme)
+    // Validate the theme tokens version on every render.
+    // This will intentionally break the application when attempting to use an invalid theme.
+    // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
+    validateThemeTokensVersion(theme)
 
-  return (
-    <ThemeSetterContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={{ ...theme, themeOptions: appliedThemeOptions }}>
-        {children}
-      </ThemeContext.Provider>
-    </ThemeSetterContext.Provider>
-  )
-}
+    return (
+      <ThemeSetterContext.Provider value={setTheme}>
+        <ThemeContext.Provider value={{ ...theme, themeOptions: appliedThemeOptions }}>
+          {children}
+        </ThemeContext.Provider>
+      </ThemeSetterContext.Provider>
+    )
+  }
+)
+
+ThemeProvider.displayName = 'ThemeProvider'
 
 ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
@@ -76,5 +81,3 @@ ThemeProvider.propTypes = {
     enableMediaQueryStyleSheet: PropTypes.bool
   })
 }
-
-export default ThemeProvider

package/src/ThemeProvider/useResponsiveThemeTokens.js

@@ -1,6 +1,6 @@
 import { viewports } from '@telus-uds/system-constants'
-import useTheme from './useTheme'
-import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+import { useTheme } from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils/theme-tokens'
 
 const getResponsiveThemeTokens = (
   { rules = [], tokens: defaultThemeTokens = {} },
@@ -75,11 +75,14 @@ const doesConditionApply = ([key, value], appearances) => {
  * @returns { ResponsiveObject }
  */
 
-const useResponsiveThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+export const useResponsiveThemeTokens = (
+  componentName,
+  tokens = {},
+  variants = {},
+  states = {}
+) => {
   const theme = useTheme()
   const componentTheme = getComponentTheme(theme, componentName)
   const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states)
   return themeTokens
 }
-
-export default useResponsiveThemeTokens

package/src/ThemeProvider/useResponsiveThemeTokensCallback.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { viewports } from '@telus-uds/system-constants'
-import useTheme from './useTheme'
-import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+import { useTheme } from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils/theme-tokens'
 
 const getResponsiveThemeTokens = (
   { rules = [], tokens: defaultThemeTokens = {} },
@@ -109,7 +109,7 @@ const doesConditionApply = ([key, value], appearances) => {
  *    - callback function that returns an overridable responsive tokens object for current state. Only pass
  *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope.
  */
-const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+export const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
   const theme = useTheme()
   const componentTheme = getComponentTheme(theme, componentName)
   const getResponsiveThemeTokensCallback = useCallback(
@@ -125,5 +125,3 @@ const useResponsiveThemeTokensCallback = (componentName, tokens = {}, variants =
   )
   return getResponsiveThemeTokensCallback
 }
-
-export default useResponsiveThemeTokensCallback

package/src/ThemeProvider/useSetTheme.js

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react'
 import { ThemeSetterContext } from './ThemeProvider'
 
-const useSetTheme = () => {
+export const useSetTheme = () => {
   // Replace current theme with provided object
   const setTheme = useContext(ThemeSetterContext)
   // Fail fast if dev uses useSetTheme outside of ThemeProvider
@@ -24,4 +24,3 @@ const useSetTheme = () => {
     editTheme
   }
 }
-export default useSetTheme

package/src/ThemeProvider/useTheme.js

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 
 import { ThemeContext } from './ThemeProvider'
 
-const useTheme = () => {
+export const useTheme = () => {
   const theme = useContext(ThemeContext)
   // Fail fast if dev uses useTheme outside of ThemeProvider
   if (theme instanceof Error) {
@@ -11,4 +11,3 @@ const useTheme = () => {
 
   return theme
 }
-export default useTheme

package/src/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,11 @@
 import { useCallback } from 'react'
-import useTheme from './useTheme'
-import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils'
+import { useTheme } from './useTheme'
+import {
+  getComponentTheme,
+  getThemeTokens,
+  resolveThemeTokens,
+  mergeAppearances
+} from './utils/theme-tokens'
 /**
  * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp

package/src/ThemeProvider/utils/styles.js

@@ -45,13 +45,17 @@ export function applyTextStyles({
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`
+    styles.fontFamily = `${fontName}${fontWeight}${fontStyle === 'italic' ? 'normal' : fontStyle}`
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight
   }
 
+  if (fontStyle && fontStyle !== 'normal') {
+    styles.fontStyle = fontStyle
+  }
+
   if (fontColor) {
     styles.color = fontColor
   }

package/src/Timeline/Timeline.jsx

@@ -2,17 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Platform, View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  getTokensPropType,
-  variantProp,
-  a11yProps,
-  viewProps,
-  selectSystemProps,
-  getA11yPropsFromHtmlTag,
-  layoutTags
-} from '../utils'
-import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { getTokensPropType } from '../utils/props/tokens'
+import { variantProp } from '../utils/props/variantProp'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics'
+import { useViewport } from '../ViewportProvider/useViewport'
 
 const selectDotStyles = ({ dotWidth, timelineColor, dotBorderWidth, dotColor }) => ({
   width: dotWidth,
@@ -76,7 +73,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = React.forwardRef(
+export const Timeline = React.forwardRef(
   (
     { tokens, variant = {}, children, accessibilityLabel, tag = 'ul', childrenTag = 'li', ...rest },
     ref
@@ -148,5 +145,3 @@ Timeline.propTypes = {
   tag: PropTypes.oneOf(layoutTags),
   childrenTag: PropTypes.oneOf(layoutTags)
 }
-
-export default Timeline

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -2,21 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
-import InputLabel from '../InputLabel'
-import ButtonBase from '../Button/ButtonBase'
-import StackView from '../StackView'
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  selectTokens,
-  pressProps,
-  selectSystemProps,
-  useUniqueId,
-  variantProp,
-  viewProps
-} from '../utils'
+import { InputLabel } from '../InputLabel/InputLabel'
+import { ButtonBase } from '../Button/ButtonBase'
+import { StackView } from '../StackView/StackView'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+import { a11yProps } from '../utils/props/a11yProps'
+import { focusHandlerProps } from '../utils/props/handlerProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { pressProps } from '../utils/props/pressProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useUniqueId } from '../utils/useUniqueId'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 import { useInputValue } from '../utils/input'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
@@ -104,7 +102,7 @@ const selectLabelTokens = ({
   lineHeight: labelLineHeight
 })
 
-const ToggleSwitch = React.forwardRef(
+export const ToggleSwitch = React.forwardRef(
   (
     {
       copy = 'en',
@@ -275,5 +273,3 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center'
   }
 })
-
-export default ToggleSwitch

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
 
-import ToggleSwitch from './ToggleSwitch'
-import Fieldset from '../Fieldset'
-import { getStackedContent } from '../StackView'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  containUniqueFields,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useMultipleInputValues,
-  variantProp,
-  viewProps
-} from '../utils'
+import { ToggleSwitch } from './ToggleSwitch'
+import { Fieldset } from '../Fieldset/Fieldset'
+import { getStackedContent } from '../StackView/getStackedContent'
+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 { useMultipleInputValues } from '../utils/input'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -25,7 +22,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   focusHandlerProps,
   viewProps
 ])
-const ToggleSwitchGroup = React.forwardRef(
+export const ToggleSwitchGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -184,7 +181,7 @@ ToggleSwitchGroup.propTypes = {
       /**
        * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
        */
-      ref: ABBPropTypes.ref(),
+      ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
       /**
        * Controls the position of the switch in relation to the label.
        * - 'start': switch on the start, before the `label` and `tooltip`.
@@ -240,5 +237,3 @@ ToggleSwitchGroup.propTypes = {
    */
   validation: PropTypes.oneOf(['error', 'success'])
 }
-
-export default ToggleSwitchGroup