@telus-uds/components-base 1.12.1 → 1.14.1

package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ThemeProvider = require("../../ThemeProvider");
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectPressProps, pressPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+const [selectTextProps, textPropTypes] = (0, _utils.selectSystemProps)([_utils.textProps]);
+
+const selectContainerStyles = _ref => {
+  let {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom = 0,
+    borderBottomColor,
+    borderBottomWidth = 0,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent
+  } = _ref;
+  return {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom: paddingBottom - borderBottomWidth,
+    borderBottomColor,
+    borderBottomWidth,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent,
+    ..._Platform.default.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+
+const CarouselTabsPanelItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    title,
+    selected,
+    inactive,
+    variant,
+    tokens,
+    accessibilityRole = 'tab',
+    ...rest
+  } = _ref3;
+  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
+
+  const resolveTokens = pressState => getTokens((0, _utils.resolvePressableState)(pressState, {
+    selected
+  }));
+
+  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
+
+  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
+
+  const {
+    onPress,
+    ...selectedPressProps
+  } = selectPressProps(rest);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = { ...pressPropTypes,
+  ...textPropTypes,
+  title: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('CarouselTabsPanelItem'),
+  variant: _utils.variantProp.propType
+};
+var _default = CarouselTabsPanelItem;
+exports.default = _default;

package/lib/Carousel/CarouselTabs/index.js

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

package/lib/Carousel/CarouselThumbnail.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+
+var _CarouselContext = require("./CarouselContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * `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 = _ref => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo,
+    themeTokens
+  } = (0, _CarouselContext.useCarousel)();
+  const thumbnailTitle = alt !== null && alt !== void 0 ? 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 === null || event === void 0 ? void 0 : 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onKeyDown: handleKeyDown,
+    onPress: handlePress,
+    style: [styles.pressable, index === activeIndex && styles.selected],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+};
+
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: _propTypes.default.string,
+  alt: _propTypes.default.string,
+  index: _propTypes.default.number,
+  src: _propTypes.default.string
+};
+var _default = CarouselThumbnail;
+exports.default = _default;

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _CarouselContext = require("./CarouselContext");
+
+var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
+
+var _StackView = require("../StackView");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    thumbnails = []
+  } = _ref;
+  const {
+    totalItems,
+    themeTokens
+  } = (0, _CarouselContext.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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: containerStyles,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: "row",
+      tokens: stackWrapTokens,
+      ref: ref,
+      children: thumbnails.map((_ref2, index) => {
+        let {
+          accessibilityLabel,
+          alt,
+          src
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
+          accessibilityLabel: accessibilityLabel,
+          alt: alt,
+          index: index,
+          src: src
+        }, src);
+      })
+    })
+  });
+});
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation';
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    alt: _propTypes.default.string,
+    src: _propTypes.default.string
+  })).isRequired
+};
+var _default = CarouselThumbnailNavigation;
+exports.default = _default;

package/lib/Carousel/dictionary.js

@@ -10,14 +10,16 @@ var _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}'
   }
 };
 exports.default = _default;

package/lib/Carousel/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  Carousel: true
+  Carousel: true,
+  CarouselTabs: true
 };
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CarouselTabs", {
+  enumerable: true,
+  get: function () {
+    return _CarouselTabs.default;
+  }
+});
 
 var _CarouselContext = require("./CarouselContext");
 
@@ -29,4 +36,6 @@ Object.keys(_CarouselContext).forEach(function (key) {
 
 var _Carousel = _interopRequireDefault(require("./Carousel"));
 
+var _CarouselTabs = _interopRequireDefault(require("./CarouselTabs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Checkbox/CheckboxGroup.js

@@ -90,6 +90,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedIds,
@@ -156,6 +157,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -205,6 +207,11 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/Icon/IconText.js

@@ -86,7 +86,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`

package/lib/Link/InlinePressable.js

@@ -27,8 +27,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * 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
@@ -37,12 +35,11 @@ const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     style,
-    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -51,11 +48,7 @@ InlinePressable.displayName = 'InlinePressable';
 
 const staticStyles = _StyleSheet.default.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 });
 

package/lib/Link/LinkBase.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
 
-const selectOuterBorderStyles = _ref => {
+const selectOuterBorderStyles = (_ref, hasIcon) => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -58,7 +58,8 @@ const selectOuterBorderStyles = _ref => {
       }),
       // 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
+
     } : {}
   );
 };
@@ -197,14 +198,12 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...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];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -246,7 +245,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * 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.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.

package/lib/List/ListItem.js

@@ -246,7 +246,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Will set display icon color

package/lib/Notification/Notification.js

@@ -79,6 +79,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     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
@@ -153,6 +157,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
@@ -172,30 +177,33 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -230,9 +238,16 @@ exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib/Radio/RadioGroup.js

@@ -92,6 +92,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -141,6 +142,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
+      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -160,6 +162,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -215,6 +218,11 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */