@codecademy/gamut 68.1.2 → 68.1.3-alpha.bcf87d.0

package/dist/ConnectedForm/utils.d.ts

@@ -122,9 +122,9 @@ export declare function useDebouncedField<T extends InputTypes>({ name, watchUpd
     value: T extends "checkbox" ? boolean : string;
     error: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
     ref: import("react-hook-form").UseFormRegisterReturn<string>;
-    control: import("react-hook-form").Control<import("react-hook-form").FieldValues, any, import("react-hook-form").FieldValues>;
     isDisabled: boolean;
     isLoading: boolean | undefined;
+    control: import("react-hook-form").Control<import("react-hook-form").FieldValues, any, import("react-hook-form").FieldValues>;
     isSoloField: boolean | undefined;
     validation: RegisterOptions | undefined;
     getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;

package/dist/DatePicker/Calendar/Calendar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * Outer wrapper for the calendar (header + body + footer).
+ * Used by DatePickerCalendar to group the calendar content.
+ */
+export declare const Calendar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/DatePicker/Calendar/Calendar.js

@@ -0,0 +1,15 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+/**
+ * Outer wrapper for the calendar (header + body + footer).
+ * Used by DatePickerCalendar to group the calendar content.
+ */
+export const Calendar = /*#__PURE__*/_styled("div", {
+  target: "eq0g1i20",
+  label: "Calendar"
+})(css({
+  backgroundColor: 'background',
+  borderRadius: 'lg',
+  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
+  width: 'max-content'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL0NhbGVuZGFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0RhdGVQaWNrZXIvQ2FsZW5kYXIvQ2FsZW5kYXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBPdXRlciB3cmFwcGVyIGZvciB0aGUgY2FsZW5kYXIgKGhlYWRlciArIGJvZHkgKyBmb290ZXIpLlxuICogVXNlZCBieSBEYXRlUGlja2VyQ2FsZW5kYXIgdG8gZ3JvdXAgdGhlIGNhbGVuZGFyIGNvbnRlbnQuXG4gKi9cbmV4cG9ydCBjb25zdCBDYWxlbmRhciA9IHN0eWxlZC5kaXYoXG4gIGNzcyh7XG4gICAgYmFja2dyb3VuZENvbG9yOiAnYmFja2dyb3VuZCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnbGcnLFxuICAgIGJveFNoYWRvdzogJzAgNHB4IDE2cHggcmdiYSgwLCAwLCAwLCAwLjEyKScsXG4gICAgd2lkdGg6ICdtYXgtY29udGVudCcsXG4gIH0pXG4pO1xuIl19 */");

package/dist/DatePicker/Calendar/CalendarBody.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CalendarBodyProps } from './types';
+export declare const CalendarBody: React.FC<CalendarBodyProps>;

package/dist/DatePicker/Calendar/CalendarBody.js

@@ -0,0 +1,155 @@
+import _styled from "@emotion/styled/base";
+import { css, states } from '@codecademy/gamut-styles';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import * as React from 'react';
+import { TextButton } from '../../Button';
+import { getMonthGrid, isDateDisabled, isDateInRange, isSameDay } from './utils/dateGrid';
+import { getWeekdayFullNames, getWeekdayLabels } from './utils/format';
+import { getDatesWithRow, keyHandler } from './utils/keyHandler';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TableHeader = /*#__PURE__*/_styled("th", {
+  target: "e12sl4cx1",
+  label: "TableHeader"
+})(css({
+  fontSize: 14,
+  fontWeight: 'base',
+  color: 'text-disabled',
+  textAlign: 'center'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL0NhbGVuZGFyQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9DYWxlbmRhci9DYWxlbmRhckJvZHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBzdGF0ZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUZXh0QnV0dG9uIH0gZnJvbSAnLi4vLi4vQnV0dG9uJztcbmltcG9ydCB7IENhbGVuZGFyQm9keVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQge1xuICBnZXRNb250aEdyaWQsXG4gIGlzRGF0ZURpc2FibGVkLFxuICBpc0RhdGVJblJhbmdlLFxuICBpc1NhbWVEYXksXG59IGZyb20gJy4vdXRpbHMvZGF0ZUdyaWQnO1xuaW1wb3J0IHsgZ2V0V2Vla2RheUZ1bGxOYW1lcywgZ2V0V2Vla2RheUxhYmVscyB9IGZyb20gJy4vdXRpbHMvZm9ybWF0JztcbmltcG9ydCB7IGdldERhdGVzV2l0aFJvdywga2V5SGFuZGxlciB9IGZyb20gJy4vdXRpbHMva2V5SGFuZGxlcic7XG5cbmNvbnN0IFRhYmxlSGVhZGVyID0gc3R5bGVkLnRoKFxuICBjc3Moe1xuICAgIGZvbnRTaXplOiAxNCxcbiAgICBmb250V2VpZ2h0OiAnYmFzZScsXG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB9KVxuKTtcblxuY29uc3QgRGF0ZUJ1dHRvbiA9IHN0eWxlZChUZXh0QnV0dG9uKShcbiAgc3RhdGVzKHtcbiAgICBpc1RvZGF5OiB7XG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICcmOjphZnRlcic6IHtcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgYm90dG9tOiA0LFxuICAgICAgICBsZWZ0OiAnNTAlJyxcbiAgICAgICAgd2lkdGg6IDQsXG4gICAgICAgIGhlaWdodDogNCxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnZnVsbCcsXG4gICAgICAgIGJnOiAnaHlwZXInLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGlzU2VsZWN0ZWQ6IHtcbiAgICAgIGJnOiAndGV4dCcsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIH0sXG4gICAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZCcsXG4gICAgICB9LFxuICAgIH0sXG4gICAgaXNJblJhbmdlOiB7XG4gICAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIGJvcmRlclJhZGl1czogJ25vbmUnLFxuICAgICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIH0sXG4gICAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZCcsXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGlzYWJsZWQ6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICB0ZXh0RGVjb3JhdGlvbjogJ2xpbmUtdGhyb3VnaCcsXG4gICAgfSxcbiAgfSksXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJCb2R5OiBSZWFjdC5GQzxDYWxlbmRhckJvZHlQcm9wcz4gPSAoe1xuICB2aXNpYmxlRGF0ZSxcbiAgc2VsZWN0ZWREYXRlLFxuICBlbmREYXRlID0gbnVsbCxcbiAgZGlzYWJsZWREYXRlcyA9IFtdLFxuICBvbkRhdGVTZWxlY3QsXG4gIGxvY2FsZSxcbiAgd2Vla1N0YXJ0c09uID0gMCxcbiAgbGFiZWxsZWRCeUlkLFxuICBmb2N1c2VkRGF0ZSxcbiAgb25Gb2N1c2VkRGF0ZUNoYW5nZSxcbiAgb25WaXNpYmxlRGF0ZUNoYW5nZSxcbiAgb25Fc2NhcGVLZXlQcmVzcyxcbn0pID0+IHtcbiAgY29uc3QgeWVhciA9IHZpc2libGVEYXRlLmdldEZ1bGxZZWFyKCk7XG4gIGNvbnN0IG1vbnRoID0gdmlzaWJsZURhdGUuZ2V0TW9udGgoKTtcbiAgY29uc3Qgd2Vla3MgPSBnZXRNb250aEdyaWQoeWVhciwgbW9udGgsIHdlZWtTdGFydHNPbik7XG4gIGNvbnN0IHdlZWtkYXlMYWJlbHMgPSBnZXRXZWVrZGF5TGFiZWxzKGxvY2FsZSwgd2Vla1N0YXJ0c09uKTtcbiAgY29uc3Qgd2Vla2RheUZ1bGxOYW1lcyA9IGdldFdlZWtkYXlGdWxsTmFtZXMobG9jYWxlLCB3ZWVrU3RhcnRzT24pO1xuICBjb25zdCBidXR0b25SZWZzID0gdXNlUmVmPE1hcDxudW1iZXIsIEhUTUxFbGVtZW50Pj4obmV3IE1hcCgpKTtcblxuICBjb25zdCBkYXRlc1dpdGhSb3cgPSB1c2VNZW1vKCgpID0+IGdldERhdGVzV2l0aFJvdyh3ZWVrcyksIFt3ZWVrc10pO1xuICBjb25zdCBmb2N1c1RhcmdldCA9IGZvY3VzZWREYXRlID8/IHNlbGVjdGVkRGF0ZTtcblxuICBjb25zdCBpc1RvZGF5ID0gdXNlQ2FsbGJhY2soXG4gICAgKGQ6IERhdGUgfCBudWxsKSA9PiBkICE9PSBudWxsICYmIGlzU2FtZURheShkLCBuZXcgRGF0ZSgpKSxcbiAgICBbXVxuICApO1xuXG4gIGNvbnN0IGZvY3VzQnV0dG9uID0gdXNlQ2FsbGJhY2soKGRhdGU6IERhdGUgfCBudWxsKSA9PiB7XG4gICAgaWYgKGRhdGUgPT09IG51bGwpIHJldHVybjtcbiAgICBjb25zdCBrZXkgPSBuZXcgRGF0ZShcbiAgICAgIGRhdGUuZ2V0RnVsbFllYXIoKSxcbiAgICAgIGRhdGUuZ2V0TW9udGgoKSxcbiAgICAgIGRhdGUuZ2V0RGF0ZSgpXG4gICAgKS5nZXRUaW1lKCk7XG4gICAgYnV0dG9uUmVmcy5jdXJyZW50LmdldChrZXkpPy5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNUYXJnZXQgIT09IG51bGwpIGZvY3VzQnV0dG9uKGZvY3VzVGFyZ2V0KTtcbiAgfSwgW2ZvY3VzVGFyZ2V0LCBmb2N1c0J1dHRvbl0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSB1c2VDYWxsYmFjayhcbiAgICAoZTogUmVhY3QuS2V5Ym9hcmRFdmVudCwgZGF0ZTogRGF0ZSkgPT5cbiAgICAgIGtleUhhbmRsZXIoXG4gICAgICAgIGUsXG4gICAgICAgIGRhdGUsXG4gICAgICAgIG9uRm9jdXNlZERhdGVDaGFuZ2UsXG4gICAgICAgIGRhdGVzV2l0aFJvdyxcbiAgICAgICAgbW9udGgsXG4gICAgICAgIHllYXIsXG4gICAgICAgIGRpc2FibGVkRGF0ZXMsXG4gICAgICAgIG9uRGF0ZVNlbGVjdCxcbiAgICAgICAgb25Fc2NhcGVLZXlQcmVzcyxcbiAgICAgICAgb25WaXNpYmxlRGF0ZUNoYW5nZVxuICAgICAgKSxcbiAgICBbXG4gICAgICBvbkZvY3VzZWREYXRlQ2hhbmdlLFxuICAgICAgZGF0ZXNXaXRoUm93LFxuICAgICAgbW9udGgsXG4gICAgICB5ZWFyLFxuICAgICAgZGlzYWJsZWREYXRlcyxcbiAgICAgIG9uRGF0ZVNlbGVjdCxcbiAgICAgIG9uRXNjYXBlS2V5UHJlc3MsXG4gICAgICBvblZpc2libGVEYXRlQ2hhbmdlLFxuICAgIF1cbiAgKTtcblxuICBjb25zdCBzZXRCdXR0b25SZWYgPSB1c2VDYWxsYmFjaygoZGF0ZTogRGF0ZSwgZWw6IEhUTUxFbGVtZW50IHwgbnVsbCkgPT4ge1xuICAgIGNvbnN0IGsgPSBuZXcgRGF0ZShcbiAgICAgIGRhdGUuZ2V0RnVsbFllYXIoKSxcbiAgICAgIGRhdGUuZ2V0TW9udGgoKSxcbiAgICAgIGRhdGUuZ2V0RGF0ZSgpXG4gICAgKS5nZXRUaW1lKCk7XG4gICAgaWYgKGVsKSBidXR0b25SZWZzLmN1cnJlbnQuc2V0KGssIGVsKTtcbiAgICBlbHNlIGJ1dHRvblJlZnMuY3VycmVudC5kZWxldGUoayk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDx0YWJsZSBhcmlhLWxhYmVsbGVkYnk9e2xhYmVsbGVkQnlJZH0gcm9sZT1cImdyaWRcIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgIDx0aGVhZD5cbiAgICAgICAgPHRyPlxuICAgICAgICAgIHt3ZWVrZGF5TGFiZWxzLm1hcCgobGFiZWwsIGkpID0+IChcbiAgICAgICAgICAgIDxUYWJsZUhlYWRlciBhYmJyPXt3ZWVrZGF5RnVsbE5hbWVzW2ldfSBrZXk9e2xhYmVsfSBzY29wZT1cImNvbFwiPlxuICAgICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICA8L1RhYmxlSGVhZGVyPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L3RyPlxuICAgICAgPC90aGVhZD5cbiAgICAgIDx0Ym9keT5cbiAgICAgICAge3dlZWtzLm1hcCgod2Vlaywgcm93SW5kZXgpID0+IChcbiAgICAgICAgICA8dHIga2V5PXt3ZWVrLmpvaW4oJy0nKX0+XG4gICAgICAgICAgICB7d2Vlay5tYXAoKGRhdGUsIGNvbEluZGV4KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChkYXRlID09PSBudWxsKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgIC8vIGZpeCB0aGlzIGVycm9yXG4gICAgICAgICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tYXJyYXktaW5kZXgta2V5LCBqc3gtYTExeS9jb250cm9sLWhhcy1hc3NvY2lhdGVkLWxhYmVsXG4gICAgICAgICAgICAgICAgICA8dGQga2V5PXtgZW1wdHktJHtyb3dJbmRleH0tJHtjb2xJbmRleH1gfSByb2xlPVwiZ3JpZGNlbGxcIiAvPlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgY29uc3Qgc2VsZWN0ZWQgPVxuICAgICAgICAgICAgICAgIGlzU2FtZURheShkYXRlLCBzZWxlY3RlZERhdGUpIHx8IGlzU2FtZURheShkYXRlLCBlbmREYXRlKTtcbiAgICAgICAgICAgICAgY29uc3QgaW5SYW5nZSA9XG4gICAgICAgICAgICAgICAgISFzZWxlY3RlZERhdGUgJiZcbiAgICAgICAgICAgICAgICAhIWVuZERhdGUgJiZcbiAgICAgICAgICAgICAgICBpc0RhdGVJblJhbmdlKGRhdGUsIHNlbGVjdGVkRGF0ZSwgZW5kRGF0ZSk7XG4gICAgICAgICAgICAgIGNvbnN0IGRpc2FibGVkID0gaXNEYXRlRGlzYWJsZWQoZGF0ZSwgZGlzYWJsZWREYXRlcyk7XG4gICAgICAgICAgICAgIGNvbnN0IHRvZGF5ID0gaXNUb2RheShkYXRlKTtcbiAgICAgICAgICAgICAgLy8gdGhpcyBpcyBtYWtpbmcgdGhlIHNlbGVjdGVkIGRhdGUgYSBkaWZmZXJuZXQgY29sb3IgYmMgaXQgaXMgZm9jdXNlZCwgbG9vayBpbnRvIGZ1cnRoZXJcbiAgICAgICAgICAgICAgY29uc3QgaXNGb2N1c2VkID1cbiAgICAgICAgICAgICAgICBmb2N1c1RhcmdldCAhPT0gbnVsbCAmJiBpc1NhbWVEYXkoZGF0ZSwgZm9jdXNUYXJnZXQpO1xuXG4gICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgPHRkXG4gICAgICAgICAgICAgICAgICBhcmlhLXNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgICAgICAgICAgICAgIGtleT17ZGF0ZS5nZXRUaW1lKCl9XG4gICAgICAgICAgICAgICAgICByb2xlPVwiZ3JpZGNlbGxcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIDxEYXRlQnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgICAgICAgICAgaXNJblJhbmdlPXtpblJhbmdlfVxuICAgICAgICAgICAgICAgICAgICBpc1NlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgICAgICAgICAgICAgICAgaXNUb2RheT17dG9kYXl9XG4gICAgICAgICAgICAgICAgICAgIHJlZj17KGVsKSA9PiBzZXRCdXR0b25SZWYoZGF0ZSwgZWwgYXMgSFRNTEVsZW1lbnQgfCBudWxsKX1cbiAgICAgICAgICAgICAgICAgICAgdGFiSW5kZXg9e2lzRm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IG9uRGF0ZVNlbGVjdChkYXRlKX1cbiAgICAgICAgICAgICAgICAgICAgb25Gb2N1cz17KCkgPT4gb25Gb2N1c2VkRGF0ZUNoYW5nZT8uKGRhdGUpfVxuICAgICAgICAgICAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50KSA9PlxuICAgICAgICAgICAgICAgICAgICAgIGhhbmRsZUtleURvd24oZSwgZGF0ZSlcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7ZGF0ZS5nZXREYXRlKCl9XG4gICAgICAgICAgICAgICAgICA8L0RhdGVCdXR0b24+XG4gICAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvdHI+XG4gICAgICAgICkpfVxuICAgICAgPC90Ym9keT5cbiAgICA8L3RhYmxlPlxuICApO1xufTtcbiJdfQ== */");
+const DateButton = /*#__PURE__*/_styled(TextButton, {
+  target: "e12sl4cx0",
+  label: "DateButton"
+})(states({
+  isToday: {
+    position: 'relative',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      bottom: 4,
+      left: '50%',
+      width: 4,
+      height: 4,
+      borderRadius: 'full',
+      bg: 'hyper'
+    }
+  },
+  isSelected: {
+    bg: 'text',
+    color: 'background',
+    '&:hover, &:focus': {
+      bg: 'secondary-hover',
+      color: 'background'
+    },
+    '&::after': {
+      bg: 'background'
+    }
+  },
+  isInRange: {
+    bg: 'text-disabled',
+    color: 'background',
+    borderRadius: 'none',
+    '&:hover, &:focus': {
+      bg: 'secondary-hover',
+      color: 'background'
+    },
+    '&::after': {
+      bg: 'background'
+    }
+  },
+  disabled: {
+    color: 'text-disabled',
+    textDecoration: 'line-through'
+  }
+}), css({
+  fontWeight: 'base',
+  width: '32px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9EYXRlUGlja2VyL0NhbGVuZGFyL0NhbGVuZGFyQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJtQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvRGF0ZVBpY2tlci9DYWxlbmRhci9DYWxlbmRhckJvZHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBzdGF0ZXMgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBUZXh0QnV0dG9uIH0gZnJvbSAnLi4vLi4vQnV0dG9uJztcbmltcG9ydCB7IENhbGVuZGFyQm9keVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQge1xuICBnZXRNb250aEdyaWQsXG4gIGlzRGF0ZURpc2FibGVkLFxuICBpc0RhdGVJblJhbmdlLFxuICBpc1NhbWVEYXksXG59IGZyb20gJy4vdXRpbHMvZGF0ZUdyaWQnO1xuaW1wb3J0IHsgZ2V0V2Vla2RheUZ1bGxOYW1lcywgZ2V0V2Vla2RheUxhYmVscyB9IGZyb20gJy4vdXRpbHMvZm9ybWF0JztcbmltcG9ydCB7IGdldERhdGVzV2l0aFJvdywga2V5SGFuZGxlciB9IGZyb20gJy4vdXRpbHMva2V5SGFuZGxlcic7XG5cbmNvbnN0IFRhYmxlSGVhZGVyID0gc3R5bGVkLnRoKFxuICBjc3Moe1xuICAgIGZvbnRTaXplOiAxNCxcbiAgICBmb250V2VpZ2h0OiAnYmFzZScsXG4gICAgY29sb3I6ICd0ZXh0LWRpc2FibGVkJyxcbiAgICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB9KVxuKTtcblxuY29uc3QgRGF0ZUJ1dHRvbiA9IHN0eWxlZChUZXh0QnV0dG9uKShcbiAgc3RhdGVzKHtcbiAgICBpc1RvZGF5OiB7XG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICcmOjphZnRlcic6IHtcbiAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgYm90dG9tOiA0LFxuICAgICAgICBsZWZ0OiAnNTAlJyxcbiAgICAgICAgd2lkdGg6IDQsXG4gICAgICAgIGhlaWdodDogNCxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnZnVsbCcsXG4gICAgICAgIGJnOiAnaHlwZXInLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGlzU2VsZWN0ZWQ6IHtcbiAgICAgIGJnOiAndGV4dCcsXG4gICAgICBjb2xvcjogJ2JhY2tncm91bmQnLFxuICAgICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIH0sXG4gICAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZCcsXG4gICAgICB9LFxuICAgIH0sXG4gICAgaXNJblJhbmdlOiB7XG4gICAgICBiZzogJ3RleHQtZGlzYWJsZWQnLFxuICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIGJvcmRlclJhZGl1czogJ25vbmUnLFxuICAgICAgJyY6aG92ZXIsICY6Zm9jdXMnOiB7XG4gICAgICAgIGJnOiAnc2Vjb25kYXJ5LWhvdmVyJyxcbiAgICAgICAgY29sb3I6ICdiYWNrZ3JvdW5kJyxcbiAgICAgIH0sXG4gICAgICAnJjo6YWZ0ZXInOiB7XG4gICAgICAgIGJnOiAnYmFja2dyb3VuZCcsXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGlzYWJsZWQ6IHtcbiAgICAgIGNvbG9yOiAndGV4dC1kaXNhYmxlZCcsXG4gICAgICB0ZXh0RGVjb3JhdGlvbjogJ2xpbmUtdGhyb3VnaCcsXG4gICAgfSxcbiAgfSksXG4gIGNzcyh7XG4gICAgZm9udFdlaWdodDogJ2Jhc2UnLFxuICAgIHdpZHRoOiAnMzJweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJCb2R5OiBSZWFjdC5GQzxDYWxlbmRhckJvZHlQcm9wcz4gPSAoe1xuICB2aXNpYmxlRGF0ZSxcbiAgc2VsZWN0ZWREYXRlLFxuICBlbmREYXRlID0gbnVsbCxcbiAgZGlzYWJsZWREYXRlcyA9IFtdLFxuICBvbkRhdGVTZWxlY3QsXG4gIGxvY2FsZSxcbiAgd2Vla1N0YXJ0c09uID0gMCxcbiAgbGFiZWxsZWRCeUlkLFxuICBmb2N1c2VkRGF0ZSxcbiAgb25Gb2N1c2VkRGF0ZUNoYW5nZSxcbiAgb25WaXNpYmxlRGF0ZUNoYW5nZSxcbiAgb25Fc2NhcGVLZXlQcmVzcyxcbn0pID0+IHtcbiAgY29uc3QgeWVhciA9IHZpc2libGVEYXRlLmdldEZ1bGxZZWFyKCk7XG4gIGNvbnN0IG1vbnRoID0gdmlzaWJsZURhdGUuZ2V0TW9udGgoKTtcbiAgY29uc3Qgd2Vla3MgPSBnZXRNb250aEdyaWQoeWVhciwgbW9udGgsIHdlZWtTdGFydHNPbik7XG4gIGNvbnN0IHdlZWtkYXlMYWJlbHMgPSBnZXRXZWVrZGF5TGFiZWxzKGxvY2FsZSwgd2Vla1N0YXJ0c09uKTtcbiAgY29uc3Qgd2Vla2RheUZ1bGxOYW1lcyA9IGdldFdlZWtkYXlGdWxsTmFtZXMobG9jYWxlLCB3ZWVrU3RhcnRzT24pO1xuICBjb25zdCBidXR0b25SZWZzID0gdXNlUmVmPE1hcDxudW1iZXIsIEhUTUxFbGVtZW50Pj4obmV3IE1hcCgpKTtcblxuICBjb25zdCBkYXRlc1dpdGhSb3cgPSB1c2VNZW1vKCgpID0+IGdldERhdGVzV2l0aFJvdyh3ZWVrcyksIFt3ZWVrc10pO1xuICBjb25zdCBmb2N1c1RhcmdldCA9IGZvY3VzZWREYXRlID8/IHNlbGVjdGVkRGF0ZTtcblxuICBjb25zdCBpc1RvZGF5ID0gdXNlQ2FsbGJhY2soXG4gICAgKGQ6IERhdGUgfCBudWxsKSA9PiBkICE9PSBudWxsICYmIGlzU2FtZURheShkLCBuZXcgRGF0ZSgpKSxcbiAgICBbXVxuICApO1xuXG4gIGNvbnN0IGZvY3VzQnV0dG9uID0gdXNlQ2FsbGJhY2soKGRhdGU6IERhdGUgfCBudWxsKSA9PiB7XG4gICAgaWYgKGRhdGUgPT09IG51bGwpIHJldHVybjtcbiAgICBjb25zdCBrZXkgPSBuZXcgRGF0ZShcbiAgICAgIGRhdGUuZ2V0RnVsbFllYXIoKSxcbiAgICAgIGRhdGUuZ2V0TW9udGgoKSxcbiAgICAgIGRhdGUuZ2V0RGF0ZSgpXG4gICAgKS5nZXRUaW1lKCk7XG4gICAgYnV0dG9uUmVmcy5jdXJyZW50LmdldChrZXkpPy5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoZm9jdXNUYXJnZXQgIT09IG51bGwpIGZvY3VzQnV0dG9uKGZvY3VzVGFyZ2V0KTtcbiAgfSwgW2ZvY3VzVGFyZ2V0LCBmb2N1c0J1dHRvbl0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSB1c2VDYWxsYmFjayhcbiAgICAoZTogUmVhY3QuS2V5Ym9hcmRFdmVudCwgZGF0ZTogRGF0ZSkgPT5cbiAgICAgIGtleUhhbmRsZXIoXG4gICAgICAgIGUsXG4gICAgICAgIGRhdGUsXG4gICAgICAgIG9uRm9jdXNlZERhdGVDaGFuZ2UsXG4gICAgICAgIGRhdGVzV2l0aFJvdyxcbiAgICAgICAgbW9udGgsXG4gICAgICAgIHllYXIsXG4gICAgICAgIGRpc2FibGVkRGF0ZXMsXG4gICAgICAgIG9uRGF0ZVNlbGVjdCxcbiAgICAgICAgb25Fc2NhcGVLZXlQcmVzcyxcbiAgICAgICAgb25WaXNpYmxlRGF0ZUNoYW5nZVxuICAgICAgKSxcbiAgICBbXG4gICAgICBvbkZvY3VzZWREYXRlQ2hhbmdlLFxuICAgICAgZGF0ZXNXaXRoUm93LFxuICAgICAgbW9udGgsXG4gICAgICB5ZWFyLFxuICAgICAgZGlzYWJsZWREYXRlcyxcbiAgICAgIG9uRGF0ZVNlbGVjdCxcbiAgICAgIG9uRXNjYXBlS2V5UHJlc3MsXG4gICAgICBvblZpc2libGVEYXRlQ2hhbmdlLFxuICAgIF1cbiAgKTtcblxuICBjb25zdCBzZXRCdXR0b25SZWYgPSB1c2VDYWxsYmFjaygoZGF0ZTogRGF0ZSwgZWw6IEhUTUxFbGVtZW50IHwgbnVsbCkgPT4ge1xuICAgIGNvbnN0IGsgPSBuZXcgRGF0ZShcbiAgICAgIGRhdGUuZ2V0RnVsbFllYXIoKSxcbiAgICAgIGRhdGUuZ2V0TW9udGgoKSxcbiAgICAgIGRhdGUuZ2V0RGF0ZSgpXG4gICAgKS5nZXRUaW1lKCk7XG4gICAgaWYgKGVsKSBidXR0b25SZWZzLmN1cnJlbnQuc2V0KGssIGVsKTtcbiAgICBlbHNlIGJ1dHRvblJlZnMuY3VycmVudC5kZWxldGUoayk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDx0YWJsZSBhcmlhLWxhYmVsbGVkYnk9e2xhYmVsbGVkQnlJZH0gcm9sZT1cImdyaWRcIiB3aWR0aD1cIjEwMCVcIj5cbiAgICAgIDx0aGVhZD5cbiAgICAgICAgPHRyPlxuICAgICAgICAgIHt3ZWVrZGF5TGFiZWxzLm1hcCgobGFiZWwsIGkpID0+IChcbiAgICAgICAgICAgIDxUYWJsZUhlYWRlciBhYmJyPXt3ZWVrZGF5RnVsbE5hbWVzW2ldfSBrZXk9e2xhYmVsfSBzY29wZT1cImNvbFwiPlxuICAgICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICA8L1RhYmxlSGVhZGVyPlxuICAgICAgICAgICkpfVxuICAgICAgICA8L3RyPlxuICAgICAgPC90aGVhZD5cbiAgICAgIDx0Ym9keT5cbiAgICAgICAge3dlZWtzLm1hcCgod2Vlaywgcm93SW5kZXgpID0+IChcbiAgICAgICAgICA8dHIga2V5PXt3ZWVrLmpvaW4oJy0nKX0+XG4gICAgICAgICAgICB7d2Vlay5tYXAoKGRhdGUsIGNvbEluZGV4KSA9PiB7XG4gICAgICAgICAgICAgIGlmIChkYXRlID09PSBudWxsKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgIC8vIGZpeCB0aGlzIGVycm9yXG4gICAgICAgICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3Qvbm8tYXJyYXktaW5kZXgta2V5LCBqc3gtYTExeS9jb250cm9sLWhhcy1hc3NvY2lhdGVkLWxhYmVsXG4gICAgICAgICAgICAgICAgICA8dGQga2V5PXtgZW1wdHktJHtyb3dJbmRleH0tJHtjb2xJbmRleH1gfSByb2xlPVwiZ3JpZGNlbGxcIiAvPlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgY29uc3Qgc2VsZWN0ZWQgPVxuICAgICAgICAgICAgICAgIGlzU2FtZURheShkYXRlLCBzZWxlY3RlZERhdGUpIHx8IGlzU2FtZURheShkYXRlLCBlbmREYXRlKTtcbiAgICAgICAgICAgICAgY29uc3QgaW5SYW5nZSA9XG4gICAgICAgICAgICAgICAgISFzZWxlY3RlZERhdGUgJiZcbiAgICAgICAgICAgICAgICAhIWVuZERhdGUgJiZcbiAgICAgICAgICAgICAgICBpc0RhdGVJblJhbmdlKGRhdGUsIHNlbGVjdGVkRGF0ZSwgZW5kRGF0ZSk7XG4gICAgICAgICAgICAgIGNvbnN0IGRpc2FibGVkID0gaXNEYXRlRGlzYWJsZWQoZGF0ZSwgZGlzYWJsZWREYXRlcyk7XG4gICAgICAgICAgICAgIGNvbnN0IHRvZGF5ID0gaXNUb2RheShkYXRlKTtcbiAgICAgICAgICAgICAgLy8gdGhpcyBpcyBtYWtpbmcgdGhlIHNlbGVjdGVkIGRhdGUgYSBkaWZmZXJuZXQgY29sb3IgYmMgaXQgaXMgZm9jdXNlZCwgbG9vayBpbnRvIGZ1cnRoZXJcbiAgICAgICAgICAgICAgY29uc3QgaXNGb2N1c2VkID1cbiAgICAgICAgICAgICAgICBmb2N1c1RhcmdldCAhPT0gbnVsbCAmJiBpc1NhbWVEYXkoZGF0ZSwgZm9jdXNUYXJnZXQpO1xuXG4gICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgPHRkXG4gICAgICAgICAgICAgICAgICBhcmlhLXNlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgICAgICAgICAgICAgIGtleT17ZGF0ZS5nZXRUaW1lKCl9XG4gICAgICAgICAgICAgICAgICByb2xlPVwiZ3JpZGNlbGxcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIDxEYXRlQnV0dG9uXG4gICAgICAgICAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgICAgICAgICAgaXNJblJhbmdlPXtpblJhbmdlfVxuICAgICAgICAgICAgICAgICAgICBpc1NlbGVjdGVkPXtzZWxlY3RlZH1cbiAgICAgICAgICAgICAgICAgICAgaXNUb2RheT17dG9kYXl9XG4gICAgICAgICAgICAgICAgICAgIHJlZj17KGVsKSA9PiBzZXRCdXR0b25SZWYoZGF0ZSwgZWwgYXMgSFRNTEVsZW1lbnQgfCBudWxsKX1cbiAgICAgICAgICAgICAgICAgICAgdGFiSW5kZXg9e2lzRm9jdXNlZCA/IDAgOiAtMX1cbiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IG9uRGF0ZVNlbGVjdChkYXRlKX1cbiAgICAgICAgICAgICAgICAgICAgb25Gb2N1cz17KCkgPT4gb25Gb2N1c2VkRGF0ZUNoYW5nZT8uKGRhdGUpfVxuICAgICAgICAgICAgICAgICAgICBvbktleURvd249eyhlOiBSZWFjdC5LZXlib2FyZEV2ZW50KSA9PlxuICAgICAgICAgICAgICAgICAgICAgIGhhbmRsZUtleURvd24oZSwgZGF0ZSlcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7ZGF0ZS5nZXREYXRlKCl9XG4gICAgICAgICAgICAgICAgICA8L0RhdGVCdXR0b24+XG4gICAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvdHI+XG4gICAgICAgICkpfVxuICAgICAgPC90Ym9keT5cbiAgICA8L3RhYmxlPlxuICApO1xufTtcbiJdfQ== */");
+export const CalendarBody = ({
+  visibleDate,
+  selectedDate,
+  endDate = null,
+  disabledDates = [],
+  onDateSelect,
+  locale,
+  weekStartsOn = 0,
+  labelledById,
+  focusedDate,
+  onFocusedDateChange,
+  onVisibleDateChange,
+  onEscapeKeyPress
+}) => {
+  const year = visibleDate.getFullYear();
+  const month = visibleDate.getMonth();
+  const weeks = getMonthGrid(year, month, weekStartsOn);
+  const weekdayLabels = getWeekdayLabels(locale, weekStartsOn);
+  const weekdayFullNames = getWeekdayFullNames(locale, weekStartsOn);
+  const buttonRefs = useRef(new Map());
+  const datesWithRow = useMemo(() => getDatesWithRow(weeks), [weeks]);
+  const focusTarget = focusedDate ?? selectedDate;
+  const isToday = useCallback(d => d !== null && isSameDay(d, new Date()), []);
+  const focusButton = useCallback(date => {
+    if (date === null) return;
+    const key = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    buttonRefs.current.get(key)?.focus();
+  }, []);
+  useEffect(() => {
+    if (focusTarget !== null) focusButton(focusTarget);
+  }, [focusTarget, focusButton]);
+  const handleKeyDown = useCallback((e, date) => keyHandler(e, date, onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onVisibleDateChange), [onFocusedDateChange, datesWithRow, month, year, disabledDates, onDateSelect, onEscapeKeyPress, onVisibleDateChange]);
+  const setButtonRef = useCallback((date, el) => {
+    const k = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    if (el) buttonRefs.current.set(k, el);else buttonRefs.current.delete(k);
+  }, []);
+  return /*#__PURE__*/_jsxs("table", {
+    "aria-labelledby": labelledById,
+    role: "grid",
+    width: "100%",
+    children: [/*#__PURE__*/_jsx("thead", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: weekdayLabels.map((label, i) => /*#__PURE__*/_jsx(TableHeader, {
+          abbr: weekdayFullNames[i],
+          scope: "col",
+          children: label
+        }, label))
+      })
+    }), /*#__PURE__*/_jsx("tbody", {
+      children: weeks.map((week, rowIndex) => /*#__PURE__*/_jsx("tr", {
+        children: week.map((date, colIndex) => {
+          if (date === null) {
+            return (
+              /*#__PURE__*/
+              // fix this error
+              // eslint-disable-next-line react/no-array-index-key, jsx-a11y/control-has-associated-label
+              _jsx("td", {
+                role: "gridcell"
+              }, `empty-${rowIndex}-${colIndex}`)
+            );
+          }
+          const selected = isSameDay(date, selectedDate) || isSameDay(date, endDate);
+          const inRange = !!selectedDate && !!endDate && isDateInRange(date, selectedDate, endDate);
+          const disabled = isDateDisabled(date, disabledDates);
+          const today = isToday(date);
+          // this is making the selected date a differnet color bc it is focused, look into further
+          const isFocused = focusTarget !== null && isSameDay(date, focusTarget);
+          return /*#__PURE__*/_jsx("td", {
+            "aria-selected": selected,
+            role: "gridcell",
+            children: /*#__PURE__*/_jsx(DateButton, {
+              disabled: disabled,
+              isInRange: inRange,
+              isSelected: selected,
+              isToday: today,
+              ref: el => setButtonRef(date, el),
+              tabIndex: isFocused ? 0 : -1,
+              variant: "secondary",
+              onClick: () => onDateSelect(date),
+              onFocus: () => onFocusedDateChange?.(date),
+              onKeyDown: e => handleKeyDown(e, date),
+              children: date.getDate()
+            })
+          }, date.getTime());
+        })
+      }, week.join('-')))
+    })]
+  });
+};

package/dist/DatePicker/Calendar/CalendarFooter.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CalendarFooterProps } from './types';
+export declare const CalendarFooter: React.FC<CalendarFooterProps>;

package/dist/DatePicker/Calendar/CalendarFooter.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { FlexBox } from '../../Box';
+import { TextButton } from '../../Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// function formatQuickActionLabel(action: QuickAction): string {
+//   const { num, timePeriod } = action;
+//   const period =
+//     timePeriod === 'day'
+//       ? num === 1
+//         ? 'day'
+//         : 'days'
+//       : timePeriod === 'week'
+//       ? num === 1
+//         ? 'week'
+//         : 'weeks'
+//       : timePeriod === 'month'
+//       ? num === 1
+//         ? 'month'
+//         : 'months'
+//       : num === 1
+//       ? 'year'
+//       : 'years';
+//   return `${num} ${period}`;
+// }
+
+export const CalendarFooter = ({
+  onClearDate,
+  onTodayClick,
+  onSelectedDateChange,
+  onCurrentMonthYearChange
+}) => {
+  const handleClearDate = () => {
+    onSelectedDateChange(null);
+    onClearDate?.();
+  };
+  const handleTodayClick = () => {
+    const today = new Date();
+    onSelectedDateChange(today);
+    onCurrentMonthYearChange(new Date(today.getFullYear(), today.getMonth(), 1));
+    onTodayClick?.();
+  };
+  // const actions = quickActions.slice(0, 3);
+
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: "center",
+    borderTop: 1,
+    justifyContent: "space-between",
+    p: 12,
+    children: [/*#__PURE__*/_jsx(TextButton, {
+      onClick: handleClearDate,
+      children: "Clear"
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      gap: 32,
+      children: /*#__PURE__*/_jsx(TextButton, {
+        onClick: handleTodayClick,
+        children: "Today"
+      })
+    })]
+  });
+};

package/dist/DatePicker/Calendar/CalendarHeader.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { CalendarHeaderProps } from './types';
+export declare const CalendarHeader: React.FC<CalendarHeaderProps>;

package/dist/DatePicker/Calendar/CalendarHeader.js

@@ -0,0 +1,63 @@
+import { MiniChevronLeftIcon, MiniChevronRightIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+import { FlexBox } from '../../Box';
+import { IconButton } from '../../Button';
+import { Text } from '../../Typography';
+import { formatMonthYear } from './utils/format';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarHeader = ({
+  currentMonthYear,
+  onCurrentMonthYearChange,
+  secondMonthYear,
+  onPreviousMonthClick,
+  onNextMonthClick,
+  locale,
+  headingId
+}) => {
+  const handlePreviousMonth = () => {
+    const previousMonth = new Date(currentMonthYear.getFullYear(), currentMonthYear.getMonth() - 1, 1);
+    onCurrentMonthYearChange?.(previousMonth);
+    onPreviousMonthClick?.();
+  };
+  const handleNextMonth = () => {
+    const nextMonth = new Date(currentMonthYear.getFullYear(), currentMonthYear.getMonth() + 1, 1);
+    onCurrentMonthYearChange?.(nextMonth);
+    onNextMonthClick?.();
+  };
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    pb: 16,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "Previous month",
+      icon: MiniChevronLeftIcon,
+      size: "small",
+      tip: "Previous month",
+      onClick: handlePreviousMonth
+    }), /*#__PURE__*/_jsx(Text, {
+      "aria-live": "polite",
+      as: "h2",
+      fontSize: 16,
+      fontWeight: "title",
+      id: headingId,
+      children: formatMonthYear(currentMonthYear, locale)
+    }), secondMonthYear && /*#__PURE__*/_jsx(Text, {
+      "aria-live": "polite",
+      as: "h2",
+      display: {
+        _: 'none',
+        xs: 'initial'
+      },
+      fontSize: 16,
+      fontWeight: "title",
+      id: headingId,
+      children: formatMonthYear(secondMonthYear, locale)
+    }), /*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "Next month",
+      icon: MiniChevronRightIcon,
+      size: "small",
+      tip: "Next month",
+      onClick: handleNextMonth
+    })]
+  });
+};

package/dist/DatePicker/Calendar/index.d.ts

@@ -0,0 +1,6 @@
+export { Calendar } from './Calendar';
+export { CalendarHeader } from './CalendarHeader';
+export { CalendarBody } from './CalendarBody';
+export { CalendarFooter } from './CalendarFooter';
+export type { CalendarHeaderProps, CalendarBodyProps, CalendarFooterProps, QuickAction, } from './types';
+export * from './utils';

package/dist/DatePicker/Calendar/index.js

@@ -0,0 +1,5 @@
+export { Calendar } from './Calendar';
+export { CalendarHeader } from './CalendarHeader';
+export { CalendarBody } from './CalendarBody';
+export { CalendarFooter } from './CalendarFooter';
+export * from './utils';

package/dist/DatePicker/Calendar/types.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Internal types for the Calendar subcomponents (used by DatePickerCalendar).
+ */
+export interface CalendarHeaderProps {
+    /** Currently displayed month and year (used for heading and prev/next range) */
+    currentMonthYear: Date;
+    /** Called when the user navigates to a different month. Pass the new date (e.g. setVisibleDate) so the calendar updates. */
+    onCurrentMonthYearChange: (newDate: Date) => void;
+    /** Currently displayed second month and year (used for heading and prev/next range) */
+    secondMonthYear?: Date;
+    /** Called after navigating to previous month; use for click tracking. */
+    onPreviousMonthClick?: () => void;
+    /** Called after navigating to next month; use for click tracking. */
+    onNextMonthClick?: () => void;
+    /** Locale for month/year formatting (e.g. 'en-US') */
+    locale?: string;
+    /** id for the heading (for grid aria-labelledby) */
+    headingId: string;
+}
+export interface CalendarBodyProps {
+    /** The month to display (typically first day of that month) */
+    visibleDate: Date;
+    /** Selected start date (single or range start) */
+    selectedDate: Date | null;
+    /** Selected end date (range only; undefined for single-date mode) */
+    endDate?: Date | null;
+    /** Dates that should be disabled (unselectable) */
+    disabledDates?: Date[];
+    /** Called when a date cell is selected */
+    onDateSelect: (date: Date) => void;
+    /** Locale for weekday names and week start */
+    locale?: string;
+    /** 0 = Sunday, 1 = Monday (default from locale if not set) */
+    weekStartsOn?: 0 | 1;
+    /** Id of the month/year heading (aria-labelledby on grid) */
+    labelledById: string;
+    /** For keyboard nav: which cell has focus (roving tabindex) */
+    focusedDate: Date | null;
+    /** Callback when focused date changes (e.g. arrow keys) */
+    onFocusedDateChange: (date: Date | null) => void;
+    /** Called when grid keyboard nav changes month (e.g. Page Up/Down). Pass setVisibleDate so the calendar updates. */
+    onVisibleDateChange: (newDate: Date) => void;
+    /** Called when the escape key is pressed */
+    onEscapeKeyPress?: () => void;
+}
+export interface QuickAction {
+    num: number;
+    timePeriod: 'day' | 'week' | 'month' | 'year';
+    onClick: () => void;
+}
+export interface CalendarFooterProps {
+    onClearDate?: () => void;
+    onTodayClick?: () => void;
+    /** Called when the user navigates to a different month. Pass the new date (e.g. setVisibleDate) so the calendar updates. */
+    onSelectedDateChange: (newDate: Date | null) => void;
+    onCurrentMonthYearChange: (newDate: Date) => void;
+    /** Max 3 quick actions (e.g. "7 days", "1 month") */
+    quickActions?: QuickAction[];
+}

package/dist/DatePicker/Calendar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/DatePicker/Calendar/utils/dateGrid.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Builds a grid of days for a calendar month using native Date and Intl.
+ * Each row has 7 cells; leading/trailing cells may be null (padding from adjacent months).
+ */
+/**
+ * Get the weekday for a date (0 = Sunday, 6 = Saturday).
+ * Optionally use weekStartsOn to compute "offset" for display (e.g. Monday = 0).
+ */
+export declare const getDayOfWeek: (date: Date, weekStartsOn?: 0 | 1) => number;
+/**
+ * Returns an array of weeks for the given month. Each week is an array of 7 items:
+ * each item is either a Date (that day) or null (padding from previous/next month).
+ *
+ * @param year - Full year (e.g. 2026)
+ * @param month - Month 0-11 (0 = January)
+ * @param weekStartsOn - 0 = Sunday, 1 = Monday
+ */
+export declare const getMonthGrid: (year: number, month: number, weekStartsOn?: 0 | 1) => (Date | null)[][];
+/**
+ * Check if two dates are the same calendar day (ignoring time).
+ */
+export declare const isSameDay: (a: Date | null, b: Date | null) => boolean;
+/**
+ * Check if `date` is between `start` and `end` (exclusive), ignoring time.
+ */
+export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean;
+/**
+ * Check if `date` is in the `disabledDates` list (by calendar day).
+ */
+export declare const isDateDisabled: (date: Date, disabledDates?: Date[]) => boolean;

package/dist/DatePicker/Calendar/utils/dateGrid.js

@@ -0,0 +1,93 @@
+/**
+ * Builds a grid of days for a calendar month using native Date and Intl.
+ * Each row has 7 cells; leading/trailing cells may be null (padding from adjacent months).
+ */
+
+const DAYS_PER_WEEK = 7;
+
+/**
+ * Normalize to start of day in local time for comparison.
+ */
+const toDateOnly = date => {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+
+/**
+ * Get the weekday for a date (0 = Sunday, 6 = Saturday).
+ * Optionally use weekStartsOn to compute "offset" for display (e.g. Monday = 0).
+ */
+export const getDayOfWeek = (date, weekStartsOn = 0) => {
+  const sundayBased = date.getDay();
+  if (weekStartsOn === 0) return sundayBased;
+  return (sundayBased + 6) % 7; // Monday = 0
+};
+
+/**
+ * Returns an array of weeks for the given month. Each week is an array of 7 items:
+ * each item is either a Date (that day) or null (padding from previous/next month).
+ *
+ * @param year - Full year (e.g. 2026)
+ * @param month - Month 0-11 (0 = January)
+ * @param weekStartsOn - 0 = Sunday, 1 = Monday
+ */
+export const getMonthGrid = (year, month, weekStartsOn = 0) => {
+  const first = new Date(year, month, 1);
+  const last = new Date(year, month + 1, 0);
+  const firstDayOfWeek = getDayOfWeek(first, weekStartsOn);
+  const daysInMonth = last.getDate();
+  const weeks = [];
+  let currentWeek = [];
+
+  // Pad start of first week with nulls
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < firstDayOfWeek; i++) {
+    currentWeek.push(null);
+  }
+
+  // fix these
+  // eslint-disable-next-line no-plusplus
+  for (let day = 1; day <= daysInMonth; day++) {
+    currentWeek.push(new Date(year, month, day));
+    if (currentWeek.length === DAYS_PER_WEEK) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+  }
+
+  // Pad end of last week with nulls
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < DAYS_PER_WEEK) {
+      currentWeek.push(null);
+    }
+    weeks.push(currentWeek);
+  }
+  return weeks;
+};
+
+/**
+ * Check if two dates are the same calendar day (ignoring time).
+ */
+export const isSameDay = (a, b) => {
+  if (a === null || b === null) return false;
+  return toDateOnly(a).getTime() === toDateOnly(b).getTime();
+};
+
+/**
+ * Check if `date` is between `start` and `end` (exclusive), ignoring time.
+ */
+export const isDateInRange = (date, start, end) => {
+  if (start === null) return false;
+  const normalizedDateTime = toDateOnly(date).getTime();
+  const normalizedStartDateTime = toDateOnly(start).getTime();
+  const normalizedEndDateTime = end !== null ? toDateOnly(end).getTime() : normalizedStartDateTime;
+  const low = Math.min(normalizedStartDateTime, normalizedEndDateTime);
+  const high = Math.max(normalizedStartDateTime, normalizedEndDateTime);
+  return normalizedDateTime > low && normalizedDateTime < high;
+};
+
+/**
+ * Check if `date` is in the `disabledDates` list (by calendar day).
+ */
+export const isDateDisabled = (date, disabledDates = []) => {
+  return disabledDates.some(d => isSameDay(date, d));
+};

package/dist/DatePicker/Calendar/utils/format.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Date formatting for the calendar using Intl.DateTimeFormat.
+ */
+/**
+ * Format month and year for the calendar header (e.g. "February 2026").
+ */
+export declare const formatMonthYear: (date: Date, locale?: string) => string;
+/**
+ * Get short weekday labels for column headers (e.g. ["Su", "Mo", ...]).
+ * Order depends on weekStartsOn: 0 = Sunday first, 1 = Monday first.
+ */
+export declare const getWeekdayLabels: (locale?: string, weekStartsOn?: 0 | 1) => string[];
+/**
+ * Get full weekday names for abbr attributes (e.g. "Sunday", "Monday").
+ * Same order as getWeekdayLabels.
+ */
+export declare const getWeekdayFullNames: (locale?: string, weekStartsOn?: 0 | 1) => string[];
+/**
+ * Format a date for display in the date picker input (e.g. "2/15/2026").
+ */
+export declare const formatDateForInput: (date: Date, locale?: string) => string;
+/**
+ * Parse a string from the date input into a Date, or null if invalid.
+ * Only returns a date when the input is a complete valid date (e.g. "2/15/2026").
+ * Partial input like "1" or "2/15" returns null even though Date("1") would parse.
+ */
+export declare const parseDateFromInput: (value: string, locale?: string) => Date | null;
+/**
+ * Format a date range for the input (e.g. "2/15/2026 – 2/20/2026").
+ */
+export declare const formatDateRangeForInput: (startDate: Date | null, endDate: Date | null, locale?: string) => string;
+/**
+ * Parse a range string (e.g. "2/15/2026 – 2/20/2026") into { startDate, endDate }.
+ * Returns null if invalid. Single date is allowed and yields startDate = endDate.
+ */
+export declare const parseDateRangeFromInput: (value: string, locale?: string) => {
+    startDate: Date;
+    endDate: Date;
+} | null;