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

package/lib/esm/SideNav/{Item.js → SideNavItem.js}

@@ -2,9 +2,16 @@ import React from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import ItemContent from './ItemContent';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp';
+import { linkProps } from '../utils/props/linkProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { verticalAlignRow } from '../ThemeProvider/utils/styles';
+import { SideNavItemContent } from './SideNavItemContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 function selectItemStyles(_ref) {
@@ -35,11 +42,11 @@ function selectItemStyles(_ref) {
 }
 
 /**
- `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
+ `SideNavItem` is a navigational element that is used within `SideNav` or `SideNavItemsGroup`.
 
- This component can only be accessed as a name-spaced component: `SideNav.Item`.
+ This component can only be accessed as a name-spaced component: `SideNavItem`.
  */
-const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SideNavItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,
@@ -94,15 +101,15 @@ const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/_jsx(ItemContent, {
+      return /*#__PURE__*/_jsx(SideNavItemContent, {
         tokens: themeTokens,
         children: children
       });
     }
   });
 });
-Item.displayName = 'Item';
-Item.propTypes = {
+SideNavItem.displayName = 'SideNavItem';
+SideNavItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
@@ -132,12 +139,11 @@ Item.propTypes = {
   isActive: PropTypes.bool,
   /**
    * @ignore
-   * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
+   * Set internally in `SideNavItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
   accessibilityRole: PropTypes.string,
   testID: PropTypes.number,
   tokens: getTokensPropType('SideNavItem'),
   variant: variantProp.propType
-};
-export default Item;
+};

package/lib/esm/SideNav/{ItemContent.js → SideNavItemContent.js}

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Typography from '../Typography';
-import { selectTokens, getTokensPropType } from '../utils';
+import { Typography } from '../Typography/Typography';
+import { selectTokens, getTokensPropType } from '../utils/props/tokens';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function selectAccentStyles(tokens) {
   return {
@@ -19,7 +19,7 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const SideNavItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
@@ -35,8 +35,8 @@ const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-ItemContent.displayName = 'ItemContent';
-ItemContent.propTypes = {
+SideNavItemContent.displayName = 'SideNavItemContent';
+SideNavItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node
 };
@@ -44,5 +44,4 @@ const staticStyles = StyleSheet.create({
   absolute: {
     position: 'absolute'
   }
-});
-export default ItemContent;
+});

package/lib/esm/SideNav/{ItemsGroup.js → SideNavItemsGroup.js}

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ItemContent from './ItemContent';
-import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { SideNavItemContent } from './SideNavItemContent';
+import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel';
+import { getTokensPropType, selectTokens } from '../utils/props/tokens';
+import { variantProp } from '../utils/props/variantProp';
+import { componentPropType } from '../utils/props/componentPropType';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectPanelTokens = _ref => {
   let {
@@ -21,14 +23,14 @@ const selectPanelTokens = _ref => {
 /**
  Expandable content areas for use within `SideNav`.
 
- This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
+ This component can only be accessed as a name-spaced component: `SideNavItemsGroup`.
 
- `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
+ `SideNavItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
 
  ## Usage Criteria
- - Use `SideNav.ItemsGroup` with large pages that have multiple sections
+ - Use `SideNavItemsGroup` with large pages that have multiple sections
  */
-const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const SideNavItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -68,7 +70,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/_jsx(ItemContent, {
+    return /*#__PURE__*/_jsx(SideNavItemContent, {
       tokens: {
         ...currentItemTokens,
         ...staticTokens.content
@@ -76,7 +78,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       children: label
     });
   };
-  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+  return /*#__PURE__*/_jsx(ExpandCollapsePanel, {
     ref: ref,
     openIds: openGroups,
     panelId: groupId,
@@ -86,7 +88,7 @@ const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     control: controlContent,
     accessibilityState: {
       active: isActive
-    } // ExpandCollapse.Panel handles expanded state
+    } // ExpandCollapsePanel handles expanded state
     ,
     disableMobileScrollBuffer: true,
     children: children
@@ -105,14 +107,14 @@ const staticTokens = {
     accentWidth: 0
   }
 };
-ItemsGroup.displayName = 'ItemsGroup';
-ItemsGroup.propTypes = {
+SideNavItemsGroup.displayName = 'SideNavItemsGroup';
+SideNavItemsGroup.propTypes = {
   /**
-   * Specifies the links contained within. It may only contain `SideNav.Item`.
+   * Specifies the links contained within. It may only contain `SideNavItem`.
    */
   children: componentPropType('Item'),
   /**
-   * Text content of the group's parent `SideNav.Item`.
+   * Text content of the group's parent `SideNavItem`.
    */
   label: PropTypes.string.isRequired,
   /**
@@ -132,14 +134,13 @@ ItemsGroup.propTypes = {
   openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   /**
    * @ignore
-   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
+   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNavItem`.
    */
   isActive: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNavItemsGroup'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
   itemTokens: getTokensPropType('SideNavItem')
-};
-export default ItemsGroup;
+};

package/lib/esm/Skeleton/Skeleton.js

@@ -4,11 +4,19 @@ 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 propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, variantProp, viewProps } from '../utils';
-import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
-import skeletonWebAnimation from './skeletonWebAnimation';
+import { StackView } from '../StackView/StackView';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { spacingProps } from '../utils/props/spacingProps';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useSkeletonNativeAnimation } from './useSkeletonNativeAnimation';
+import { skeletonWebAnimation } from './skeletonWebAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectSkeletonStyles = _ref => {
@@ -51,12 +59,11 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+export const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,
-    size,
-    sizeIndex = size,
+    sizeIndex,
     sizePixels,
     characters,
     lines,
@@ -145,10 +152,6 @@ Skeleton.propTypes = {
    * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
    */
   sizeIndex: spacingProps.types.spacingValue,
-  /**
-   * @deprecated alias for `sizeIndex`
-   */
-  size: spacingProps.types.spacingValue,
   /**
    * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
    *
@@ -173,5 +176,4 @@ Skeleton.propTypes = {
    * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
    */
   shape: propTypes.oneOf(['line', 'circle', 'box'])
-};
-export default Skeleton;
+};

package/lib/esm/Skeleton/skeletonWebAnimation.js

@@ -1,4 +1,4 @@
-const skeletonWebAnimation = (secondColor, animationTime) => {
+export const skeletonWebAnimation = (secondColor, animationTime) => {
   return {
     animationDuration: `${animationTime}ms`,
     animationTimingFunction: 'ease-in-out',
@@ -10,5 +10,4 @@ const skeletonWebAnimation = (secondColor, animationTime) => {
       }
     }
   };
-};
-export default skeletonWebAnimation;
+};

