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

package/lib/esm/Carousel/Carousel.js

@@ -7,21 +7,31 @@ import Platform from "react-native-web/dist/exports/Platform";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Easing from "react-native-web/dist/exports/Easing";
 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, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, NEGATIVE_MULTIPLIER, TRANSITION_MODES, SWIPE_RELEASE_STYLES, INSTANT_ANIMATION_DURATION, DEFAULT_SWIPE_RELEASE_DURATION, POSITION_VARIANTS, POSITION_PROPERTIES } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
@@ -293,7 +303,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
@@ -322,7 +332,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
@@ -342,7 +352,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 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -403,7 +413,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }
   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];
   }
@@ -761,7 +771,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref10 => {
+  const onHeroContainerLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -771,7 +781,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -780,17 +790,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref11 => {
+  const onPreviousNextNavigationButtonLayout = _ref1 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref11;
+    } = _ref1;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const onRootContainerLayout = _ref12 => {
+  const onRootContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -800,7 +810,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref12;
+    } = _ref10;
     return setRootContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -1142,7 +1152,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,
   /**
@@ -1194,7 +1204,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
@@ -1229,7 +1239,7 @@ Carousel.propTypes = {
    *    <Carousel
    *      panelNavigation={<CustomPanelNavigation />}
    *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
+   *      <CarouselItem>First Slide</CarouselItem>
    *    </Carousel>
    * ```
    */
@@ -1245,7 +1255,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
@@ -1262,7 +1272,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
@@ -1364,6 +1374,4 @@ Carousel.propTypes = {
    */
   swipeReleaseDuration: PropTypes.number
 };
-Carousel.Item = CarouselItem;
-Carousel.displayName = 'Carousel';
-export default Carousel;
+Carousel.displayName = 'Carousel';

package/lib/esm/Carousel/CarouselContext.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType } from '../utils/props/tokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselContext = /*#__PURE__*/React.createContext();
-const CarouselProvider = _ref => {
+export const CarouselProvider = _ref => {
   let {
     activeIndex,
     children,
@@ -36,7 +36,7 @@ const CarouselProvider = _ref => {
     children: children
   });
 };
-function useCarousel() {
+export function useCarousel() {
   const context = React.useContext(CarouselContext);
   if (context === undefined) {
     throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
@@ -56,5 +56,4 @@ CarouselProvider.propTypes = {
   maximumItemsForSlide: PropTypes.number,
   maxWidth: PropTypes.number,
   viewportWidth: PropTypes.number
-};
-export { CarouselProvider, useCarousel };
+};

package/lib/esm/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -12,7 +12,7 @@ import { useCarousel } from '../CarouselContext';
  * @TODO rework this after integrating with SkipLink when available.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselFirstFocus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CarouselFirstFocus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;
@@ -48,5 +48,4 @@ CarouselFirstFocus.propTypes = {
    * For example, "Summer offers" in "Summer offers, offer 1 of 3"
    */
   title: PropTypes.string
-};
-export default CarouselFirstFocus;
+};

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
-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';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -69,10 +73,10 @@ const selectContainerStyle = _ref => {
 };
 
 /**
- * `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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
@@ -150,7 +154,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,
   /**
@@ -166,7 +170,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),
   /**
@@ -193,5 +197,4 @@ CarouselItem.propTypes = {
    */
   backgroundColor: PropTypes.string
 };
-CarouselItem.displayName = 'Carousel.Item';
-export default CarouselItem;
+CarouselItem.displayName = 'CarouselItem';

package/lib/esm/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -3,13 +3,14 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 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';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     stepTrackerVariant,
     progressBarVariant,
