@codecademy/gamut

Index: package/dist/DatePicker/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -1,6 +1,7 @@
 import { MiniArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
 import { useElementDir } from '@codecademy/gamut-styles';
+import omit from 'lodash/omit';
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Box, FlexBox } from '../Box';
 import { PopoverContainer } from '../PopoverContainer';
 import { DatePickerCalendar } from './DatePickerCalendar';
@@ -20,8 +21,16 @@
     inputSize,
     quickActions,
     placement = 'inline'
   } = props;
+
+  /*
+   * `props` is a discriminated union, so the mode-specific fields
+   * (selectedDate/onSelected or startDate/endDate/onStartSelected/onEndSelected)
+   * can't be destructured directly without narrowing. Strip them out at
+   * runtime instead so only real DOM attributes reach the wrapper below.
+   */
+  const rest = omit(props, ['locale', 'disableDate', 'children', 'mode', 'translations', 'inputSize', 'quickActions', 'placement', 'selectedDate', 'onSelected', 'startDate', 'endDate', 'onStartSelected', 'onEndSelected']);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [focusGridSignal, setFocusGridSignal] = useState(false);
   const [gridFocusRequested, setGridFocusRequested] = useState(false);
   const [activeRangePart, setActiveRangePart] = useState(null);
@@ -100,8 +109,9 @@
     };
   }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart, hasError, setHasError]);
   const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(FlexBox, {
+      ...rest,
       gap: inputSize === 'small' ? 4 : 8,
       ref: inputRef,
       width: "fit-content",
       children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {