@telus-uds/components-base 1.71.0 → 1.73.0

package/src/Responsive/Responsive.jsx

@@ -1,29 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { viewports } from '@telus-uds/system-constants'
-import { useResponsiveProp } from '../utils'
+import { useTheme } from '../ThemeProvider'
+import ResponsiveProp from './ResponsiveProp'
+import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet'
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
  * min and max viewports.
  *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * If enableMediaQueryStyleSheet themeOption is set to false in ThemeProvider, then in SSR,
+ * like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
  * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
  * after hydration. This may cause a layout shift on devices other than the narrowest.
+ *
+ * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
+ * is used to hide and show children of `Responsive` within a View.
  */
 
 const Responsive = ({ min = 'xs', max, children }) => {
-  // Start returning children at the 'min' viewport or greater
-  const byViewports = { [min]: children }
-  if (max && max !== 'xl') {
-    // Stop returning children at the viewport one above 'max' or greater
-    const maxIndex = viewports.keys.indexOf(max)
-    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
-    if (maxPlusOne) byViewports[maxPlusOne] = null
+  const {
+    themeOptions: { enableMediaQueryStyleSheet }
+  } = useTheme()
+  if (enableMediaQueryStyleSheet) {
+    return (
+      <ResponsiveWithMediaQueryStyleSheet min={min} max={max}>
+        {children}
+      </ResponsiveWithMediaQueryStyleSheet>
+    )
   }
-  return <>{useResponsiveProp(byViewports, null)}</>
+  return (
+    <ResponsiveProp min={min} max={max}>
+      {children}
+    </ResponsiveProp>
+  )
 }
 
+Responsive.displayName = 'Responsive'
+
 Responsive.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is smaller than `min`

package/src/Responsive/ResponsiveProp.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+const ResponsiveProp = ({ min = 'xs', max, children }) => {
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  const responsiveProp = useResponsiveProp(byViewports, null)
+  return <>{responsiveProp}</>
+}
+
+ResponsiveProp.displayName = 'Responsive'
+
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveProp

package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils'
+
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = viewports.keys
+  const minIndex = viewportsArray.indexOf(min)
+  const maxIndex = viewportsArray.indexOf(max)
+  let hiddenViewports = []
+
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex)
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1))
+  }
+
+  const styles = {}
+
+  viewportsArray.forEach((viewport) => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = { display: 'none' }
+    }
+  })
+  return createMediaQueryStyles(styles, false)
+}
+const ResponsiveWithMediaQueryStyleSheet = ({ min, max, children }) => {
+  const { ids, styles } = StyleSheet.create({
+    responsive: {
+      flexDirection: 'inherit',
+      alignItems: 'inherit',
+      justifyContent: 'inherit',
+      ...generateResponsiveStyles(min, max)
+    }
+  })
+  return (
+    <BaseView style={styles.responsive} dataSet={ids.responsive && { media: ids.responsive }}>
+      {children}
+    </BaseView>
+  )
+}
+
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive'
+
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default ResponsiveWithMediaQueryStyleSheet

package/src/ThemeProvider/ThemeProvider.jsx

@@ -16,7 +16,8 @@ const defaultThemeOptions = {
   // TODO: switch `forceZIndex` to be false by default in the next major version
   forceZIndex: true,
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 }
 
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
@@ -65,12 +66,14 @@ ThemeProvider.propTypes = {
    * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
    *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
     enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 }
 

package/src/ThemeProvider/index.js

@@ -2,6 +2,7 @@ import ThemeProvider from './ThemeProvider'
 
 export { default as useTheme } from './useTheme'
 export { default as useSetTheme } from './useSetTheme'
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens'
 export * from './useThemeTokens'
 
 export * from './utils'

package/src/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,85 @@
+import { viewports } from '@telus-uds/system-constants'
+import useTheme from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+
+const getResponsiveThemeTokens = (
+  { rules = [], tokens: defaultThemeTokens = {} },
+  tokensProp,
+  variants = {},
+  states
+) => {
+  const appearances = mergeAppearances(variants, states)
+
+  const tokensByViewport = Object.fromEntries(
+    viewports.keys.map((viewport) => [viewport, { ...defaultThemeTokens }])
+  )
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach((rule) => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports]
+      }
+      targetViewports.forEach((viewport) => {
+        tokensByViewport[viewport] = { ...tokensByViewport[viewport], ...rule.tokens }
+      })
+    }
+  })
+
+  Object.keys(tokensByViewport).forEach((viewport) => {
+    tokensByViewport[viewport] = resolveThemeTokens(
+      tokensByViewport[viewport],
+      appearances,
+      tokensProp
+    )
+  })
+
+  return tokensByViewport
+}
+
+const doesRuleApply = (rule, appearances) =>
+  Object.entries(rule.if).every((condition) => doesConditionApply(condition, appearances))
+
+const doesConditionApply = ([key, value], appearances) => {
+  if (key === 'viewport') {
+    return true
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue
+}
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states)
+  return themeTokens
+}
+
+export default useResponsiveThemeTokens

