@codecademy/gamut

Index: package/dist/DatePicker/Calendar/CalendarHeader.js
===================================================================
--- package/dist/DatePicker/Calendar/CalendarHeader.js
+++ package/dist/DatePicker/Calendar/CalendarHeader.js
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { FlexBox } from '../../Box';
+import { Text } from '../../Typography';
+import { useResolvedLocale } from '../utils/locale';
+import { CalendarNavLastMonth } from './CalendarNavLastMonth';
+import { CalendarNavNextMonth } from './CalendarNavNextMonth';
+import { formatMonthYear } from './utils/format';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarHeader = ({
+  displayDate,
+  locale,
+  headingId,
+  onDisplayDateChange,
+  hideLastNav,
+  hideNextNav,
+  onLastMonthClick,
+  onNextMonthClick
+}) => {
+  const resolvedLocale = useResolvedLocale(locale);
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: "center",
+    pb: 8,
+    children: [!hideLastNav && /*#__PURE__*/_jsx(CalendarNavLastMonth, {
+      displayDate: displayDate,
+      locale: locale,
+      onDisplayDateChange: onDisplayDateChange,
+      onLastMonthClick: onLastMonthClick
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      justifyContent: "center",
+      width: "100%",
+      children: /*#__PURE__*/_jsx(Text, {
+        "aria-live": "polite",
+        fontSize: 16,
+        fontWeight: "title",
+        id: headingId,
+        textAlign: "center",
+        children: formatMonthYear(displayDate, resolvedLocale)
+      })
+    }), !hideNextNav && /*#__PURE__*/_jsx(CalendarNavNextMonth, {
+      displayDate: displayDate,
+      locale: locale,
+      onDisplayDateChange: onDisplayDateChange,
+      onNextMonthClick: onNextMonthClick
+    })]
+  });
+};
\ No newline at end of file