@telus-uds/components-base 1.72.0 → 1.74.0

package/src/Footnote/FootnoteLink.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet, Platform, TouchableWithoutFeedback } from 'react-native'
+import dictionary from './dictionary'
+import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText } from '../utils'
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+// The top property varies between devices due to how devices render the viewport.
+const selectTextStyle = ({ fontSize, lineHeight }) => ({
+  fontSize,
+  lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
+  ...Platform.select({
+    ios: {
+      top: -fontSize / 2
+    },
+    android: {
+      top: fontSize / 4
+    },
+    web: {
+      top: -fontSize / 2.8
+    }
+  })
+})
+
+const FootnoteLink = ({ copy = 'en', content = [], onClick, tokens, variant = {}, ...rest }) => {
+  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant)
+  const textStyles = applyTextStyles(themeTokens)
+
+  const numbers = Array.isArray(content) ? content : [content]
+  const refs = numbers.map(() => React.createRef())
+
+  const handleOnClick = (index) => {
+    onClick(numbers[index], refs[index])
+  }
+  const getCopy = useCopy({ dictionary, copy })
+
+  return (
+    <>
+      {numbers.map((num, index) => (
+        <View
+          accessibilityLabel={getCopy('a11yLabel')}
+          key={num}
+          ref={refs[index]}
+          {...selectProps(rest)}
+        >
+          <TouchableWithoutFeedback onPress={handleOnClick} accessibilityRole="button">
+            {wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
+              style: {
+                ...textStyles,
+                ...staticStyles.text,
+                ...selectTextStyle(themeTokens)
+              }
+            })}
+          </TouchableWithoutFeedback>
+        </View>
+      ))}
+    </>
+  )
+}
+
+const copyShape = PropTypes.shape({ a11yLabel: PropTypes.string.isRequired })
+
+FootnoteLink.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the key `a11yLabel`.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
+  /**
+   * The footnote number, or multiple numbers if passed as an array.
+   * If using an array, a comma-separated group of numbers will be rendered as superscript.
+   */
+  content: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]).isRequired,
+  /**
+   * A callback function to handle the click of a FootnoteLink.
+   */
+  onClick: PropTypes.func.isRequired
+}
+
+export default FootnoteLink
+
+const staticStyles = StyleSheet.create({
+  text: {
+    position: 'relative',
+    textDecorationLine: 'underline'
+  }
+})

package/src/Footnote/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+}

package/src/Footnote/index.js

@@ -0,0 +1,6 @@
+import Footnote from './Footnote'
+import FootnoteLink from './FootnoteLink'
+
+Footnote.Link = FootnoteLink
+
+export default Footnote

package/src/Listbox/ListboxGroup.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import { withLinkRouter } from '../utils'
 import ExpandCollapse from '../ExpandCollapse'
 import ListboxItem from './ListboxItem'
@@ -20,6 +20,13 @@ const styles = StyleSheet.create({
   }
 })
 
+const getAccessibilityRole = () =>
+  Platform.select({
+    ios: 'listitem',
+    android: 'none',
+    web: 'listitem'
+  })
+
 const ListboxGroup = forwardRef(
   (
     {
@@ -39,7 +46,7 @@ const ListboxGroup = forwardRef(
 
     // TODO: implement keyboard navigation via refs for grouped items separately here
     return (
-      <View id="test" style={styles.groupWrapper} accessibilityRole="listitem">
+      <View id="test" style={styles.groupWrapper} accessibilityRole={getAccessibilityRole()}>
         <ExpandCollapse.Panel
           panelId={id ?? label}
           controlTokens={{

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -89,6 +89,8 @@ const MultiSelectFilter = ({
     return colSize === 2 && setMaxWidth(true)
   }, [colSize])
 
+  useEffect(() => setCheckedIds(currentValues ?? []), [currentValues])
+
   const {
     headerFontColor,
     headerFontSize,

package/src/Notification/Notification.jsx

@@ -22,8 +22,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
-const selectTextStyles = (tokens, themeOptions) =>
-  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
+const selectTextStyles = (tokens, themeOptions, isDismissible) => {
+  const textTokens = selectTokens('Typography', tokens)
+  const styles = {
+    ...textTokens,
+    themeOptions,
+    overflow: 'hidden'
+  }
+
+  if (!isDismissible) {
+    styles.flexShrink = 1
+  }
+
+  return applyTextStyles(styles)
+}
 
 const selectIconProps = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -113,7 +125,7 @@ const Notification = forwardRef(
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens, themeOptions)
+    const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible)
 
     const content = wrapStringsInText(
       typeof children === 'function' ? children({ textStyles, variant }) : children,

package/src/OrderedList/ItemBase.jsx

@@ -1,10 +1,22 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-role */
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
+
+const getAccessibilityRole = () =>
+  Platform.select({
+    ios: 'listitem',
+    android: 'none',
+    web: 'listitem'
+  })
 
 const Item = forwardRef(({ children, style, ...rest }, ref) => (
-  <View accessibilityRole="listitem" ref={ref} style={[staticStyles.container, style]} {...rest}>
+  <View
+    accessibilityRole={getAccessibilityRole()}
+    ref={ref}
+    style={[staticStyles.container, style]}
+    {...rest}
+  >
     {children}
   </View>
 ))

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 Responsive = ({ min = 'xs', max, inheritedStyles = [], children }) => {
+  const {
+    themeOptions: { enableMediaQueryStyleSheet }
+  } = useTheme()
+  if (enableMediaQueryStyleSheet) {
+    return (
+      <ResponsiveWithMediaQueryStyleSheet inheritedStyles={inheritedStyles} 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`
@@ -33,6 +46,12 @@ Responsive.propTypes = {
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  /**
+   * Styles to be inherited by `Responsive`.
+   * It should be an array of style property names.
+   * Note: This prop is only applicable when `enableMediaQueryStylesheet` is set to true in the `ThemeProvider`.
+   */
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
   children: PropTypes.node.isRequired
 }
 

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,60 @@
+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, inheritedStyles = [], children }) => {
+  const { ids, styles } = StyleSheet.create({
+    responsive: {
+      ...inheritedStyles.reduce((acc, prop) => {
+        acc[prop] = 'inherit'
+        return acc
+      }, {}),
+      ...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']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
+  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,61 @@ 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,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+    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 +137,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 +145,8 @@ const Typography = forwardRef(
             lineHeight: 0
           }
         })
-
         return sanitizedChild
       }
-
       return child
     }
 
@@ -106,19 +158,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

@@ -17,6 +17,7 @@ export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
+export { default as Footnote } from './Footnote'
 export { default as HorizontalScroll } from './HorizontalScroll'
 export * from './HorizontalScroll'
 export { default as Icon } from './Icon'

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'