@telus-uds/components-base 1.84.0 → 1.85.0

package/lib/Carousel/Carousel.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _PanResponder = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PanResponder"));
@@ -28,8 +28,6 @@ var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/Caro
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 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 TRANSITION_MODES = {
   MANUAL: 'manual',
   AUTOMATIC: 'automatic',
@@ -165,7 +163,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -224,45 +222,45 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
-  const activeIndexRef = (0, _react.useRef)(activeIndex);
+  const [activeIndex, setActiveIndex] = _react.default.useState(0);
+  const activeIndexRef = _react.default.useRef(activeIndex);
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
-  const reduceMotionRef = (0, _react.useRef)(reduceMotionEnabled);
+  const reduceMotionRef = _react.default.useRef(reduceMotionEnabled);
   const [containerLayout, setContainerLayout] = _react.default.useState({
     x: 0,
     y: 0,
     width: 0
   });
-  const containerLayoutRef = (0, _react.useRef)(containerLayout);
-  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = (0, _react.useState)(0);
-  const firstFocusRef = (0, _react.useRef)(null);
-  const pan = (0, _react.useRef)(new _Animated.default.ValueXY()).current;
-  const animatedX = (0, _react.useRef)(0);
-  const animatedY = (0, _react.useRef)(0);
-  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const containerLayoutRef = _react.default.useRef(containerLayout);
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = _react.default.useState(0);
+  const firstFocusRef = _react.default.useRef(null);
+  const pan = _react.default.useRef(new _Animated.default.ValueXY()).current;
+  const animatedX = _react.default.useRef(0);
+  const animatedY = _react.default.useRef(0);
+  const [isAnimating, setIsAnimating] = _react.default.useState(false);
   /**
    * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
    *
    * `isAutoPlayEnabled` is a state to determine if the autoplay feature is enabled or disabled
    * `isCarouselPlaying` is a state to determine if the carousel is currently playing or paused
    */
-  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = (0, _react.useState)(autoPlayFeatureEnabled);
-  const [isCarouselPlaying, setisCarouselPlaying] = (0, _react.useState)(autoPlayFeatureEnabled);
-  const isSwiping = (0, _react.useRef)(false);
-  const autoPlayRef = (0, _react.useRef)(null);
+  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = _react.default.useState(autoPlayFeatureEnabled);
+  const [isCarouselPlaying, setisCarouselPlaying] = _react.default.useState(autoPlayFeatureEnabled);
+  const isSwiping = _react.default.useRef(false);
+  const autoPlayRef = _react.default.useRef(null);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= childrenArray.length;
-  const handleAnimationStart = (0, _react.useCallback)(function () {
+  const handleAnimationStart = _react.default.useCallback(function () {
     if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
     setIsAnimating(true);
   }, [onAnimationStart]);
-  const handleAnimationEnd = (0, _react.useCallback)(function () {
+  const handleAnimationEnd = _react.default.useCallback(function () {
     if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
     setIsAnimating(false);
   }, [onAnimationEnd]);
-  const updateOffset = (0, _react.useCallback)(() => {
+  const updateOffset = _react.default.useCallback(() => {
     animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
     animatedY.current = 0;
     pan.setOffset({
@@ -274,7 +272,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       y: 0
     });
   }, [pan, animatedX]);
-  const animate = (0, _react.useCallback)((toValue, toIndex) => {
+  const animate = _react.default.useCallback((toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -302,12 +300,21 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       }).start(handleAnimationEndToIndex);
     }
   }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled]);
-  const stopAutoplay = (0, _react.useCallback)(() => {
+  const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
     }
   }, []);
-  const updateIndex = (0, _react.useCallback)(function () {
+  const triggerRefocus = _react.default.useCallback(() => {
+    if (refocus && _Platform.default.OS === 'web') {
+      var _firstFocusRef$curren;
+      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus({
+        preventScroll: true,
+        focusVisible: false
+      });
+    }
+  }, [refocus, firstFocusRef]);
+  const updateIndex = _react.default.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     let transitionMode = arguments.length > 1 ? arguments[1] : undefined;
     const toValue = {
@@ -338,51 +345,48 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         setisCarouselPlaying(false);
       } else if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
-          var _firstFocusRef$curren;
           updateOffset();
           handleAnimationStart(activeIndexRef.current);
           updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-          if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
+          triggerRefocus();
         }, Math.abs(slideDuration) * 1000);
       }
     }
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
-  }, [handleAnimationStart, refocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
-  const startAutoplay = (0, _react.useCallback)(() => {
+  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
+  const startAutoplay = _react.default.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
       autoPlayRef.current = setTimeout(() => {
-        var _firstFocusRef$curren2;
         updateOffset();
         handleAnimationStart(activeIndexRef.current);
         updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-        if (refocus && _Platform.default.OS === 'web') (_firstFocusRef$curren2 = firstFocusRef.current) === null || _firstFocusRef$curren2 === void 0 ? void 0 : _firstFocusRef$curren2.focus();
+        triggerRefocus();
       }, Math.abs(slideDuration) * 1000);
     }
-  }, [handleAnimationStart, refocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
-  const fixOffsetAndGo = (0, _react.useCallback)((delta, transitionMode) => {
-    var _firstFocusRef$curren3;
+  }, [handleAnimationStart, triggerRefocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
+  const fixOffsetAndGo = _react.default.useCallback((delta, transitionMode) => {
     updateOffset();
     handleAnimationStart(activeIndexRef.current);
     updateIndex(delta, transitionMode);
-    if (refocus && _Platform.default.OS === 'web') (_firstFocusRef$curren3 = firstFocusRef.current) === null || _firstFocusRef$curren3 === void 0 ? void 0 : _firstFocusRef$curren3.focus();
-  }, [updateIndex, updateOffset, handleAnimationStart, refocus]);
-  const goToNeighboring = (0, _react.useCallback)(function () {
+    triggerRefocus();
+  }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
+  const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     reduceMotionRef.current = reduceMotionEnabled;
   }, [reduceMotionEnabled]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     containerLayoutRef.current = containerLayout;
   }, [containerLayout]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
         value
@@ -404,7 +408,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       pan.y.removeAllListeners();
     };
   }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     const subscription = _Dimensions.default.addEventListener('change', () => {
       updateOffset();
     });
@@ -416,10 +420,10 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       }
     };
   }, [updateOffset]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1);
   }, [autoPlay, slideDuration, transitionDuration, childrenArray.length]);
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     return () => {
       stopAutoplay();
     };
