@codecademy/gamut

Index: package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarNavNextMonth.js
===================================================================
--- package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarNavNextMonth.js
+++ package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarNavNextMonth.js
@@ -0,0 +1,45 @@
+import { MiniChevronRightIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+import { IconButton } from '../../../Button';
+import { useResolvedLocale } from '../../utils/locale';
+import { getRelativeMonthLabels } from './utils/format';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CalendarNavNextMonth = ({
+  displayDate,
+  onDisplayDateChange,
+  onNextMonthClick,
+  onTabIntoGrid,
+  interceptTabToGrid,
+  locale
+}) => {
+  const resolvedLocale = useResolvedLocale(locale);
+  const {
+    nextMonth
+  } = getRelativeMonthLabels(resolvedLocale);
+  const buttonRef = React.useRef(null);
+  const handleClick = e => {
+    const nextMonth = new Date(displayDate.getFullYear(), displayDate.getMonth() + 1, 1);
+    onDisplayDateChange?.(nextMonth);
+    onNextMonthClick?.();
+    if (e.detail > 0) {
+      buttonRef.current?.blur();
+    }
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Tab' && !e.shiftKey && interceptTabToGrid && onTabIntoGrid) {
+      e.preventDefault();
+      onTabIntoGrid();
+    }
+  };
+  return /*#__PURE__*/_jsx(IconButton, {
+    alignSelf: "flex-end",
+    "aria-label": nextMonth,
+    "data-calendar-month-nav": true,
+    icon: MiniChevronRightIcon,
+    ref: buttonRef,
+    size: "small",
+    tip: nextMonth,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  });
+};
\ No newline at end of file