@telus-uds/components-base 1.47.0 → 1.49.0

package/lib-module/ExpandCollapse/Control.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -14,25 +15,34 @@ function selectContainerStyles(_ref) {
     backgroundColor,
     borderColor,
     borderWidth,
-    borderStyle,
+    borderStyle = 'solid',
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
     verticalAlign,
-    iconPosition
+    iconPosition,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius
   } = _ref;
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
@@ -51,6 +61,16 @@ function selectIconContainerStyles(_ref2) {
   };
 }
 
+function selectTextContainerStyles(_ref3) {
+  let {
+    textLine
+  } = _ref3;
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  };
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -58,7 +78,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
@@ -66,10 +86,9 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     tokens,
     accessibilityRole = 'button',
     variant,
-    isMiniExpandCollapse = false,
     ...rest
-  } = _ref3;
-  const getTokens = useThemeTokensCallback(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
+  } = _ref4;
+  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -78,12 +97,12 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     }
   });
 
-  const getControlState = _ref4 => {
+  const getControlState = _ref5 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref4;
+    } = _ref5;
     return {
       pressed,
       hover: hovered,
@@ -94,7 +113,11 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
 
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 
-  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
+  const getPressableStyle = pressableState => ({ ...selectContainerStyles(getControlTokens(pressableState)),
+    ...(Platform.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
@@ -111,7 +134,10 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
           style: selectIconContainerStyles(themeTokens),
           children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
           })
-        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectTextContainerStyles(themeTokens),
+          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
+        })]
       });
     }
   });

package/lib-module/ExpandCollapse/Panel.js

@@ -48,7 +48,6 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children,
     tokens,
     variant,
-    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -59,7 +58,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       expanded: isExpanded
     }
   });
