@telus-uds/components-base 1.12.0 → 1.14.0

package/src/Carousel/CarouselThumbnail.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Image } from 'react-native'
+import { useCarousel } from './CarouselContext'
+
+/**
+ * `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 thumbnailTitle =
+    alt ??
+    getCopyWithPlaceholders('stepTrackerLabel')
+      .replace(/%\{itemLabel\}/g, itemLabel)
+      .replace(/%\{stepNumber\}/g, index)
+      .replace(/%\{stepCount\}/g, totalItems)
+  const handlePress = () => goTo(index)
+  const handleKeyDown = (event) => {
+    // Allow using the spacebar for navigation
+    if (event?.key === ' ') goTo(index)
+  }
+  const {
+    thumbnailBorderColor,
+    thumbnailBorderRadius,
+    thumbnailBorderWidth,
+    thumbnailMargin,
+    thumbnailPadding,
+    thumbnailSelectedBorderColor,
+    thumbnailSelectedBorderWidth,
+    thumbnailSize
+  } = themeTokens
+  const styles = {
+    pressable: {
+      borderColor: thumbnailBorderColor,
+      borderRadius: thumbnailBorderRadius,
+      borderWidth: thumbnailBorderWidth,
+      margin: thumbnailMargin,
+      padding: thumbnailPadding
+    },
+    image: {
+      height: thumbnailSize,
+      width: thumbnailSize
+    },
+    selected: {
+      borderColor: thumbnailSelectedBorderColor,
+      borderWidth: thumbnailSelectedBorderWidth,
+      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+    }
+  }
+
+  return (
+    <Pressable
+      key={src}
+      onKeyDown={handleKeyDown}
+      onPress={handlePress}
+      style={[styles.pressable, index === activeIndex && styles.selected]}
+    >
+      <Image
+        accessibilityIgnoresInvertColors
+        accessibilityLabel={accessibilityLabel ?? alt}
+        source={src}
+        style={styles.image}
+        title={thumbnailTitle}
+      />
+    </Pressable>
+  )
+}
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: PropTypes.string,
+  alt: PropTypes.string,
+  index: PropTypes.number,
+  src: PropTypes.string
+}
+
+export default CarouselThumbnail

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { useCarousel } from './CarouselContext'
+import CarouselThumbnail from './CarouselThumbnail'
+import { StackWrap } from '../StackView'
+
+const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
+  const { totalItems, themeTokens } = 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 stackWrapTokens = {
+    justifyContent: 'flex-start'
+  }
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+  }
+
+  return (
+    <View style={containerStyles}>
+      <StackWrap direction="row" tokens={stackWrapTokens} ref={ref}>
+        {thumbnails.map(({ accessibilityLabel, alt, src }, index) => (
+          <CarouselThumbnail
+            accessibilityLabel={accessibilityLabel}
+            alt={alt}
+            index={index}
+            key={src}
+            src={src}
+          />
+        ))}
+      </StackWrap>
+    </View>
+  )
+})
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation'
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: PropTypes.arrayOf(
+    PropTypes.shape({
+      accessibilityLabel: PropTypes.string,
+      alt: PropTypes.string,
+      src: PropTypes.string
+    })
+  ).isRequired
+}
+
+export default CarouselThumbnailNavigation

package/src/Carousel/dictionary.js

@@ -4,13 +4,15 @@ export default {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}'
   },
   fr: {
     // TODO: French translations here
     carouselLabel: '(fr) %{stepCount} items',
     iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: '(fr) Skip %{title}'
   }
 }

package/src/Carousel/index.js

@@ -1,2 +1,3 @@
 export * from './CarouselContext'
 export { default as Carousel } from './Carousel'
+export { default as CarouselTabs } from './CarouselTabs'

package/src/Checkbox/Checkbox.jsx

@@ -6,7 +6,12 @@ import CheckboxInput from './CheckboxInput'
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  applyShadowToken,
+  applyTextStyles,
+  useTheme,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -54,21 +59,18 @@ const selectInputStyles = (
     }
   })
 })
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
+const selectLabelStyles = (
+  { labelColor, labelFontName, labelFontSize, labelFontWeight, labelMarginLeft, labelLineHeight },
+  themeOptions
+) => ({
   marginLeft: labelMarginLeft,
   ...applyTextStyles({
     color: labelColor,
     fontName: labelFontName,
     fontWeight: labelFontWeight,
     fontSize: labelFontSize,
-    lineHeight: labelLineHeight
+    lineHeight: labelLineHeight,
+    themeOptions
   })
 })
 const selectIconTokens = ({ icon, iconColor, iconSize }) => ({
@@ -172,6 +174,7 @@ const Checkbox = forwardRef(
     }
     const uniqueId = useUniqueId('checkbox')
     const inputId = id ?? uniqueId
+    const { themeOptions } = useTheme()
 
     return (
       <View style={staticStyles.wrapper} ref={ref}>
@@ -187,7 +190,7 @@ const Checkbox = forwardRef(
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
-              const labelStyles = selectLabelStyles(stateTokens)
+              const labelStyles = selectLabelStyles(stateTokens, themeOptions)
               const alignWithLabel = label
                 ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
                 : null

package/src/Checkbox/CheckboxGroup.jsx

@@ -61,7 +61,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },
@@ -82,6 +82,8 @@ const CheckboxGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
+
       validation,
       feedback,
       initialCheckedIds,
@@ -145,6 +147,7 @@ const CheckboxGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -192,6 +195,10 @@ CheckboxGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/Feedback/Feedback.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,10 +17,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectStyles = (tokens) => selectTokens('Feedback', tokens)
 
-const selectTitleTextStyles = ({ titleFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: titleFontSize }))
-const selectContentTextStyles = ({ contentFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: contentFontSize }))
+const selectTitleTextStyles = ({ titleFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: titleFontSize, themeOptions }),
+    themeOptions
+  })
+const selectContentTextStyles = ({ contentFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: contentFontSize }),
+    themeOptions
+  })
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -56,8 +62,9 @@ const Feedback = forwardRef(
 
     const { icon: IconComponent } = themeTokens
 
-    const titleTextStyles = selectTitleTextStyles(themeTokens)
-    const contentTextStyles = selectContentTextStyles(themeTokens)
+    const { themeOptions } = useTheme()
+    const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions)
+    const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions)
 
     const content =
       typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children

package/src/Icon/IconText.jsx

@@ -39,6 +39,7 @@ const IconText = forwardRef(
 IconText.displayName = 'IconText'
 
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -51,7 +52,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text
@@ -63,6 +64,7 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
 }
 
 export default IconText

package/src/InputLabel/InputLabel.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,21 +17,20 @@ import Tooltip from '../Tooltip'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectLabelStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+const selectLabelStyles = (tokens, themeOptions) =>
+  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
 
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) =>
+const selectHintStyles = (
+  { hintColor, hintFontName, hintFontSize, hintFontWeight, hintLineHeight },
+  themeOptions
+) =>
   applyTextStyles({
     color: hintColor,
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   })
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
@@ -57,12 +56,14 @@ const InputLabel = forwardRef(
     const hasTooltip = tooltip !== undefined
     const isHintInline = hintPosition === 'inline'
 
+    const { themeOptions } = useTheme()
+
     return (
       <>
         <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
           <Text
             style={[
-              selectLabelStyles(themeTokens),
+              selectLabelStyles(themeTokens, themeOptions),
               selectGapStyles(themeTokens),
               staticStyles.label
             ]}
@@ -72,7 +73,7 @@ const InputLabel = forwardRef(
           {hint && isHintInline && (
             <Text
               style={[
-                selectHintStyles(themeTokens),
+                selectHintStyles(themeTokens, themeOptions),
                 hasTooltip && selectGapStyles(themeTokens),
                 staticStyles.label
               ]}

package/src/Link/InlinePressable.jsx

@@ -9,17 +9,15 @@ import { Pressable, StyleSheet } from 'react-native'
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles[inline ? 'inline' : 'inlineFlex'],
+      staticStyles.inline,
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -31,11 +29,7 @@ InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 })
 

package/src/Link/LinkBase.jsx

@@ -15,18 +15,15 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
-import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBorderOutline
-}) =>
+const selectOuterBorderStyles = (
+  { outerBorderColor, outerBorderWidth, outerBorderGap, borderRadius, outerBorderOutline },
+  hasIcon
+) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
@@ -41,7 +38,7 @@ const selectOuterBorderStyles = ({
         }),
         // Stops focus ring stretching horizontally if parent has display: block
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-        display: 'inline-flex'
+        display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
       }
     : {}
 
@@ -55,12 +52,16 @@ const selectTextStyles = ({ color }) => ({
   })
 })
 
-const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, blockFontName }) =>
+const selectBlockStyles = (
+  { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   })
 
 const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
@@ -138,21 +139,17 @@ const LinkBase = forwardRef(
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
+    const { themeOptions } = useTheme()
+
     return (
       <InlinePressable
         {...selectedProps}
-        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
-          const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          return [
-            outerBorderStyles,
-            blockLeftStyle,
-            decorationStyles,
-            hasIcon && staticStyles.rowContainer
-          ]
+          return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer]
         }}
       >
         {(linkState) => {
@@ -162,7 +159,7 @@ const LinkBase = forwardRef(
 
           // TODO: may need to apply some smarter text inheritance here if inline to avoid native
           // issues like double-application of line heights breaking align-items: baseline
-          const blockTextStyles = selectBlockStyles(themeTokens)
+          const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)
 
           const IconComponent = icon || themeTokens.icon
           const { iconSpace } = themeTokens
@@ -196,7 +193,7 @@ LinkBase.propTypes = {
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
    */

