@telus-uds/components-base 1.85.1 → 1.87.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 23 May 2024 16:27:45 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Jun 2024 16:19:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.87.0
+
+Mon, 24 Jun 2024 16:19:28 GMT
+
+### Minor changes
+
+- `ActionCard`: add component (guillermo.peitzner@telus.com)
+- `StickyNavigationBar`: add render prop to `TabItem` component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.58.0
+
+### Patches
+
+- `Modal`: fix overflow scrolling (guillermo.peitzner@telus.com)
+- remove default focus outline on Radio and Checkbox components (evander.owusu@telus.com)
+- `Notification`: fix alignment of the `system` variant for `Koodo` and `Public Mobile` (35577399+JoshHC@users.noreply.github.com)
+- ExpandCollapse: issue that creates extra space at the bottom of the page fixed. (35577399+JoshHC@users.noreply.github.com)
+- List: misalignment issue fixed when the text was too long and the container has display: 'flex' (35577399+JoshHC@users.noreply.github.com)
+
+## 1.86.0
+
+Fri, 07 Jun 2024 22:42:09 GMT
+
+### Minor changes
+
+- `List`: Add `itemTextColor` token (kristina.kirpichnikova@telus.com)
+- Select: data-di-mask attribute added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.57.0
+
+### Patches
+
+- `Modal`: `cancelButtonText` wrapping fixed when rendered with longer text (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.85.1
 
-Thu, 23 May 2024 16:27:45 GMT
+Thu, 23 May 2024 16:30:28 GMT
 
 ### Patches
 

package/lib/ActionCard/ActionCard.js

@@ -0,0 +1,350 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
+  if (styles[key]) acc[key] = styles[key];
+  return acc;
+}, {});
+const selectInteractiveCardStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    ...(backgroundColor && {
+      backgroundColor
+    }),
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+};
+const selectIconStyles = _ref2 => {
+  let {
+    iconMarginBottom,
+    iconMarginLeft,
+    iconMarginRight,
+    iconMarginTop
+  } = _ref2;
+  return {
+    marginBottom: iconMarginBottom,
+    marginLeft: iconMarginLeft,
+    marginRight: iconMarginRight,
+    marginTop: iconMarginTop
+  };
+};
+const selectIconProps = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconColor
+  } = _ref3;
+  return {
+    icon,
+    variant: {
+      background: true,
+      padding: 'small'
+    },
+    tokens: {
+      backgroundColor: iconBackgroundColor,
+      color: iconColor
+    }
+  };
+};
+const selectTitleStyles = _ref4 => {
+  let {
+    titleMarginBottom,
+    titleMarginLeft,
+    titleMarginRight,
+    titleMarginTop
+  } = _ref4;
+  return {
+    marginBottom: titleMarginBottom,
+    marginLeft: titleMarginLeft,
+    marginRight: titleMarginRight,
+    marginTop: titleMarginTop
+  };
+};
+const selectTitleTextStyles = _ref5 => {
+  let {
+    titleFontColor,
+    titleFontName,
+    titleFontSize,
+    titleFontWeight,
+    titleLineHeight
+  } = _ref5;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontColor: titleFontColor,
+    fontName: titleFontName,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  });
+};
+const selectContentStyles = _ref6 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop
+  } = _ref6;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop
+  };
+};
+const selectContentTextStyles = _ref7 => {
+  let {
+    contentFontColor,
+    contentFontName,
+    contentFontSize,
+    contentFontWeight,
+    contentLineHeight
+  } = _ref7;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontColor: contentFontColor,
+    fontName: contentFontName,
+    fontSize: contentFontSize,
+    fontWeight: contentFontWeight,
+    lineHeight: contentLineHeight
+  });
+};
+const selectStatusIconProps = _ref8 => {
+  let {
+    statusIcon,
+    statusIconColor
+  } = _ref8;
+  return {
+    icon: statusIcon,
+    tokens: {
+      color: statusIconColor
+    },
+    variant: {
+      size: 'micro'
+    }
+  };
+};
+const selectActionIconStyles = _ref9 => {
+  let {
+    actionIconMarginBottom,
+    actionIconMarginLeft,
+    actionIconMarginRight,
+    actionIconMarginTop
+  } = _ref9;
+  return {
+    marginBottom: actionIconMarginBottom,
+    marginLeft: actionIconMarginLeft,
+    marginRight: actionIconMarginRight,
+    marginTop: actionIconMarginTop
+  };
+};
+const selectActionIconProps = _ref10 => {
+  let {
+    actionIcon,
+    actionIconColor
+  } = _ref10;
+  return {
+    icon: actionIcon,
+    tokens: {
+      color: actionIconColor
+    }
+  };
+};
+const ACTION_ICON_ANIMATION_DURATION = 100;
+
+/**
+ * ActionCard component represents a card with an action that can be triggered by the user.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ActionCard
+ *     icon={<Icon icon={Icons.EyeMasked} />}
+ *     title="Like"
+ *     href="/like"
+ *     accessibilityRole="link"
+ *     tokens={themeTokens}
+ *     variant={{validation: 'warning'}}
+ *     onPress={() => handleLike()}
+ *   >
+ *    Click here to like the post
+ *   </ActionCard>
+ * )
+ */
+const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+  let {
+    icon,
+    title,
+    children,
+    href,
+    direction = true,
+    accessibilityRole,
+    tokens,
+    variant,
+    ...rest
+  } = _ref11;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ActionCard', tokens, variant);
+  const actionIconAnimation = _react.default.useRef(new _Animated.default.Value(0)).current;
+  const {
+    onPress,
+    ...props
+  } = _utils.clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    ref: ref,
+    interactiveCard: {
+      body: pressableState => {
+        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
+        _Animated.default.timing(actionIconAnimation, {
+          toValue: animate ? themeTokens.actionIconTranslate : 0,
+          duration: ACTION_ICON_ANIMATION_DURATION,
+          useNativeDriver: false
+        }).start();
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: staticStyles.container,
+          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectIconStyles(themeTokens),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              ...selectIconProps({
+                icon,
+                ...themeTokens
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            style: staticStyles.content,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+              style: staticStyles.header,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                style: [selectTitleStyles(themeTokens), staticStyles.title],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+                  children: [(0, _utils.wrapStringsInText)(title, {
+                    style: selectTitleTextStyles(themeTokens)
+                  }), themeTokens.statusIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                    style: staticStyles.statusIcon,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                      ...selectStatusIconProps(themeTokens)
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                style: staticStyles.icons,
+                children: direction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                  style: [selectActionIconStyles(themeTokens), {
+                    transform: [{
+                      translateX: actionIconAnimation
+                    }]
+                  }],
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                    ...selectActionIconProps(themeTokens)
+                  })
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              style: [staticStyles.body, selectContentStyles(themeTokens)],
+              children: typeof children === 'string' ? (0, _utils.wrapStringsInText)(children, {
+                style: selectContentTextStyles(themeTokens)
+              }) : children
+            })]
+          })]
+        });
+      },
+      tokens: selectInteractiveCardStyles(themeTokens)
+    },
+    tokens: selectCardStyles(themeTokens),
+    ...selectedProps
+  });
+});
+ActionCard.displayName = 'ActionCard';
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ActionCard'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: _propTypes.default.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: _propTypes.default.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: _propTypes.default.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: _propTypes.default.string
+};
+const staticStyles = _StyleSheet.default.create({
+  body: {
+    flexDirection: 'column'
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  icons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  title: {
+    flexShrink: 1
+  },
+  statusIcon: {
+    marginLeft: 4
+  }
+});
+var _default = ActionCard;
+exports.default = _default;

package/lib/ActionCard/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ActionCard = _interopRequireDefault(require("./ActionCard"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _ActionCard.default;
+exports.default = _default;

package/lib/Card/Card.js

@@ -17,7 +17,7 @@ var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton
 var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
 const SelectionType = {
   Checkbox: 'checkbox',
   Radio: 'radiogroup',
@@ -272,7 +272,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
                 isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
                 isInactive: inactive,
                 onPress
-              })), interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body]
+              })), typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
             });
           }
         }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
