@codecademy/gamut

Index: package/dist/List/List.js
===================================================================
--- package/dist/List/List.js
+++ package/dist/List/List.js
@@ -3,8 +3,9 @@
 import isArray from 'lodash/isArray';
 import { forwardRef, useEffect } from 'react';
 import * as React from 'react';
 import { Box, FlexBox } from '../Box';
+import { splitDataAttributes } from '../utils/dataAttributes';
 import { AnimatedListWrapper, hiddenVariant, ListEl, shadowVariant, StaticListWrapper } from './elements';
 import { useScrollabilityCheck } from './hooks';
 import { ListProvider, useList } from './ListProvider';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,8 +28,16 @@
   wrapperWidth,
   disableContainerQuery = false,
   ...rest
 }, ref) => {
+  /*
+   * data-* attributes are identity/targeting hooks (Pendo selectors, QA
+   * scripts), so they belong on the same node as `id` - the outer
+   * ListWrapper - rather than the inner semantic list element. Everything
+   * else in `rest` (aria-* and style props from AllListProps) stays on
+   * ListEl, since that's the node those props actually describe.
+   */
+  const [dataAttrs, listElRest] = splitDataAttributes(rest);
   const isEmpty = !children || isArray(children) && children.length === 0;
   const isTable = as === 'table';
   const value = useList({
     listType: as,
@@ -62,9 +71,9 @@
   const listContent = /*#__PURE__*/_jsx(ListEl, {
     as: isTable ? 'tbody' : as,
     ref: ref,
     variant: value.variant,
-    ...rest,
+    ...listElRest,
     children: children
   });
   const listContents = /*#__PURE__*/_jsxs(_Fragment, {
     children: [header, isEmpty ? emptyMessage : listContent]
@@ -86,8 +95,9 @@
     children: /*#__PURE__*/_jsxs(ListWrapper, {
       animate: animationVar,
       disableContainerQuery: disableContainerQuery,
       id: id,
+      ...dataAttrs,
       maxHeight: height,
       overflow: overflow,
       position: "relative",
       ref: setWrapperRef,