@telus-uds/components-base 1.53.0 → 1.55.0

package/lib-module/Typography/Typography.js

@@ -54,7 +54,10 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+  const {
+    superScriptFontSize,
+    ...themeTokens
+  } = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
   const {
@@ -77,8 +80,13 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
       var _child$props;
 
+      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+      const supFontSize = childStyles.fontSize ?? superScriptFontSize;
       const sanitizedChild = /*#__PURE__*/React.cloneElement(child, {
-        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
+        style: { ...childStyles,
+          ...(supFontSize ? {
+            fontSize: supFontSize
+          } : {}),
           lineHeight: 0
         }
       });

package/package.json

@@ -10,8 +10,8 @@
     "@floating-ui/react-dom": "^1.0.1",
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.36.0",
+    "@telus-uds/system-constants": "^1.3.0",
+    "@telus-uds/system-theme-tokens": "^2.38.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.53.0"
+  "version": "1.55.0"
 }

package/src/Button/ButtonBase.jsx

@@ -173,6 +173,13 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
+const selectButtonStyles = ({ textAlign }) => {
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  }
+}
+
 const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   size: iconSize,
   color: iconColor || color
@@ -237,6 +244,8 @@ const ButtonBase = forwardRef(
           const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
           const IconComponent = icon || themeTokens.icon
 
+          const rowStyles = selectButtonStyles(themeTokens)
+
           return (
             <View
               id={id}
@@ -249,7 +258,8 @@ const ButtonBase = forwardRef(
                   web: {
                     maxWidth: '100%', // ensure overflowing content wraps
                     // TODO: https://github.com/telus/universal-design-system/issues/487
-                    transition: 'background-color 200ms, border-color 200ms'
+                    transition: 'background-color 200ms, border-color 200ms',
+                    ...rowStyles
                   }
                 })
               ]}

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -5,18 +5,26 @@ import StackView from '../../StackView'
 import { variantProp } from '../../utils'
 
 const CarouselStepTracker = ({ variant }) => {
-  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
+  } = useCarousel()
   const stackViewTokens = {
     justifyContent: 'center'
   }
+
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   }
+
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
   return (
     <StackView direction="row" tokens={stackViewTokens}>

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -17,11 +17,6 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
   const firstTabRef = useRef()
   const [isInverse, setIsInverse] = useState(false)
 
-  // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-  const dividerVariant = { decorative: true }
-
   const lastTabSelected = activeIndex === items.length - 1
 
   // Get current select tab style
@@ -30,6 +25,11 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
     setIsInverse(selectedVariantIsInverse?.inverse)
   }, [items, activeIndex])
 
+  // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+  const dividerVariant = { decorative: true, inverse: isInverse }
+
   return (
     <View style={selectTabPanelStyle()}>
       <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>

package/src/Carousel/CarouselThumbnail.jsx

@@ -2,14 +2,25 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Image } from 'react-native'
 import { useCarousel } from './CarouselContext'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
+
+const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin, padding }) => ({
+  borderColor,
+  borderRadius,
+  borderWidth,
+  margin,
+  padding
+})
 
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
 const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
-  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo, themeTokens } =
-    useCarousel()
+  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
+  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
+  const viewport = useViewport()
   const thumbnailTitle =
     alt ??
     getCopyWithPlaceholders('stepTrackerLabel')
@@ -21,32 +32,17 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
     // Allow using the spacebar for navigation
     if (event?.key === ' ') goTo(index)
   }