@@ -314,7 +314,7 @@ Card.propTypes = {
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: _propTypes.default.shape({
-    body: _propTypes.default.node,
+    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _utils.getTokensPropType)('Card'),
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
     variant: _utils.variantProp.propType

package/lib/Card/PressableCardBase.js

@@ -112,7 +112,7 @@ PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
-    requireAll: true,
+    partial: true,
     allowFunction: true
   }),
   variant: _utils.variantProp.propType

package/lib/Checkbox/Checkbox.js

@@ -210,6 +210,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         onKeyDown: handleKeyDown,
         onPress: handleChange,
         ...selectedProps,
+        style: staticStyles.removeOutline,
         children: _ref6 => {
           let {
             focused: focus,
@@ -342,5 +343,8 @@ const staticStyles = _StyleSheet.default.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });

package/lib/Link/TextButton.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _utils = require("../utils");
@@ -25,15 +27,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     ...linkProps
   } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    tokens: getTokens,
-    ref: ref,
-    ...linkProps,
-    children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: styles.textButton,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+      onPress: onPress,
+      accessibilityRole: accessibilityRole,
+      tokens: getTokens,
+      ref: ref,
+      ...linkProps,
+      children: children
+    })
   });
 });
+const styles = _StyleSheet.default.create({
+  textButton: {
+    flex: 1
+  }
+});
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = {
   ..._LinkBase.default.propTypes,

package/lib/List/List.js

@@ -49,15 +49,22 @@ const List = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return child;
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    ref: ref,
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: styles.list,
     accessibilityRole: accessibilityRole,
+    ref: ref,
     ...selectProps(rest),
     children: items
   });
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: styles.container,
+    children: content
+  }) : content;
 });
 const styles = _StyleSheet.default.create({
+  container: {
+    display: 'block'
+  },
   list: {
     flex: 1,
     flexShrink: 1

package/lib/List/ListItemContent.js

@@ -26,10 +26,11 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemFontColor
+    itemFontColor,
+    itemTextColor
   } = _ref;
   return (0, _ThemeProvider.applyTextStyles)({
-    fontColor: itemFontColor,
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/lib/Modal/ModalContent.js

@@ -141,14 +141,12 @@ const ModalContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
+      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+        tokens: {
+          color: cancelButtonColor
+        },
+        onPress: onCancel,
+        children: cancelButtonText
       }) : null]
     })]
   });

