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

package/src/Carousel/Carousel.jsx

@@ -9,34 +9,31 @@ import {
   Easing
 } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens, useTheme } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import {
-  getTokensPropType,
-  getA11yPropsFromHtmlTag,
-  layoutTags,
-  variantProp,
-  selectSystemProps,
-  a11yProps,
-  viewProps,
-  useCopy,
-  unpackFragment,
-  isTouchDevice,
-  useResponsiveProp,
-  resolveContentMaxWidth
-} from '../utils'
-import { useA11yInfo } from '../A11yInfoProvider'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { getTokensPropType } from '../utils/props/tokens'
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics'
+import { variantProp } from '../utils/props/variantProp'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
+import { useCopy } from '../utils/useCopy'
+import { unpackFragment } from '../utils/children'
+import { isTouchDevice } from '../utils/isTouchDevice'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { resolveContentMaxWidth } from '../utils/resolveContentMaxWidth'
+import { useA11yInfo } from '../A11yInfoProvider/A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
-import CarouselItem from './CarouselItem'
-import IconButton from '../IconButton'
-import SkipLink from '../SkipLink'
-import A11yText from '../A11yText'
-import CarouselStepTracker from './CarouselStepTracker'
-import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
-import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
-import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
-import dictionary from './dictionary'
-import Box from '../Box'
+import { IconButton } from '../IconButton/IconButton'
+import { SkipLink } from '../SkipLink/SkipLink'
+import { A11yText } from '../A11yText/A11yText'
+import { CarouselStepTracker } from './CarouselStepTracker/CarouselStepTracker'
+import { CarouselThumbnailNavigation } from './CarouselThumbnailNavigation'
+import { CarouselTabsPanel } from './CarouselTabs/CarouselTabsPanel'
+import { CarouselTabsPanelItem } from './CarouselTabs/CarouselTabsPanelItem'
+import { dictionary } from './dictionary'
+import { Box } from '../Box/Box'
 import {
   ITEMS_PER_VIEWPORT_XS_SM,
   ITEMS_PER_VIEWPORT_MD,
@@ -357,7 +354,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
   ## Usage
   - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel
-  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide
+  - Immediately within `Carousel`, individual slides are wrapped in `CarouselItem` for the top-level `Carousel` to know how to identify an individual slide
   - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout
   - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content
   - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need
@@ -386,7 +383,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
   ## Accessibility
 
-  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props
+  - Top-level `Carousel` and `CarouselItem` can take all possible React Native's `View` and `a11y` props
   - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides
 
   ## Platform considerations
@@ -406,7 +403,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = React.forwardRef(
+export const Carousel = React.forwardRef(
   (
     {
       tokens,
@@ -475,7 +472,7 @@ const Carousel = React.forwardRef(
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
       autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
-    // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+    // if `Carousel` only has one `CarouselItem`, convert this to a single-item array
     if (!Array.isArray(childrenArray)) {
       childrenArray = [childrenArray]
     }
@@ -1374,7 +1371,7 @@ Carousel.propTypes = {
    */
   progressBarVariant: variantProp.propType,
   /**
-   * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
+   * Slides to render in Carousel. Wrap individual slides in `CarouselItem`
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   /**
@@ -1428,7 +1425,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onIndexChanged={onIndexChangedCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1463,7 +1460,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      panelNavigation={<CustomPanelNavigation />}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    */
@@ -1479,7 +1476,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onAnimationStart={onAnimationStartCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1496,7 +1493,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      onAnimationEnd={onAnimationEndCallback}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
@@ -1595,8 +1592,4 @@ Carousel.propTypes = {
   swipeReleaseDuration: PropTypes.number
 }
 
-Carousel.Item = CarouselItem
-
 Carousel.displayName = 'Carousel'
-
-export default Carousel

package/src/Carousel/CarouselContext.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType } from '../utils/props/tokens'
 
 const CarouselContext = React.createContext()
 
-const CarouselProvider = ({
+export const CarouselProvider = ({
   activeIndex,
   children,
   goTo,
@@ -49,7 +49,7 @@ const CarouselProvider = ({
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
 
-function useCarousel() {
+export function useCarousel() {
   const context = React.useContext(CarouselContext)
   if (context === undefined) {
     throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`)
@@ -71,5 +71,3 @@ CarouselProvider.propTypes = {
   maxWidth: PropTypes.number,
   viewportWidth: PropTypes.number
 }
-
-export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselFirstFocus/CarouselFirstFocus.jsx

@@ -10,7 +10,7 @@ import { useCarousel } from '../CarouselContext'
  *
  * @TODO rework this after integrating with SkipLink when available.
  */
-const CarouselFirstFocus = React.forwardRef(({ title }, ref) => {
+export const CarouselFirstFocus = React.forwardRef(({ title }, ref) => {
   const { getCopyWithPlaceholders } = useCarousel()
 
   // TODO: integrate skip link description if behaving as skip link.
@@ -45,5 +45,3 @@ CarouselFirstFocus.propTypes = {
    */
   title: PropTypes.string
 }
-
-export default CarouselFirstFocus

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
-import {
-  layoutTags,
-  getA11yPropsFromHtmlTag,
-  selectSystemProps,
-  a11yProps,
-  viewProps,
-  variantProp
-} from '../../utils'
+import { layoutTags, getA11yPropsFromHtmlTag } from '../../utils/a11y/semantics'
+import { selectSystemProps } from '../../utils/props/selectSystemProps'
+import { a11yProps } from '../../utils/props/a11yProps'
+import { viewProps } from '../../utils/props/viewProps'
+import { variantProp } from '../../utils/props/variantProp'
 import { useCarousel } from '../CarouselContext'
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants'
 
@@ -84,10 +81,10 @@ const selectContainerStyle = ({
 }
 
 /**
- * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselItem` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = React.forwardRef(
+export const CarouselItem = React.forwardRef(
   (
     {
       children,
@@ -184,7 +181,7 @@ CarouselItem.propTypes = {
   variant: variantProp.propType,
   /**
    * Index of the current slide
-   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   * Don't pass this prop when using `CarouselItem` as it is already being passed by `Carousel` top-level component
    */
   elementIndex: PropTypes.number,
   /**
@@ -200,7 +197,7 @@ CarouselItem.propTypes = {
    * the Carousel as a list of items.
    *
    * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
-   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   * `Carousel` or `CarouselItem` is overriden, the other should be too, to avoid producing invalid HTML.
    */
   tag: PropTypes.oneOf(layoutTags),
   /**
@@ -228,6 +225,4 @@ CarouselItem.propTypes = {
   backgroundColor: PropTypes.string
 }
 
-CarouselItem.displayName = 'Carousel.Item'
-
-export default CarouselItem
+CarouselItem.displayName = 'CarouselItem'

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -2,13 +2,14 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useCarousel } from '../CarouselContext'
-import StepTracker from '../../StepTracker'
-import StackView from '../../StackView'
-import Spacer from '../../Spacer'
-import Progress from '../../Progress'
-import { variantProp } from '../../utils'
+import { StepTracker } from '../../StepTracker/StepTracker'
+import { StackView } from '../../StackView/StackView'
+import { Spacer } from '../../Spacer/Spacer'
+import { Progress } from '../../Progress/Progress'
+import { ProgressBar } from '../../Progress/ProgressBar'
+import { variantProp } from '../../utils/props/variantProp'
 
-const CarouselStepTracker = React.forwardRef(
+export const CarouselStepTracker = React.forwardRef(
   ({ stepTrackerVariant, progressBarVariant, enableDisplayMultipleItemsPerSlide }, ref) => {
     const {
       activeIndex,
@@ -45,7 +46,7 @@ const CarouselStepTracker = React.forwardRef(
           <StackView direction="row" tokens={stackViewTokens} ref={ref}>
             <View style={staticStyles.progress}>
               <Progress>
-                <Progress.Bar
+                <ProgressBar
                   offset={{
                     items: totalItems,
                     current: activeIndex + 1
@@ -94,5 +95,3 @@ const staticStyles = StyleSheet.create({
     width: 288
   }
 })
-
-export default CarouselStepTracker

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -2,16 +2,16 @@ import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import StackView from '../../StackView'
+import { StackView } from '../../StackView/StackView'
 
 import { useCarousel } from '../CarouselContext'
-import CarouselTabsPanelItem from './CarouselTabsPanelItem'
+import { CarouselTabsPanelItem } from './CarouselTabsPanelItem'
 
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 })
 
-const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
+export const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
   const { activeIndex, goTo } = useCarousel()
   const nextFocusRef = React.useRef()
   const firstTabRef = React.useRef()
@@ -76,8 +76,6 @@ const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
 CarouselTabsPanel.displayName = 'CarouselTabsPanel'
 CarouselTabsPanel.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
-  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  // Color defined by `CarouselItem` variant otherwise fallback to transparent
   contentBackgroundColor: PropTypes.string
 }
-
-export default CarouselTabsPanel

package/src/Carousel/CarouselTabs/CarouselTabsPanelItem.jsx

@@ -2,17 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Text, Platform } from 'react-native'
 
-import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider'
-import {
-  selectSystemProps,
-  a11yProps,
-  pressProps,
-  viewProps,
-  textProps,
-  getTokensPropType,
-  variantProp,
-  resolvePressableState
-} from '../../utils'
+import { applyTextStyles } from '../../ThemeProvider/utils/styles'
+import { useThemeTokensCallback } from '../../ThemeProvider/useThemeTokens'
+import { selectSystemProps } from '../../utils/props/selectSystemProps'
+import { a11yProps } from '../../utils/props/a11yProps'
+import { pressProps } from '../../utils/props/pressProps'
+import { viewProps } from '../../utils/props/viewProps'
+import { textProps } from '../../utils/props/textProps'
+import { getTokensPropType } from '../../utils/props/tokens'
+import { variantProp } from '../../utils/props/variantProp'
+import { resolvePressableState } from '../../utils/pressability'
 
 const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
 const [selectTextProps, textPropTypes] = selectSystemProps([textProps])
@@ -64,7 +63,7 @@ const selectTextStyles = ({
     color
   })
 
-const CarouselTabsPanelItem = React.forwardRef(
+export const CarouselTabsPanelItem = React.forwardRef(
   ({ title, selected, inactive, variant, tokens, accessibilityRole = 'tab', ...rest }, ref) => {
     // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
     // Don't allow disabled to be set while focus is true else focus state gets locked `true`
@@ -115,5 +114,3 @@ CarouselTabsPanelItem.propTypes = {
   tokens: getTokensPropType('CarouselTabsPanelItem'),
   variant: variantProp.propType
 }
-
-export default CarouselTabsPanelItem

package/src/Carousel/CarouselThumbnail.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Image } from 'react-native'
 import { useCarousel } from './CarouselContext'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
 
 const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin, padding }) => ({
   borderColor,
@@ -17,71 +17,73 @@ const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin,
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = React.forwardRef(({ accessibilityLabel, alt, index, src }, ref) => {
-  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
-  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
-  const viewport = useViewport()
-  const thumbnailTitle =
-    alt ??
-    getCopyWithPlaceholders('stepTrackerLabel')
-      .replace(/%\{itemLabel\}/g, itemLabel)
-      .replace(/%\{stepNumber\}/g, index)
-      .replace(/%\{stepCount\}/g, totalItems)
-  const handlePress = () => goTo(index)
-  const handleKeyDown = (event) => {
-    // Allow using the spacebar for navigation
-    if (event?.key === ' ') goTo(index)
-  }
-  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size, margin } =
-    getThumbnailTokens({ viewport })
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
+export const CarouselThumbnail = React.forwardRef(
+  ({ accessibilityLabel, alt, index, src }, ref) => {
+    const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
+    const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
+    const viewport = useViewport()
+    const thumbnailTitle =
+      alt ??
+      getCopyWithPlaceholders('stepTrackerLabel')
+        .replace(/%\{itemLabel\}/g, itemLabel)
+        .replace(/%\{stepNumber\}/g, index)
+        .replace(/%\{stepCount\}/g, totalItems)
+    const handlePress = () => goTo(index)
+    const handleKeyDown = (event) => {
+      // Allow using the spacebar for navigation
+      if (event?.key === ' ') goTo(index)
+    }
+    const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size, margin } =
+      getThumbnailTokens({ viewport })
+    const styles = {
+      image: {
+        height: size,
+        width: size
+      },
+      selected: {
+        borderColor: selectedBorderColor,
+        borderWidth: selectedBorderWidth,
+        padding: padding - selectedBorderWidth,
+        marginBottom: margin + selectedBorderWidth
+      },
+      nonSelected: {
+        padding: padding - borderWidth,
+        marginBottom: margin + selectedBorderWidth
+      }
     }
-  }
 
-  return (
-    <Pressable
-      key={src}
-      onKeyDown={handleKeyDown}
-      onPress={handlePress}
-      style={({ hovered, pressed, focused }) => {
-        const pressableStyles = selectPressableTokens(
-          getThumbnailTokens({
-            hover: hovered,
-            pressed,
-            focus: focused
-          })
-        )
+    return (
+      <Pressable
+        key={src}
+        onKeyDown={handleKeyDown}
+        onPress={handlePress}
+        style={({ hovered, pressed, focused }) => {
+          const pressableStyles = selectPressableTokens(
+            getThumbnailTokens({
+              hover: hovered,
+              pressed,
+              focus: focused
+            })
+          )
 
-        return [
-          pressableStyles,
-          index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
-        ]
-      }}
-      ref={ref}
-    >
-      <Image
-        accessibilityIgnoresInvertColors
-        accessibilityLabel={accessibilityLabel ?? alt}
-        source={src}
-        style={styles.image}
-        title={thumbnailTitle}
-      />
-    </Pressable>
-  )
-})
+          return [
+            pressableStyles,
+            index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
+          ]
+        }}
+        ref={ref}
+      >
+        <Image
+          accessibilityIgnoresInvertColors
+          accessibilityLabel={accessibilityLabel ?? alt}
+          source={src}
+          style={styles.image}
+          title={thumbnailTitle}
+        />
+      </Pressable>
+    )
+  }
+)
 
 CarouselThumbnail.displayName = 'CarouselThumbnail'
 
@@ -91,5 +93,3 @@ CarouselThumbnail.propTypes = {
   index: PropTypes.number,
   src: PropTypes.string
 }
-
-export default CarouselThumbnail

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 import { useCarousel } from './CarouselContext'
-import CarouselThumbnail from './CarouselThumbnail'
-import { StackWrap } from '../StackView'
-import { useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { CarouselThumbnail } from './CarouselThumbnail'
+import { StackWrap } from '../StackView/StackWrap'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
 
-const CarouselThumbnailNavigation = React.forwardRef(({ thumbnails = [] }, ref) => {
+export const CarouselThumbnailNavigation = React.forwardRef(({ thumbnails = [] }, ref) => {
   const viewport = useViewport()
   const { alignItems } = useThemeTokens('CarouselThumbnail', {}, { viewport })
   const { totalItems } = useCarousel()
@@ -53,5 +53,3 @@ CarouselThumbnailNavigation.propTypes = {
     })
   ).isRequired
 }
-
-export default CarouselThumbnailNavigation

package/src/Carousel/dictionary.js

@@ -1,5 +1,5 @@
 // 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
-export default {
+export const dictionary = {
   en: {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',

package/src/Checkbox/Checkbox.jsx

@@ -2,26 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
-import CheckboxInput from './CheckboxInput'
-import CheckboxLabel from '../InputLabel/LabelContent'
-import Feedback from '../Feedback'
-import StackView from '../StackView'
-import {
-  applyShadowToken,
-  applyTextStyles,
-  useTheme,
-  useThemeTokensCallback
-} from '../ThemeProvider'
-import {
-  a11yProps,
-  focusHandlerProps,
-  getTokensPropType,
-  selectSystemProps,
-  useInputValue,
-  variantProp,
-  viewProps
-} from '../utils'
-import useUniqueId from '../utils/useUniqueId'
+import { CheckboxInput } from './CheckboxInput'
+import { LabelContent } from '../InputLabel/LabelContent'
+import { Feedback } from '../Feedback/Feedback'
+import { StackView } from '../StackView/StackView'
+import { applyShadowToken, applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+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 { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { useUniqueId } from '../utils/useUniqueId'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -163,7 +158,7 @@ const selectContainerStyles = ({ iconContainerHeight, iconContainerWidth }) => (
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = React.forwardRef(
+export const Checkbox = React.forwardRef(
   (
     {
       checked,
@@ -273,7 +268,7 @@ const Checkbox = React.forwardRef(
                     </View>
                     {Boolean(label) && (
                       <Text style={labelStyles}>
-                        <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
+                        <LabelContent forId={inputId}>{label}</LabelContent>
                       </Text>
                     )}
                   </View>
@@ -360,8 +355,6 @@ Checkbox.propTypes = {
   testID: PropTypes.string
 }
 
-export default Checkbox
-
 const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },

package/src/Checkbox/CheckboxButton.jsx

@@ -2,15 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
-import CheckboxInput from './CheckboxInput'
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensSetPropType,
-  selectSystemProps,
-  selectTokens,
-  viewProps
-} from '../utils'
+import { CheckboxInput } from './CheckboxInput'
+import { applyShadowToken } from '../ThemeProvider/utils/styles'
+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])
 
@@ -75,7 +73,7 @@ export const selectCheckboxTokens = (themeTokens, prefix) =>
  * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
-const CheckboxButton = React.forwardRef(
+export const CheckboxButton = React.forwardRef(
   (
     {
       isChecked,
@@ -170,8 +168,6 @@ CheckboxButton.propTypes = {
   value: PropTypes.bool
 }
 
-export default CheckboxButton
-
 const staticStyles = StyleSheet.create({
   container: { flexDirection: 'row', alignItems: 'center' },
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' }