@telus-uds/components-base 1.53.0 → 1.54.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 28 Jun 2023 23:16:56 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.54.0
+
+Fri, 07 Jul 2023 19:17:02 GMT
+
+### Minor changes
+
+- Koodo changes to nav bar (akshay.pandey1@telus.com)
+- Home Pro Icon added to telus (akshay.pandey1@telus.com)
+- Added "content" prop to ExpandCollapsePanel (wlsdud194@hotmail.com)
+- added capability to adjust superscript sizing with theme tokens (kyle.king2@telus.com)
+- Standardized SkipLink (wlsdud194@hotmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.37.0
+
+### Patches
+
+- Fix an issue where `Modal` may crash on Android devices and also may not render longer content (shahzaibkhalidmalik@outlook.com)
+- Tooltip margin adjusted to encompass the whole component (jislaseng@gmail.com)
+
 ## 1.53.0
 
-Wed, 28 Jun 2023 23:16:56 GMT
+Wed, 28 Jun 2023 23:27:23 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -36,7 +36,11 @@
         "pressableBorderTopColor": "color",
         "pressablePaddingBottom": "size",
         "titleColor": "color",
-        "subTitleColor": "color"
+        "subTitleColor": "color",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderRadius": "radius",
+        "outerBorderWidth": "border"
       },
       "VideoPickerSlider": {
         "previousIcon": "icon",
@@ -59,14 +63,10 @@
         "lineHeight": "lineHeight"
       },
       "Table": {
-        "tablePaddingBottom": "size",
         "cellMinWidth": "size",
-        "cellHeadingBackground": "color",
-        "cellHeadingBoxShadowColor": "color",
+        "tablePaddingBottom": "size",
         "cellBoxShadowColor": "color",
-        "cellSubheadingBackground": "color",
         "cellBackground": "color",
-        "cellRowHeadingBackground": "color",
         "cellStickyShadow": "shadow",
         "cellPaddingTop": "size",
         "cellPaddingRight": "size",
@@ -74,7 +74,9 @@
         "cellPaddingBottom": "size",
         "fontWeight": "fontWeight",
         "fontName": "fontName",
-        "fontSize": "fontSize"
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight",
+        "stickyBackgroundColor": "color"
       },
       "Image": {
         "borderRadius": "radius"
@@ -646,7 +648,19 @@
         "borderRadius": "radius",
         "borderWidth": "border",
         "expandDividerColor": "color",
-        "expandDividerWidth": "size"
+        "expandDividerWidth": "size",
+        "contentPanelBackgroundColor": "color",
+        "contentPanelPaddingLeft": "size",
+        "contentPanelPaddingRight": "size",
+        "contentPanelPaddingTop": "size",
+        "contentPanelPaddingBottom": "size",
+        "contentPanelBorderWidth": "border",
+        "contentPanelBorderColor": "color",
+        "contentPanelFontName": "fontName",
+        "contentPanelFontSize": "fontSize",
+        "contentPanelFontColor": "color",
+        "contentPanelFontWeight": "fontWeight",
+        "contentPanelLineHeight": "lineHeight"
       },
       "Feedback": {
         "backgroundColor": "color",
@@ -1399,7 +1413,12 @@
         "outlineWidth": "border",
         "paddingHorizontal": "size",
         "paddingVertical": "size",
-        "borderRadius": "radius"
+        "borderRadius": "radius",
+        "textLine": "textLine",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
       },
       "StoryCard": {
         "outerBorderColor": "color",
@@ -1511,6 +1530,8 @@
       "TermsAndConditions": {
         "contentPaddingBottom": "size",
         "contentPaddingLeft": "size",
+        "contentBorderColor": "color",
+        "contentMarginBottom": "size",
         "mdContentPaddingBottom": "size",
         "mdContentPaddingLeft": "size",
         "orderedPadding": "size",
@@ -1537,13 +1558,20 @@
         "expandTitleColor": "color",
         "expandTitleFontSize": "size",
         "expandTitleLineHeight": "lineHeight",
+        "expandTitleFontName": "fontName",
+        "expandTitleFontWeight": "fontWeight",
         "expandTitleMarginX": "size",
         "expandTitleMarginY": "size",
+        "expandTitlePaddingLeft": "size",
+        "expandTitleBorder": "border",
+        "expandTitleBorderColor": "color",
+        "expandTitleUnderline": "textLine",
         "expandBaseBorderWidth": "border",
         "expandContentPaddingBottom": "size",
         "expandContentPaddingLeft": "size",
         "expandContentPaddingRight": "size",
         "expandContentPaddingTop": "size",
+        "dividerColor": "color",
         "icon": "icon"
       },
       "TextArea": {
@@ -1704,6 +1732,7 @@
       },
       "Typography": {
         "fontName": "fontName",
+        "superScriptFontSize": "fontSize",
         "fontWeight": "fontWeight",
         "fontSize": "fontSize",
         "color": "color",
@@ -3153,6 +3182,45 @@
           "type": "state"
         }
       },