-  const {
-    thumbnailBorderColor,
-    thumbnailBorderRadius,
-    thumbnailBorderWidth,
-    thumbnailMargin,
-    thumbnailPadding,
-    thumbnailSelectedBorderColor,
-    thumbnailSelectedBorderWidth,
-    thumbnailSize
-  } = themeTokens
+  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size } =
+    getThumbnailTokens({ viewport })
   const styles = {
-    pressable: {
-      borderColor: thumbnailBorderColor,
-      borderRadius: thumbnailBorderRadius,
-      borderWidth: thumbnailBorderWidth,
-      margin: thumbnailMargin,
-      padding: thumbnailPadding
-    },
     image: {
-      height: thumbnailSize,
-      width: thumbnailSize
+      height: size,
+      width: size
     },
     selected: {
-      borderColor: thumbnailSelectedBorderColor,
-      borderWidth: thumbnailSelectedBorderWidth,
-      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth + borderWidth
     }
   }
 
@@ -55,7 +51,17 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
       key={src}
       onKeyDown={handleKeyDown}
       onPress={handlePress}
-      style={[styles.pressable, index === activeIndex && styles.selected]}
+      style={({ hovered, pressed, focused }) => {
+        const pressableStyles = selectPressableTokens(
+          getThumbnailTokens({
+            hover: hovered,
+            pressed,
+            focus: focused
+          })
+        )
+
+        return [pressableStyles, index === activeIndex && styles.selected]
+      }}
     >
       <Image
         accessibilityIgnoresInvertColors

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -4,19 +4,24 @@ import { View } from 'react-native'
 import { useCarousel } from './CarouselContext'
 import CarouselThumbnail from './CarouselThumbnail'
 import { StackWrap } from '../StackView'
+import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
-  const { totalItems, themeTokens } = useCarousel()
+  const viewport = useViewport()
+  const { alignItems } = useThemeTokens('CarouselThumbnail', {}, { viewport })
+  const { totalItems } = useCarousel()
   if (thumbnails.length !== totalItems) {
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel')
   }
-  const { thumbnailContainerPaddingTop, thumbnailMargin } = themeTokens
+  const { containerPaddingTop: thumbnailContainerPaddingTop, margin: thumbnailMargin } =
+    useThemeTokens('CarouselThumbnail')
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   }
   const containerStyles = {
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems,
     paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
   }
 

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState } from 'react'
-import { Animated, Platform, View } from 'react-native'
+import { Animated, Platform, View, Text } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -26,7 +26,42 @@ const selectContainerStyles = ({
   paddingLeft: contentPaddingLeft,
   paddingRight: contentPaddingRight,
   paddingTop: contentPaddingTop,
-  paddingBottom: contentPaddingBottom
+  paddingBottom: contentPaddingBottom,
+  flex: 1
+})
+const selectTextStyles = ({
+  contentPanelFontSize,
+  contentPanelFontName,
+  contentPanelFontColor,
+  contentPanelFontWeight,
+  contentPanelLineHeight
+}) => ({
+  fontSize: contentPanelFontSize,
+  fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+  lineHeight: contentPanelFontSize * contentPanelLineHeight,
+  color: contentPanelFontColor
+})
+const selectContentPanelStyles = ({
+  contentPanelBackgroundColor,
+  contentPanelPaddingTop,
+  contentPanelPaddingBottom,
+  contentPanelPaddingLeft,
+  contentPanelPaddingRight,
+  contentPanelBorderWidth,
+  contentPanelBorderColor,
+  borderRadius,
+  marginBottom
+}) => ({
+  backgroundColor: contentPanelBackgroundColor,
+  paddingTop: contentPanelPaddingTop,
+  paddingBottom: contentPanelPaddingBottom,
+  paddingLeft: contentPanelPaddingLeft,
+  paddingRight: contentPanelPaddingRight,
+  borderWidth: contentPanelBorderWidth,
+  borderColor: contentPanelBorderColor,
+  borderStyle: 'solid',
+  borderRadius,
+  marginBottom
 })
 
 /**
@@ -52,6 +87,7 @@ const ExpandCollapsePanel = forwardRef(
       tokens,
       variant,
       controlRef,
+      content,
       ...rest
     },
     ref
@@ -90,8 +126,15 @@ const ExpandCollapsePanel = forwardRef(
     })
 
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
-
-    return (
+    return content ? (
+      <View style={selectContentPanelStyles(themeTokens)}>
+        {typeof children === 'string' ? (
+          <Text style={selectTextStyles(themeTokens)}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    ) : (
       <View ref={ref} style={themeTokens}>
         <ExpandCollapseControl
           {...selectedProps}
@@ -140,7 +183,7 @@ ExpandCollapsePanel.propTypes = {
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
@@ -151,9 +194,9 @@ ExpandCollapsePanel.propTypes = {
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
-   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: ExpandCollapseControl.propTypes.children.isRequired,
+  control: ExpandCollapseControl.propTypes.children,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
@@ -161,7 +204,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: ABBPropTypes.ref()
+  controlRef: ABBPropTypes.ref(),
+  /**
+   * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
+   */
+  content: PropTypes.bool
 }
 
 export default ExpandCollapsePanel