@@ -451,7 +455,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     } = _ref7;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const isSwipeAllowed = (0, _react.useCallback)(() => {
+  const isSwipeAllowed = _react.default.useCallback(() => {
     if (childrenArray.length === 1) {
       return false;
     }
@@ -460,7 +464,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     }
     return true;
   }, [viewport, childrenArray.length]);
-  const panResponder = (0, _react.useMemo)(() => _PanResponder.default.create({
+  const panResponder = _react.default.useMemo(() => _PanResponder.default.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
@@ -500,13 +504,13 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       isSwiping.current = false;
     }
   }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  const goToNext = (0, _react.useCallback)(() => {
+  const goToNext = _react.default.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
-  const goToPrev = (0, _react.useCallback)(() => {
+  const goToPrev = _react.default.useCallback(() => {
     goToNeighboring(true);
   }, [goToNeighboring]);
-  const goTo = (0, _react.useCallback)(function () {
+  const goTo = _react.default.useCallback(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndexRef.current;
     if (delta) {
@@ -522,7 +526,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
     inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
-  const getCopyWithPlaceholders = (0, _react.useCallback)(copyKey => {
+  const getCopyWithPlaceholders = _react.default.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
@@ -567,7 +571,7 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       focusable: true
     })
   };
-  const onAnimationControlButtonPress = (0, _react.useCallback)(() => {
+  const onAnimationControlButtonPress = _react.default.useCallback(() => {
     if (isCarouselPlaying) {
       stopAutoplay();
     } else {
@@ -586,7 +590,13 @@ const Carousel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     refocus: refocus,
     width: containerLayout.width,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.root,
+      style: [staticStyles.root, {
+        ..._Platform.default.select({
+          web: {
+            outline: 'none'
+          }
+        })
+      }],
       onLayout: onContainerLayout,
       ref: ref,
       ...systemProps,
@@ -720,7 +730,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
    * Use it as follows:
    * ```js
-   *    const onIndexChangedCallback = useCallback((changedIndex, currentActiveIndex) => {
+   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -729,7 +739,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onIndexChanged: _propTypes.default.func,
   /**
@@ -771,7 +781,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the current slide index before animation starts
    * Use it as follows:
    * ```js
-   *    const onAnimationStartCallback = useCallback((currentIndex) => {
+   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
    *      console.log(currentIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -780,7 +790,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationStart: _propTypes.default.func,
   /**
@@ -788,7 +798,7 @@ Carousel.propTypes = {
    * This function is also provided with a parameter indicating the updated slide index after animation ends
    * Use it as follows:
    * ```js
-   *    const onAnimationEndCallback = useCallback((changedIndex) => {
+   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
    *      console.log(changedIndex)
    *    }, [])  // pass local dependencies as per your component
    *    <Carousel
@@ -797,7 +807,7 @@ Carousel.propTypes = {
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
-   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
+   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
    */
   onAnimationEnd: _propTypes.default.func,
   /**

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -12,14 +12,12 @@ var _propTypes = require("prop-types");
 var _CarouselContext = require("../CarouselContext");
 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; }
 /**
  * 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.
- */const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -18,7 +18,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * `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 => {
+const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     elementIndex,
@@ -46,9 +46,10 @@ const CarouselItem = _ref => {
     style: style,
     ...selectedProps,
     ...focusabilityProps,
+    ref: ref,
     children: children
   });
-};
+});
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
   variant: _utils.variantProp.propType,

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -11,7 +11,7 @@ var _StackView = _interopRequireDefault(require("../../StackView"));
 var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CarouselStepTracker = _ref => {
+const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -40,6 +40,7 @@ const CarouselStepTracker = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
     direction: "row",
     tokens: stackViewTokens,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
       current: activeIndex,
       steps: steps,
@@ -52,7 +53,8 @@ const CarouselStepTracker = _ref => {
       variant: variant
     })
   });
-};
+});
+CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
   variant: _utils.variantProp.propType
 };

package/lib/Carousel/CarouselTabs/CarouselTabs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../utils");
 var _Carousel = _interopRequireDefault(require("../Carousel"));
@@ -14,9 +14,7 @@ var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
 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 CarouselTabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const CarouselTabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items,
     refocus = true,

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StackView = _interopRequireDefault(require("../../StackView"));
@@ -12,12 +12,10 @@ var _CarouselContext = require("../CarouselContext");
 var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
 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 selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -25,13 +23,13 @@ const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     activeIndex,
     goTo
   } = (0, _CarouselContext.useCarousel)();
-  const nextFocusRef = (0, _react.useRef)();
-  const firstTabRef = (0, _react.useRef)();
-  const [isInverse, setIsInverse] = (0, _react.useState)(false);
+  const nextFocusRef = _react.default.useRef();
+  const firstTabRef = _react.default.useRef();
+  const [isInverse, setIsInverse] = _react.default.useState(false);
   const lastTabSelected = activeIndex === items.length - 1;
 
   // Get current select tab style
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
   }, [items, activeIndex]);

package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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"));
@@ -13,8 +13,6 @@ 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 => {
@@ -69,7 +67,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -82,7 +80,7 @@ const CarouselTabsPanelItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
   // 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 [isFocused, setIsFocused] = _react.default.useState(false);
   const disabled = (inactive || selected) && !isFocused;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
   const resolveTokens = pressState => getTokens((0, _utils.resolvePressableState)(pressState, {

package/lib/Carousel/CarouselThumbnail.js

@@ -34,7 +34,7 @@ const selectPressableTokens = _ref => {
  * `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 = _ref2 => {
+const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityLabel,
     alt,
@@ -100,6 +100,7 @@ const CarouselThumbnail = _ref2 => {
         outline: 'none'
       }] : styles.nonSelected];
     },
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,
       accessibilityLabel: accessibilityLabel ?? alt,
@@ -108,7 +109,8 @@ const CarouselThumbnail = _ref2 => {
       title: thumbnailTitle
     })
   }, src);
-};
+});
+CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
   accessibilityLabel: _propTypes.default.string,
   alt: _propTypes.default.string,

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
@@ -14,9 +14,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
 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) => {
+const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;

package/lib/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
@@ -20,8 +20,6 @@ var _utils = require("../utils");
 var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
   let {
@@ -136,7 +134,7 @@ const selectFeedbackTokens = _ref4 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     checked,
     defaultChecked,

package/lib/Checkbox/CheckboxButton.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectCheckboxTokens = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -14,8 +14,6 @@ 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
   let {
@@ -69,7 +67,7 @@ const selectCheckboxTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(t
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
 exports.selectCheckboxTokens = selectCheckboxTokens;
-const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const CheckboxButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     isChecked,
     tokens,
@@ -86,7 +84,7 @@ const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const {
     icon: IconComponent,
     ...stateTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Checkbox', {}, {
+  } = (0, _ThemeProvider.useThemeTokens)('Checkbox', tokens, {
     checked: isChecked
   });
   const iconTokens = selectIconTokens(stateTokens);