package/lib/esm/Skeleton/useSkeletonNativeAnimation.js

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-const useSkeletonNativeAnimation = _ref => {
+export const useSkeletonNativeAnimation = _ref => {
   let {
     animationDuration
   } = _ref;
@@ -24,5 +24,4 @@ const useSkeletonNativeAnimation = _ref => {
   return {
     opacity: fadeAnimation
   };
-};
-export default useSkeletonNativeAnimation;
+};

package/lib/esm/SkipLink/SkipLink.js

@@ -4,8 +4,15 @@ 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 PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { clickProps } from '../utils/props/clickProps';
+import { getTokensPropType } 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 { withLinkRouter } from '../utils/withLinkRouter';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
 
@@ -105,7 +112,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const SkipLinkBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -146,8 +153,8 @@ const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     }
   });
 });
-SkipLink.displayName = 'SkipLink';
-SkipLink.propTypes = {
+SkipLinkBase.displayName = 'SkipLink';
+SkipLinkBase.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
@@ -186,4 +193,7 @@ const staticStyles = StyleSheet.create({
     })
   }
 });
-export default withLinkRouter(SkipLink);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { SkipLinkBase };
+export const SkipLink = withLinkRouter(SkipLinkBase);

package/lib/esm/Spacer/Spacer.js

