@telus-uds/components-base 3.29.0 → 3.30.0

package/lib/cjs/Scroll/ScrollProgress.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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _Progress = _interopRequireDefault(require("../Progress"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MAX_PERCENTAGE = 100;
+const BORDER_RADIUS_DIVISOR = 2;
+const staticProgressTokens = {
+  borderWidth: 0,
+  borderColor: 'transparent'
+};
+const staticProgressBarTokens = {
+  gradient: null,
+  outlineWidth: 0
+};
+const selectProgressTokens = _ref => {
+  let {
+    progressTrackHeight,
+    progressBarHeight,
+    progressTrackColor
+  } = _ref;
+  return {
+    height: progressTrackHeight,
+    barHeight: progressBarHeight,
+    backgroundColor: progressTrackColor,
+    borderRadius: progressTrackHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const selectBarTokens = _ref2 => {
+  let {
+    progressBarColor,
+    progressBarHeight
+  } = _ref2;
+  return {
+    backgroundColor: progressBarColor,
+    borderRadius: progressBarHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const ScrollProgress = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    pressableState,
+    getTokens,
+    thumbWrapperStyle,
+    getCopy
+  } = _ref3;
+  const state = (0, _utils.resolvePressableState)(pressableState);
+  const themeTokens = getTokens(state);
+  const animatedBarHeight = (0, _utils.useAnimatedValue)(themeTokens.progressBarHeight);
+  const animatedTokens = {
+    ...themeTokens,
+    progressBarHeight: animatedBarHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+    tokens: {
+      ...staticProgressTokens,
+      ...selectProgressTokens(animatedTokens)
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: thumbWrapperStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default.Bar, {
+        percentage: MAX_PERCENTAGE,
+        tokens: {
+          ...staticProgressBarTokens,
+          ...selectBarTokens(animatedTokens)
+        },
+        accessibilityLabel: getCopy('progressBarLabel')
+      })
+    })
+  });
+});
+ScrollProgress.displayName = 'ScrollProgress';
+ScrollProgress.propTypes = {
+  /**
+   * State object from Pressable's render callback containing hovered, pressed, and focused states
+   */
+  pressableState: _propTypes.default.object.isRequired,
+  /**
+   * Theme token resolver callback from useThemeTokensCallback that accepts appearance state
+   */
+  getTokens: _propTypes.default.func.isRequired,
+  /**
+   * Style array for the thumb wrapper containing static and dynamic position styles
+   */
+  thumbWrapperStyle: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]).isRequired,
+  /**
+   * Copy resolver function from useCopy for retrieving localized strings
+   */
+  getCopy: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ScrollProgress;

package/lib/cjs/Scroll/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+};