package/src/List/ListItem.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -41,12 +41,16 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectItemStyles = ({ itemFontWeight, itemFontSize, itemLineHeight, itemFontName }) =>
+const selectItemStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   })
 
 const selectItemBlockStyles = ({ interItemMargin }) => ({
@@ -80,8 +84,9 @@ const ListItem = forwardRef(
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
+    const { themeOptions } = useTheme()
 
-    const itemStyles = selectItemStyles(themeTokens)
+    const itemStyles = selectItemStyles(themeTokens, themeOptions)
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
@@ -175,7 +180,7 @@ ListItem.propTypes = {
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Will set display icon color
    */

package/src/Notification/Notification.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -10,7 +10,8 @@ import {
   selectTokens,
   variantProp,
   viewProps,
-  wrapStringsInText
+  wrapStringsInText,
+  useResponsiveProp
 } from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
@@ -20,7 +21,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
-const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+const selectTextStyles = (tokens, themeOptions) =>
+  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
 
 const selectIconProps = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -40,6 +42,10 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   paddingLeft: dismissButtonGap
 })
 
+const selectContentContainerStyle = (maxWidth) => ({
+  width: maxWidth || '100%'
+})
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -96,12 +102,14 @@ const Notification = forwardRef(
     const [isDismissed, setIsDismissed] = useState(false)
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
+    const { themeOptions } = useTheme()
+    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
     if (isDismissed) {
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens)
+    const textStyles = selectTextStyles(themeTokens, themeOptions)
 
     const content = wrapStringsInText(
       typeof children === 'function' ? children({ textStyles }) : children,
@@ -119,25 +127,27 @@ const Notification = forwardRef(
         style={[staticStyles.container, selectContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {IconComponent && (
-          <View style={selectIconContainerStyles(themeTokens)}>
-            <IconComponent {...selectIconProps(themeTokens)} />
+        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
+          <View style={staticStyles.contentContainer}>
+            {IconComponent && (
+              <View style={selectIconContainerStyles(themeTokens)}>
+                <IconComponent {...selectIconProps(themeTokens)} />
+              </View>
+            )}
+            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
           </View>
-        )}
-        <View style={staticStyles.contentContainer}>
-          {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+          {dismissible && DismissIconComponent && (
+            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+              <ButtonBase
+                onPress={onDismissPress}
+                accessibilityRole="button"
+                accessibilityLabel={getCopy('dismiss')}
+              >
+                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+              </ButtonBase>
+            </View>
+          )}
         </View>
-        {dismissible && DismissIconComponent && (
-          <View style={selectDismissButtonContainerStyles(themeTokens)}>
-            <ButtonBase
-              onPress={onDismissPress}
-              accessibilityRole="button"
-              accessibilityLabel={getCopy('dismiss')}
-            >
-              {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
-            </ButtonBase>
-          </View>
-        )}
       </View>
     )
   }
@@ -173,9 +183,16 @@ export default Notification
 
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 })