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

package/src/ExpandCollapse/{Panel.jsx → ExpandCollapsePanel.jsx}

@@ -1,21 +1,18 @@
 import React from 'react'
 import { Animated, Platform, View, Text, StyleSheet, ScrollView } from 'react-native'
 import PropTypes from 'prop-types'
-import ABBPropTypes from 'airbnb-prop-types'
 
-import ExpandCollapseControl from './Control'
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  useVerticalExpandAnimation,
-  variantProp,
-  viewProps,
-  useCopy
-} from '../utils'
+import { ExpandCollapseControl } from './ExpandCollapseControl'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useVerticalExpandAnimation } from '../utils/animation/useVerticalExpandAnimation'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { useCopy } from '../utils/useCopy'
 
-import dictionary from './dictionary'
+import { dictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -81,7 +78,7 @@ const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = React.forwardRef(
+export const ExpandCollapsePanel = React.forwardRef(
   (
     {
       openIds = [],
@@ -90,6 +87,7 @@ const ExpandCollapsePanel = React.forwardRef(
       onPress,
       control,
       controlTokens,
+      controlAlign,
       children,
       tokens,
       variant,
@@ -174,6 +172,7 @@ const ExpandCollapsePanel = React.forwardRef(
             {...selectedProps}
             isExpanded={isExpanded}
             tokens={controlTokens}
+            controlAlign={controlAlign}
             variant={variant}
             onPress={handleControlPress}
             ref={controlRef}
@@ -284,10 +283,14 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: ABBPropTypes.ref(),
+  controlRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
@@ -297,5 +300,3 @@ ExpandCollapsePanel.propTypes = {
    */
   disableMobileScrollBuffer: PropTypes.bool
 }
-
-export default ExpandCollapsePanel

package/src/ExpandCollapse/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     panel: 'Panel',
     subPanel: 'SubPanel'

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,15 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import ExpandCollapse from '../ExpandCollapse'
-import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils'
-import { variantProp } from '../utils/props'
-import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
+import { ExpandCollapse } from '../ExpandCollapse/ExpandCollapse'
+import { ExpandCollapsePanel } from '../ExpandCollapse/ExpandCollapsePanel'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { contentfulProps } from '../utils/props/contentfulProps'
+import { useUniqueId } from '../utils/useUniqueId'
+import { variantProp } from '../utils/props/variantProp'
+import { ExpandCollapseMiniControl } from './ExpandCollapseMiniControl'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
 
-const ExpandCollapseMini = React.forwardRef(
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
+export const ExpandCollapseMini = React.forwardRef(
   (
-    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    {
+      children,
+      onToggle = () => {},
+      tokens = {},
+      nativeID,
+      initialOpen = false,
+      dataSet,
+      align,
+      ...rest
+    },
     ref
   ) => {
     const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
@@ -29,7 +48,7 @@ const ExpandCollapseMini = React.forwardRef(
         dataSet={dataSet}
       >
         {(expandProps) => (
-          <ExpandCollapse.Panel
+          <ExpandCollapsePanel
             {...expandProps}
             panelId={expandCollapeMiniPanelId}
             variant={{ mini: true }}
@@ -40,16 +59,17 @@ const ExpandCollapseMini = React.forwardRef(
               textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
+            controlAlign={align && alignMap[align]}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+              <ExpandCollapseMiniControl pressableState={pressableState} align={align} {...rest} />
             )}
             controlRef={ref}
             nativeID={nativeID}
           >
             {children}
-          </ExpandCollapse.Panel>
+          </ExpandCollapsePanel>
         )}
       </ExpandCollapse>
     )
@@ -87,7 +107,9 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
-
-export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -1,12 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import { Link } from '../Link'
-import { useThemeTokens } from '../ThemeProvider'
-import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
+import { Link } from '../Link/Link'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { viewProps } from '../utils/props/viewProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
 const presentationOnly = {
@@ -15,7 +23,7 @@ const presentationOnly = {
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 }
 
-const ExpandCollapseMiniControl = React.forwardRef(
+export const ExpandCollapseMiniControl = React.forwardRef(
   (
     {
       pressableState,
@@ -24,6 +32,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
       iconPosition = 'right',
       tokens,
       variant = {},
+      align,
       ...rest
     },
     ref
@@ -96,7 +105,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
           ...getTokens(linkState),
           iconSize,
           blockFontSize: fontSize,
-          blockLineHeight: lineHeight
+          blockLineHeight: lineHeight,
+          ...(align && { alignSelf: alignSelfMap[align] })
         })}
         ref={ref}
         {...presentationOnly}
@@ -132,7 +142,9 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
-
-export default ExpandCollapseMiniControl

package/src/Feedback/Feedback.jsx

@@ -2,16 +2,15 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  getTokensPropType,
-  selectSystemProps,
-  selectTokens,
-  variantProp,
-  viewProps
-} from '../utils'
-import StackView from '../StackView'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { StackView } from '../StackView/StackView'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -55,7 +54,7 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = React.forwardRef(
+export const Feedback = React.forwardRef(
   ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,
@@ -120,8 +119,6 @@ Feedback.propTypes = {
   variant: variantProp.propType
 }
 
-export default Feedback
-
 const staticStyles = StyleSheet.create({
   title: {
     display: 'flex',

package/src/Fieldset/Fieldset.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Feedback from '../Feedback'
-import { getTokensPropType, spacingProps, variantProp } from '../utils'
-import { useThemeTokens } from '../ThemeProvider'
-import FieldsetContainer from './FieldsetContainer'
-import { getStackedContent } from '../StackView'
-import InputLabel from '../InputLabel'
-import useInputSupports from '../InputSupports/useInputSupports'
+import { Feedback } from '../Feedback/Feedback'
+import { getTokensPropType } from '../utils/props/tokens'
+import { spacingProps } from '../utils/props/spacingProps'
+import { variantProp } from '../utils/props/variantProp'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { FieldsetContainer } from './FieldsetContainer'
+import { getStackedContent } from '../StackView/getStackedContent'
+import { InputLabel } from '../InputLabel/InputLabel'
+import { useInputSupports } from '../InputSupports/useInputSupports'
 
 /**
  * An alternative to InputSupports for groups of input elements that, on web, are to be
@@ -15,7 +17,7 @@ import useInputSupports from '../InputSupports/useInputSupports'
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-const Fieldset = React.forwardRef(
+export const Fieldset = React.forwardRef(
   (
     {
       copy = 'en',
@@ -105,11 +107,21 @@ const Fieldset = React.forwardRef(
     // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
     // fieldset as much as possible, but also allow different spacing within content and between
     // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-    const childContent = <>{typeof children === 'function' ? children(a11yProps) : children}</>
+    const childContent = (
+      <React.Fragment key="fieldset-children">
+        {typeof children === 'function' ? children(a11yProps) : children}
+      </React.Fragment>
+    )
+    const legendWithKey = legendContent ? (
+      <React.Fragment key="fieldset-legend">{legendContent}</React.Fragment>
+    ) : null
+    const feedbackWithKey = feedbackContent ? (
+      <React.Fragment key="fieldset-feedback">{feedbackContent}</React.Fragment>
+    ) : null
     const orderedContent =
       feedbackPosition === 'bottom'
-        ? [legendContent, feedbackContent, childContent]
-        : [legendContent, childContent, feedbackContent]
+        ? [legendWithKey, feedbackWithKey, childContent].filter(Boolean)
+        : [legendWithKey, childContent, feedbackWithKey].filter(Boolean)
     const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
     return (
       <FieldsetContainer
@@ -194,5 +206,3 @@ Fieldset.propTypes = {
    */
   showErrorBorder: PropTypes.bool
 }
-
-export default Fieldset

package/src/Fieldset/FieldsetContainer.jsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import cssReset from './cssReset'
+import { cssReset } from './cssReset'
 
-import { selectSystemProps, a11yProps, htmlAttrs } from '../utils'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { htmlAttrs } from '../utils/htmlAttrs'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
 
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = React.forwardRef(
+export const FieldsetContainer = React.forwardRef(
   (
     {
       children,
@@ -52,5 +54,3 @@ FieldsetContainer.propTypes = {
   borderStyle: PropTypes.object,
   style: PropTypes.object
 }
-
-export default FieldsetContainer

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -2,13 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { selectSystemProps, a11yProps, viewProps } from '../utils'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
 // If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = React.forwardRef(
+export const FieldsetContainer = React.forwardRef(
   ({ children, accessibilityRole, style, ...rest }, ref) => (
     <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)} style={style}>
       {children}
@@ -23,5 +25,3 @@ FieldsetContainer.propTypes = {
   accessibilityRole: PropTypes.string,
   style: PropTypes.object
 }
-
-export default FieldsetContainer

package/src/Fieldset/Legend.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import cssReset from './cssReset'
+import { cssReset } from './cssReset'
 
 /**
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = React.forwardRef(({ children }, ref) => (
+export const Legend = React.forwardRef(({ children }, ref) => (
   <legend ref={ref} style={cssReset}>
     {children}
   </legend>
@@ -17,5 +17,3 @@ Legend.displayName = 'Legend'
 Legend.propTypes = {
   children: PropTypes.node
 }
-
-export default Legend

package/src/Fieldset/Legend.native.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
  * On Web, wraps children in HTML `<legend>` tag.
  * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
  */
-const Legend = React.forwardRef(({ children }, ref) => (
+export const Legend = React.forwardRef(({ children }, ref) => (
   <View ref={ref} style={staticStyles.stretch}>
     {children}
   </View>
@@ -23,5 +23,3 @@ const staticStyles = StyleSheet.create({
     flexGrow: 1
   }
 })
-
-export default Legend

package/src/Fieldset/cssReset.js

@@ -3,7 +3,7 @@
 // Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
 // Using CSS `all` doesn't work well as an inline style.
 // https://github.com/necolas/react-native-web/issues/1385
-export default {
+export const cssReset = {
   margin: 'unset',
   padding: 'unset',
   float: 'unset',

package/src/FileUpload/FileUpload.jsx

@@ -2,26 +2,24 @@ import React from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '../ThemeProvider'
-import {
-  a11yProps,
-  copyPropTypes,
-  getTokensPropType,
-  selectSystemProps,
-  useCopy,
-  variantProp,
-  viewProps,
-  convertFromMegaByteToByte
-} from '../utils'
-
-import InputLabel from '../InputLabel'
-import { Button } from '../Button'
-import Notification from '../Notification'
-import Spacer from '../Spacer'
-import StackView from '../StackView'
-
-import NotificationContent from './NotificationContent'
-import defaultDictionary from './dictionary'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useCopy } from '../utils/useCopy'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { convertFromMegaByteToByte } from '../utils/convertFromMegaByteToByte'
+
+import { InputLabel } from '../InputLabel/InputLabel'
+import { Button } from '../Button/Button'
+import { Notification } from '../Notification/Notification'
+import { Spacer } from '../Spacer/Spacer'
+import { StackView } from '../StackView/StackView'
+
+import { NotificationContent } from './NotificationContent'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -98,7 +96,7 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {any} props.rest - Additional props to be spread to the component.
  * @returns {JSX.Element} The rendered FileUpload component.
  */
-const FileUpload = React.forwardRef(
+export const FileUpload = React.forwardRef(
   (
     {
       tokens,
@@ -465,5 +463,3 @@ FileUpload.propTypes = {
     fr: dictionaryEntryShape
   })
 }
-
-export default FileUpload

package/src/FileUpload/NotificationContent.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Typography from '../Typography'
+import { Typography } from '../Typography/Typography'
 
 /**
  * Renders the content of a notification for a file upload.
@@ -13,7 +13,7 @@ import Typography from '../Typography'
  * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
  * @returns {JSX.Element} The rendered NotificationContent component.
  */
-const NotificationContent = React.forwardRef(({ file, color, children }, ref) => {
+export const NotificationContent = React.forwardRef(({ file, color, children }, ref) => {
   return (
     <Typography tokens={{ color }} ref={ref}>
       <Typography variant={{ bold: true }} tokens={{ color }}>
@@ -40,5 +40,3 @@ NotificationContent.propTypes = {
    */
   color: PropTypes.string
 }
-
-export default NotificationContent

package/src/FileUpload/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     label: 'Upload files',
     buttonLabel: 'Choose files',

package/src/FlexGrid/FlexGrid.jsx

@@ -2,24 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { viewports } from '@telus-uds/system-constants'
-import {
-  a11yProps,
-  viewProps,
-  getA11yPropsFromHtmlTag,
-  layoutTags,
-  selectSystemProps,
-  BaseView,
-  StyleSheet,
-  createMediaQueryStyles,
-  useResponsiveProp
-} from '../utils'
-import resolveContentMaxWidth from '../utils/resolveContentMaxWidth'
-import Row from './Row'
-import Col from './Col'
-import GutterContext from './providers/GutterContext'
-import applyInheritance from './helpers'
-import { useTheme } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { a11yProps } from '../utils/props/a11yProps'
+import { viewProps } from '../utils/props/viewProps'
+import { getA11yPropsFromHtmlTag, layoutTags } from '../utils/a11y/semantics'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { BaseView } from '../utils/BaseView/BaseView'
+import { StyleSheet, createMediaQueryStyles } from '../utils/ssr-media-query/ssr-media-query'
+import { useResponsiveProp } from '../utils/useResponsiveProp'
+import { resolveContentMaxWidth } from '../utils/resolveContentMaxWidth'
+import { GutterContext } from './providers/GutterContext'
+import { applyInheritance } from './helpers'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useViewport } from '../ViewportProvider/useViewport'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -51,7 +45,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWi
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = React.forwardRef(
+export const FlexGrid = React.forwardRef(
   (
     {
       limitWidth = true,
@@ -113,6 +107,7 @@ const FlexGrid = React.forwardRef(
 
     const staticStyles = {
       flexWrap: 'wrap',
+      alignContent: 'stretch',
       width: outsideGutter ? '100%' : 'auto',
       marginVertical: 0,
       marginHorizontal: outsideGutter ? 'auto' : -16
@@ -196,7 +191,7 @@ FlexGrid.propTypes = {
    */
   tag: PropTypes.oneOf(layoutTags),
   /**
-   * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
+   * The rows and columns of the Grid. Will typically be `FlexGridRow` and `FlexGridCol` components.
    */
   children: PropTypes.node.isRequired,
   /**
@@ -231,8 +226,3 @@ FlexGrid.propTypes = {
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
   })
 }
-
-FlexGrid.Row = Row
-FlexGrid.Col = Col
-
-export default FlexGrid

package/src/FlexGrid/{Col/Col.jsx → FlexGridCol/FlexGridCol.jsx}

@@ -2,13 +2,15 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
 
-import GutterContext from '../providers/GutterContext'
-import applyInheritance from '../helpers'
-import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils'
-import { useViewport } from '../../ViewportProvider'
-import { useTheme } from '../../ThemeProvider'
+import { GutterContext } from '../providers/GutterContext'
+import { applyInheritance } from '../helpers'
+import { responsiveProps } from '../../utils/props/responsiveProps'
+import { BaseView } from '../../utils/BaseView/BaseView'
+import { StyleSheet, createMediaQueryStyles } from '../../utils/ssr-media-query/ssr-media-query'
+import { useViewport } from '../../ViewportProvider/useViewport'
+import { useTheme } from '../../ThemeProvider/useTheme'
 
-const Col = React.forwardRef(
+export const FlexGridCol = React.forwardRef(
   (
     {
       horizontalAlign,
@@ -184,14 +186,14 @@ const Col = React.forwardRef(
     )
   }
 )
-Col.displayName = 'Col'
+FlexGridCol.displayName = 'FlexGridCol'
 
 /*
  * We're disabling default props since passing undefined props to
  * the react-flexbox-grid component sets up blank classes that may cause
  * styling issues.
  */
-Col.propTypes = {
+FlexGridCol.propTypes = {
   /**
    * Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
    *
@@ -257,7 +259,7 @@ Col.propTypes = {
    */
   xlOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
   /**
-   * The columns of the Grid. Will typically be `FlexGrid.Col` components.
+   * The columns of the Grid. Will typically be `FlexGridCol` components.
    */
   children: PropTypes.node.isRequired,
   /**
@@ -271,9 +273,7 @@ Col.propTypes = {
   ),
   /**
    * (web only) Stretches the column to fill vertical space using `display: flex`.
-   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   * In native apps, FlexGridCol behaves as if this is always true (as do all `View`s).
    */
   flex: PropTypes.bool
 }
-
-export default Col