+      "VideoPickerThumbnail": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "SkipLink": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -3164,6 +3232,14 @@
           "platforms": [
             "rn"
           ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
         }
       }
     },
@@ -3219,8 +3295,11 @@
       },
       "fontSize": {
         "default": 16,
-        "nullable": false,
-        "type": "Number"
+        "nullable": true,
+        "type": "Number|String|null",
+        "values": {
+          "none": null
+        }
       },
       "lineHeight": {
         "default": 1,
@@ -3604,7 +3683,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -3621,7 +3712,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -3649,10 +3740,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -3690,6 +3781,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -4548,7 +4646,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -4565,7 +4675,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -4593,10 +4703,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -4634,6 +4744,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -9516,7 +9633,12 @@
                 "outlineWidth": "border",
                 "paddingHorizontal": "size",
                 "paddingVertical": "size",
-                "borderRadius": "radius"
+                "borderRadius": "radius",
+                "textLine": "textLine",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -10943,6 +11065,7 @@
               "name": "custom",
               "raw": {
                 "fontName": "fontName",
+                "superScriptFontSize": "fontSize",
                 "fontWeight": "fontWeight",
                 "fontSize": "fontSize",
                 "color": "color",

package/lib/Button/ButtonBase.js

@@ -232,19 +232,29 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   });
 };
 