@@ -2,9 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps, StyleSheet as StyleSheetUtils, createMediaQueryStyles } from '../utils';
-import useMediaQuerySpacing from '../utils/useMediaQuerySpacing';
-import useTheme from '../ThemeProvider/useTheme';
+import { a11yProps } from '../utils/props/a11yProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { spacingProps } from '../utils/props/spacingProps';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { viewProps } from '../utils/props/viewProps';
+import { StyleSheet as StyleSheetUtils, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query';
+import { useMediaQuerySpacing } from '../utils/useMediaQuerySpacing';
+import { useTheme } from '../ThemeProvider/useTheme';
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
@@ -58,7 +63,7 @@ const selectSizeStyle = (size, direction) => ({
  * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
  * separations between elements that may be treated as semantically meaningful on web.
  */
-const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Spacer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     direction = 'column',
@@ -151,5 +156,4 @@ const staticStyles = StyleSheet.create({
   stretch: {
     alignSelf: 'stretch'
   }
-});
-export default Spacer;
+});

package/lib/esm/StackView/StackView.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import Divider from '../Divider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps, StyleSheet as StyleSheetUtils, createMediaQueryStyles, useAllViewportTokens } from '../utils';
-import useTheme from '../ThemeProvider/useTheme';
-import getStackedContent from './getStackedContent';
+import { Divider } from '../Divider/Divider';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics';
+import { getTokensPropType } from '../utils/props/tokens';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { spacingProps } from '../utils/props/spacingProps';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { StyleSheet as StyleSheetUtils, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query';
+import { useAllViewportTokens } from '../utils/ssr-media-query/utils/use-all-viewport-tokens';
+import { useTheme } from '../ThemeProvider/useTheme';
+import { getStackedContent } from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -51,7 +61,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
  * semantic role but only on web, not within native apps).
  */
-const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const StackView = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 0,
     divider,
@@ -172,5 +182,4 @@ StackView.propTypes = {
    * this will include media query IDs for responsive styling.
    */
   dataSet: PropTypes.object
-};
-export default StackView;
+};

package/lib/esm/StackView/StackWrap.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
-import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap';
+import { useSafeLayoutEffect } from '../utils/useSafeLayoutEffect';
+import { StackWrapBox } from './StackWrapBox';
+import { StackWrapGap } from './StackWrapGap';
 
 // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,7 +19,7 @@ const exampleGapValue = '1px';
  * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
  * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
  */
-const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
   const {
     space
@@ -44,5 +44,4 @@ const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
 });
 StackWrap.displayName = 'StackWrap';
-StackWrap.propTypes = StackWrapBox.propTypes;
-export default StackWrap;
+StackWrap.propTypes = StackWrapBox.propTypes;

package/lib/esm/StackView/StackWrap.native.js

@@ -1,4 +1,2 @@
-import StackWrapBox from './StackWrapBox';
-
 // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
-export default StackWrapBox;
+export { StackWrapBox as StackWrap } from './StackWrapBox';

package/lib/esm/StackView/StackWrapBox.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics';
+import { getTokensPropType } from '../utils/props/tokens';
+import { responsiveProps } from '../utils/props/responsiveProps';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { spacingProps } from '../utils/props/spacingProps';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { getStackedContent } from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -33,7 +41,7 @@ const spaceSides = {
  * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
  * between the container and the stacked children, and requires a negative margin on the container.
  */
-const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const StackWrapBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     gap = space,
@@ -110,5 +118,4 @@ StackWrapBox.propTypes = {
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
    */
   children: PropTypes.node
-};
-export default StackWrapBox;
+};

