@telus-uds/components-base 4.0.0-alpha.1 → 4.0.0-alpha.2

package/CHANGELOG.md

@@ -1,9 +1,36 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Apr 2026 17:20:02 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Apr 2026 23:54:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.0.0-alpha.2
+
+Fri, 17 Apr 2026 23:54:32 GMT
+
+### Minor changes
+
+- `Scroll`: add component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.2
+
+### Patches
+
+- `FootnoteLink`: fixed superscript text positioning on native to correctly align with surrounding text (josue.higueroscalderon@telus.com)
+
+## 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)
+
 ## 4.0.0-alpha.1
 
 Fri, 10 Apr 2026 17:20:02 GMT

package/lib/cjs/Footnote/FootnoteLink.js

@@ -22,28 +22,28 @@ var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const DEFAULT_LINE_HEIGHT = 1;
+const LINE_HEIGHT_MULTIPLIER = 2;
 const selectTextStyle = _ref => {
   let {
     fontSize,
     lineHeight
   } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ..._Platform.default.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
+  return _Platform.default.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
+    },
+    web: {
+      fontSize,
+      lineHeight: lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
+    }
+  });
 };
 const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
@@ -87,6 +87,7 @@ const FootnoteLink = exports.FootnoteLink = /*#__PURE__*/_react.default.forwardR
   });
 });
 FootnoteLink.displayName = 'FootnoteLink';
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink';
 const copyShape = _propTypes.default.shape({
   a11yLabel: _propTypes.default.string.isRequired
 });

package/lib/cjs/Progress/Progress.js

@@ -19,6 +19,8 @@ var _ProgressContext = require("./ProgressContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const BORDER_SIDES = 2;
+const CENTER_DIVISOR = 2;
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -37,6 +39,21 @@ const selectProgressStyles = _ref => {
     ...(0, _styles.applyShadowToken)(shadow)
   };
 };
+const selectBarWrapperStyles = _ref2 => {
+  let {
+    barHeight,
+    borderRadius,
+    borderWidth,
+    height
+  } = _ref2;
+  return {
+    height: barHeight,
+    width: '100%',
+    position: 'absolute',
+    top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+    borderRadius
+  };
+};
 
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
@@ -50,10 +67,11 @@ const selectProgressStyles = _ref => {
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -74,16 +92,23 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const themeTokens = (0, _useThemeTokens.useThemeTokens)('Progress', tokens, variant);
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false;
+  const {
+    barHeight,
+    height
+  } = themeTokens;
+  const content = barHeight && barHeight !== height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectBarWrapperStyles(themeTokens),
+    children: children
+  }) : children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.ProgressContext.Provider, {
     value: {
       layers
@@ -92,7 +117,7 @@ const Progress = exports.Progress = /*#__PURE__*/_react.default.forwardRef((_ref
       ref: ref,
       style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
       ...selectProps(rest),
-      children: children
+      children: content
     })
   });
 });

package/lib/cjs/Scroll/Scroll.js

