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

package/lib/esm/InputSupports/useInputSupports.js

@@ -25,9 +25,7 @@ export const useInputSupports = _ref => {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
-    // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
+    accessibilityDescribedBy: joinDefined([hint && hintId, feedback && feedbackId || undefined, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/esm/Link/ChevronLink.js

@@ -57,8 +57,7 @@ ChevronLink.propTypes = {
   children: PropTypes.node,
   variant: PropTypes.exact({
     size: PropTypes.oneOf(['large', 'small', 'micro']),
-    alternative: PropTypes.bool,
-    inverse: PropTypes.bool
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse'])
   }),
   ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),

package/lib/esm/Notification/Notification.js

@@ -248,11 +248,10 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * ### Variants
  * - Use `variant.style` to set the visual style of the notification
  * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
  *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
+ * ### When to use the system style variant?
+ * - Use `variant.style ‘system’` to show system-based messages coming from the application
+ * - Don’t use the `system` style variant when the message is in response to user action
  *
  * ## Variants
  *
@@ -285,7 +284,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
 export const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
-    system,
     dismissible,
     copy = 'en',
     tokens,
@@ -300,9 +298,7 @@ export const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     dictionary,
     copy
   });
-
-  // TODO: Remove this once the system style variant is deprecated
-  const isSystemEnabled = system || variant?.style?.includes('system');
+  const isSystemEnabled = variant?.style?.includes('system');
   const {
     themeOptions
   } = useTheme();
@@ -418,10 +414,6 @@ Notification.propTypes = {
    * Content of the `Notification`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: PropTypes.bool,
   /**
    * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
    */

package/lib/esm/Progress/Progress.js

@@ -12,6 +12,8 @@ import { viewProps } from '../utils/props/viewProps';
 import { ProgressContext } from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const BORDER_SIDES = 2;
+const CENTER_DIVISOR = 2;
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -30,6 +32,21 @@ const selectProgressStyles = _ref => {
     ...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.
@@ -43,10 +60,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
@@ -67,16 +85,23 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-export const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Progress = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const themeTokens = 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__*/_jsx(View, {
+    style: selectBarWrapperStyles(themeTokens),
+    children: children
+  }) : children;
   return /*#__PURE__*/_jsx(ProgressContext.Provider, {
     value: {
       layers
@@ -85,7 +110,7 @@ export const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ref: ref,
       style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
       ...selectProps(rest),
-      children: children
+      children: content
     })
   });
 });

package/lib/esm/Progress/ProgressBar.js

@@ -62,9 +62,9 @@ const selectBarStyles = _ref => {
  *
  * ## Variants
  *
- * - Use the following variants to render specific types of progress bars:
- *   - `negative`: set to `true` if you wish to use the negative theming for progress bar filling,
- *   - `inactive`: set to `true` if you wish to style the progress bar as inactive.
+ * - Use `variant={{ style: 'value' }}` to render specific types of progress bars:
+ *   - `style: 'negative'` for negative theming for progress bar filling,
+ *   - `style: 'inactive'` to style the progress bar as inactive.
  *
  * ## Usability and A11y guidelines
  *

package/lib/esm/Progress/ProgressBarBackground.js

@@ -11,10 +11,9 @@ export const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) =
     variant
   } = _ref;
   let source = null;
