@telus-uds/components-base 1.52.0 → 1.54.0

package/lib/ExpandCollapse/Panel.js

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

package/lib/Modal/Modal.js

@@ -13,6 +13,8 @@ var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+
 var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -166,8 +168,8 @@ const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
     transparent: true,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.positioningContainer],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ScrollView.default, {
+      contentContainerStyle: [staticStyles.positioningContainer],
       ref: modalRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
@@ -258,7 +260,11 @@ const staticStyles = _StyleSheet.default.create({
   modal: {
     maxHeight: '100%',
     // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-    overflow: 'auto'
+    ..._Platform.default.select({
+      web: {
+        overflow: 'auto'
+      }
+    })
   },
   closeButtonContainer: {
     position: 'absolute',

package/lib/SkipLink/SkipLink.js

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

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -38,36 +38,54 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
 // being handled separately in this case
 
-const selectButtonTokens = _ref => {
+const selectButtonTokens = (_ref, _ref2) => {
   let {
     icon: _,
     ...tokens
   } = _ref;
+  let {
+    trackHeight,
+    outerBorderGapButton
+  } = _ref2;
   return (0, _utils.selectTokens)('Button', { ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    outerBorderGap: outerBorderGapButton,
+    height: trackHeight,
     width: null
   });
 }; // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = _ref2 => {
+const selectIconTokens = _ref3 => {
   let {
     iconSize,
     iconColor
-  } = _ref2;
+  } = _ref3;
   return {
     size: iconSize,
     color: iconColor
   };
 };
 
-const selectTrackStyles = _ref3 => {
+const selectTrackSwitchStyles = _ref4 => {
+  let {
+    switchSize,
+    width,
+    trackHeight
+  } = _ref4;
+  return {
+    width,
+    height: Math.max(switchSize, trackHeight)
+  };
+};
+
+const selectTrackStyles = _ref5 => {
   let {
     trackBorderWidth,
     trackBorderColor,
     trackBorderRadius,
     width
-  } = _ref3;
+  } = _ref5;
   return {
     borderWidth: trackBorderWidth,
     borderColor: trackBorderColor,
@@ -76,7 +94,7 @@ const selectTrackStyles = _ref3 => {
   };
 };
 
-const selectSwitchStyles = _ref4 => {
+const selectSwitchStyles = _ref6 => {
   let {
     switchSize,
     switchColor,
@@ -84,8 +102,9 @@ const selectSwitchStyles = _ref4 => {
     switchBorderColor,
     switchBorderRadius,
     switchShadow
-  } = _ref4;
+  } = _ref6;
   return {
+    position: 'absolute',
     width: switchSize,
     height: switchSize,
     backgroundColor: switchColor,
@@ -102,23 +121,23 @@ const selectSwitchStyles = _ref4 => {
   };
 };
 
-const selectLabelStyles = _ref5 => {
+const selectLabelStyles = _ref7 => {
   let {
     labelMarginLeft
-  } = _ref5;
+  } = _ref7;
   return {
     marginLeft: labelMarginLeft
   };
 };
 
-const selectLabelTokens = _ref6 => {
+const selectLabelTokens = _ref8 => {
   let {
     labelColor,
     labelFontName,
     labelFontSize,
     labelFontWeight,
     labelLineHeight
-  } = _ref6;
+  } = _ref8;
   return {
     color: labelColor,
     fontName: labelFontName,
@@ -128,7 +147,7 @@ const selectLabelTokens = _ref6 => {
   };
 };
 
-const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
   let {
     copy = 'en',
     value,
@@ -143,7 +162,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     accessibilityRole = 'switch',
     accessibilityLabel = label,
     ...rest
-  } = _ref7;
+  } = _ref9;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -157,13 +176,16 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
 
   const handlePress = event => setValue(!currentValue, event);
 
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState), getTokens(themeTokens));
 
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
   const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-    space: 2,
+    space: themeTokens.space,
     direction: "row",
+    tokens: {
+      alignItems: 'center'
+    },
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
@@ -191,24 +213,36 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
         const IconComponent = stateTokens.icon;
         const switchStyles = selectSwitchStyles(stateTokens);
         const trackStyles = selectTrackStyles(stateTokens);
-        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+        const iconTokens = selectIconTokens(stateTokens);
+        const trackSwitchStyles = selectTrackSwitchStyles(stateTokens);
+        const {
+          switchSize,
+          trackHeight,
+          width,
+          trackBorderWidth
+        } = stateTokens; // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
         // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+        // Two different translates depending on the switchSize and trackSize relationship.
 
-        const slideStart = 0;
-        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
+        const isSwitchTallerThanTrack = switchSize >= trackHeight;
+        const slideStart = isSwitchTallerThanTrack ? 0 : trackBorderWidth;
+        const slideEnd = isSwitchTallerThanTrack ? width - switchSize : width - switchSize - trackBorderWidth;
         const switchOffset = buttonState.selected ? slideEnd : slideStart;
         const switchPositionStyle = {
           transform: [{
             translateX: switchOffset
           }]
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.track, trackStyles],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          nativeID: "trackSwitch",
+          style: [trackSwitchStyles, staticStyles.trackSwitch],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.track, trackStyles]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.switch, switchStyles, switchPositionStyle],
             children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
             })
-          })
+          })]
         });
       }
     })]