-const selectItemIconTokens = _ref9 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref9;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
   let {
     id,
     href,
@@ -259,7 +269,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref10;
+  } = _ref11;
 
   const {
     onPress,
@@ -308,6 +318,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
@@ -315,7 +326,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
             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
           }
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {

package/lib/ExpandCollapse/Panel.js

@@ -13,6 +13,8 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
@@ -44,7 +46,50 @@ const selectContainerStyles = _ref => {
     paddingLeft: contentPaddingLeft,
     paddingRight: contentPaddingRight,
     paddingTop: contentPaddingTop,
-    paddingBottom: contentPaddingBottom
+    paddingBottom: contentPaddingBottom,
+    flex: 1
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    contentPanelFontSize,
+    contentPanelFontName,
+    contentPanelFontColor,
+    contentPanelFontWeight,
+    contentPanelLineHeight
+  } = _ref2;
+  return {
+    fontSize: contentPanelFontSize,
+    fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+    lineHeight: contentPanelFontSize * contentPanelLineHeight,
+    color: contentPanelFontColor
+  };
+};
+
+const selectContentPanelStyles = _ref3 => {
+  let {
+    contentPanelBackgroundColor,
+    contentPanelPaddingTop,
+    contentPanelPaddingBottom,
+    contentPanelPaddingLeft,
+    contentPanelPaddingRight,
+    contentPanelBorderWidth,
+    contentPanelBorderColor,
+    borderRadius,
+    marginBottom
+  } = _ref3;
+  return {
+    backgroundColor: contentPanelBackgroundColor,
+    paddingTop: contentPanelPaddingTop,
+    paddingBottom: contentPanelPaddingBottom,
+    paddingLeft: contentPanelPaddingLeft,
+    paddingRight: contentPanelPaddingRight,
+    borderWidth: contentPanelBorderWidth,
+    borderColor: contentPanelBorderColor,
+    borderStyle: 'solid',
+    borderRadius,
+    marginBottom
   };
 };
 /**
@@ -59,7 +104,7 @@ const selectContainerStyles = _ref => {
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     openIds = [],
     panelId,
@@ -71,8 +116,9 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     tokens,
     variant,
     controlRef,
+    content,
     ...rest
-  } = _ref2;
+  } = _ref4;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({ ...rest,
@@ -107,7 +153,13 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectContentPanelStyles(themeTokens),
+    children: typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: selectTextStyles(themeTokens),
+      children: children
+    }) : children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     style: themeTokens,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...selectedProps,
@@ -157,7 +209,7 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
    * 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.default.func.isRequired,
+  onToggle: _propTypes.default.func,
 
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
@@ -171,9 +223,9 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.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: _Control.default.propTypes.children.isRequired,
+  control: _Control.default.propTypes.children,
 
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
@@ -183,7 +235,12 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: _airbnbPropTypes.default.ref()
+  controlRef: _airbnbPropTypes.default.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.default.bool
 };
 var _default = ExpandCollapsePanel;
 exports.default = _default;

package/lib/Modal/Modal.js

@@ -13,6 +13,8 @@ var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+
 var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -166,8 +168,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.positioningContainer],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
+      contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
@@ -258,7 +260,11 @@ const staticStyles = _StyleSheet.default.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.default.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',

package/lib/SkipLink/SkipLink.js

@@ -56,10 +56,19 @@ const selectStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLine,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
   } = _ref2;
   return {
-    color
+    color,
+    textDecorationLine: textLine,
+    fontFamily: `${fontName}${fontWeight}normal`,
+    lineHeight: fontSize * lineHeight,
+    fontSize
   };
 };
 /**
@@ -134,9 +143,6 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   } = _utils.clickProps.toPressProps(rawRest);
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
-  const defaultTokens = getTokens();
-
-  const resolveLinkTokens = pressState => (0, _utils.resolvePressableTokens)(defaultTokens, pressState);
 
   const handlePress = event => {
     if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
@@ -147,19 +153,17 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     accessibilityRole: "link",
     onPress: handlePress,
     href: href,
-    style: _ref4 => {
-      let {
-        focused: focus
-      } = _ref4;
-      const themeTokens = getTokens({
-        focus
-      });
+    style: pressableState => {
+      const themeTokens = (0, _utils.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),
-    children: pressState => {
-      const themeTokens = resolveLinkTokens(pressState);
+    children: pressableState => {
+      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: [textStyles, staticStyles.baseline],

package/lib/TooltipButton/TooltipButton.js

@@ -65,7 +65,9 @@ const TooltipButton = _ref3 => {
     icon: IconComponent
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
+      margin: -themeTokens.outerBorderWidth
+    }],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),

package/lib/Typography/Typography.js

@@ -75,7 +75,10 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
+  const {
+    superScriptFontSize,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
   const {
@@ -98,8 +101,14 @@ const Typography = /*#__PURE__*/(0, _react.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.default.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/lib-module/Button/ButtonBase.js

@@ -208,19 +208,29 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   });
 };
 
