@codecademy/gamut

72.2.272.2.3-alpha.303f64.0
dist/DatePicker/DatePicker.js
~dist/DatePicker/DatePicker.jsModified
+6−3
Index: package/dist/DatePicker/DatePicker.js
===================================================================
--- package/dist/DatePicker/DatePicker.js
+++ package/dist/DatePicker/DatePicker.js
@@ -24,8 +24,9 @@
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [focusGridSignal, setFocusGridSignal] = useState(false);
   const [gridFocusRequested, setGridFocusRequested] = useState(false);
   const [activeRangePart, setActiveRangePart] = useState(null);
+  const [hasError, setHasError] = useState(false);
   const inputRef = useRef(null);
   const dialogId = useId();
   const calendarDialogId = `datepicker-dialog-${dialogId.replace(/:/g, '')}`;
   const isRtl = useElementDir() === 'rtl';
@@ -75,9 +76,11 @@
       closeCalendar,
       locale: resolvedLocale,
       disableDate,
       translations,
-      quickActions: quickActions === null ? [] : resolvedQuickActions
+      quickActions: quickActions === null ? [] : resolvedQuickActions,
+      hasError,
+      setHasError
     };
     return mode === 'range' ? {
       ...base,
       mode: 'range',
@@ -94,9 +97,9 @@
       mode: 'single',
       selectedDate: props.selectedDate,
       onSelection: props.onSelected
     };
-  }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart]);
+  }, [translationsProp, quickActions, mode, resolvedLocale, isCalendarOpen, openCalendar, focusCalendar, focusGridSignal, gridFocusRequested, clearGridFocusRequest, closeCalendar, disableDate, props, activeRangePart, hasError, setHasError]);
   const content = children !== undefined ? children : /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(FlexBox, {
       gap: inputSize === 'small' ? 4 : 8,
       ref: inputRef,
@@ -129,9 +132,9 @@
       invertAxis: "x",
       isOpen: isCalendarOpen,
       targetRef: inputRef,
       x: -20,
-      y: -16,
+      y: isCalendarOpen && hasError ? 0 : -16,
       onRequestClose: closeCalendar,
       children: /*#__PURE__*/_jsx("div", {
         "aria-label": contextValue.translations.calendarDialogAriaLabel,
         id: calendarDialogId,