@codecademy/gamut

Index: package/dist/DatePicker/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -0,0 +1,133 @@
+import { MiniArrowRightIcon } from '@codecademy/gamut-icons';
+import { useCallback, 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 { 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 => {
+  const {
+    locale,
+    shouldDisableDate,
+    children,
+    mode,
+    translations: translationsProp,
+    inputSize,
+    quickActions
+  } = 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 clearGridFocusRequest = useCallback(() => {
+    setGridFocusRequested(false);
+  }, []);
+  const resolvedLocale = useResolvedLocale(locale);
+  const openCalendar = useCallback(() => {
+    setIsCalendarOpen(true);
+  }, []);
+  const focusCalendar = useCallback(() => {
+    setGridFocusRequested(true);
+    setFocusGridSignal(signal => !signal);
+  }, []);
+  const closeCalendar = useCallback(() => {
+    setIsCalendarOpen(false);
+    setActiveRangePart(null);
+    setGridFocusRequested(false);
+    const shell = inputRef.current;
+    const toFocus = shell?.querySelector('[role="spinbutton"]') ?? shell;
+    toFocus?.focus();
+  }, []);
+  const contextValue = useMemo(() => {
+    const translations = {
+      ...DEFAULT_DATE_PICKER_TRANSLATIONS,
+      ...translationsProp
+    };
+    const resolvedQuickActions = quickActions ?? (mode === 'range' ? getDefaultRangeQuickActions(translations) : getDefaultSingleQuickActions(resolvedLocale));
+    const base = {
+      isCalendarOpen,
+      openCalendar,
+      focusCalendar,
+      focusGridSignal,
+      gridFocusRequested,
+      clearGridFocusRequest,
+      closeCalendar,
+      locale: resolvedLocale,
+      shouldDisableDate,
+      calendarDialogId,
+      translations,
+      quickActions: quickActions === null ? [] : resolvedQuickActions
+    };
+    return mode === 'range' ? {
+      ...base,
+      mode: 'range',
+      startDate: props.startDate,
+      endDate: props.endDate,
+      activeRangePart,
+      setActiveRangePart,
+      onRangeSelection: (startDate, endDate) => {
+        props.onStartSelected(startDate);
+        props.onEndSelected(endDate);
+      }
+    } : {
+      ...base,
+      mode: 'single',
+      selectedDate: props.selectedDate,
+      onSelection: props.onSelected
+    };
+  }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, shouldDisableDate, calendarDialogId, props, activeRangePart]);
+  const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      gap: inputSize === 'small' ? 4 : 8,
+      ref: inputRef,
+      width: "fit-content",
+      children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(DatePickerInput, {
+          rangePart: "start",
+          size: inputSize
+        }), /*#__PURE__*/_jsx(Box, {
+          alignSelf: "center",
+          mt: 32,
+          children: /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
+        }), /*#__PURE__*/_jsx(DatePickerInput, {
+          rangePart: "end",
+          size: inputSize
+        })]
+      }) : /*#__PURE__*/_jsx(DatePickerInput, {
+        size: inputSize
+      })
+    }), /*#__PURE__*/_jsx(PopoverContainer, {
+      alignment: "bottom-left",
+      allowPageInteraction: true,
+      focusOnProps: {
+        autoFocus: false,
+        focusLock: false
+      },
+      invertAxis: "x",
+      isOpen: isCalendarOpen,
+      targetRef: inputRef,
+      x: -20,
+      y: -16,
+      onRequestClose: closeCalendar,
+      children: /*#__PURE__*/_jsx("div", {
+        "aria-label": contextValue.translations.calendarDialogAriaLabel,
+        id: calendarDialogId,
+        role: "dialog",
+        children: /*#__PURE__*/_jsx(DatePickerCalendar, {
+          dialogId: calendarDialogId
+        })
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx(DatePickerProvider, {
+    value: contextValue,
+    children: content
+  });
+};
\ No newline at end of file