-const selectItemIconTokens = _ref9 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref9;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
+const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -235,7 +245,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref10;
+  } = _ref11;
   const {
     onPress,
     ...rest
@@ -282,6 +292,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
       return /*#__PURE__*/_jsx(View, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
@@ -289,7 +300,8 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
             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
           }
         })],
         children: /*#__PURE__*/_jsx(IconText, {

package/lib-module/ExpandCollapse/Panel.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
 import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
@@ -22,7 +23,50 @@ const selectContainerStyles = _ref => {
     paddingLeft: contentPaddingLeft,
     paddingRight: contentPaddingRight,
     paddingTop: contentPaddingTop,
-    paddingBottom: contentPaddingBottom
+    paddingBottom: contentPaddingBottom,
+    flex: 1
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    contentPanelFontSize,
+    contentPanelFontName,
+    contentPanelFontColor,
+    contentPanelFontWeight,
+    contentPanelLineHeight
+  } = _ref2;
+  return {
+    fontSize: contentPanelFontSize,
+    fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+    lineHeight: contentPanelFontSize * contentPanelLineHeight,
+    color: contentPanelFontColor
+  };
+};
+
+const selectContentPanelStyles = _ref3 => {
+  let {
+    contentPanelBackgroundColor,
+    contentPanelPaddingTop,
+    contentPanelPaddingBottom,
+    contentPanelPaddingLeft,
+    contentPanelPaddingRight,
+    contentPanelBorderWidth,
+    contentPanelBorderColor,
+    borderRadius,
+    marginBottom
+  } = _ref3;
+  return {
+    backgroundColor: contentPanelBackgroundColor,
+    paddingTop: contentPanelPaddingTop,
+    paddingBottom: contentPanelPaddingBottom,
+    paddingLeft: contentPanelPaddingLeft,
+    paddingRight: contentPanelPaddingRight,
+    borderWidth: contentPanelBorderWidth,
+    borderColor: contentPanelBorderColor,
+    borderStyle: 'solid',
+    borderRadius,
+    marginBottom
   };
 };
 /**
@@ -37,7 +81,7 @@ const selectContainerStyles = _ref => {
  */
 
 
-const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     openIds = [],
     panelId,
@@ -49,8 +93,9 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     tokens,
     variant,
     controlRef,
+    content,
     ...rest
-  } = _ref2;
+  } = _ref4;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
   const selectedProps = selectProps({ ...rest,
@@ -85,7 +130,13 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
-  return /*#__PURE__*/_jsxs(View, {
+  return content ? /*#__PURE__*/_jsx(View, {
+    style: selectContentPanelStyles(themeTokens),
+    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: selectTextStyles(themeTokens),
+      children: children
+    }) : children
+  }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
     children: [/*#__PURE__*/_jsx(ExpandCollapseControl, { ...selectedProps,
@@ -135,7 +186,7 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
    * 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.
@@ -149,9 +200,9 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   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,6 +212,11 @@ ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
   /**
    * 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/lib-module/Modal/Modal.js

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
 import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
 import NativeModal from "react-native-web/dist/exports/Modal";
 import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
@@ -140,8 +141,8 @@ const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
   return /*#__PURE__*/_jsx(NativeModal, {
     transparent: true,
     ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.positioningContainer],
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
@@ -230,7 +231,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/lib-module/SkipLink/SkipLink.js

@@ -34,10 +34,19 @@ const selectStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLine,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
   } = _ref2;
   return {
-    color
+    color,
+    textDecorationLine: textLine,
+    fontFamily: `${fontName}${fontWeight}normal`,
+    lineHeight: fontSize * lineHeight,
+    fontSize
   };
 };
 /**
@@ -110,9 +119,6 @@ const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...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); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
@@ -123,19 +129,17 @@ const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
     accessibilityRole: "link",
     onPress: handlePress,
     href: href,
-    style: _ref4 => {
-      let {
-        focused: focus
-      } = _ref4;
-      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),
-    children: pressState => {
-      const themeTokens = resolveLinkTokens(pressState);
+    children: pressableState => {
+      const themeTokens = resolvePressableTokens(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
       return /*#__PURE__*/_jsx(Text, {
         style: [textStyles, staticStyles.baseline],

package/lib-module/TooltipButton/TooltipButton.js

@@ -49,7 +49,9 @@ const TooltipButton = _ref3 => {
     icon: IconComponent
   } = themeTokens;
   return /*#__PURE__*/_jsx(View, {
-    style: applyOuterBorder(themeTokens),
+    style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
+      margin: -themeTokens.outerBorderWidth
+    }],
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),

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

@@ -11,7 +11,7 @@
     "@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-theme-tokens": "^2.37.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.54.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/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/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/TooltipButton/TooltipButton.jsx

@@ -26,7 +26,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
           }
         })