@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/src/utils/formatImageSource.js

@@ -21,9 +21,7 @@
  * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
  * @returns {object|string} - The formatted image source.
  */
-const formatImageSource = (source) =>
+export const formatImageSource = (source) =>
   typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:'))
     ? { uri: source }
     : source
-
-export default formatImageSource

package/src/utils/getSpacingScale.js

@@ -32,7 +32,7 @@ const resolveSpacingOptions = (space) => {
  * @param {Function} getSpacingTokens - A function that retrieves spacing tokens based on the provided options.
  * @returns {number} The calculated spacing scale, ensuring it is non-negative.
  */
-const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
+export const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
   const { tokens, variant, overridden, subtract = 0 } = resolveSpacingOptions(spaceValue)
   const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0))
 
@@ -46,5 +46,3 @@ const getSpacingScale = (spaceValue, viewport, getSpacingTokens) => {
   )
   return Math.max(size - subtract, 0)
 }
-
-export default getSpacingScale

package/src/utils/hasOwnProperty.js

@@ -6,6 +6,6 @@
  * @param {String} key
  * @returns {Boolean}
  */
-export default function hasOwnProperty(object, key) {
+export function hasOwnProperty(object, key) {
   return Object.prototype.hasOwnProperty.call(object, key)
 }

package/src/utils/htmlAttrs.js

@@ -13,7 +13,7 @@ const htmlAttrTypes = {
   title: PropTypes.string
 }
 
-export default {
+export const htmlAttrs = {
   types: htmlAttrTypes,
   select: (props) =>
     Object.entries(props).reduce(

package/src/utils/info/info.js

@@ -0,0 +1,7 @@
+import { platform } from './platform/platform'
+import { versions } from './versions'
+
+export const info = {
+  platform,
+  versions
+}

package/src/utils/info/platform/platform.android.js

@@ -1 +1 @@
-export default '.android'
+export const fileSuffix = '.android'

package/src/utils/info/platform/platform.ios.js

@@ -1 +1 @@
-export default '.ios'
+export const fileSuffix = '.ios'

package/src/utils/info/platform/platform.js

@@ -1 +1,10 @@
-export default '.web (default)'
+import { Platform } from 'react-native'
+
+// Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+export const fileSuffix = '.web (default)'
+export const platform = { OS: Platform.OS, fileSuffix }

package/src/utils/info/platform/platform.native.js

@@ -1,4 +1,4 @@
 // This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
 // If this gets picked, either an unsupported React Native platform is being used somehow
 // (e.g. a native Windows app), or there's a serious config problem somewhere.
-export default '.native'
+export const fileSuffix = '.native'

package/src/utils/info/versions.js

@@ -1,6 +1,6 @@
 import pkgJson from '../../../package.json'
 
 // Add more versions if they are useful e.g. theme schema version
-export default {
+export const versions = {
   uds: pkgJson.version
 }

package/src/utils/isTouchDevice.js

@@ -5,7 +5,7 @@ import { Platform } from 'react-native'
  *
  * @returns {boolean} True if the device supports touch, false otherwise
  */
-const isTouchDevice = () => {
+export const isTouchDevice = () => {
   if (Platform.OS !== 'web') {
     return true
   }
@@ -30,5 +30,3 @@ const isTouchDevice = () => {
 
   return false
 }
-
-export default isTouchDevice

package/src/utils/pressability.js

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet } from 'react-native'
-import pressProps from './props/pressProps'
+import { pressProps } from './props/pressProps'
 
 /**
  * @typedef {import('react').ReactNode} ReactNode

package/src/utils/props/a11yProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
 // so we have to define them ourselves.
@@ -193,7 +193,7 @@ if (Platform.OS === 'web') {
   })
 }
 
-export default {
+export const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.

package/src/utils/props/clickProps.js

@@ -6,7 +6,7 @@ const clickHandlerMapping = {
   onMouseUp: 'onPressOut'
 }
 
-export default {
+export const clickProps = {
   /**
    * Web-oriented HTML click handlers that may be mapped to React Native press handlers
    */

package/src/utils/props/componentPropType.js

@@ -7,7 +7,7 @@
  * @param {string|string[]} passedName
  * @return {function}
  */
-export default function componentPropType(passedName) {
+export function componentPropType(passedName) {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName
 
   const checkProp = (props, propName, componentName) => {

package/src/utils/props/contentfulProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 const contentfulPropsTypes = {
   ...Platform.select({
@@ -12,7 +12,7 @@ const contentfulPropsTypes = {
   })
 }
 
-export default {
+export const contentfulProps = {
   /**
    * Set of contentful properties used for the content preview inspector.
    */

package/src/utils/props/copyPropTypes.js

@@ -1,3 +1,3 @@
 import PropTypes from 'prop-types'
 
-export default PropTypes.oneOf(['en', 'fr'])
+export const copyPropTypes = PropTypes.oneOf(['en', 'fr'])

package/src/utils/props/getPropSelector.js

@@ -1,5 +1,5 @@
 import merge from 'lodash.merge'
-import hasOwnProperty from '../hasOwnProperty'
+import { hasOwnProperty } from '../hasOwnProperty'
 
 /**
  * @callback PropSelectorCallback - a callback called for each prop passed to a component
@@ -37,7 +37,7 @@ const applyCallback = (callback, items, key, value) => {
  * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
  * @returns {object} - valid props for this component
  */
-export default function getPropSelector(propTypes, regexp, callback) {
+export function getPropSelector(propTypes, regexp, callback) {
   return (props) =>
     Object.entries(props).reduce(
       (items, [key, value]) =>

package/src/utils/props/handlerProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 const focusHandlerProps = {
   types: {

package/src/utils/props/hrefAttrsProp.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 // Props related to HTML <a> anchor link attributes.
 const targetValues = ['_self', '_blank', '_parent', '_top']
-export default {
+export const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"

package/src/utils/props/inputSupportsProps.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
-import tooltipPropTypes from '../../Tooltip/shared'
+import { propTypes as tooltipPropTypes } from '../../Tooltip/shared'
 
-export default {
+export const inputSupportsProps = {
   types: {
     /**
      * Whether the English or French copy will be used (e.g. for accessibility labels).

package/src/utils/props/linkProps.js

@@ -1,9 +1,9 @@
 import { Linking, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { pressPropTypes } from './pressProps'
-import a11yProps from './a11yProps'
-import hrefAttrsProp from './hrefAttrsProp'
-import getPropSelector from './getPropSelector'
+import { a11yProps } from './a11yProps'
+import { hrefAttrsProp } from './hrefAttrsProp'
+import { getPropSelector } from './getPropSelector'
 
 const linkPropTypes = {
   ...pressPropTypes,
@@ -12,7 +12,7 @@ const linkPropTypes = {
   ...a11yProps.types
 }
 
-export default {
+export const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */

package/src/utils/props/paddingProp.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-export default {
+export const paddingProp = {
   propType: PropTypes.shape({
     paddingBottom: PropTypes.number,
     paddingLeft: PropTypes.number,

package/src/utils/props/pressProps.js

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import rectProp from './rectProp'
-import getPropSelector from './getPropSelector'
+import { rectProp } from './rectProp'
+import { getPropSelector } from './getPropSelector'
 
 const pressHandlerPropTypes = {
   onPress: PropTypes.func,
@@ -32,7 +32,7 @@ export const pressPropTypes = {
   })
 }
 
-export default {
+export const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */

package/src/utils/props/rectProp.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-export default {
+export const rectProp = {
   propType: PropTypes.shape({
     bottom: PropTypes.number,
     left: PropTypes.number,

package/src/utils/props/responsiveProps.js

@@ -22,7 +22,7 @@ const getByViewport = (propType) => ({
  * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
  *   either the provided proptype on its own, or the output of getTypeByViewport
  */
-export default {
+export const responsiveProps = {
   getByViewport,
   getTypeByViewport: (propType) => PropTypes.shape(getByViewport(propType)),
   getTypeOptionallyByViewport: (propType) =>

package/src/utils/props/selectSystemProps.js

@@ -1,6 +1,6 @@
 // Returns a selector for requested prop kinds as well as the propTypes for
 // those props merged into one object
-export default function selectSystemProps(systemPropHelpers) {
+export function selectSystemProps(systemPropHelpers) {
   const selectProps = (props) =>
     systemPropHelpers.reduce((acc, propHelper) => {
       if (typeof propHelper?.select !== 'function') {

package/src/utils/props/spacingProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
-import responsiveProps from './responsiveProps'
-import variantProp from './variantProp'
+import { responsiveProps } from './responsiveProps'
+import { variantProp } from './variantProp'
 
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
@@ -46,7 +46,7 @@ const spacingObjectPropType = PropTypes.shape({
  *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
  *   viewports or `space` to apply at all viewports.
  */
-export default {
+export const spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,

package/src/utils/props/textInputProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 // This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
@@ -165,7 +165,7 @@ const nativeOnly = {
   underlineColorAndroid: PropTypes.string
 }
 
-export default {
+export const textInputProps = {
   /**
    * Subset of proptypes that can be passed down to a React Native or React Native Web
    * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.

package/src/utils/props/textProps.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 // These are the props accepted specifically on React Native (Web) `Text` elements.
 // They are generally concerned with the behaviour of multiline text.
@@ -38,7 +38,7 @@ const webOnly = {
   lang: PropTypes.string
 }
 
-export default {
+export const textProps = {
   /**
    * Set of prop types specific to React Native and React Native Web `Text`,
    * which largely revolve around the behaviour of multiline non-pressable text.

package/src/utils/props/variantProp.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-export default {
+export const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *

package/src/utils/props/viewProps.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import getPropSelector from './getPropSelector'
+import { getPropSelector } from './getPropSelector'
 
 const viewPropTypes = {
   pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
@@ -9,7 +9,7 @@ const viewPropTypes = {
   dataSet: PropTypes.object
 }
 
-export default {
+export const viewProps = {
   /**
    * Subset of `View` proptypes that could conceivably be needed on any component
    * that renders a single View.

package/src/utils/resolveContentMaxWidth.js

@@ -9,7 +9,7 @@ const CONTENT_FULL_WIDTH = 'full'
  * @param {number} responsiveWidth - The responsive width to use when contentMaxWidthValue is CONTENT_MAX_WIDTH.
  * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
  */
-const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
+export const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
   if (!contentMaxWidthValue || contentMaxWidthValue === CONTENT_FULL_WIDTH) {
     return null
   }
@@ -24,5 +24,3 @@ const resolveContentMaxWidth = (contentMaxWidthValue, responsiveWidth) => {
 
   return contentMaxWidthValue
 }
-
-export default resolveContentMaxWidth

package/src/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -2,7 +2,7 @@ import mediaQuery from 'css-mediaquery'
 import { Dimensions } from 'react-native'
 import { isMediaOrPseudo, isMedia } from '../utils/common'
 
-const createStyleSheet = (stylesWithQuery) => {
+export const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
   let cleanStyles
   const ids = {}
@@ -37,5 +37,3 @@ const createStyleSheet = (stylesWithQuery) => {
 
   return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
 }
-
-export default createStyleSheet

package/src/utils/ssr-media-query/create-stylesheet/index.android.js

@@ -1,3 +1 @@
-import createStyleSheet from './create-stylesheet-mobile'
-
-export default createStyleSheet
+export { createStyleSheet } from './create-stylesheet-mobile'

package/src/utils/ssr-media-query/create-stylesheet/index.ios.js

@@ -1,3 +1 @@
-import createStyleSheet from './create-stylesheet-mobile'
-
-export default createStyleSheet
+export { createStyleSheet } from './create-stylesheet-mobile'

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -1,9 +1,9 @@
 import { addCss } from '../utils/inject'
-import createDeclarationBlock from '../utils/create-declaration-block'
-import hash from '../hash'
+import { createDeclarationBlock } from '../utils/create-declaration-block'
+import { hash } from '../hash'
 import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common'
 
-const createStyleSheet = (stylesWithQuery) => {
+export const createStyleSheet = (stylesWithQuery) => {
   if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
 
   let ids = {}
@@ -31,5 +31,3 @@ const createStyleSheet = (stylesWithQuery) => {
 
   return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
 }
-
-export default createStyleSheet

package/src/utils/ssr-media-query/hash.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-export default function hash(text) {
+export function hash(text) {
   if (!text) {
     return ''
   }

package/src/utils/ssr-media-query/ssr-media-query.js

@@ -0,0 +1,9 @@
+import { createStyleSheet } from './create-stylesheet'
+import { createMediaQueryStyles } from './utils/create-media-query-styles'
+import { useAllViewportTokens } from './utils/use-all-viewport-tokens'
+
+const StyleSheet = {
+  create: createStyleSheet
+}
+
+export { StyleSheet, createMediaQueryStyles, useAllViewportTokens }

package/src/utils/ssr-media-query/utils/create-declaration-block.js

@@ -1,8 +1,8 @@
 import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle'
 import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles'
-import hyphenateStyleName from './hyphenate-style-name'
+import { hyphenateStyleName } from './hyphenate-style-name'
 
-const createDeclarationBlock = (style) => {
+export const createDeclarationBlock = (style) => {
   const domStyle = prefixStyles(createReactDOMStyle(style))
   const declarationsString = Object.keys(domStyle)
     .map((property) => {
@@ -17,5 +17,3 @@ const createDeclarationBlock = (style) => {
     .join(';')
   return `{${declarationsString};}`
 }
-
-export default createDeclarationBlock

package/src/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -26,7 +26,7 @@ const inherit = ({ xs, sm = xs, md = sm, lg = md, xl = lg }) => ({ xs, sm, md, l
  * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
+export function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
   const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles
   const viewportsArray = viewports.keys
   const mediaQueries = Object.entries(effectiveStyles).reduce((acc, [viewport, styles]) => {
@@ -42,5 +42,3 @@ function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
 
   return mediaQueries
 }
-
-export default createMediaQueryStyles

package/src/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -4,12 +4,10 @@ const cache = {}
 
 const toHyphenLower = (match) => `-${match.toLowerCase()}`
 
-const hyphenateStyleName = (name) => {
+export const hyphenateStyleName = (name) => {
   if (Object.prototype.hasOwnProperty.call(cache, name)) {
     return cache[name]
   }
   const hName = name.replace(uppercasePattern, toHyphenLower)
   return cache[name] === msPattern.test(hName) ? `-${hName}` : hName
 }
-
-export default hyphenateStyleName

package/src/utils/ssr-media-query/utils/use-all-viewport-tokens.js

@@ -1,5 +1,5 @@
-import { useThemeTokens } from '../../../ThemeProvider'
-import { useViewport } from '../../../ViewportProvider'
+import { useThemeTokens } from '../../../ThemeProvider/useThemeTokens'
+import { useViewport } from '../../../ViewportProvider/useViewport'
 
 /**
  * Hook to get theme tokens for all viewports at once.
@@ -16,7 +16,7 @@ import { useViewport } from '../../../ViewportProvider'
  * const allTokens = useAllViewportTokens('StackView', tokens, variant)
  * // Returns: { xs: {...}, sm: {...}, md: {...}, lg: {...}, xl: {...}, current: {...} }
  */
-const useAllViewportTokens = (componentName, tokens, variant) => {
+export const useAllViewportTokens = (componentName, tokens, variant) => {
   const viewport = useViewport()
 
   const xs = useThemeTokens(componentName, tokens, variant, { viewport: 'xs' })
@@ -28,5 +28,3 @@ const useAllViewportTokens = (componentName, tokens, variant) => {
 
   return { xs, sm, md, lg, xl, current }
 }
-
-export default useAllViewportTokens

package/src/utils/ssr.jsx

@@ -87,8 +87,6 @@ export const ssrStyles = (appName = 'UDS app', { styleGetters = [], collectStyle
   }
 }
 
-export default ssrStyles
-
 /**
  * @deprecated - use ssrStyles instead
  *

package/src/utils/transformGradient.js

@@ -13,5 +13,3 @@ export const transformGradient = (gradient) =>
   `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${
     gradient.stops[0].stop * 100
   }%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`
-
-export default { transformGradient }

package/src/utils/useCopy.js

@@ -27,7 +27,7 @@ export const DEFAULT_COPY = 'en'
  * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
-function useCopy({ dictionary, copy = DEFAULT_COPY }) {
+export function useCopy({ dictionary, copy = DEFAULT_COPY }) {
   if (typeof copy === 'string') {
     return (key) => (key ? dictionary[copy][key] : dictionary[copy])
   }
@@ -35,5 +35,3 @@ function useCopy({ dictionary, copy = DEFAULT_COPY }) {
   // support overriding the entire copy dictionary with an object for a single language
   return (key) => copy[key]
 }
-
-export default useCopy

package/src/utils/useDetectOutsideClick.js

@@ -13,7 +13,7 @@ import { Platform } from 'react-native'
  *   @deprecated Will be removed in next major release; detection will always be enabled.
  */
 
-function useDetectOutsideClick(ref, onOutside, enabled = true) {
+export function useDetectOutsideClick(ref, onOutside, enabled = true) {
   React.useEffect(() => {
     if (!enabled || Platform.OS !== 'web') {
       return undefined
@@ -31,5 +31,3 @@ function useDetectOutsideClick(ref, onOutside, enabled = true) {
     }
   }, [ref, onOutside, enabled])
 }
-
-export default useDetectOutsideClick

package/src/utils/useHash.js

@@ -18,7 +18,7 @@ const doAction = (action, event) =>
  * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
  * @returns
  */
-const useHash = (action, isReady = true) => {
+export const useHash = (action, isReady = true) => {
   const [isDone, setIsDone] = useState(false)
   // Do the action just once when ready after component mount, from hash on page load
   const isToDo = isReady && !isDone
@@ -36,4 +36,3 @@ const useHash = (action, isReady = true) => {
     return () => window.removeEventListener('hashchange', handleChange)
   }, [action])
 }
-export default useHash

package/src/utils/useHash.native.js

@@ -2,5 +2,4 @@
  * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
  * is handled at OS level and deep links have completely different usage.
  */
-const useHash = () => {}
-export default useHash
+export const useHash = () => {}

package/src/utils/useMediaQuerySpacing.js

@@ -1,4 +1,4 @@
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
 import { resolveResponsiveProp } from './useResponsiveProp'
 
 /**
@@ -52,7 +52,12 @@ import { resolveResponsiveProp } from './useResponsiveProp'
  * - `sizeByViewport`: The actual pixel/number values for each viewport
  * - `tokensByViewport`: The full theme tokens for each viewport (for advanced use cases)
  */
-const useMediaQuerySpacing = (spaceValue, tokenKey = 'spacingScale', tokens = {}, variant = {}) => {
+export const useMediaQuerySpacing = (
+  spaceValue,
+  tokenKey = 'spacingScale',
+  tokens = {},
+  variant = {}
+) => {
   const isResponsive =
     typeof spaceValue === 'object' &&
     spaceValue !== null &&
@@ -120,5 +125,3 @@ const useMediaQuerySpacing = (spaceValue, tokenKey = 'spacingScale', tokens = {}
     tokensByViewport
   }
 }
-
-export default useMediaQuerySpacing