package/src/IconButton/IconButton.jsx

@@ -22,27 +22,71 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectOuterStyle = ({
   backgroundColor,
-  borderRadius,
   outerBorderWidth,
   outerBorderColor,
   outerBorderGap,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
   shadow
 }) => [
   {
     backgroundColor,
     ...applyShadowToken(shadow),
-    ...applyOuterBorder({ borderRadius, outerBorderWidth, outerBorderColor, outerBorderGap }),
+    ...applyOuterBorder({
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
     ...Platform.select({ web: { outline: 'none', display: 'inline-flex' } })
   },
   staticStyles.outer
 ]
 
-const selectInnerStyle = ({ borderColor, borderWidth = 0, borderRadius, padding = 0 }) => ({
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth) // Stable size as border changes
+
+const selectInnerStyle = ({
+  borderColor,
+  borderWidth,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderRadius,
+  padding = 0,
+  borderTopWidth,
+  borderRightWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+}) => ({
   // Inner borders animate with the icon and should be treated like a themable feature of the icon
   borderColor,
   borderRadius,
   borderWidth,
-  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderTopWidth,
+  borderRightWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  padding: calculatePadding(padding, borderWidth),
+  paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+  paddingRight: calculatePadding(paddingRight, borderRightWidth),
+  paddingTop: calculatePadding(paddingTop, borderTopWidth),
+  paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
 })
 
 /**
@@ -90,7 +134,7 @@ const IconButton = forwardRef(
           return (
             <View style={selectInnerStyle(themeTokens)}>
               <Icon
-                icon={IconComponent}
+                icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
                 variant={variant}
@@ -111,7 +155,7 @@ IconButton.propTypes = {
   /**
    * Defines the icon to be rendered
    */
-  icon: PropTypes.elementType.isRequired,
+  icon: PropTypes.elementType,
   /**
    * URL to navigate to when the `Iconbutton` is pressed
    */

package/src/Modal/Modal.jsx

@@ -3,6 +3,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   View,
+  ScrollView,
   Modal as NativeModal,
   Platform
 } from 'react-native'
@@ -114,7 +115,7 @@ const Modal = forwardRef(
 
     return (
       <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
+        <ScrollView contentContainerStyle={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events
@@ -149,7 +150,7 @@ const Modal = forwardRef(
           <TouchableWithoutFeedback onPress={handleClose}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
-        </View>
+        </ScrollView>
       </NativeModal>
     )
   }
@@ -210,7 +211,11 @@ const staticStyles = StyleSheet.create({
   },
   modal: {
     maxHeight: '100%', // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-    overflow: 'auto'
+    ...Platform.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',

package/src/SkipLink/SkipLink.jsx

@@ -37,8 +37,12 @@ const selectStyles = ({
   borderRadius
 })
 
-const selectTextStyles = ({ color }) => ({
-  color
+const selectTextStyles = ({ color, textLine, fontName, fontSize, fontWeight, lineHeight }) => ({
+  color,
+  textDecorationLine: textLine,
+  fontFamily: `${fontName}${fontWeight}normal`,
+  lineHeight: fontSize * lineHeight,
+  fontSize
 })
 
 /**
@@ -100,9 +104,6 @@ const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, re
   const { onPress, ...rest } = clickProps.toPressProps(rawRest)
 
   const getTokens = useThemeTokensCallback('SkipLink', tokens, variant)
-  const defaultTokens = getTokens()
-
-  const resolveLinkTokens = (pressState) => resolvePressableTokens(defaultTokens, pressState)
 
   const handlePress = (event) => {
     if (typeof onPress === 'function') onPress(event)
@@ -115,18 +116,17 @@ const SkipLink = forwardRef(({ tokens, variant, href, children, ...rawRest }, re
       accessibilityRole="link"
       onPress={handlePress}
       href={href}
-      style={({ focused: focus }) => {
-        const themeTokens = getTokens({ focus })
+      style={(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const skipLinkStyle = selectStyles(themeTokens)
-
-        return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden]
+        const { focused } = pressableState
+        return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden]
       }}
       {...selectProps(rest)}
     >
-      {(pressState) => {
-        const themeTokens = resolveLinkTokens(pressState)
+      {(pressableState) => {
+        const themeTokens = resolvePressableTokens(getTokens, pressableState)
         const textStyles = selectTextStyles(themeTokens)
-
         return <Text style={[textStyles, staticStyles.baseline]}>{children}</Text>
       }}
     </Pressable>

package/src/ThemeProvider/utils/styles.js

@@ -147,6 +147,13 @@ export function verticalAlignRow(verticalAlign, reverse = false) {
   }
 }
 
+const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
+  if (borderRadius) {
+    return borderRadius + outerBorderGap + outerBorderWidth
+  }
+
+  return null
+}
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
@@ -155,11 +162,31 @@ export const applyOuterBorder = ({
   outerBorderColor,
   outerBorderWidth = 0,
   outerBorderGap = 0,
-  borderRadius = 0
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius
 }) => ({
   margin: 0 - outerBorderWidth - outerBorderGap,
   padding: outerBorderGap,
-  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+  borderRadius: calculateBorderRadius(borderRadius, outerBorderGap, outerBorderWidth),
+  borderTopLeftRadius: calculateBorderRadius(borderTopLeftRadius, outerBorderGap, outerBorderWidth),
+  borderTopRightRadius: calculateBorderRadius(
+    borderTopRightRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
+  borderBottomLeftRadius: calculateBorderRadius(
+    borderBottomLeftRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
+  borderBottomRightRadius: calculateBorderRadius(
+    borderBottomRightRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor
 })

package/src/TooltipButton/TooltipButton.jsx

@@ -7,7 +7,11 @@ import Icon from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
+const selectInnerContainerStyles = ({ borderRadius, width, backgroundColor }) => ({
+  borderRadius,
+  width,
+  backgroundColor
+})
 
 const selectIconTokens = ({ iconSize, iconColor, iconScale = 1 }) => ({
   size: iconSize,
@@ -26,7 +30,15 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
+    <View
+      style={[
+        applyOuterBorder(themeTokens),
+        themeTokens.outerBorderWidth && {
+          margin: -themeTokens.outerBorderWidth
+        }
+      ]}
+      {...selectProps(rest)}
+    >
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>

package/src/Typography/Typography.jsx

@@ -59,7 +59,9 @@ const Typography = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const { superScriptFontSize, ...themeTokens } = useThemeTokens('Typography', tokens, variant, {
+      viewport
+    })
     const { themeOptions } = useTheme()
 
     const resolvedTextProps = {
@@ -80,9 +82,12 @@ 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 sanitizedChild = React.cloneElement(child, {
           style: {
-            ...child?.props?.style,
+            ...childStyles,
+            ...(supFontSize ? { fontSize: supFontSize } : {}),
             lineHeight: 0
           }
         })