@codecademy/gamut

Index: package/dist/DatePicker/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -1,13 +1,11 @@
-import { MiniArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
-import { useElementDir } from '@codecademy/gamut-styles';
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Box, FlexBox } from '../Box';
 import { PopoverContainer } from '../PopoverContainer';
 import { DatePickerCalendar } from './DatePickerCalendar';
 import { getDefaultRangeQuickActions, getDefaultSingleQuickActions } from './DatePickerCalendar/utils/quickActions';
 import { DatePickerProvider } from './DatePickerContext';
 import { DatePickerInput } from './DatePickerInput';
+import { DatePickerRangeInputWrapper } from './DatePickerInput/DatePickerRangeInputWrapper';
 import { useResolvedLocale } from './utils/locale';
 import { DEFAULT_DATE_PICKER_TRANSLATIONS } from './utils/translations';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const DatePicker = props => {
@@ -18,18 +16,18 @@
     mode,
     translations: translationsProp,
     inputSize,
     quickActions,
-    placement = 'inline'
+    placement = 'inline',
+    description
   } = props;
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [focusGridSignal, setFocusGridSignal] = useState(false);
   const [gridFocusRequested, setGridFocusRequested] = useState(false);
   const [activeRangePart, setActiveRangePart] = useState(null);
   const inputRef = useRef(null);
   const dialogId = useId();
   const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
-  const isRtl = useElementDir() === 'rtl';
   const clearGridFocusRequest = useCallback(() => {
     setGridFocusRequested(false);
   }, []);
   const resolvedLocale = useResolvedLocale(locale);
@@ -96,29 +94,16 @@
       onSelection: props.onSelected
     };
   }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart]);
   const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(FlexBox, {
-      gap: inputSize === 'small' ? 4 : 8,
+    children: [mode === 'range' ? /*#__PURE__*/_jsx(DatePickerRangeInputWrapper, {
+      description: description,
       ref: inputRef,
-      width: "fit-content",
-      children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputStart",
-          rangePart: "start",
-          size: inputSize
-        }), /*#__PURE__*/_jsx(Box, {
-          alignSelf: "center",
-          mt: 32,
-          children: isRtl ? /*#__PURE__*/_jsx(MiniArrowLeftIcon, {}) : /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
-        }), /*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputEnd",
-          rangePart: "end",
-          size: inputSize
-        })]
-      }) : /*#__PURE__*/_jsx(DatePickerInput, {
-        size: inputSize
-      })
+      size: inputSize
+    }) : /*#__PURE__*/_jsx(DatePickerInput, {
+      description: description,
+      ref: inputRef,
+      size: inputSize
     }), /*#__PURE__*/_jsx(PopoverContainer, {
       alignment: "bottom-left",
       allowPageInteraction: true,
       focusOnProps: {