@codecademy/gamut

Index: package/dist/DatePicker/DatePickerInput/DatePickerRangeInputWrapper/index.js
===================================================================
--- package/dist/DatePicker/DatePickerInput/DatePickerRangeInputWrapper/index.js
+++ package/dist/DatePicker/DatePickerInput/DatePickerRangeInputWrapper/index.js
@@ -0,0 +1,90 @@
+import { MiniArrowLeftIcon, MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useElementDir } from '@codecademy/gamut-styles';
+import { forwardRef, useId, useMemo } from 'react';
+import { Box, FlexBox } from '../../../Box';
+import { FormGroupLabel } from '../../../Form/elements/FormGroupLabel';
+import { DATE_PICKER_FIELD_WIDTH, DATE_PICKER_RANGE_ARROW_WIDTH, DATE_PICKER_SHELL_HEIGHT } from '../../constants';
+import { useDatePicker } from '../../DatePickerContext';
+import { createDatePickerFieldIds } from '../../utils/fieldIds';
+import { DatePickerInputShell } from '../DatePickerInputShell';
+import { DatePickerDescription } from '../elements';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DatePickerRangeInputWrapper = /*#__PURE__*/forwardRef(({
+  description,
+  size = 'base',
+  ...shellProps
+}, ref) => {
+  const {
+    translations
+  } = useDatePicker();
+  const isRtl = useElementDir() === 'rtl';
+  const columnGap = size === 'small' ? 4 : 8;
+  const startUid = useId();
+  const endUid = useId();
+  const startField = useMemo(() => ({
+    fieldIds: createDatePickerFieldIds(startUid, startUid),
+    label: translations.startDateLabel,
+    name: 'datePickerInputStart'
+  }), [startUid, translations.startDateLabel]);
+  const endField = useMemo(() => ({
+    fieldIds: createDatePickerFieldIds(endUid, endUid),
+    label: translations.endDateLabel,
+    name: 'datePickerInputEnd'
+  }), [endUid, translations.endDateLabel]);
+  return /*#__PURE__*/_jsxs(Box, {
+    width: "fit-content",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      columnGap: columnGap,
+      children: [/*#__PURE__*/_jsx(Box, {
+        id: startField.fieldIds.labelledById,
+        width: DATE_PICKER_FIELD_WIDTH,
+        children: /*#__PURE__*/_jsx(FormGroupLabel, {
+          htmlFor: startField.fieldIds.shellId,
+          isSoloField: true,
+          children: startField.label
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        flexShrink: 0,
+        width: DATE_PICKER_RANGE_ARROW_WIDTH
+      }), /*#__PURE__*/_jsx(Box, {
+        id: endField.fieldIds.labelledById,
+        width: DATE_PICKER_FIELD_WIDTH,
+        children: /*#__PURE__*/_jsx(FormGroupLabel, {
+          htmlFor: endField.fieldIds.shellId,
+          isSoloField: true,
+          children: endField.label
+        })
+      })]
+    }), description ? /*#__PURE__*/_jsx(DatePickerDescription, {
+      "aria-live": "assertive",
+      children: description
+    }) : null, /*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "flex-start",
+      columnGap: columnGap,
+      ref: ref,
+      children: [/*#__PURE__*/_jsx(DatePickerInputShell, {
+        ...shellProps,
+        labelledById: startField.fieldIds.labelledById,
+        name: startField.name,
+        rangePart: "start",
+        shellId: startField.fieldIds.shellId,
+        size: size
+      }), /*#__PURE__*/_jsx(FlexBox, {
+        alignItems: "center",
+        alignSelf: "flex-start",
+        center: true,
+        flexShrink: 0,
+        height: DATE_PICKER_SHELL_HEIGHT[size ?? 'base'],
+        width: DATE_PICKER_RANGE_ARROW_WIDTH,
+        children: isRtl ? /*#__PURE__*/_jsx(MiniArrowLeftIcon, {}) : /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
+      }), /*#__PURE__*/_jsx(DatePickerInputShell, {
+        ...shellProps,
+        labelledById: endField.fieldIds.labelledById,
+        name: endField.name,
+        rangePart: "end",
+        shellId: endField.fieldIds.shellId,
+        size: size
+      })]
+    })]
+  });
+});
\ No newline at end of file