-  const themeTokens = useThemeTokens(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -95,7 +94,6 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
-      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {

package/lib-module/List/ListItemBase.js

@@ -7,6 +7,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import ListItemContent from './ListItemContent';
 import ListItemMark from './ListItemMark';
 import Typography from '../Typography';
+import { useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -57,12 +58,29 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
+  const {
+    iconMarginTop,
+    itemIconSize
+  } = themeTokens;
+  let adjustedIconMarginTop = iconMarginTop;
+  const {
+    fontSize,
+    lineHeight: lineHeightRatio
+  } = useThemeTokens('Typography', {}, {
+    size: 'h4',
+    bold: true
+  });
+
+  if (title) {
+    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
+  }
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
    * and custom margin and padding, otherwise just adds a margin to the bottom
    */
 
+
   const getContainerStyle = () => {
     if (isLastItem) {
       return undefined;
@@ -90,11 +108,11 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       style: [{
         flex: 1,
         flexDirection: 'row'
-      }, !title && {
-        alignItems: 'center'
       }],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
-        tokens: tokens,
+        tokens: { ...tokens,
+          iconMarginTop: adjustedIconMarginTop
+        },
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize

package/lib-module/SideNav/Item.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
@@ -73,16 +74,22 @@ const Item = /*#__PURE__*/forwardRef((_ref2, ref) => {
 
   const getAppearanceState = _ref3 => {
     let {
-      hovered
+      hovered,
+      focused
     } = _ref3;
     return {
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
     };
   };
 
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
+  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+    ...(Platform.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,

package/lib-module/SideNav/ItemContent.js

@@ -26,9 +26,10 @@ const ItemContent = _ref => {
     children,
     tokens
   } = _ref;
+  const typographyTokens = selectTokens('Typography', tokens);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Typography, {
-      tokens: selectTokens('Typography', tokens),
+      tokens: typographyTokens,
       children: children
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]

package/lib-module/SideNav/ItemsGroup.js

@@ -42,7 +42,17 @@ const ItemsGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
 
-  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+  const getPanelTokens = appearance => {
+    const {
+      panelBorderColor,
+      ...itemsGroupTokens
+    } = getGroupTokens(getAppearance(appearance));
+    const groupTokens = { ...itemsGroupTokens,
+      borderWidth: 0,
+      marginBottom: 0
+    };
+    return selectTokens('ExpandCollapsePanel', groupTokens);
+  };
 
   const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
 

package/lib-module/Skeleton/Skeleton.js

@@ -75,11 +75,18 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }
   } : // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = useSpacingScale(spacingScaleValue);
-  const nativeAnimation = useSkeletonNativeAnimation();
+  const skeletonHeight = useSpacingScale(spacingScaleValue); // Animation color and animation duration
+
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = useSkeletonNativeAnimation({
+    animationDuration
+  });
 
   const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
 
     const styles = StyleSheet.create({

package/lib-module/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1;
-export const OPACITY_STOP = 0.4;
-export const ANIMATION_DURATION = 1500;
+export const OPACITY_STOP = 0.4;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,18 +1,15 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: OPACITY_STOP
-    },
-    '100%': {
-      opacity: DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
-};
+  };
+};
+
+export default skeletonWebAnimation;

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,18 +1,23 @@
 import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
+  /* eslint-disable react-hooks/exhaustive-deps */
+
   useEffect(() => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     }), Animated.timing(fadeAnimation, {
       toValue: DEFAULT_OPACITY,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     })]);
     Animated.loop(fade).start();

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.29.0",
+    "@telus-uds/system-theme-tokens": "^2.31.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.47.0"
+  "version": "1.49.0"
 }

package/src/Button/ButtonBase.jsx

@@ -30,7 +30,6 @@ const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
-  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -38,7 +37,11 @@ const selectOuterContainerStyles = ({
   borderRadius,
   outerBackgroundColor
 }) => ({
-  alignSelf,
+  ...Platform.select({
+    native: {
+      alignSelf: 'flex-start'
+    }
+  }),
   backgroundColor: outerBackgroundColor,
   opacity,
   ...applyOuterBorder({
@@ -162,6 +165,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none', // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)
     },

package/src/ExpandCollapse/Control.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Pressable, View } from 'react-native'
+import { Pressable, View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
@@ -11,25 +11,34 @@ function selectContainerStyles({
   backgroundColor,
   borderColor,
   borderWidth,
-  borderStyle,
+  borderStyle = 'solid',
   paddingLeft,
   paddingRight,
   paddingTop,
   paddingBottom,
   justifyContent,
   verticalAlign,
-  iconPosition
+  iconPosition,
+  borderTopRightRadius,
+  borderBottomRightRadius,
+  borderTopLeftRadius,
+  borderBottomLeftRadius
 }) {
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   }
 }
@@ -43,6 +52,13 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
+function selectTextContainerStyles({ textLine }) {
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  }
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -52,23 +68,10 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = forwardRef(
   (
-    {
-      onPress,
-      isExpanded,
-      children,
-      tokens,
-      accessibilityRole = 'button',
-      variant,
-      isMiniExpandCollapse = false,
-      ...rest
-    },
+    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
     ref
   ) => {
-    const getTokens = useThemeTokensCallback(
-      isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl',
-      tokens,
-      variant
-    )
+    const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
     const selectedProps = selectProps({
       accessibilityRole,
@@ -86,14 +89,15 @@ const ExpandCollapseControl = forwardRef(
       expanded: isExpanded
     })
     const getControlTokens = (pressableState) => getTokens(getControlState(pressableState))
-    const getPressableStyle = (pressableState) =>
-      selectContainerStyles(getControlTokens(pressableState))
+    const getPressableStyle = (pressableState) => ({
+      ...selectContainerStyles(getControlTokens(pressableState)),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
+    })
 
     return (
       <Pressable ref={ref} {...selectedProps} onPress={onPress} style={getPressableStyle}>
         {(pressableState) => {
           const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
-
           return (
             <>
               {IconComponent && (
@@ -101,9 +105,11 @@ const ExpandCollapseControl = forwardRef(
                   <IconComponent {...selectIconTokens(themeTokens)} />
                 </View>
               )}
-              {typeof children === 'function'
-                ? children(getControlState(pressableState))
-                : children}
+              <View style={selectTextContainerStyles(themeTokens)}>
+                {typeof children === 'function'
+                  ? children(getControlState(pressableState))
+                  : children}
+              </View>
             </>
           )
         }}

package/src/ExpandCollapse/Panel.jsx

@@ -51,7 +51,6 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
-      isMiniExpandCollapse = false,
       controlRef,
       ...rest
     },
@@ -68,14 +67,9 @@ const ExpandCollapsePanel = forwardRef(
       }
     })
 
-    const themeTokens = useThemeTokens(
-      isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel',
-      tokens,
-      variant,
-      {
-        expanded: isExpanded
-      }
-    )
+    const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+      expanded: isExpanded
+    })
 
     const handleControlPress = (event) => {
       onToggle(panelId, event)
@@ -106,7 +100,6 @@ const ExpandCollapsePanel = forwardRef(
           variant={variant}
           onPress={handleControlPress}
           ref={controlRef}
-          isMiniExpandCollapse={isMiniExpandCollapse}
         >
           {control}
         </ExpandCollapseControl>

package/src/Link/LinkBase.jsx

@@ -126,6 +126,7 @@ const LinkBase = forwardRef(
   ) => {
     const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+
     const selectedProps = selectProps({
       accessibilityRole,
       href,

package/src/List/ListItemBase.jsx

@@ -6,6 +6,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
 import Typography from '../Typography'
+import { useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -43,7 +44,16 @@ const ListItemBase = forwardRef(
 
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
-
+    const { iconMarginTop, itemIconSize } = themeTokens
+    let adjustedIconMarginTop = iconMarginTop
+    const { fontSize, lineHeight: lineHeightRatio } = useThemeTokens(
+      'Typography',
+      {},
+      { size: 'h4', bold: true }
+    )
+    if (title) {
+      adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2
+    }
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
      * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -76,11 +86,15 @@ const ListItemBase = forwardRef(
               {
                 flex: 1,
                 flexDirection: 'row'
-              },
-              !title && { alignItems: 'center' }
+              }
             ]}
           >
-            <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
+            <ListItemMark
+              tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
+              icon={icon}
+              iconColor={iconColor}
+              iconSize={iconSize}
+            />
             <View style={staticStyles.titleAndContentContainer}>
               {Boolean(title) && (
                 <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>

package/src/SideNav/Item.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Pressable } from 'react-native'
+import { Pressable, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import {
   a11yProps,
@@ -76,13 +76,16 @@ const Item = forwardRef(
     })
 
     const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant)
-    const getAppearanceState = ({ hovered }) => ({
+    const getAppearanceState = ({ hovered, focused }) => ({
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
+    })
+    const getPressableStyle = (pressableState) => ({
+      ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
     })
-    const getPressableStyle = (pressableState) =>
-      selectItemStyles(getTokens(getAppearanceState(pressableState)))
 
     return (
       <Pressable

package/src/SideNav/ItemContent.jsx

@@ -19,12 +19,16 @@ export function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = ({ children, tokens }) => (
-  <>
-    <Typography tokens={selectTokens('Typography', tokens)}>{children}</Typography>
-    <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
-  </>
-)
+const ItemContent = ({ children, tokens }) => {
+  const typographyTokens = selectTokens('Typography', tokens)
+
+  return (
+    <>
+      <Typography tokens={typographyTokens}>{children}</Typography>
+      <View style={[staticStyles.absolute, selectAccentStyles(tokens)]} />
+    </>
+  )
+}
 
 ItemContent.propTypes = {
   tokens: getTokensPropType('SideNavItem'),