@codecademy/gamut

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