package/src/Typography/Typography.jsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
-import { useTheme, useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
   a11yProps,
@@ -15,17 +14,29 @@ import {
   textTags,
   textProps,
   viewProps,
-  getA11yPropsFromHtmlTag
+  getA11yPropsFromHtmlTag,
+  StyleSheet,
+  createMediaQueryStyles
 } from '../utils'
+import { useViewport } from '../ViewportProvider'
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
-
 const selectTextStyles = (
-  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine
+  },
   themeOptions
 ) =>
   applyTextStyles({
@@ -37,7 +48,8 @@ const selectTextStyles = (
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   })
 
 // General-purpose flexible theme-neutral base component for text
@@ -59,19 +71,56 @@ const Typography = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const { superScriptFontSize, ...themeTokens } = useThemeTokens('Typography', tokens, variant, {
-      viewport
-    })
     const { themeOptions } = useTheme()
 
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens('Typography', tokens, variant)
+    const maxFontSizeMultiplier = enableMediaQueryStyleSheet
+      ? getMaxFontMultiplier(themeTokens[viewport])
+      : getMaxFontMultiplier(themeTokens)
+    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+
+    let textStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const transformedThemeTokens = Object.entries(themeTokens).reduce(
+        (acc, [vp, viewportTokens]) => {
+          acc[vp] = selectTextStyles(
+            {
+              textAlign: align,
+              textDecorationLine,
+              ...viewportTokens
+            },
+            themeOptions
+          )
+          return acc
+        },
+        {}
+      )
+      const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens)
+      const { ids, styles } = StyleSheet.create({
+        text: mediaQueryStyles
+      })
+      textStyles = styles.text
+      mediaIds = ids.text
+    } else {
+      textStyles = selectTextStyles(
+        {
+          textAlign: align,
+          textDecorationLine,
+          ...themeTokens
+        },
+        themeOptions
+      )
+    }
+
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(
-        align ? { ...themeTokens, textAlign: align } : themeTokens,
-        themeOptions
-      ),
       dataSet,
-      maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+      maxFontSizeMultiplier
     }
 
     const containerProps = {
@@ -83,7 +132,7 @@ const Typography = forwardRef(
     const resetTagStyling = (child) => {
       if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
         const childStyles = child?.props?.style || {}
-        const supFontSize = childStyles.fontSize ?? superScriptFontSize
+        const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize
         const sanitizedChild = React.cloneElement(child, {
           style: {
             ...childStyles,
@@ -91,10 +140,8 @@ const Typography = forwardRef(
             lineHeight: 0
           }
         })
-
         return sanitizedChild
       }
-
       return child
     }
 
@@ -106,19 +153,20 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
-    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
-    const textStyles = resolvedTextProps.style
-      ? { ...resolvedTextProps.style, textDecorationLine }
-      : { textDecorationLine }
-
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles}>
+        <Text {...resolvedTextProps} style={textStyles} dataSet={mediaIds && { media: mediaIds }}>
           {sanitizeChildren(children)}
         </Text>
       </View>
     ) : (
-      <Text ref={ref} {...containerProps} {...resolvedTextProps} style={textStyles}>
+      <Text
+        ref={ref}
+        {...containerProps}
+        {...resolvedTextProps}
+        style={textStyles}
+        dataSet={mediaIds && { media: mediaIds }}
+      >
         {sanitizeChildren(children)}
       </Text>
     )

package/src/index.js

@@ -11,6 +11,7 @@ export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as CheckboxCard } from './CheckboxCard'
 export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export { default as ColourToggle } from './ColourToggle'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
@@ -28,6 +29,7 @@ export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
+export { default as OrderedList } from './OrderedList'
 export { default as Pagination } from './Pagination'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'

package/src/server.js

@@ -0,0 +1,4 @@
+export { default as selectSystemProps } from './utils/props/selectSystemProps'
+export { getTokensPropType } from './utils/props/tokens'
+export { default as htmlAttrs } from './utils/htmlAttrs'
+export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens'

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

