@codecademy/gamut

Index: package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js
===================================================================
--- package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js
+++ package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js
@@ -125,8 +125,9 @@
     children: [/*#__PURE__*/_jsx("thead", {
       children: /*#__PURE__*/_jsx("tr", {
         children: weekdayLabels.map((label, i) => /*#__PURE__*/_jsx(TableHeader, {
           abbr: weekdayFullNames[i],
+          "aria-label": weekdayFullNames[i],
           scope: "col",
           children: label
         }, label))
       })

Index: package/dist/DatePicker/DatePickerInput/index.js
===================================================================
--- package/dist/DatePicker/DatePickerInput/index.js
+++ package/dist/DatePicker/DatePickerInput/index.js
@@ -1,7 +1,8 @@
 import { MiniCalendarIcon } from '@codecademy/gamut-icons';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { FlexBox } from '../../Box';
+import { IconButton } from '../../Button';
 import { FormGroup } from '../../Form/elements/FormGroup';
 import { isSameDay } from '../DatePickerCalendar/Calendar/utils/dateGrid';
 import { handleDateSelectRange } from '../DatePickerCalendar/utils/dateSelect';
 import { useDatePicker } from '../DatePickerContext';
@@ -56,8 +57,9 @@
   const parsedForHidden = parseSegmentsToDate(segments);
   const hiddenValue = parsedForHidden ? formatDateISO8601DateOnly(parsedForHidden) : '';
   const isInputFocusedRef = useRef(false);
   const containerRef = useRef(null);
+  const buttonRef = useRef(null);
   const segmentElRefs = useRef({});
   const assignSegmentRef = useCallback((field, el) => {
     segmentElRefs.current[field] = el;
   }, [segmentElRefs]);
@@ -143,17 +145,17 @@
     if (!isCalendarOpen) openCalendar();
     focusCalendar();
   }, [isCalendarOpen, openCalendar, focusCalendar]);
   return /*#__PURE__*/_jsx(FormGroup, {
-    htmlFor: inputId,
+    id: inputId,
     isSoloField: true,
     label: label ?? defaultLabel,
     mb: 0,
     pb: 0,
     spacing: "tight",
     width: "fit-content",
     children: /*#__PURE__*/_jsxs(SegmentedShell, {
-      id: inputId,
+      "aria-labelledby": inputId,
       inputSize: size,
       ref: shellRef,
       role: "group",
       variant: error ? 'error' : 'default',
@@ -198,18 +200,15 @@
         name: name ?? 'datePickerInput',
         tabIndex: -1,
         type: "hidden",
         value: hiddenValue
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        alignItems: "center",
-        justifyContent: "center",
-        pl: 16,
-        pr: 8,
-        role: "presentation",
-        children: /*#__PURE__*/_jsx(MiniCalendarIcon, {
-          "aria-hidden": true,
-          size: 16
-        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        mx: 4,
+        icon: MiniCalendarIcon,
+        size: "small",
+        tip: translations.openCalendarLabel,
+        ref: buttonRef,
+        onClick: () => buttonRef.current?.blur()
       })]
     })
   });
 });
\ No newline at end of file

Index: package/dist/DatePicker/utils/translations.js
===================================================================
--- package/dist/DatePicker/utils/translations.js
+++ package/dist/DatePicker/utils/translations.js
@@ -3,8 +3,9 @@
   dateLabel: 'Date',
   startDateLabel: 'Start date',
   endDateLabel: 'End date',
   calendarDialogAriaLabel: 'Choose date',
+  openCalendarLabel: 'Open calendar',
   last7DaysDisplayText: 'Last 7 days',
   last30DaysDisplayText: 'Last 30 days',
   last90DaysDisplayText: 'Last 90 days'
 };
\ No newline at end of file

Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "72.2.2",
+  "version": "72.2.3-alpha.500e59.0",
   "author": "Codecademy Engineering <[email protected]>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.9",
-    "@codecademy/gamut-illustrations": "0.58.15",
-    "@codecademy/gamut-patterns": "0.10.34",
-    "@codecademy/gamut-styles": "20.0.2",
-    "@codecademy/variance": "0.26.1",
+    "@codecademy/gamut-icons": "9.57.10-alpha.500e59.0",
+    "@codecademy/gamut-illustrations": "0.58.16-alpha.500e59.0",
+    "@codecademy/gamut-patterns": "0.10.35-alpha.500e59.0",
+    "@codecademy/gamut-styles": "20.0.3-alpha.500e59.0",
+    "@codecademy/variance": "0.26.2-alpha.500e59.0",
     "@formatjs/intl-locale": "5.3.1",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",

Index: package/dist/DatePicker/utils/translations.d.ts
===================================================================
--- package/dist/DatePicker/utils/translations.d.ts
+++ package/dist/DatePicker/utils/translations.d.ts
@@ -8,8 +8,10 @@
     /** Label for the end date input in range mode (default: "End date"). */
     endDateLabel?: string;
     /** aria-label for the calendar dialog (default: "Choose date"). */
     calendarDialogAriaLabel?: string;
+    /** aria-label for the calendar icon trigger (default: "Open calendar"). */
+    openCalendarLabel?: string;
     /** Label for the last 7 days quick action (default: "Last 7 days"). */
     last7DaysDisplayText?: string;
     /** Label for the last 30 days quick action (default: "Last 30 days"). */
     last30DaysDisplayText?: string;