@@ -0,0 +1,472 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Scroll = void 0;
+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"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _useUniqueId = require("../utils/useUniqueId");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _A11yText = require("../A11yText/A11yText");
+var _ScrollViewEnd = require("../HorizontalScroll/ScrollViewEnd");
+var _dictionary = require("./dictionary");
+var _ScrollProgress = require("./ScrollProgress");
+var _ScrollContext = require("./ScrollContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const SCROLL_DESCRIPTION_PREFIX = 'scroll-description';
+const KEY_ARROW_RIGHT = 'ArrowRight';
+const KEY_ARROW_LEFT = 'ArrowLeft';
+const KEY_SPACE = ' ';
+const MAX_PERCENTAGE = 100;
+const MIN_BAR_PERCENTAGE = 1;
+const ROLE_REGION = 'region';
+const ROLE_NONE = 'none';
+const COMPONENT_NAME = 'Scroll';
+const SCROLL_ITEM_SELECTOR = '[data-scroll-item]';
+const TAB_INDEX = 0;
+const INITIAL_DIMENSION = 0;
+const HALF_DIVISOR = 2;
+const selectPressableStyles = _ref => {
+  let {
+    progressHitAreaHeight,
+    progressSpacing
+  } = _ref;
+  return {
+    height: progressHitAreaHeight,
+    marginTop: progressSpacing
+  };
+};
+const selectThumbWrapperStyles = _ref2 => {
+  let {
+    thumbWidthPercent,
+    thumbPositionPercent
+  } = _ref2;
+  return {
+    width: `${thumbWidthPercent}%`,
+    marginLeft: `${thumbPositionPercent}%`
+  };
+};
+const selectContainerA11yProps = _ref3 => {
+  let {
+    accessibilityLabel,
+    descriptionId,
+    handleKeyDown
+  } = _ref3;
+  return _Platform.default.OS === 'web' ? {
+    role: ROLE_REGION,
+    'aria-label': accessibilityLabel,
+    'aria-describedby': descriptionId,
+    tabIndex: TAB_INDEX,
+    onKeyDown: handleKeyDown
+  } : {
+    accessibilityRole: ROLE_NONE,
+    accessibilityLabel
+  };
+};
+const selectScrollContentStyle = itemGap => ({
+  columnGap: itemGap
+});
+const calculateThumbWidth = _ref4 => {
+  let {
+    containerWidth,
+    contentWidth
+  } = _ref4;
+  if (contentWidth <= INITIAL_DIMENSION) return MAX_PERCENTAGE;
+  return Math.max(MIN_BAR_PERCENTAGE, Math.min(MAX_PERCENTAGE, containerWidth / contentWidth * MAX_PERCENTAGE));
+};
+const calculateThumbPosition = _ref5 => {
+  let {
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  } = _ref5;
+  if (scrollMax <= INITIAL_DIMENSION) return INITIAL_DIMENSION;
+  return scrollOffset / scrollMax * (MAX_PERCENTAGE - thumbWidthPercent);
+};
+const getScrollableNode = ref => ref.current?.getScrollableNode?.() ?? null;
+
+/**
+ * The `Scroll` component provides a continuous horizontal scrollable container with a progress
+ * bar indicator. Items are displayed in a flow layout where all items share the width of the
+ * widest item and the height of the tallest item.
+ *
+ * ## Props
+ *
+ * - Use `children` to pass `ScrollItem` components
+ * - Use `accessibilityLabel` to provide a meaningful label for the scrollable region
+ * - Use `copy` to select English or French for accessible labels
+ * - Use `dictionary` to override the default translations
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The scroll container is keyboard-focusable with `tabIndex="0"`
+ * - Each `ScrollItem` is individually focusable via Tab navigation
+ * - Use left and right arrow keys to scroll by one item width
+ * - Press Space bar to scroll right
+ * - When tabbing through items, the scroll follows focus to keep the active item visible
+ * - Screen readers announce the component as a region with a descriptive label
+ * - Touch and swipe gestures are supported on mobile and mobile web
+ *
+ */
+const Scroll = exports.Scroll = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    dictionary: customDictionary = _dictionary.dictionary,
+    accessibilityLabel,
+    ...rest
+  } = _ref6;
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: customDictionary,
+    copy
+  });
+  const resolvedAccessibilityLabel = accessibilityLabel || getCopy('accessibilityLabel');
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)(COMPONENT_NAME, tokens, variant);
+  const defaultTokens = _react.default.useMemo(() => getTokens(), [getTokens]);
+  const descriptionId = (0, _useUniqueId.useUniqueId)(SCROLL_DESCRIPTION_PREFIX);
+  const scrollRef = _react.default.useRef(null);
+  const pressableRef = _react.default.useRef(null);
+  const scrollContainerRef = _react.default.useRef(null);
+  const scrollMaxRef = _react.default.useRef(INITIAL_DIMENSION);
+  const scrollOffsetRef = _react.default.useRef(INITIAL_DIMENSION);
+  const thumbWidthPercentRef = _react.default.useRef(MAX_PERCENTAGE);
+  const thumbRef = _react.default.useRef(null);
+  const isDraggingRef = _react.default.useRef(false);
+  const dragStartRef = _react.default.useRef({
+    mouseX: INITIAL_DIMENSION,
+    scrollOffset: INITIAL_DIMENSION
+  });
+  const [scrollOffset, setScrollOffset] = _react.default.useState(INITIAL_DIMENSION);
+  const [containerWidth, setContainerWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [contentWidth, setContentWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [itemWidth, setItemWidth] = _react.default.useState(INITIAL_DIMENSION);
+  const [itemHeight, setItemHeight] = _react.default.useState(INITIAL_DIMENSION);
+  const {
+    itemGap
+  } = defaultTokens;
+  const scrollMax = Math.max(INITIAL_DIMENSION, contentWidth - containerWidth);
+  _react.default.useEffect(() => {
+    scrollMaxRef.current = scrollMax;
+  }, [scrollMax]);
+  const thumbWidthPercent = calculateThumbWidth({
+    containerWidth,
+    contentWidth
+  });
+  thumbWidthPercentRef.current = thumbWidthPercent;
+  const thumbPositionPercent = calculateThumbPosition({
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  });
+  const thumbWrapperStyle = _react.default.useMemo(() => [staticStyles.thumbWrapper, selectThumbWrapperStyles({
+    thumbWidthPercent,
+    thumbPositionPercent
+  }), _Platform.default.OS === 'web' ? staticStyles.thumbCursor : null], [thumbWidthPercent, thumbPositionPercent]);
+  const handleScroll = _react.default.useCallback(_ref7 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
+      }
+    } = _ref7;
+    scrollOffsetRef.current = x;
+    setScrollOffset(x);
+  }, []);
+  const handleContainerLayout = _react.default.useCallback(_ref8 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref8;
+    setContainerWidth(width);
+  }, []);
+  const handleContentWidth = _react.default.useCallback(width => {
+    setContentWidth(width);
+  }, []);
+  const handleItemLayout = _react.default.useCallback((width, height) => {
+    setItemWidth(prev => Math.max(prev, width));
+    setItemHeight(prev => Math.max(prev, height));
+  }, []);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web') return undefined;
+    const element = scrollContainerRef.current;
+    if (!element) return undefined;
+    const handleWheel = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      const isHorizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
+      const delta = isHorizontal ? event.deltaX : event.deltaY;
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (scrollableNode) {
+        const maxScroll = scrollMaxRef.current;
+        const newScrollLeft = Math.max(INITIAL_DIMENSION, Math.min(maxScroll, scrollableNode.scrollLeft + delta));
+        scrollableNode.scrollLeft = newScrollLeft;
+        scrollOffsetRef.current = newScrollLeft;
+        setScrollOffset(newScrollLeft);
+      }
+    };
+    element.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return () => element.removeEventListener('wheel', handleWheel);
+  }, []);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web') return undefined;
+    const element = scrollContainerRef.current;
+    if (!element) return undefined;
+    const handleFocusIn = event => {
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (!scrollableNode) return;
+      const focusedItem = event.target.closest(SCROLL_ITEM_SELECTOR);
+      if (!focusedItem) return;
+      const itemLeft = focusedItem.offsetLeft;
+      const itemRight = itemLeft + focusedItem.offsetWidth;
+      const visibleLeft = scrollableNode.scrollLeft;
+      const currentContainerWidth = containerWidth;
+      const visibleRight = visibleLeft + currentContainerWidth;
+      if (itemRight > visibleRight) {
+        scrollRef.current.scrollTo({
+          x: itemRight - currentContainerWidth,
+          animated: true
+        });
+      } else if (itemLeft < visibleLeft) {
+        scrollRef.current.scrollTo({
+          x: itemLeft,
+          animated: true
+        });
+      }
+    };
+    element.addEventListener('focusin', handleFocusIn);
+    return () => element.removeEventListener('focusin', handleFocusIn);
+  }, [containerWidth]);
+  const hasScrollbar = scrollMax > INITIAL_DIMENSION;
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS !== 'web' || !hasScrollbar) return undefined;
+    const thumbElement = thumbRef.current;
+    if (!thumbElement) return undefined;
+    const handleMouseDown = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      isDraggingRef.current = true;
+      dragStartRef.current = {
+        mouseX: event.clientX,
+        scrollOffset: getScrollableNode(scrollRef)?.scrollLeft ?? INITIAL_DIMENSION
+      };
+      thumbElement.style.cursor = 'grabbing';
+      document.body.style.cursor = 'grabbing';
+      document.body.style.userSelect = 'none';
+    };
+    const handleMouseMove = event => {
+      if (!isDraggingRef.current) return;
+      const trackElement = pressableRef.current;
+      if (!trackElement) return;
+      const trackWidth = trackElement.offsetWidth;
+      const thumbPixelWidth = thumbWidthPercentRef.current / MAX_PERCENTAGE * trackWidth;
+      const availableTrackPixels = trackWidth - thumbPixelWidth;
+      if (availableTrackPixels <= INITIAL_DIMENSION) return;
+      const mouseDelta = event.clientX - dragStartRef.current.mouseX;
+      const scrollDelta = mouseDelta / availableTrackPixels * scrollMaxRef.current;
+      const targetScroll = Math.max(INITIAL_DIMENSION, Math.min(scrollMaxRef.current, dragStartRef.current.scrollOffset + scrollDelta));
+      const scrollableNode = getScrollableNode(scrollRef);
+      if (scrollableNode) {
+        scrollableNode.scrollLeft = targetScroll;
+        scrollOffsetRef.current = targetScroll;
+        setScrollOffset(targetScroll);
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      thumbElement.style.cursor = '';
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    thumbElement.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      thumbElement.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [hasScrollbar]);
+  const handleKeyDown = _react.default.useCallback(event => {
+    if (event.key === KEY_ARROW_RIGHT || event.key === KEY_SPACE) {
+      event.preventDefault();
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: scrollOffsetRef.current + itemWidth,
+          animated: true
+        });
+      }
+    } else if (event.key === KEY_ARROW_LEFT) {
+      event.preventDefault();
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: Math.max(INITIAL_DIMENSION, scrollOffsetRef.current - itemWidth),
+          animated: true
+        });
+      }
+    }
+  }, [itemWidth]);
+  const handleProgressPress = _react.default.useCallback(event => {
+    if (scrollMax <= INITIAL_DIMENSION || isDraggingRef.current) return;
+    if (_Platform.default.OS === 'web' && pressableRef.current) {
+      const {
+        offsetX
+      } = event.nativeEvent;
+      const {
+        offsetWidth
+      } = pressableRef.current;
+      const thumbPixelWidth = thumbWidthPercent / MAX_PERCENTAGE * offsetWidth;
+      const availableTrack = offsetWidth - thumbPixelWidth;
+      if (availableTrack <= INITIAL_DIMENSION) return;
+      const clickPosition = Math.max(INITIAL_DIMENSION, Math.min(availableTrack, offsetX - thumbPixelWidth / HALF_DIVISOR));
+      const targetX = clickPosition / availableTrack * scrollMax;
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          x: targetX,
+          animated: true
+        });
+      }
+    } else if (pressableRef.current) {
+      const {
+        locationX
+      } = event.nativeEvent;
+      pressableRef.current.measure((_x, _y, width) => {
+        const thumbPixelWidth = thumbWidthPercent / MAX_PERCENTAGE * width;
+        const availableTrack = width - thumbPixelWidth;
+        if (availableTrack <= INITIAL_DIMENSION) return;
+        const clickPosition = Math.max(INITIAL_DIMENSION, Math.min(availableTrack, locationX - thumbPixelWidth / HALF_DIVISOR));
+        const targetX = clickPosition / availableTrack * scrollMax;
+        if (scrollRef.current) {
+          scrollRef.current.scrollTo({
+            x: targetX,
+            animated: true
+          });
+        }
+      });
+    }
+  }, [scrollMax, thumbWidthPercent]);
+  const handleContainerRef = _react.default.useCallback(node => {
+    scrollContainerRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) Object.assign(ref, {
+      current: node
+    });
+  }, [ref]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: handleContainerRef,
+    style: staticStyles.container,
+    ...selectContainerA11yProps({
+      accessibilityLabel: resolvedAccessibilityLabel,
+      descriptionId,
+      handleKeyDown
+    }),
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.A11yText, {
+      text: getCopy('instructionText'),
+      nativeID: descriptionId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.scrollContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollViewEnd.ScrollViewEnd, {
+        ref: scrollRef,
+        horizontal: true,
+        onScrollEnd: handleScroll,
+        onScroll: handleScroll,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [staticStyles.scrollContent, selectScrollContentStyle(itemGap)],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollContext.ScrollProvider, {
+          itemWidth: itemWidth,
+          itemHeight: itemHeight,
+          onItemLayout: handleItemLayout,
+          children: children
+        })
+      })
+    }), scrollMax > INITIAL_DIMENSION && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      ref: pressableRef,
+      style: [staticStyles.pressable, selectPressableStyles(defaultTokens)],
+      onPress: handleProgressPress,
+      children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollProgress.ScrollProgress, {
+        ref: thumbRef,
+        pressableState: pressableState,
+        getTokens: getTokens,
+        thumbWrapperStyle: thumbWrapperStyle,
+        getCopy: getCopy
+      })
+    })]
+  });
+});
+Scroll.displayName = 'Scroll';
+Scroll.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Scroll items to display. Should be `ScrollItem` components.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Theme tokens for customizing the Scroll appearance
+   */
+  tokens: (0, _tokens.getTokensPropType)('Scroll'),
+  /**
+   * Variant for the Scroll component
+   */
+  variant: _variantProp.variantProp.propType,
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy: _copyPropTypes.copyPropTypes,
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.object,
+    fr: _propTypes.default.object
+  }),
+  /**
+   * Accessibility label for the scrollable region
+   */
+  accessibilityLabel: _propTypes.default.string
+};
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    width: '100%'
+  },
+  scrollContainer: {
+    width: '100%'
+  },
+  pressable: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  scrollContent: {
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  thumbWrapper: {
+    height: '100%'
+  },
+  thumbCursor: {
+    cursor: 'grab'
+  }
+});

package/lib/cjs/Scroll/ScrollContext.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollProvider = void 0;
+exports.useScroll = useScroll;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScrollContext = /*#__PURE__*/_react.default.createContext();
+const ScrollProvider = _ref => {
+  let {
+    children,
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = _ref;
+  const value = _react.default.useMemo(() => ({
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  }), [itemWidth, itemHeight, onItemLayout]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.ScrollProvider = ScrollProvider;
+function useScroll() {
+  const context = _react.default.useContext(ScrollContext);
+  if (context === undefined) {
+    throw new Error(`'useScroll' must be used within a 'ScrollProvider'`);
+  }
+  return context;
+}
+ScrollProvider.propTypes = {
+  /**
+   * Content to be rendered within the scroll context provider.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Width of each scroll item in pixels.
+   */
+  itemWidth: _propTypes.default.number.isRequired,
+  /**
+   * Height of each scroll item in pixels.
+   */
+  itemHeight: _propTypes.default.number.isRequired,
+  /**
+   * Callback invoked when a scroll item layout is measured.
+   */
+  onItemLayout: _propTypes.default.func.isRequired
+};