@@ -0,0 +1,41 @@
+import mediaQuery from 'css-mediaquery'
+import { Dimensions } from 'react-native'
+import { isMediaOrPseudo, isMedia } from '../utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  const ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery))
+    mediaQueriesAndPseudoClasses.forEach((str) => {
+      if (isMedia(str)) {
+        const mqStr = str.replace('@media', '')
+        const { width, height } = Dimensions.get('window')
+
+        const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+          width,
+          height,
+          orientation: width > height ? 'landscape' : 'portrait',
+          'aspect-ratio': width / height
+        })
+
+        if (isMatchingMediaQuery) {
+          cleanStyles = {
+            ...cleanStyles,
+            [key]: { ...cleanStyles[key], ...stylesWithQuery[key][str] }
+          }
+        }
+      }
+
+      delete cleanStyles[key][str]
+    })
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { addCss } from '../utils/inject'
+import createDeclarationBlock from '../utils/create-declaration-block'
+import hash from '../hash'
+import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  let ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    cleanStyles = deepClone(stylesWithQuery)
+    mediaQueriesAndPseudoClasses.forEach((query) => {
+      const css = createDeclarationBlock(stylesWithQuery[key][query])
+      const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
+      const rule = createCssRule(query, stringHash, css)
+
+      addCss(`${stringHash}`, rule)
+      delete cleanStyles[key][query]
+
+      ids = {
+        ...ids,
+        [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+      }
+    })
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

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

@@ -1,20 +1,35 @@
 import { viewports } from '@telus-uds/system-constants'
 
+const inherit = ({ xs, sm = xs, md = sm, lg = md, xl = lg }) => ({ xs, sm, md, lg, xl })
+
 /**
  * @typedef { Object } CssStyles
- * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
  * @typedef { Record<String, CssStyles> } MediaQueryStyles
  */
 
 /**
  * Generates media query styles based on specified viewport styles.
- * @param {ViewportStyles} viewportStyles
- * @returns { MediaQueryStyles }
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
  */
 
-function createMediaQueryStyles(viewportStyles) {
-  const viewportsArray = Object.keys(viewportStyles)
-  const mediaQueries = Object.entries(viewportStyles).reduce((acc, [viewport, styles]) => {
+function createMediaQueryStyles(viewportStyles, shouldInherit = true) {
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles
+  const viewportsArray = viewports.keys
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, [viewport, styles]) => {
     const minWidth = viewports.map.get(viewport)
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1]
     const maxWidth = viewports.map.get(nextViewport)

package/types/Badge.d.ts

@@ -0,0 +1,28 @@
+export interface BadgeProps {
+  text: string
+  borderColor?: string
+  textColor?: string
+}
+
+type BadgeVariants = {
+  alternative?: boolean
+  inverse?: boolean
+  outline?: boolean
+  purpose?: 'offer' | 'editorial'
+}
+
+export type BadgeTokens = {
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: number
+  borderWidth?: number
+  color?: string
+  fontName?: string
+  fontSize?: number
+  fontWeight?: number
+  gradient?: string
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+}

package/types/Box.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode, ReactElement } from 'react'
+import { ScrollViewProps } from 'react-native'
+import { ResponsiveSpacing, SemanticTag } from './Common'
+
+type BoxVariants = {
+  background?:
+    | 'lightest'
+    | 'lighter'
+    | 'light'
+    | 'dark'
+    | 'darker'
+    | 'darkest'
+    | 'critical'
+    | 'danger'
+    | 'warning'
+    | 'positive'
+    | 'black'
+    | 'featurePrimary'
+    | 'featureSecondary'
+    | 'featureNeutral'
+    | 'featureBrand'
+}
+
+type BoxTokens = {
+  backgroundColor?: string
+  gradient?: string
+  borderWidth?: number
+  borderColor?: string
+  borderTopLeftRadius?: number
+  borderTopRightRadius?: number
+  borderBottomLeftRadius?: number
+  borderBottomRightRadius?: number
+}
+
+export interface BoxProps {
+  children: ReactNode | ReactElement
+  horizontal?: ResponsiveSpacing | number
+  vertical?: ResponsiveSpacing | number
+  top?: ResponsiveSpacing | number
+  bottom?: ResponsiveSpacing | number
+  left?: ResponsiveSpacing | number
+  right?: ResponsiveSpacing | number
+  variant?: BoxVariants
+  tokens?: BoxTokens
+  space?: ResponsiveSpacing | number
+  flex?: number
+  scroll?: boolean | ScrollViewProps
+  tag?: SemanticTag
+  testID?: string
+  accessibilityLabel?: string
+  accessible?: boolean
+}