@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Card/PressableCardBase.js

@@ -8,16 +8,17 @@ import { a11yProps, clickProps, focusHandlerProps, getTokenNames, getTokensSetPr
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = [...getTokenNames('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
+const tokenKeys = [...getTokenNames('Card'),
+// Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
 export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
+
 /**
  * A pressable themeless base component that handles pressable states and passes tokens
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-
 const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -41,15 +42,11 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive,
     viewport
   };
-
   const getCardState = pressableState => resolvePressableState(pressableState, additionalState);
-
   const getTokens = pressableState => validateThemeTokens(resolvePressableTokens(tokens, pressableState, additionalState), getTokensSetPropType(tokenKeys, {
     requireAll: true
   }), 'PressableCard');
-
   const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
-
   const getOuterBorderStyle = pressableState => {
     const {
       flex,
@@ -75,17 +72,14 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
       })
     };
   };
-
   const handleChange = linkProps.handleHref({
     href,
     onPress
   });
-
   const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
-
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -93,7 +87,8 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     onKeyDown: handleKeyDown,
     hrefAttrs: hrefAttrs,
     style: getOuterBorderStyle,
-    ...selectProps({ ...rest,
+    ...selectProps({
+      ...rest,
       accessibilityRole
     }),
     children: pressableState => /*#__PURE__*/_jsx(CardBase, {
@@ -103,7 +98,8 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = { ...selectedSystemPropTypes,
+PressableCardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, {
     requireAll: true,

package/lib-module/Carousel/Carousel.js

@@ -32,26 +32,22 @@ const staticStyles = StyleSheet.create({
     left: 0
   }
 });
-
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
   width
 });
-
 const selectSwipeAreaStyles = (count, width) => ({
   width: width * count,
   justifyContent: 'space-between',
   flexDirection: 'row'
 });
-
 const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
   };
   const dynamicPositionProperty = areStylesAppliedOnPreviousButton ? 'left' : 'right';
-
   if (isFirstSlide) {
     styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
   } else if (isLastSlide) {
@@ -59,7 +55,6 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   } else {
     styles.visibility = 'visible';
   }
-
   if (previousNextNavigationPosition === 'edge') {
     styles[dynamicPositionProperty] = -1 * (previousNextNavigationButtonWidth / 2);
   } else if (previousNextNavigationPosition === 'inside') {
@@ -67,11 +62,10 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   } else if (previousNextNavigationPosition === 'outside') {
     styles[dynamicPositionProperty] = -1 * (spaceBetweenSlideAndPreviousNextNavigation + previousNextNavigationButtonWidth);
   }
-
   return styles;
 };
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
 
@@ -126,7 +120,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-
 const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -185,13 +178,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
-  let childrenArray = unpackFragment(children); // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
-
+  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,
+  const systemProps = selectProps({
+    ...rest,
     accessibilityRole,
     accessibilityLabel,
     accessibilityValue: {
@@ -215,7 +208,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const animatedY = React.useRef(0);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-
   const onContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -226,13 +218,13 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         }
       }
     } = _ref2;
-    return setContainerLayout(prevState => ({ ...prevState,
+    return setContainerLayout(prevState => ({
+      ...prevState,
       x,
       y,
       width
     }));
   };
-
   const onPreviousNextNavigationButtonLayout = _ref3 => {
     let {
       nativeEvent: {
@@ -243,7 +235,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref3;
     return setPreviousNextNavigationButtonWidth(width);
   };
-
   const updateOffset = React.useCallback(() => {
     animatedX.current = containerLayout.width * activeIndex * -1;
     animatedY.current = 0;
@@ -261,10 +252,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-
       return handleAnimationEnd(toIndex, ...args);
     };
-
     if (reduceMotionEnabled) {
       Animated.timing(pan, {
         toValue,
@@ -272,7 +261,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else {
-      Animated.spring(pan, { ...springConfig,
+      Animated.spring(pan, {
+        ...springConfig,
         toValue,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
@@ -286,7 +276,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
-
     if (activeIndex <= 0 && delta < 0) {
       skipChanges = true;
       calcDelta = children.length + delta;
@@ -294,14 +283,11 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       skipChanges = true;
       calcDelta = -1 * activeIndex + delta - 1;
     }
-
     const index = activeIndex + calcDelta;
-
     if (skipChanges) {
       animate(toValue, index);
       return calcDelta;
     }
-
     setActiveIndex(index);
     toValue.x = containerLayout.width * -1 * calcDelta;
     animate(toValue, index);
@@ -310,7 +296,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
   const fixOffsetAndGo = React.useCallback(delta => {
     var _firstFocusRef$curren;
-
     updateOffset();
     handleAnimationStart(activeIndex);
     updateIndex(delta);
@@ -324,11 +309,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     if (childrenArray.length === 1) {
       return false;
     }
-
     if (Platform.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
-
     return true;
   }, [viewport, childrenArray.length]);
   const panResponder = React.useMemo(() => PanResponder.create({
@@ -338,7 +321,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       if (!isSwipeAllowed()) {
         return false;
       }
-
       handleAnimationStart(activeIndex);
       return Math.abs(gestureState.dx) > minDistanceToCapture;
     },
@@ -350,7 +332,6 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }),
     onPanResponderRelease: (_, gesture) => {
       const correction = gesture.moveX - gesture.x0;
-
       if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
         animate({
           x: 0,
@@ -395,33 +376,33 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const goTo = React.useCallback(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndex;
-
     if (delta) {
       fixOffsetAndGo(delta);
     }
-  }, [fixOffsetAndGo, activeIndex]); // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
+  }, [fixOffsetAndGo, activeIndex]);
+
+  // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
   // Normally we avoid setting variants of subcomponents, however this could be re-considered.
   // Related discussion - https://github.com/telus/universal-design-system/issues/1549
-
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
     raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
     inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
-    const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
+    const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length);
 
+    // First word might be a lowercase placeholder: capitalize the first letter
     return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
     items: tabs
   }) : panelNavigation;
   const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
-
   const containerRef = element => {
     // Apply both firstFocusRef to the container
-    firstFocusRef.current = element; // Also apply forwarded ref if there is one (which could be a function ref)
-
+    firstFocusRef.current = element;
+    // Also apply forwarded ref if there is one (which could be a function ref)
     if (ref) {
       if (typeof ref === 'object') {
         // eslint-disable-next-line no-param-reassign
@@ -430,10 +411,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ref(element);
       }
     }
-  }; // If container isn't used for focus, give it a label of title if none is passed in,
+  };
+  // If container isn't used for focus, give it a label of title if none is passed in,
   // otherwise read the current position on focus
-
-
   const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
   const containerProps = {
     accessibilityLabel: containerAccessibilityLabel,
@@ -473,7 +453,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText // Read the current slide position to screen readers on slide.
+      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText
+      // Read the current slide position to screen readers on slide.
       // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
       , {
         accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
@@ -518,20 +499,18 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
-Carousel.propTypes = { ...selectedSystemPropTypes,
+Carousel.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Carousel'),
   variant: variantProp.propType,
-
   /**
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: variantProp.propType,
-
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
   /**
    * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
    * This is used when generating item labels. For example, if a carousel contains offers,
@@ -539,24 +518,20 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
    */
   itemLabel: PropTypes.string,
-
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
    * `edge` renders the previous and next buttons at the edge of the slide
    */
   previousNextNavigationPosition: PropTypes.oneOf(['inside', 'outside', 'edge']),
-
   /**
    * Defines the size of the `IconButton` which is being used to render next and previous buttons
    */
   previousNextIconSize: PropTypes.oneOf(['default', 'small', 'large']),
-
   /**
    * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
    */
   springConfig: PropTypes.object,
-
   /**
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
@@ -565,18 +540,15 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
     alt: PropTypes.string,
     src: PropTypes.string
   })),
-
   /**
    * Minimal part of slide width must be swiped for changing index.
    * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
    */
   minDistanceForAction: PropTypes.number,
-
   /**
    * Initiate animation after swipe this distance.
    */
   minDistanceToCapture: PropTypes.number,
-
   /**
    * Called when active index changed
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
@@ -594,20 +566,17 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
    */
   onIndexChanged: PropTypes.func,
-
   /**
    * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
    * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
    */
   skipLinkHref: PropTypes.string,
-
   /**
    * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
    *
    * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
    */
   tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
-
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *
@@ -616,7 +585,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
    */
   refocus: PropTypes.bool,
-
   /**
    * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
    * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
@@ -632,7 +600,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * ```
    */
   panelNavigation: PropTypes.element,
-
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts
@@ -650,7 +617,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
    */
   onAnimationStart: PropTypes.func,
-
   /**
    * When slide animation end with parameter of current index (after animation ends)
    * This function is also provided with a parameter indicating the updated slide index after animation ends
@@ -668,7 +634,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
    */
   onAnimationEnd: PropTypes.func,
-
   /**
    * Use this to override the default text for panel navigation
    */
@@ -680,17 +645,14 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
       stepTrackerLabel: PropTypes.string.isRequired
     })
   }),
-
   /**
    * Provide custom accessibilityRole for Carousel container
    */
   accessibilityRole: PropTypes.string,
-
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
   accessibilityLabel: PropTypes.string,
-
   /**
    * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
    * assistive technology tools know to intepret the carousel as a list.

package/lib-module/Carousel/CarouselContext.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { getTokensPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselContext = /*#__PURE__*/React.createContext();
-
 const CarouselProvider = _ref => {
   let {
     activeIndex,
@@ -31,17 +30,13 @@ const CarouselProvider = _ref => {
     children: children
   });
 };
-
 function useCarousel() {
   const context = React.useContext(CarouselContext);
-
   if (context === undefined) {
     throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
-
   return context;
 }
-
 CarouselProvider.propTypes = {
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
   activeIndex: PropTypes.number.isRequired,

package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -4,13 +4,13 @@ import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { PropTypes } from 'prop-types';
 import { useCarousel } from '../CarouselContext';
+
 /**
  * Focus target so that when a new slide is shown, the user can tab into
  * its content using the keyboard.
  *
  * @TODO rework this after integrating with SkipLink when available.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -18,17 +18,19 @@ const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   const {
     getCopyWithPlaceholders
-  } = useCarousel(); // TODO: integrate skip link description if behaving as skip link.
-  // Consider moving this content to aria-live area while only the skip link is focused.
+  } = useCarousel();
 
+  // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
   const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
   const accessibilityRole = Platform.select({
     web: 'link',
     // The focused item will ultimately be a skip link.
     default: 'button' // 'link' role usually denotes opening browser on Native.
-
   });
-  return /*#__PURE__*/_jsx(Pressable // TODO: integrate skip link functionality, jump focus to after Carousel
+
+  return /*#__PURE__*/_jsx(Pressable
+  // TODO: integrate skip link functionality, jump focus to after Carousel
   , {
     onPress: undefined,
     ref: ref,

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -6,11 +6,11 @@ import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, view
 import { useCarousel } from '../CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * `Carousel.Item` 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 CarouselItem = _ref => {
   let {
     children,
@@ -23,19 +23,18 @@ const CarouselItem = _ref => {
     width,
     activeIndex
   } = useCarousel();
-  const selectedProps = selectProps({ ...rest,
+  const selectedProps = selectProps({
+    ...rest,
     ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   });
   const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
   const style = {
     width
   };
-
   if (hidden && Platform.OS === 'web') {
     // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
     style.visibility = 'hidden';
   }
-
   return /*#__PURE__*/_jsx(View, {
     style: style,
     ...selectedProps,
@@ -43,26 +42,22 @@ const CarouselItem = _ref => {
     children: children
   });
 };
-
-CarouselItem.propTypes = { ...selectedSystemPropTypes,
+CarouselItem.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
-
   /**
    * Index of the current slide
    * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
    */
   elementIndex: PropTypes.number,
-
   /**
    * Provide custom accessibilityLabelledBy for Carousel slide
    */
   accessibilityLabelledBy: PropTypes.string,
-
   /**
    * Content of the slide
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
   /**
    * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
    * the Carousel as a list of items.
@@ -71,7 +66,6 @@ CarouselItem.propTypes = { ...selectedSystemPropTypes,
    * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
    */
   tag: PropTypes.oneOf(layoutTags),
-
   /**
    * Function to set carousel content background color when slide is being display
    */

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -4,7 +4,6 @@ import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
 import { variantProp } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const CarouselStepTracker = _ref => {
   let {
     variant
@@ -47,7 +46,6 @@ const CarouselStepTracker = _ref => {
     })
   });
 };
-
 CarouselStepTracker.propTypes = {
   variant: variantProp.propType
 };

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,13 +1,12 @@
 var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
-
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
 import Carousel from '../Carousel';
+
 /**
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -44,8 +43,8 @@ CarouselTabs.propTypes = {
     content: PropTypes.node.isRequired
   })),
   ...Carousel.propTypes
-}; // CarouselTabs doesn't require `children` prop, it uses `items` instead.
+};
+// CarouselTabs doesn't require `children` prop, it uses `items` instead.
 // eslint-disable-next-line react/forbid-foreign-prop-types
-
 if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
 export default CarouselTabs;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -6,11 +6,9 @@ import { useCarousel } from '../CarouselContext';
 import CarouselTabsPanelItem from './CarouselTabsPanelItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-
 const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     items
@@ -22,15 +20,17 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
   const nextFocusRef = useRef();
   const firstTabRef = useRef();
   const [isInverse, setIsInverse] = useState(false);
-  const lastTabSelected = activeIndex === items.length - 1; // Get current select tab style
+  const lastTabSelected = activeIndex === items.length - 1;
 
+  // Get current select tab style
   useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
-  }, [items, activeIndex]); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  }, [items, activeIndex]);
+
+  // TODO: figure out a better cross-brand way to specify subcomponent variants.
   // For now, this picks an Allium variant, and does nothing in brands that lack it.
   // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-
   const dividerVariant = {
     decorative: true,
     inverse: isInverse
@@ -52,8 +52,9 @@ const CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
           ...panelItemProps
         } = _ref2;
         const selected = index === activeIndex;
-        const isNext = index === activeIndex + 1; // Selected item should be always unfocusable and unpressable
+        const isNext = index === activeIndex + 1;
 
+        // Selected item should be always unfocusable and unpressable
         const handlePress = selected ? undefined : event => {
           if (typeof onPress === 'function') onPress(event, index);
           goTo(index);