package/lib/cjs/Scroll/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScrollItem", {
+  enumerable: true,
+  get: function () {
+    return _ScrollItem.default;
+  }
+});
+Object.defineProperty(exports, "ScrollProvider", {
+  enumerable: true,
+  get: function () {
+    return _ScrollContext.ScrollProvider;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useScroll", {
+  enumerable: true,
+  get: function () {
+    return _ScrollContext.useScroll;
+  }
+});
+var _Scroll = _interopRequireDefault(require("./Scroll"));
+var _ScrollItem = _interopRequireDefault(require("./ScrollItem"));
+var _ScrollContext = require("./ScrollContext");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Scroll.default;

package/lib/cjs/Shortcuts/Shortcuts.js

@@ -15,8 +15,7 @@ var _ViewportProvider = require("../ViewportProvider");
 var _utils = require("../utils");
 var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const {

package/lib/cjs/SideNav/SideNav.js

@@ -13,8 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const selectContainerTokens = _ref => {
   let {
     borderWidth,

package/lib/cjs/StackView/StackWrapBox.js

@@ -50,6 +50,7 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -76,7 +77,8 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const content = (0, _getStackedContent.default)(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -112,6 +114,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: _propTypes.default.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/cjs/StackView/StackWrapGap.js

@@ -35,6 +35,7 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -54,7 +55,8 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const content = (0, _getStackedContent.default)(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/cjs/StackView/getStackedContent.js

@@ -10,8 +10,7 @@ var _Divider = _interopRequireDefault(require("../Divider"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -43,7 +42,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -55,15 +55,24 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/(0, _react.createElement)(_Box.default, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/_react.default.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/cjs/Tabs/Tabs.js

@@ -15,8 +15,7 @@ var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
 var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);

package/lib/cjs/Tooltip/Tooltip.native.js

@@ -213,7 +213,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
       focus: focused
     };
   };
-  const onTooltipLayout = _ref10 => {
+  const onTooltipLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -221,7 +221,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: _Platform.default.select({

package/lib/cjs/index.js

@@ -57,6 +57,8 @@ var _exportNames = {
   RadioCard: true,
   RadioCardGroup: true,
   Responsive: true,
+  Scroll: true,
+  ScrollItem: true,
   Search: true,
   Select: true,
   Shortcuts: true,
@@ -422,6 +424,18 @@ Object.defineProperty(exports, "Responsive", {
     return _Responsive.default;
   }
 });
+Object.defineProperty(exports, "Scroll", {
+  enumerable: true,
+  get: function () {
+    return _Scroll.default;
+  }
+});
+Object.defineProperty(exports, "ScrollItem", {
+  enumerable: true,
+  get: function () {
+    return _Scroll.ScrollItem;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {
@@ -756,6 +770,7 @@ var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
 var _Radio = _interopRequireWildcard(require("./Radio"));
 var _RadioCard = _interopRequireWildcard(require("./RadioCard"));
 var _Responsive = _interopRequireDefault(require("./Responsive"));
+var _Scroll = _interopRequireWildcard(require("./Scroll"));
 var _Search = _interopRequireDefault(require("./Search"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _Shortcuts = _interopRequireWildcard(require("./Shortcuts"));
@@ -816,6 +831,5 @@ Object.keys(_utils).forEach(function (key) {
   });
 });
 var _Portal = _interopRequireDefault(require("./Portal"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/animation/index.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useAnimatedValue", {
+  enumerable: true,
+  get: function () {
+    return _useAnimatedValue.default;
+  }
+});
 Object.defineProperty(exports, "useVerticalExpandAnimation", {
   enumerable: true,
   get: function () {
     return _useVerticalExpandAnimation.default;
   }
 });
+var _useAnimatedValue = _interopRequireDefault(require("./useAnimatedValue"));
 var _useVerticalExpandAnimation = _interopRequireDefault(require("./useVerticalExpandAnimation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/animation/useAnimatedValue.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = _react.default.useState(targetValue);
+  const animatedValue = _react.default.useRef(new _Animated.default.Value(targetValue)).current;
+  _react.default.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  _react.default.useEffect(() => {
+    const animation = _Animated.default.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: _Easing.default.inOut(_Easing.default.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};
+var _default = exports.default = useAnimatedValue;

package/lib/cjs/utils/children.js

@@ -54,7 +54,8 @@ const unpackFragment = child => {
 exports.unpackFragment = unpackFragment;
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.default || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.default || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/cjs/utils/index.js

@@ -280,6 +280,5 @@ var _getSpacingScale = _interopRequireDefault(require("./getSpacingScale"));
 var _useVariants = _interopRequireDefault(require("./useVariants"));
 var _isTouchDevice = _interopRequireDefault(require("./isTouchDevice"));
 var _resolveContentMaxWidth = _interopRequireDefault(require("./resolveContentMaxWidth"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/esm/ActionCard/ActionCard.js

@@ -153,11 +153,11 @@ const selectActionIconStyles = _ref9 => {
     marginTop: actionIconMarginTop
   };
 };
-const selectActionIconProps = _ref10 => {
+const selectActionIconProps = _ref0 => {
   let {
     actionIcon,
     actionIconColor
-  } = _ref10;
+  } = _ref0;
   return {
     icon: actionIcon,
     tokens: {
@@ -186,7 +186,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100;
  *   </ActionCard>
  * )
  */
-const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ActionCard = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
   let {
     icon,
     title,
@@ -197,7 +197,7 @@ const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref11;
+  } = _ref1;
   const themeTokens = useThemeTokens('ActionCard', tokens, variant);
   const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
   const {

package/lib/esm/Button/ButtonBase.js

@@ -218,27 +218,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref10 => {
+const selectButtonStyles = _ref0 => {
   let {
     textAlign
-  } = _ref10;
+  } = _ref0;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref11 => {
+const selectItemIconTokens = _ref1 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref11;
+  } = _ref1;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -254,7 +254,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     iconProps,
     heightFull = true,
     ...rawRest
-  } = _ref12;
+  } = _ref10;
   const {
     themeOptions
   } = useTheme();
@@ -282,8 +282,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
       focused: false
     };
     const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
-    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
-      let [vp, viewportTokens] = _ref13;
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref11) => {
+      let [vp, viewportTokens] = _ref11;
       const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
       acc[vp] = {
         ...staticStyles.row,

package/lib/esm/Carousel/Carousel.js

@@ -761,7 +761,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref10 => {
+  const onHeroContainerLayout = _ref0 => {
     let {
       nativeEvent: {
         layout: {
@@ -771,7 +771,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref10;
+    } = _ref0;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -780,17 +780,17 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref11 => {
+  const onPreviousNextNavigationButtonLayout = _ref1 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref11;
+    } = _ref1;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const onRootContainerLayout = _ref12 => {
+  const onRootContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -800,7 +800,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref12;
+    } = _ref10;
     return setRootContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -1170,9 +1170,14 @@ Carousel.propTypes = {
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
   thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: PropTypes.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: PropTypes.string,
-    src: PropTypes.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: PropTypes.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   })),
   /**
    * Minimal part of slide width must be swiped for changing index.