package/lib/Modal/WebModal.js

@@ -75,7 +75,8 @@ const staticStyles = _StyleSheet.default.create({
     flexShrink: 1,
     flexBasis: 0,
     zIndex: 1000,
-    display: 'flex'
+    display: 'flex',
+    overflowY: 'auto'
   }
 });
 var _default = WebModal;

package/lib/Notification/Notification.js

@@ -66,13 +66,17 @@ const selectDismissButtonContainerStyles = _ref4 => {
   } = _ref4;
   return {
     paddingLeft: dismissButtonGap,
-    placeContent: 'center'
+    placeContent: 'start'
   };
 };
-const selectContentContainerStyle = maxWidth => ({
-  maxWidth: maxWidth || '100%'
+const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
+  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
+  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = selectContainerStyles({
@@ -86,7 +90,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
     styles: containerStyles
   } = _utils.StyleSheet.create({
     container: {
-      flexDirection: 'row',
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
       ...selectContainerMediaQueryStyles
     }
   });
@@ -100,19 +104,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
       justifyContent: 'space-between',
       ...(0, _utils.createMediaQueryStyles)({
         xs: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
         },
         md: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
         },
         lg: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
         },
         sm: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
         },
         xl: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
         }
       })
     }
@@ -175,19 +179,20 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
     container: {
-      flexDirection: 'row',
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
       ...selectContainerStyles(themeTokens)
     }
   },
   contentContainerStyles: {
     contentContainer: {
+      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(maxWidth)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
     }
   },
   staticContentContainerStyles: {
@@ -323,9 +328,9 @@ const Notification = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
   }
   if (isDismissed) {
     return null;

package/lib/Radio/Radio.js

@@ -172,6 +172,7 @@ const Radio = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     onKeyDown: handleKeyDown,
     onPress: handleChange,
     ...selectedProps,
+    style: staticStyles.removeOutline,
     children: _ref5 => {
       let {
         focused: focus,
@@ -284,5 +285,8 @@ const staticStyles = _StyleSheet.default.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });