@telus-uds/components-base 3.29.0 → 3.30.0

package/CHANGELOG.md

@@ -1,9 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 13 Mar 2026 20:33:41 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Apr 2026 21:04:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.30.0
+
+Thu, 16 Apr 2026 21:04:33 GMT
+
+### Minor changes
+
+- `Carousel`: Add `isVideo` prop to thumbnail navigation to display a play icon overlay on video thumbnails (josue.higueros@telus.com)
+- `Scroll`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.21.0
+
+### Patches
+
+- `FootnoteLink`: fixed superscript text positioning on native to correctly align with surrounding text (josue.higueroscalderon@telus.com)
+
+## 3.29.1
+
+Mon, 06 Apr 2026 21:25:55 GMT
+
+### Patches
+
+- `ExpandCollapse`: columnwrap example fixed in mobile (josue.higueroscalderon@telus.com)
+- `Modal`: Fix onPress error when backgroundDismissible is false (david.melara1@telus.com)
+- `QuickLinks`: Add `listitem` role to item wrappers on web in button mode for proper ARIA semantics. (sergio.ramirez@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+
 ## 3.29.0
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/jest.config.cjs

@@ -34,6 +34,7 @@ module.exports = {
     '^@telus-uds/system-theme-tokens$': '<rootDir>/../system-theme-tokens/src'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
+  testPathIgnorePatterns: ['\\.web\\.test\\.'],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
   ],

package/lib/cjs/ActionCard/ActionCard.js

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

package/lib/cjs/ActivityIndicator/Dots.native.js

@@ -13,8 +13,7 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 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 AnimatedCircle = _Animated.default.createAnimatedComponent(_reactNativeSvg.Circle);
 const Dots = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {

package/lib/cjs/ActivityIndicator/Spinner.native.js

@@ -12,8 +12,7 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _shared = require("./shared");
 var _A11yInfoProvider = require("../A11yInfoProvider");
 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 Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {

package/lib/cjs/Box/Box.js

@@ -17,8 +17,7 @@ var _utils = require("../utils");
 var _backgroundImageStylesMap = _interopRequireWildcard(require("./backgroundImageStylesMap"));
 var _ViewportProvider = require("../ViewportProvider");
 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]);
 

package/lib/cjs/Button/Button.js

@@ -11,8 +11,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _props = require("../utils/props");
 var _ViewportProvider = require("../ViewportProvider");
 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 Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {

package/lib/cjs/Button/ButtonBase.js

@@ -225,27 +225,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.default.forwardRef((_ref12, ref) => {
+const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -261,7 +261,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     iconProps,
     heightFull = true,
     ...rawRest
-  } = _ref12;
+  } = _ref10;
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -289,8 +289,8 @@ const ButtonBase = /*#__PURE__*/_react.default.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/cjs/Button/ButtonDropdown.js

@@ -17,8 +17,7 @@ var _utils = require("../utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _pressability = require("../utils/pressability");
 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 FULL_WIDTH_STYLE = 'full';
 const selectIconTokens = _ref => {

package/lib/cjs/Button/ButtonGroup.js

@@ -18,8 +18,7 @@ var _utils = require("../utils");
 var _pressability = require("../utils/pressability");
 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {

package/lib/cjs/Button/ButtonLink.js

@@ -12,8 +12,7 @@ var _props = require("../utils/props");
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
 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 }; }
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.

package/lib/cjs/Card/Card.js

@@ -16,8 +16,7 @@ var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
 var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
 var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
 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, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
 const SelectionType = {

package/lib/cjs/Card/PressableCardBase.js

@@ -15,8 +15,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _CardBase = _interopRequireWildcard(require("./CardBase"));
 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.focusHandlerProps, _utils.viewProps]);
 const selectFocusOverlayContainerStyles = tokens => {

package/lib/cjs/Card/index.js

@@ -26,7 +26,6 @@ Object.keys(_PressableCardBase).forEach(function (key) {
     }
   });
 });
-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 }; }
 var _default = exports.default = _Card.default;

package/lib/cjs/CardGroup/CardGroup.js

@@ -14,8 +14,7 @@ var _StackView = _interopRequireWildcard(require("../StackView"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 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.viewProps]);

package/lib/cjs/Carousel/Carousel.js

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

package/lib/cjs/Carousel/CarouselThumbnail.js

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
+var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableTokens = _ref => {
@@ -30,17 +33,64 @@ const selectPressableTokens = _ref => {
   };
 };
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55;
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2;
+const selectImageStyles = size => ({
+  width: size,
+  height: size
+});
+const selectSelectedStyles = _ref2 => {
+  let {
+    selectedBorderColor,
+    selectedBorderWidth,
+    padding,
+    margin
+  } = _ref2;
+  return {
+    borderColor: selectedBorderColor,
+    borderWidth: selectedBorderWidth,
+    padding: padding - selectedBorderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectNonSelectedStyles = _ref3 => {
+  let {
+    borderWidth,
+    padding,
+    margin,
+    selectedBorderWidth
+  } = _ref3;
+  return {
+    padding: padding - borderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectPlayIconCircleStyles = thumbnailSize => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO;
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  };
+};
+const selectPlayIconTokens = thumbnailSize => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+});
+
 /**
  * `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 = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     accessibilityLabel,
     alt,
     index,
+    isVideo,
     src
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     itemLabel,
@@ -62,59 +112,101 @@ const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     selectedBorderColor,
     selectedBorderWidth,
     size,
-    margin
+    margin,
+    playIcon
   } = getThumbnailTokens({
     viewport
   });
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
-    }
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: _ref3 => {
+    style: _ref5 => {
       let {
         hovered,
         pressed,
         focused
-      } = _ref3;
+      } = _ref5;
       const pressableStyles = selectPressableTokens(getThumbnailTokens({
         hover: hovered,
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
+      return [pressableStyles, index === activeIndex ? [selectSelectedStyles({
+        selectedBorderColor,
+        selectedBorderWidth,
+        padding,
+        margin
+      }), staticStyles.selectedPressableOutline] : selectNonSelectedStyles({
+        borderWidth,
+        padding,
+        margin,
+        selectedBorderWidth
+      })];
     },
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.imageContainer, selectImageStyles(size)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        accessibilityIgnoresInvertColors: true,
+        accessibilityLabel: accessibilityLabel ?? alt,
+        source: src,
+        style: selectImageStyles(size),
+        title: thumbnailTitle
+      }), isVideo && playIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.playIconOverlayContainer,
+        testID: `play-icon-overlay-${index}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            icon: playIcon,
+            tokens: {
+              ...selectPlayIconTokens(size),
+              color: staticStyles.playIconSymbol.color
+            }
+          })
+        })
+      })]
     })
   }, src);
 });
 CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: _propTypes.default.string,
+  /** Alt text for the thumbnail image */
   alt: _propTypes.default.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: _propTypes.default.number,
-  src: _propTypes.default.string
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: _propTypes.default.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
+const staticStyles = _StyleSheet.default.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: {
+    outlineStyle: 'none'
+  },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: {
+    color: 'rgb(255, 255, 255)'
+  }
+});
 var _default = exports.default = CarouselThumbnail;

package/lib/cjs/Carousel/CarouselThumbnailNavigation.js

@@ -52,12 +52,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
         let {
           accessibilityLabel,
           alt,
+          isVideo,
           src
         } = _ref2;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
+          isVideo: isVideo,
           src: src
         }, src);
       })
@@ -70,9 +72,14 @@ CarouselThumbnailNavigation.propTypes = {
    * An array of objects containing information on the thumbnail images.
    */
   thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: _propTypes.default.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: _propTypes.default.string,
-    src: _propTypes.default.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: _propTypes.default.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })).isRequired
 };
 var _default = exports.default = CarouselThumbnailNavigation;

package/lib/cjs/CheckboxCard/CheckboxCard.js

@@ -15,8 +15,7 @@ var _Card = require("../Card");
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _CheckboxButton = _interopRequireWildcard(require("../Checkbox/CheckboxButton"));
 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.focusHandlerProps, _utils.viewProps]);
 const CheckboxCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {

package/lib/cjs/CheckboxCardGroup/CheckboxCardGroup.js

@@ -13,8 +13,7 @@ var _StackView = _interopRequireWildcard(require("../StackView"));
 var _CheckboxCard = _interopRequireDefault(require("../CheckboxCard"));
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 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.viewProps]);