@@ -52,7 +53,7 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         children: /*#__PURE__*/_jsx(View, {
           style: staticStyles.progress,
           children: /*#__PURE__*/_jsx(Progress, {
-            children: /*#__PURE__*/_jsx(Progress.Bar, {
+            children: /*#__PURE__*/_jsx(ProgressBar, {
               offset: {
                 items: totalItems,
                 current: activeIndex + 1
@@ -94,5 +95,4 @@ const staticStyles = StyleSheet.create({
   progress: {
     width: 288
   }
-});
-export default CarouselStepTracker;
+});

package/lib/esm/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -82,7 +82,6 @@ const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, 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/lib/esm/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -3,8 +3,16 @@ import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
-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';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
 const [selectTextProps, textPropTypes] = selectSystemProps([textProps]);
@@ -60,7 +68,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -114,5 +122,4 @@ CarouselTabsPanelItem.propTypes = {
   selected: PropTypes.bool,
   tokens: getTokensPropType('CarouselTabsPanelItem'),
   variant: variantProp.propType
-};
-export default CarouselTabsPanelItem;
+};

package/lib/esm/Carousel/CarouselThumbnail.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Image from "react-native-web/dist/exports/Image";
 import { useCarousel } from './CarouselContext';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectPressableTokens = _ref => {
   let {
@@ -27,7 +27,7 @@ const selectPressableTokens = _ref => {
  * `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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     accessibilityLabel,
     alt,
@@ -109,5 +109,4 @@ CarouselThumbnail.propTypes = {
   alt: PropTypes.string,
   index: PropTypes.number,
   src: PropTypes.string
-};
-export default CarouselThumbnail;
+};

package/lib/esm/Carousel/CarouselThumbnailNavigation.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselThumbnailNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CarouselThumbnailNavigation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;
@@ -67,5 +67,4 @@ CarouselThumbnailNavigation.propTypes = {
     alt: PropTypes.string,
     src: PropTypes.string
   })).isRequired
-};
-export default CarouselThumbnailNavigation;
+};

package/lib/esm/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/lib/esm/Checkbox/Checkbox.js

@@ -5,13 +5,21 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
@@ -176,7 +184,7 @@ const selectContainerStyles = _ref7 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const Checkbox = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     checked,
     defaultChecked,
@@ -298,7 +306,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
                 })
               }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
                 style: labelStyles,
-                children: /*#__PURE__*/_jsx(CheckboxLabel, {
+                children: /*#__PURE__*/_jsx(LabelContent, {
                   forId: inputId,
                   children: label
                 })
@@ -382,7 +390,6 @@ Checkbox.propTypes = {
    */
   testID: PropTypes.string
 };
-export default Checkbox;
 const staticStyles = StyleSheet.create({
   wrapper: {
     backgroundColor: 'transparent'

package/lib/esm/Checkbox/CheckboxButton.js

@@ -3,9 +3,13 @@ import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
-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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
@@ -59,7 +63,7 @@ export const selectCheckboxTokens = (themeTokens, prefix) => selectTokens(tokenK
  * 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 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const CheckboxButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     isChecked,
     tokens,
@@ -150,7 +154,6 @@ CheckboxButton.propTypes = {
    */
   value: PropTypes.bool
 };
-export default CheckboxButton;
 const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',

package/lib/esm/Checkbox/CheckboxGroup.js

@@ -1,12 +1,18 @@
 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, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import { getStackedContent } from '../StackView';
-import Checkbox from './Checkbox';
-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 { useMultipleInputValues } from '../utils/input';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { getStackedContent } from '../StackView/getStackedContent';
+import { Checkbox } from './Checkbox';
+import { Fieldset } from '../Fieldset/Fieldset';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
@@ -58,7 +64,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * />
  * ```
  */
-const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     radioTokens,
@@ -186,7 +192,9 @@ CheckboxGroup.propTypes = {
     label: PropTypes.string,
     id: PropTypes.string,
     onChange: PropTypes.func,
-    ref: ABBPropTypes.ref(),
+    ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.any
+    })]),
     inactive: PropTypes.bool,
     description: PropTypes.string
   })),
@@ -241,5 +249,4 @@ CheckboxGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: PropTypes.string
-};
-export default CheckboxGroup;
+};

package/lib/esm/Checkbox/CheckboxInput.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
  * On Web we need to include an actual input but hide it.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const CheckboxInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CheckboxInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
@@ -46,5 +46,4 @@ CheckboxInput.propTypes = {
   name: PropTypes.string,
   onChange: PropTypes.func,
   value: PropTypes.string
-};
-export default CheckboxInput;
+};

package/lib/esm/Checkbox/CheckboxInput.native.js

@@ -1,5 +1,4 @@
 /**
  * There's no checkbox input on native platforms, so this is a noop.
  */
-const CheckboxInput = () => null;
-export default CheckboxInput;
+export const CheckboxInput = () => null;

package/lib/esm/CheckboxCard/CheckboxCard.js

@@ -3,14 +3,23 @@ import PropTypes from 'prop-types';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
-import { PressableCardBase, selectPressableCardTokens } from '../Card';
-import StackView from '../StackView';
-import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton';
+import { 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, selectTokens } 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 { PressableCardBase, selectPressableCardTokens } from '../Card/PressableCardBase';
+import { StackView } from '../StackView/StackView';
+import { CheckboxButton, selectCheckboxTokens } from '../Checkbox/CheckboxButton';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const CheckboxCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const CheckboxCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -174,7 +183,6 @@ CheckboxCard.propTypes = {
    */
   variant: variantProp.propType
 };
-export default CheckboxCard;
 const staticStyles = StyleSheet.create({
   alignWithText: {
     justifyContent: 'center'