-  // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
-  if (variant?.inactive || variant?.style === INACTIVE_VARIANT) {
+  if (variant?.style === INACTIVE_VARIANT) {
     source = inactiveBackground;
-  } else if (variant?.negative || variant?.style === NEGATIVE_VARIANT) {
+  } else if (variant?.style === NEGATIVE_VARIANT) {
     source = negativeBackground;
   } else {
     return null;

package/lib/esm/QuickLinks/QuickLinks.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
 import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { useViewport } from '../ViewportProvider/useViewport';
 import { getTokensPropType } from '../utils/props/tokens';
 import { variantProp } from '../utils/props/variantProp';
+import { tagsToRoles } from '../utils/a11y/semantics';
 import { List } from '../List/List';
 import { StackWrap } from '../StackView/StackWrap';
 import { QuickLinksCard } from './QuickLinksCard';
@@ -36,6 +38,10 @@ export const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useThemeTokens('QuickLinks', tokens, variant, {
     viewport
   });
+  const itemAccessibilityRole = Platform.select({
+    web: ['ul', 'ol'].includes(tag) ? tagsToRoles.li : undefined,
+    default: undefined
+  });
   const content = list && /*#__PURE__*/_jsx(List, {
     ref: ref,
     tokens: listTokens,
@@ -50,6 +56,7 @@ export const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       justifyContent: stackJustify
     },
     tag: tag,
+    itemAccessibilityRole: itemAccessibilityRole,
     ...rest,
     children: children
   });

package/lib/esm/Scroll/Scroll.js

@@ -0,0 +1,465 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens';
+import { a11yProps } from '../utils/props/a11yProps';
+import { copyPropTypes } from '../utils/props/copyPropTypes';
+import { getTokensPropType } from '../utils/props/tokens';
+import { selectSystemProps } from '../utils/props/selectSystemProps';
+import { useCopy } from '../utils/useCopy';
+import { useUniqueId } from '../utils/useUniqueId';
+import { variantProp } from '../utils/props/variantProp';
+import { viewProps } from '../utils/props/viewProps';
+import { A11yText } from '../A11yText/A11yText';
+import { ScrollViewEnd } from '../HorizontalScroll/ScrollViewEnd';
+import { dictionary } from './dictionary';
+import { ScrollProgress } from './ScrollProgress';
+import { ScrollProvider } from './ScrollContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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.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
+ *
+ */
+export const Scroll = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    dictionary: customDictionary = dictionary,
+    accessibilityLabel,
+    ...rest
+  } = _ref6;
+  const getCopy = useCopy({
+    dictionary: customDictionary,
+    copy
+  });
+  const resolvedAccessibilityLabel = accessibilityLabel || getCopy('accessibilityLabel');
+  const getTokens = useThemeTokensCallback(COMPONENT_NAME, tokens, variant);
+  const defaultTokens = React.useMemo(() => getTokens(), [getTokens]);
+  const descriptionId = useUniqueId(SCROLL_DESCRIPTION_PREFIX);
+  const scrollRef = React.useRef(null);
+  const pressableRef = React.useRef(null);
+  const scrollContainerRef = React.useRef(null);
+  const scrollMaxRef = React.useRef(INITIAL_DIMENSION);
+  const scrollOffsetRef = React.useRef(INITIAL_DIMENSION);
+  const thumbWidthPercentRef = React.useRef(MAX_PERCENTAGE);
+  const thumbRef = React.useRef(null);
+  const isDraggingRef = React.useRef(false);
+  const dragStartRef = React.useRef({
+    mouseX: INITIAL_DIMENSION,
+    scrollOffset: INITIAL_DIMENSION
+  });
+  const [scrollOffset, setScrollOffset] = React.useState(INITIAL_DIMENSION);
+  const [containerWidth, setContainerWidth] = React.useState(INITIAL_DIMENSION);
+  const [contentWidth, setContentWidth] = React.useState(INITIAL_DIMENSION);
+  const [itemWidth, setItemWidth] = React.useState(INITIAL_DIMENSION);
+  const [itemHeight, setItemHeight] = React.useState(INITIAL_DIMENSION);
+  const {
+    itemGap
+  } = defaultTokens;
+  const scrollMax = Math.max(INITIAL_DIMENSION, contentWidth - containerWidth);
+  React.useEffect(() => {
+    scrollMaxRef.current = scrollMax;
+  }, [scrollMax]);
+  const thumbWidthPercent = calculateThumbWidth({
+    containerWidth,
+    contentWidth
+  });
+  thumbWidthPercentRef.current = thumbWidthPercent;
+  const thumbPositionPercent = calculateThumbPosition({
+    scrollOffset,
+    scrollMax,
+    thumbWidthPercent
+  });
+  const thumbWrapperStyle = React.useMemo(() => [staticStyles.thumbWrapper, selectThumbWrapperStyles({
+    thumbWidthPercent,
+    thumbPositionPercent
+  }), Platform.OS === 'web' ? staticStyles.thumbCursor : null], [thumbWidthPercent, thumbPositionPercent]);
+  const handleScroll = React.useCallback(_ref7 => {
+    let {
+      nativeEvent: {
+        contentOffset: {
+          x
+        }
+      }
+    } = _ref7;
+    scrollOffsetRef.current = x;
+    setScrollOffset(x);
+  }, []);
+  const handleContainerLayout = React.useCallback(_ref8 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref8;
+    setContainerWidth(width);
+  }, []);
+  const handleContentWidth = React.useCallback(width => {
+    setContentWidth(width);
+  }, []);
+  const handleItemLayout = React.useCallback((width, height) => {
+    setItemWidth(prev => Math.max(prev, width));
+    setItemHeight(prev => Math.max(prev, height));
+  }, []);
+  React.useEffect(() => {
+    if (Platform.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.useEffect(() => {
+    if (Platform.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.useEffect(() => {
+    if (Platform.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.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.useCallback(event => {
+    if (scrollMax <= INITIAL_DIMENSION || isDraggingRef.current) return;
+    if (Platform.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.useCallback(node => {
+    scrollContainerRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) Object.assign(ref, {
+      current: node
+    });
+  }, [ref]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: handleContainerRef,
+    style: staticStyles.container,
+    ...selectContainerA11yProps({
+      accessibilityLabel: resolvedAccessibilityLabel,
+      descriptionId,
+      handleKeyDown
+    }),
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(A11yText, {
+      text: getCopy('instructionText'),
+      nativeID: descriptionId
+    }), /*#__PURE__*/_jsx(View, {
+      style: staticStyles.scrollContainer,
+      children: /*#__PURE__*/_jsx(ScrollViewEnd, {
+        ref: scrollRef,
+        horizontal: true,
+        onScrollEnd: handleScroll,
+        onScroll: handleScroll,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [staticStyles.scrollContent, selectScrollContentStyle(itemGap)],
+        children: /*#__PURE__*/_jsx(ScrollProvider, {
+          itemWidth: itemWidth,
+          itemHeight: itemHeight,
+          onItemLayout: handleItemLayout,
+          children: children
+        })
+      })
+    }), scrollMax > INITIAL_DIMENSION && /*#__PURE__*/_jsx(Pressable, {
+      ref: pressableRef,
+      style: [staticStyles.pressable, selectPressableStyles(defaultTokens)],
+      onPress: handleProgressPress,
+      children: pressableState => /*#__PURE__*/_jsx(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.node.isRequired,
+  /**
+   * Theme tokens for customizing the Scroll appearance
+   */
+  tokens: getTokensPropType('Scroll'),
+  /**
+   * Variant for the Scroll component
+   */
+  variant: variantProp.propType,
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.object,
+    fr: PropTypes.object
+  }),
+  /**
+   * Accessibility label for the scrollable region
+   */
+  accessibilityLabel: PropTypes.string
+};
+const staticStyles = StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  scrollContainer: {
+    width: '100%'
+  },
+  pressable: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  scrollContent: {
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  thumbWrapper: {
+    height: '100%'
+  },
+  thumbCursor: {
+    cursor: 'grab'
+  }
+});