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

package/src/SideNav/SideNav.jsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import ExpandCollapse from '../ExpandCollapse'
-import Item from './Item'
-import ItemsGroup from './ItemsGroup'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  componentPropType,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps
-} from '../utils'
+import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse'
+import { SideNavItem } from './SideNavItem'
+import { SideNavItemsGroup } from './SideNavItemsGroup'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { componentPropType } from '../utils/props/componentPropType'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
 
 const selectContainerTokens = ({ borderWidth, borderStyle, borderColor }) => {
   return {
@@ -38,7 +36,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = React.forwardRef(
+export const SideNav = React.forwardRef(
   ({ children, variant = {}, tokens, accordion = true, itemTokens, groupTokens, ...rest }, ref) => {
     const themeTokens = useThemeTokens('SideNav', tokens, variant)
     const [active, setActive] = React.useState({ groupId: undefined, itemId: undefined })
@@ -67,7 +65,7 @@ const SideNav = React.forwardRef(
             }
 
             return (
-              <Item
+              <SideNavItem
                 {...item.props}
                 key={itemId}
                 itemId={itemId}
@@ -82,15 +80,15 @@ const SideNav = React.forwardRef(
 
           return React.Children.map(children, (child, index) => {
             // iterate over children and identify them internally to later reference expanded groups and active items
-            if (child.type === Item) return renderItem(child, index)
+            if (child.type === SideNavItem) return renderItem(child, index)
 
-            if (child.type === ItemsGroup) {
+            if (child.type === SideNavItemsGroup) {
               const { groupId = `group-${index}` } = child.props
               const isGroupActive = active.itemId !== undefined && active.groupId === groupId
               const handleToggle = (event) => onToggle(groupId, event)
 
               return (
-                <ItemsGroup
+                <SideNavItemsGroup
                   {...child.props}
                   key={groupId}
                   groupId={groupId}
@@ -109,7 +107,7 @@ const SideNav = React.forwardRef(
                       itemIndex === child.props.children.length - 1
                     )
                   )}
-                </ItemsGroup>
+                </SideNavItemsGroup>
               )
             }
 
@@ -125,17 +123,17 @@ SideNav.displayName = 'SideNav'
 SideNav.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
+   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNavItem` and `SideNavItemsGroup`.
    */
   children: componentPropType(['Item', 'ItemsGroup']),
   /**
-   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
+   * Identifies if only one `SideNavItemsGroup` should be open at a time.
    */
   accordion: PropTypes.bool,
   variant: variantProp.propType,
   tokens: getTokensPropType('SideNav'),
   /**
-   * Custom tokens for `SideNav.Item`
+   * Custom tokens for `SideNavItem`
    */
   itemTokens: getTokensPropType('SideNavItem'),
   /**
@@ -143,8 +141,3 @@ SideNav.propTypes = {
    */
   groupTokens: getTokensPropType('SideNavItemsGroup')
 }
-
-SideNav.Item = Item
-SideNav.ItemsGroup = ItemsGroup
-
-export default SideNav

package/src/SideNav/{Item.jsx → SideNavItem.jsx}

@@ -1,17 +1,16 @@
 import React from 'react'
 import { Pressable, Platform } from 'react-native'
 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
@@ -42,11 +41,11 @@ function selectItemStyles({
 }
 
 /**
- `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 = React.forwardRef(
+export const SideNavItem = React.forwardRef(
   (
     {
       children,
@@ -96,15 +95,15 @@ const Item = React.forwardRef(
       >
         {(pressableState) => {
           const themeTokens = getTokens(getAppearanceState(pressableState))
-          return <ItemContent tokens={themeTokens}>{children}</ItemContent>
+          return <SideNavItemContent tokens={themeTokens}>{children}</SideNavItemContent>
         }}
       </Pressable>
     )
   }
 )
-Item.displayName = 'Item'
+SideNavItem.displayName = 'SideNavItem'
 
-Item.propTypes = {
+SideNavItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
@@ -134,7 +133,7 @@ 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,
@@ -142,5 +141,3 @@ Item.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   variant: variantProp.propType
 }
-
-export default Item

package/src/SideNav/{ItemContent.jsx → SideNavItemContent.jsx}

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
-
-import Typography from '../Typography'
-import { selectTokens, getTokensPropType } from '../utils'
+import { Typography } from '../Typography/Typography'
+import { selectTokens, getTokensPropType } from '../utils/props/tokens'
 
 export function selectAccentStyles(tokens) {
   return {
@@ -19,7 +18,7 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = React.forwardRef(({ children, tokens }, ref) => {
+export const SideNavItemContent = React.forwardRef(({ children, tokens }, ref) => {
   const typographyTokens = selectTokens('Typography', tokens)
 
   return (
@@ -32,9 +31,9 @@ const ItemContent = React.forwardRef(({ children, tokens }, ref) => {
   )
 })
 
-ItemContent.displayName = 'ItemContent'
+SideNavItemContent.displayName = 'SideNavItemContent'
 
-ItemContent.propTypes = {
+SideNavItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),
   children: PropTypes.node
 }
@@ -44,5 +43,3 @@ const staticStyles = StyleSheet.create({
     position: 'absolute'
   }
 })
-
-export default ItemContent

package/src/SideNav/{ItemsGroup.jsx → SideNavItemsGroup.jsx}

@@ -1,10 +1,12 @@
 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'
 
 const selectPanelTokens = ({ borderWidth, borderColor, backgroundColor }) => ({
   contentPanelBackgroundColor: backgroundColor,
@@ -15,14 +17,14 @@ const selectPanelTokens = ({ borderWidth, borderColor, backgroundColor }) => ({
 /**
  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 = React.forwardRef(
+export const SideNavItemsGroup = React.forwardRef(
   (
     {
       children,
@@ -63,14 +65,14 @@ const ItemsGroup = React.forwardRef(
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
       return (
-        <ItemContent tokens={{ ...currentItemTokens, ...staticTokens.content }}>
+        <SideNavItemContent tokens={{ ...currentItemTokens, ...staticTokens.content }}>
           {label}
-        </ItemContent>
+        </SideNavItemContent>
       )
     }
 
     return (
-      <ExpandCollapse.Panel
+      <ExpandCollapsePanel
         ref={ref}
         openIds={openGroups}
         panelId={groupId}
@@ -78,11 +80,11 @@ const ItemsGroup = React.forwardRef(
         tokens={getPanelTokens}
         controlTokens={getControlTokens}
         control={controlContent}
-        accessibilityState={{ active: isActive }} // ExpandCollapse.Panel handles expanded state
+        accessibilityState={{ active: isActive }} // ExpandCollapsePanel handles expanded state
         disableMobileScrollBuffer
       >
         {children}
-      </ExpandCollapse.Panel>
+      </ExpandCollapsePanel>
     )
   }
 )
@@ -96,15 +98,15 @@ const staticTokens = {
   content: { accentWidth: 0 }
 }
 
-ItemsGroup.displayName = 'ItemsGroup'
+SideNavItemsGroup.displayName = 'SideNavItemsGroup'
 
-ItemsGroup.propTypes = {
+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,
   /**
@@ -124,15 +126,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/src/Skeleton/Skeleton.jsx

@@ -1,21 +1,19 @@
 import React from 'react'
 import { Animated, Platform, StyleSheet, View } from 'react-native'
 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -40,21 +38,8 @@ const selectSquareStyles = ({ radius }) => ({
   borderRadius: radius
 })
 
-const Skeleton = React.forwardRef(
-  (
-    {
-      tokens,
-      variant,
-      size,
-      sizeIndex = size,
-      sizePixels,
-      characters,
-      lines,
-      shape = 'line',
-      ...rest
-    },
-    ref
-  ) => {
+export const Skeleton = React.forwardRef(
+  ({ tokens, variant, sizeIndex, sizePixels, characters, lines, shape = 'line', ...rest }, ref) => {
     const themeTokens = useThemeTokens('Skeleton', tokens, variant)
     const pixels = useResponsiveProp(sizePixels)
     const spacingScaleValue =
@@ -145,10 +130,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.
    *
@@ -174,5 +155,3 @@ Skeleton.propTypes = {
    */
   shape: propTypes.oneOf(['line', 'circle', 'box'])
 }
-
-export default Skeleton

package/src/Skeleton/skeletonWebAnimation.js

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

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import { Animated, Platform } from 'react-native'
 import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
-const useSkeletonNativeAnimation = ({ animationDuration }) => {
+export const useSkeletonNativeAnimation = ({ animationDuration }) => {
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current
 
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -24,5 +24,3 @@ const useSkeletonNativeAnimation = ({ animationDuration }) => {
 
   return { opacity: fadeAnimation }
 }
-
-export default useSkeletonNativeAnimation

package/src/SkipLink/SkipLink.jsx

@@ -2,17 +2,15 @@ import React from 'react'
 import { Platform, Pressable, StyleSheet, Text } from 'react-native'
 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps])
 
@@ -100,7 +98,7 @@ const selectTextStyles = ({ color, textLine, fontName, fontSize, fontWeight, lin
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = React.forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
+const SkipLinkBase = React.forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
   const { onPress, ...rest } = clickProps.toPressProps(rawRest)
 
   const getTokens = useThemeTokensCallback('SkipLink', tokens, variant)
@@ -133,9 +131,9 @@ const SkipLink = React.forwardRef(({ tokens, variant, href, children, ...rawRest
   )
 })
 
-SkipLink.displayName = 'SkipLink'
+SkipLinkBase.displayName = 'SkipLink'
 
-SkipLink.propTypes = {
+SkipLinkBase.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
@@ -176,4 +174,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/src/Spacer/Spacer.jsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
+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 {
-  a11yProps,
-  selectSystemProps,
-  spacingProps,
-  useSpacingScale,
-  viewProps,
   StyleSheet as StyleSheetUtils,
   createMediaQueryStyles
-} from '../utils'
-import useMediaQuerySpacing from '../utils/useMediaQuerySpacing'
-import useTheme from '../ThemeProvider/useTheme'
+} 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
@@ -66,44 +66,46 @@ 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 = React.forwardRef(({ space = 1, direction = 'column', dataSet, ...rest }, ref) => {
-  const {
-    themeOptions: { enableMediaQueryStyleSheet }
-  } = useTheme()
+export const Spacer = React.forwardRef(
+  ({ space = 1, direction = 'column', dataSet, ...rest }, ref) => {
+    const {
+      themeOptions: { enableMediaQueryStyleSheet }
+    } = useTheme()
 
-  const { sizeByViewport } = useMediaQuerySpacing(space)
+    const { sizeByViewport } = useMediaQuerySpacing(space)
 
-  const fallbackSize = useSpacingScale(space)
-  const sizeStyle = selectSizeStyle(fallbackSize, direction)
+    const fallbackSize = useSpacingScale(space)
+    const sizeStyle = selectSizeStyle(fallbackSize, direction)
 
-  let spacerStyles
-  let dataSetValue = dataSet
+    let spacerStyles
+    let dataSetValue = dataSet
 
-  if (enableMediaQueryStyleSheet) {
-    const sizeKey = direction === 'row' ? 'width' : 'height'
-    const stylesByViewport = {
-      xs: { [sizeKey]: sizeByViewport.xs, ...staticStyles.stretch },
-      sm: { [sizeKey]: sizeByViewport.sm, ...staticStyles.stretch },
-      md: { [sizeKey]: sizeByViewport.md, ...staticStyles.stretch },
-      lg: { [sizeKey]: sizeByViewport.lg, ...staticStyles.stretch },
-      xl: { [sizeKey]: sizeByViewport.xl, ...staticStyles.stretch }
-    }
-    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
-
-    const { ids, styles } = StyleSheetUtils.create({
-      spacer: {
-        ...mediaQueryStyles
+    if (enableMediaQueryStyleSheet) {
+      const sizeKey = direction === 'row' ? 'width' : 'height'
+      const stylesByViewport = {
+        xs: { [sizeKey]: sizeByViewport.xs, ...staticStyles.stretch },
+        sm: { [sizeKey]: sizeByViewport.sm, ...staticStyles.stretch },
+        md: { [sizeKey]: sizeByViewport.md, ...staticStyles.stretch },
+        lg: { [sizeKey]: sizeByViewport.lg, ...staticStyles.stretch },
+        xl: { [sizeKey]: sizeByViewport.xl, ...staticStyles.stretch }
       }
-    })
+      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
 
-    spacerStyles = styles.spacer
-    dataSetValue = { media: ids.spacer, ...dataSet }
-  } else {
-    spacerStyles = [staticStyles.stretch, sizeStyle]
-  }
+      const { ids, styles } = StyleSheetUtils.create({
+        spacer: {
+          ...mediaQueryStyles
+        }
+      })
 
-  return <View ref={ref} style={spacerStyles} dataSet={dataSetValue} {...selectProps(rest)} />
-})
+      spacerStyles = styles.spacer
+      dataSetValue = { media: ids.spacer, ...dataSet }
+    } else {
+      spacerStyles = [staticStyles.stretch, sizeStyle]
+    }
+
+    return <View ref={ref} style={spacerStyles} dataSet={dataSetValue} {...selectProps(rest)} />
+  }
+)
 Spacer.displayName = 'Spacer'
 
 Spacer.propTypes = {
@@ -133,5 +135,3 @@ const staticStyles = StyleSheet.create({
     alignSelf: 'stretch'
   }
 })
-
-export default Spacer

package/src/StackView/StackView.jsx

@@ -2,24 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import Divider from '../Divider'
+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 {
-  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'
+  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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -66,7 +65,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 = React.forwardRef(
+export const StackView = React.forwardRef(
   (
     {
       space = 0,
@@ -187,5 +186,3 @@ StackView.propTypes = {
    */
   dataSet: PropTypes.object
 }
-
-export default StackView