@@ -275,6 +309,10 @@ const staticStyles = _StyleSheet.default.create({
   },
   containText: {
     flexShrink: 1
+  },
+  trackSwitch: {
+    flexDirection: 'row',
+    alignItems: 'center'
   }
 });
 

package/lib/TooltipButton/TooltipButton.js

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

package/lib/Typography/Typography.js

@@ -75,7 +75,10 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
+  const {
+    superScriptFontSize,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
   const {
@@ -98,8 +101,14 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
       var _child$props;
 
+      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+      const supFontSize = childStyles.fontSize ?? superScriptFontSize;
+
       const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
+        style: { ...childStyles,
+          ...(supFontSize ? {
+            fontSize: supFontSize
+          } : {}),
           lineHeight: 0
         }
       });

package/lib-module/Button/ButtonBase.js

@@ -208,19 +208,29 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   });
 };
 
-const selectItemIconTokens = _ref9 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref9;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
+const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -235,7 +245,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref10;
+  } = _ref11;
   const {
     onPress,
     ...rest
@@ -282,6 +292,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
       return /*#__PURE__*/_jsx(View, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
@@ -289,7 +300,8 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
             maxWidth: '100%',
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
-            transition: 'background-color 200ms, border-color 200ms'
+            transition: 'background-color 200ms, border-color 200ms',
+            ...rowStyles
           }
         })],
         children: /*#__PURE__*/_jsx(IconText, {

package/lib-module/Card/CardBase.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
 import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType } from '../utils';
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
@@ -19,7 +20,8 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    shadow
+    shadow,
+    gradient
   } = _ref;
   return {
     flex,
@@ -32,7 +34,13 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    ...applyShadowToken(shadow)
+    ...applyShadowToken(shadow),
+    ...(gradient && Platform.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundOrigin: `border-box`,
+      boxShadow: `inset 0 1000px white`,
+      border: `${borderWidth}px solid transparent`
+    } : {})
   };
 };
 /**

package/lib-module/Carousel/Carousel.js

@@ -185,7 +185,12 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
-  const childrenArray = unpackFragment(children);
+  let childrenArray = unpackFragment(children); // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+
+  if (!Array.isArray(childrenArray)) {
+    childrenArray = [childrenArray];
+  }
+
   const systemProps = selectProps({ ...rest,
     accessibilityRole,
     accessibilityLabel,
@@ -316,12 +321,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fixOffsetAndGo(toPrev ? -1 : 1);
   }, [fixOffsetAndGo]);
   const isSwipeAllowed = React.useCallback(() => {
+    if (childrenArray.length === 1) {
+      return false;
+    }
+
     if (Platform.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
 
     return true;
-  }, [viewport]);
+  }, [viewport, childrenArray.length]);
   const panResponder = React.useMemo(() => PanResponder.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
@@ -449,7 +458,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: ref,
       ...systemProps,
       ...containerProps,
-      children: [showPreviousNextNavigation && /*#__PURE__*/_jsx(View, {
+      children: [showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -459,7 +468,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
-      }), Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
+      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
@@ -494,7 +503,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             }, index.toFixed(2));
           })
         })
-      }), showPreviousNextNavigation && /*#__PURE__*/_jsx(View, {
+      }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false),
         testID: "next-button-container",
         children: /*#__PURE__*/_jsx(IconButton, {
@@ -504,7 +513,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
-      })]
+      }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]
   });
 });