@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/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -102,21 +102,24 @@
       ref: inputRef,
       width: "fit-content",
       children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputStart",
+          description: props.startDateDescription,
+          name: "datePickerInput",
           rangePart: "start",
           size: inputSize
         }), /*#__PURE__*/_jsx(Box, {
           alignSelf: "center",
           mt: 32,
           children: isRtl ? /*#__PURE__*/_jsx(MiniArrowLeftIcon, {}) : /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
         }), /*#__PURE__*/_jsx(DatePickerInput, {
-          name: "datePickerInputEnd",
+          description: props.endDateDescription,
+          name: "datePickerInput",
           rangePart: "end",
           size: inputSize
         })]
       }) : /*#__PURE__*/_jsx(DatePickerInput, {
+        description: props.description,
         size: inputSize
       })
     }), /*#__PURE__*/_jsx(PopoverContainer, {
       alignment: "bottom-left",

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';
@@ -18,8 +19,9 @@
   label,
   name,
   rangePart,
   size = 'base',
+  description,
   ...rest
 }, ref) => {
   const context = useDatePicker();
   if (context === null) {
@@ -143,17 +145,18 @@
     if (!isCalendarOpen) openCalendar();
     focusCalendar();
   }, [isCalendarOpen, openCalendar, focusCalendar]);
   return /*#__PURE__*/_jsx(FormGroup, {
-    htmlFor: inputId,
+    description: description,
+    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 +201,12 @@
         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, {
+        icon: MiniCalendarIcon,
+        size: "small",
+        tip: "Open calendar"
       })]
     })
   });
 });
\ No newline at end of file

Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "68.6.2",
+  "version": "68.6.3-alpha.57e1cd.0",
   "author": "Codecademy Engineering <[email protected]>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.5",
-    "@codecademy/gamut-illustrations": "0.58.11",
-    "@codecademy/gamut-patterns": "0.10.30",
-    "@codecademy/gamut-styles": "18.0.0",
-    "@codecademy/variance": "0.26.1",
+    "@codecademy/gamut-icons": "9.57.6-alpha.57e1cd.0",
+    "@codecademy/gamut-illustrations": "0.58.12-alpha.57e1cd.0",
+    "@codecademy/gamut-patterns": "0.10.31-alpha.57e1cd.0",
+    "@codecademy/gamut-styles": "18.0.1-alpha.57e1cd.0",
+    "@codecademy/variance": "0.26.2-alpha.57e1cd.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/DatePickerInput/index.d.ts
===================================================================
--- package/dist/DatePicker/DatePickerInput/index.d.ts
+++ package/dist/DatePicker/DatePickerInput/index.d.ts
@@ -1,9 +1,13 @@
 import type { InputWrapperProps } from '../../Form/inputs/Input';
 export type DatePickerInputProps = Omit<InputWrapperProps, 'className' | 'type' | 'icon' | 'value' | 'onChange' | 'color'> & {
     /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
     rangePart?: 'start' | 'end';
+    /** Description to display between the label and the input. */
+    description?: string;
 };
 export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<InputWrapperProps, "color" | "className" | "onChange" | "type" | "icon" | "value"> & {
     /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
     rangePart?: "start" | "end";
+    /** Description to display between the label and the input. */
+    description?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

Index: package/dist/DatePicker/types.d.ts
===================================================================
--- package/dist/DatePicker/types.d.ts
+++ package/dist/DatePicker/types.d.ts
@@ -91,8 +91,10 @@
      * />
      * ```
      */
     onSelected: (date: Date | null) => void;
+    /** Description to display between the label and the input. */
+    description?: string;
 }
 export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
     /** Controlled start date. Pass `null` to not have a default start date. Pass a `Date` to have a default start date.
      *
@@ -158,7 +160,11 @@
      * />
      * ```
      */
     onEndSelected: (date: Date | null) => void;
+    /** Description to display between the label and the start date input. */
+    startDateDescription?: string;
+    /** Description to display between the label and the end date input. */
+    endDateDescription?: string;
 }
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 export {};