package/lib/esm/StackView/StackWrapGap.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
-import StackWrapBox from './StackWrapBox';
-import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
+import { StackWrapBox } from './StackWrapBox';
+import { a11yProps } from '../utils/props/a11yProps';
+import { getA11yPropsFromHtmlTag } from '../utils/a11y/semantics';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useSpacingScale } from '../utils/useSpacingScale';
+import { useResponsiveProp } from '../utils/useResponsiveProp';
+import { viewProps } from '../utils/props/viewProps';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { useViewport } from '../ViewportProvider/useViewport';
+import { getStackedContent } from './getStackedContent';
 import { staticStyles, selectFlexStyles } from './common';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps] = selectSystemProps([a11yProps, viewProps]);
@@ -19,7 +24,7 @@ const [selectProps] = selectSystemProps([a11yProps, viewProps]);
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     space = 1,
     tokens,
@@ -57,5 +62,4 @@ const StackWrapGap = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 StackWrapGap.displayName = 'StackWrapGap';
-StackWrapGap.propTypes = StackWrapBox.propTypes;
-export default StackWrapGap;
+StackWrapGap.propTypes = StackWrapBox.propTypes;

package/lib/esm/StackView/common.js

@@ -16,7 +16,8 @@ export const selectFlexStyles = _ref => {
 export const staticStyles = StyleSheet.create({
   wrap: {
     flexShrink: 1,
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    alignContent: 'stretch'
   },
   row: {
     flexDirection: 'row'

package/lib/esm/StackView/getStackedContent.js

@@ -1,7 +1,7 @@
 import React, { createElement as _createElement } from 'react';
-import Box from '../Box';
-import Divider from '../Divider';
-import Spacer from '../Spacer';
+import { Box } from '../Box/Box';
+import { Divider } from '../Divider/Divider';
+import { Spacer } from '../Spacer/Spacer';
 
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
@@ -30,7 +30,7 @@ import Spacer from '../Spacer';
  * @returns {ReactElement[]}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const getStackedContent = (children, _ref) => {
+export const getStackedContent = (children, _ref) => {
   let {
     divider,
     space,
@@ -117,5 +117,4 @@ const unpackFragment = child => {
 
   // Stop unpacking as soon as any non-fragment child is found
   return child;
-};
-export default getStackedContent;
+};

package/lib/esm/Status/Status.js

@@ -3,9 +3,16 @@ 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 PropTypes from 'prop-types';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, transformGradient } from '../utils';
-import Icon from '../Icon';
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
+import { applyTextStyles } from '../ThemeProvider/utils/styles';
+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 { wrapStringsInText } from '../utils/children';
+import { transformGradient } from '../utils/transformGradient';
+import { Icon } from '../Icon/Icon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
@@ -103,7 +110,7 @@ const selectTextStyles = _ref3 => {
  * @param {React.Ref} ref - The ref to be applied to the status component.
  * @returns {ReactNode} The rendered status component.
  */
-const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+export const Status = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     tokens,
     variant,
@@ -165,5 +172,4 @@ const staticStyles = StyleSheet.create({
       }
     })
   }
-});
-export default Status;
+});

package/lib/esm/StepTracker/Step.js

@@ -3,10 +3,15 @@ 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 StackView from '../StackView';
-import Icon from '../Icon';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { applyTextStyles, useTheme } from '../ThemeProvider';
+import { StackView } from '../StackView/StackView';
+import { Icon } from '../Icon/Icon';
+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 { applyTextStyles } from '../ThemeProvider/utils/styles';
+import { useTheme } from '../ThemeProvider/useTheme';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectCompletedIconTokens = _ref => {
@@ -161,7 +166,7 @@ const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
 /**
  * A single step of a StepTracker.
  */
-const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     label,
     name,
@@ -249,7 +254,6 @@ Step.propTypes = {
   tokens: getTokensPropType('StepTracker'),
   variant: variantProp.propType
 };
-export default Step;
 const staticStyles = StyleSheet.create({
   centeredText: {
     textAlign: 'center'