diff --git a/packages/bento-design-system/package.json b/packages/bento-design-system/package.json
index 95bf18185..087dcf7e0 100644
--- a/packages/bento-design-system/package.json
+++ b/packages/bento-design-system/package.json
@@ -75,6 +75,7 @@
     "@internationalized/date": "3.4.0",
     "@react-aria/breadcrumbs": "3.5.4",
     "@react-aria/button": "3.8.1",
+    "@react-aria/calendar": "3.4.0",
     "@react-aria/checkbox": "3.10.0",
     "@react-aria/datepicker": "3.6.0",
     "@react-aria/dialog": "3.5.4",
@@ -96,6 +97,7 @@
     "@react-aria/tooltip": "3.6.1",
     "@react-aria/utils": "3.19.0",
     "@react-aria/visually-hidden": "3.8.3",
+    "@react-stately/calendar": "3.3.0",
     "@react-stately/checkbox": "3.4.4",
     "@react-stately/datepicker": "3.6.0",
     "@react-stately/menu": "3.5.4",
@@ -105,6 +107,7 @@
     "@react-stately/slider": "3.4.1",
     "@react-stately/toggle": "3.6.1",
     "@react-stately/tooltip": "3.4.3",
+    "@react-types/calendar": "3.3.0",
     "@react-types/overlays": "3.8.1",
     "@react-types/radio": "3.5.0",
     "@react-types/shared": "3.19.0",
diff --git a/packages/bento-design-system/src/Button/Button.tsx b/packages/bento-design-system/src/Button/Button.tsx
index 808003e0f..eec59b144 100644
--- a/packages/bento-design-system/src/Button/Button.tsx
+++ b/packages/bento-design-system/src/Button/Button.tsx
@@ -6,7 +6,7 @@ import { AriaButtonProps } from "@react-types/button";
 import { useButton } from "@react-aria/button";
 import { Label } from "../Typography/Label/Label";
 import { Column, Columns } from "../Layout/Columns";
-import { IconProps } from "..";
+import { Children, IconProps } from "..";
 import { useBentoConfig } from "../BentoConfigContext";
 import pick from "lodash.pick";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
@@ -31,7 +31,7 @@ type Props = {
   hierarchy: "primary" | "secondary" | "danger";
   isDisabled?: boolean;
   size?: ButtonSize;
-  icon?: (props: IconProps) => JSX.Element;
+  icon?: (props: IconProps) => Children;
   iconPosition?: "leading" | "trailing";
 } & Omit<AriaButtonProps<"button">, "onPress"> &
   Pick<React.HTMLProps<HTMLButtonElement>, OtherButtonKeys>;
diff --git a/packages/bento-design-system/src/DateField/Calendar.tsx b/packages/bento-design-system/src/DateField/Calendar.tsx
index b0eaa2c64..c64d71a84 100644
--- a/packages/bento-design-system/src/DateField/Calendar.tsx
+++ b/packages/bento-design-system/src/DateField/Calendar.tsx
@@ -1,43 +1,38 @@
-import { MonthType, useMonth } from "@datepicker-react/hooks";
-import { useDateFormatter } from "@react-aria/i18n";
-import { useOverlay, useOverlayPosition } from "@react-aria/overlays";
-import { mergeProps } from "@react-aria/utils";
-import { RefObject, useRef } from "react";
-import { Box, Stack, Tiles } from "..";
-import { Label } from "../Typography/Label/Label";
-import { Children } from "../util/Children";
-import { useCreatePortal } from "../util/useCreatePortal";
-import { CalendarHeader } from "./CalendarHeader";
-import { calendar, weekDay } from "./DateField.css";
+import { useCalendar, useCalendarGrid, useRangeCalendar } from "@react-aria/calendar";
+import {
+  CalendarState,
+  RangeCalendarState,
+  useCalendarState,
+  useRangeCalendarState,
+} from "@react-stately/calendar";
+import { createCalendar, getWeeksInMonth } from "@internationalized/date";
 import { Day } from "./Day";
+import { useLocale } from "@react-aria/i18n";
+import { Box } from "../Box/Box";
+import { calendar, calendarGrid, weekDay } from "../DateField/DateField.css";
 import { useBentoConfig } from "../BentoConfigContext";
+import { Children, Label, Stack } from "..";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
+import { CalendarHeader } from "./CalendarHeader";
+import { useCreatePortal } from "../util/useCreatePortal";
+import { useOverlay, useOverlayPosition } from "@react-aria/overlays";
+import { DOMAttributes, useRef } from "react";
+import { mergeProps } from "@react-aria/utils";
+import { AriaCalendarProps, AriaRangeCalendarProps, DateValue } from "@react-types/calendar";
+import { AriaButtonProps } from "@react-types/button";
+import { FocusableElement } from "@react-types/shared";
 
-export type CommonCalendarProps = {
-  inputRef: RefObject<HTMLInputElement>;
-  focusedDate: Date | null;
-  onDateFocus(date: Date): void;
-  onDateSelect(date: Date): void;
-  onDateHover(date: Date): void;
-  isStartDate(date: Date): boolean;
-  isEndDate(date: Date): boolean;
-  isDateFocused(date: Date): boolean;
-  isDateSelected(date: Date): boolean;
-  isDateHovered(date: Date): boolean;
-  isDateBlocked(date: Date): boolean;
-  isFirstOrLastSelectedDate(date: Date): boolean;
-};
-
-type Props = CommonCalendarProps & {
-  type: "single" | "range";
-  activeDate: MonthType;
-  goToPreviousMonth: () => void;
-  goToNextMonth: () => void;
-  selectActiveDate: (date: Date) => void;
+type Props = (
+  | ({
+      type: "single";
+    } & AriaCalendarProps<DateValue>)
+  | ({
+      type: "range";
+    } & AriaRangeCalendarProps<DateValue>)
+) & {
   onClose: () => void;
-  shortcuts?: Children;
-  minDate?: Date;
-  maxDate?: Date;
+  inputRef: React.RefObject<HTMLInputElement>;
+  shortcuts: Children;
 };
 
 function boxShadowFromElevation(config: "none" | "small" | "medium" | "large") {
@@ -53,19 +48,68 @@ function boxShadowFromElevation(config: "none" | "small" | "medium" | "large") {
   }
 }
 
-export function Calendar(props: Props) {
+function CalendarGrid(
+  props:
+    | {
+        type: "single";
+        state: CalendarState;
+      }
+    | { type: "range"; state: RangeCalendarState }
+) {
+  const { locale } = useLocale();
+  const { gridProps, weekDays } = useCalendarGrid({}, props.state);
   const config = useBentoConfig().dateField;
-  const weekdayFormatter = useDateFormatter({
-    weekday: "narrow",
-  });
-  const overlayRef = useRef(null);
-  const createPortal = useCreatePortal();
 
-  const { days, weekdayLabels } = useMonth({
-    year: props.activeDate.year,
-    month: props.activeDate.month,
-    weekdayLabelFormat: (date) => weekdayFormatter.format(date),
-  });
+  const weeksInMonth = getWeeksInMonth(props.state.visibleRange.start, locale);
+
+  return (
+    <Box className={calendarGrid} {...gridProps}>
+      {weekDays.map((day, index) => (
+        <Box
+          key={index}
+          className={weekDay}
+          style={{ width: config.dayWidth, height: config.dayHeight }}
+        >
+          <Label color="secondary" size={config.dayOfWeekLabelSize}>
+            {day}
+          </Label>
+        </Box>
+      ))}
+      {[...new Array(weeksInMonth).keys()].map((weekIndex) =>
+        props.state
+          .getDatesInWeek(weekIndex)
+          .map((date, i) => (date ? <Day {...props} key={i} date={date} /> : <td key={i} />))
+      )}
+    </Box>
+  );
+}
+
+export function CalendarPopover(
+  props: (
+    | { type: "single"; state: CalendarState }
+    | { type: "range"; state: RangeCalendarState }
+  ) & {
+    prevButtonProps: AriaButtonProps<"button">;
+    nextButtonProps: AriaButtonProps<"button">;
+    onClose: () => void;
+    calendarRef: React.RefObject<HTMLElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    state: CalendarState | RangeCalendarState;
+    shortcuts?: Children;
+  } & DOMAttributes<FocusableElement>
+) {
+  const {
+    prevButtonProps,
+    nextButtonProps,
+    onClose,
+    inputRef,
+    state,
+    calendarRef,
+    ...calendarProps
+  } = props;
+  const config = useBentoConfig().dateField;
+
+  const createPortal = useCreatePortal();
 
   const { overlayProps } = useOverlay(
     {
@@ -73,51 +117,105 @@ export function Calendar(props: Props) {
       isDismissable: true,
       onClose: props.onClose,
     },
-    overlayRef
+    calendarRef
   );
   const { overlayProps: positionProps } = useOverlayPosition({
     targetRef: props.inputRef,
-    overlayRef,
+    overlayRef: calendarRef,
     placement: "bottom start",
     offset: 35,
     isOpen: true,
     shouldFlip: true,
   });
 
+  const gridProps =
+    props.type === "single"
+      ? {
+          type: "single" as const,
+          state: state as CalendarState,
+        }
+      : { type: "range" as const, state: state as RangeCalendarState };
+
   return createPortal(
     <Box
       className={calendar}
       {...getRadiusPropsFromConfig(config.radius)}
       padding={config.padding}
       boxShadow={boxShadowFromElevation(config.elevation)}
+      {...calendarProps}
       {...mergeProps(overlayProps, positionProps)}
-      ref={overlayRef}
+      ref={calendarRef}
     >
       <Stack space={16} align="center">
-        <CalendarHeader {...props} />
-        <Tiles columns={7} space={0}>
-          {weekdayLabels.map((d, index) => (
-            <Box
-              className={weekDay}
-              width={config.dayWidth}
-              height={config.dayHeight}
-              key={`${d}-${index}`}
-            >
-              <Label size={config.dayOfWeekLabelSize}>{d}</Label>
-            </Box>
-          ))}
-          {days.map((day, index) => {
-            if (typeof day === "object") {
-              return <Day key={day.dayLabel} {...props} date={day.date} label={day.dayLabel} />;
-            } else {
-              return (
-                <Box key={`empty-${index}`} width={config.dayWidth} height={config.dayHeight} />
-              );
-            }
-          })}
-        </Tiles>
+        <CalendarHeader
+          prevButtonProps={prevButtonProps}
+          nextButtonProps={nextButtonProps}
+          focusedDate={state.focusedDate}
+          onChange={state.setFocusedDate}
+          minDate={state.minValue}
+          maxDate={state.maxValue}
+        />
+        <CalendarGrid {...gridProps} />
         {props.shortcuts && <Box style={{ maxWidth: config.dayWidth * 7 }}>{props.shortcuts}</Box>}
       </Stack>
     </Box>
   );
 }
+
+function SingleCalendar(props: Extract<Props, { type: "single" }>) {
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props, state);
+  const ref = useRef(null);
+
+  return (
+    <CalendarPopover
+      type="single"
+      {...calendarProps}
+      prevButtonProps={prevButtonProps}
+      nextButtonProps={nextButtonProps}
+      state={state}
+      onClose={props.onClose}
+      inputRef={props.inputRef}
+      calendarRef={ref}
+      shortcuts={props.shortcuts}
+    />
+  );
+}
+
+function RangeCalendar(props: Extract<Props, { type: "range" }>) {
+  const { locale } = useLocale();
+  const state = useRangeCalendarState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+  const ref = useRef(null);
+  const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);
+
+  return (
+    <CalendarPopover
+      type="range"
+      {...calendarProps}
+      prevButtonProps={prevButtonProps}
+      nextButtonProps={nextButtonProps}
+      state={state}
+      onClose={props.onClose}
+      inputRef={props.inputRef}
+      calendarRef={ref}
+      shortcuts={props.shortcuts}
+    />
+  );
+}
+
+export function Calendar(props: Props) {
+  if (props.type === "single") {
+    return <SingleCalendar {...props} />;
+  } else {
+    return <RangeCalendar {...props} />;
+  }
+}
diff --git a/packages/bento-design-system/src/DateField/CalendarHeader.tsx b/packages/bento-design-system/src/DateField/CalendarHeader.tsx
index 6f2d71d5c..9c5ed29f3 100644
--- a/packages/bento-design-system/src/DateField/CalendarHeader.tsx
+++ b/packages/bento-design-system/src/DateField/CalendarHeader.tsx
@@ -1,56 +1,54 @@
-import { MonthType } from "@datepicker-react/hooks";
+import { AriaButtonProps } from "@react-types/button";
+import { Box } from "../Box/Box";
+import { Column, Columns } from "../Layout/Columns";
+import { IconButton } from "../";
+import { defaultMessages } from "../defaultMessages/en";
 import { IconChevronLeft, IconChevronRight } from "../Icons";
-import { Box, Column, Columns, IconButton } from "..";
-import { useDefaultMessages } from "../util/useDefaultMessages";
 import { Selector } from "./Selector";
+import { CalendarDate } from "@internationalized/date";
+import { DateValue } from "@react-aria/calendar";
 
 type Props = {
-  activeDate: MonthType;
-  goToPreviousMonth: () => void;
-  goToNextMonth: () => void;
-  selectActiveDate: (date: Date) => void;
-  minDate?: Date;
-  maxDate?: Date;
+  prevButtonProps: AriaButtonProps<"button">;
+  nextButtonProps: AriaButtonProps<"button">;
+  focusedDate: CalendarDate;
+  onChange: (date: CalendarDate) => void;
+  minDate?: DateValue;
+  maxDate?: DateValue;
 };
 
-export function CalendarHeader({
-  goToPreviousMonth,
-  goToNextMonth,
-  selectActiveDate,
-  activeDate,
-  minDate,
-  maxDate,
-}: Props) {
-  const { defaultMessages } = useDefaultMessages();
+export function CalendarHeader(props: Props) {
   return (
-    <Box paddingX={12} width="full">
-      <Columns space={4} alignY="center">
+    <Box paddingX={8} width="full">
+      <Columns space={8} alignY="center">
         <Column width="content">
           <IconButton
             label={defaultMessages.DateField.previousMonthLabel}
-            size={16}
+            size={24}
             kind="transparent"
             hierarchy="secondary"
             icon={IconChevronLeft}
-            onPress={goToPreviousMonth}
+            {...props.prevButtonProps}
+            onPress={props.prevButtonProps.onPress!}
           />
         </Column>
-        <Selector datePart="month" activeMonth={activeDate} onSelect={selectActiveDate} />
+        <Selector datePart="month" activeDate={props.focusedDate} onSelect={props.onChange} />
         <Selector
           datePart="year"
-          activeMonth={activeDate}
-          onSelect={selectActiveDate}
-          minDate={minDate}
-          maxDate={maxDate}
+          activeDate={props.focusedDate}
+          onSelect={props.onChange}
+          minDate={props.minDate}
+          maxDate={props.maxDate}
         />
         <Column width="content">
           <IconButton
             label={defaultMessages.DateField.nextMonthLabel}
-            size={16}
+            size={24}
             kind="transparent"
             hierarchy="secondary"
             icon={IconChevronRight}
-            onPress={goToNextMonth}
+            {...props.nextButtonProps}
+            onPress={props.nextButtonProps.onPress!}
           />
         </Column>
       </Columns>
diff --git a/packages/bento-design-system/src/DateField/Config.ts b/packages/bento-design-system/src/DateField/Config.ts
index 6af391047..22181720c 100644
--- a/packages/bento-design-system/src/DateField/Config.ts
+++ b/packages/bento-design-system/src/DateField/Config.ts
@@ -4,7 +4,6 @@ import { BodyProps } from "../Typography/Body/Body";
 import { LabelProps } from "../Typography/Label/Label";
 import { BorderRadiusConfig } from "../util/BorderRadiusConfig";
 import { Children } from "../util/Children";
-import { vars } from "../vars.css";
 
 export type DateFieldConfig = {
   radius: BorderRadiusConfig;
@@ -18,8 +17,8 @@ export type DateFieldConfig = {
     open: (props: IconProps) => Children;
     close: (props: IconProps) => Children;
   };
-  dayWidth: keyof typeof vars.space;
-  dayHeight: keyof typeof vars.space;
+  dayWidth: number;
+  dayHeight: number;
   dayRadius: BorderRadiusConfig;
   daySize: BodyProps["size"];
 };
diff --git a/packages/bento-design-system/src/DateField/DateField.css.ts b/packages/bento-design-system/src/DateField/DateField.css.ts
index e6531c003..80bb7e9ad 100644
--- a/packages/bento-design-system/src/DateField/DateField.css.ts
+++ b/packages/bento-design-system/src/DateField/DateField.css.ts
@@ -1,6 +1,7 @@
 import { createVar, style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
+import { vars } from "../vars.css";
 
 export const topLeftRadius = createVar();
 export const topRightRadius = createVar();
@@ -18,6 +19,15 @@ export const calendar = bentoSprinkles({
   borderWidth: 1,
 });
 
+export const calendarGrid = style([
+  bentoSprinkles({
+    display: "grid",
+  }),
+  {
+    gridTemplateColumns: "repeat(7, 1fr)",
+  },
+]);
+
 export const dateFieldRecipe = strictRecipe({
   variants: {
     validation: {
@@ -25,7 +35,7 @@ export const dateFieldRecipe = strictRecipe({
       invalid: {},
       notSet: {},
     },
-    isFocused: {
+    isCalendarOpen: {
       true: {},
     },
   },
@@ -33,7 +43,7 @@ export const dateFieldRecipe = strictRecipe({
     {
       variants: {
         validation: "valid",
-        isFocused: true,
+        isCalendarOpen: true,
       },
       style: bentoSprinkles({
         boxShadow: { default: "outlineInputFocus", hover: "outlineInputFocus" },
@@ -42,7 +52,7 @@ export const dateFieldRecipe = strictRecipe({
     {
       variants: {
         validation: "invalid",
-        isFocused: true,
+        isCalendarOpen: true,
       },
       style: bentoSprinkles({
         boxShadow: { default: "outlineNegativeStrong", hover: "outlineNegativeStrong" },
@@ -141,13 +151,21 @@ export const dayRecipe = strictRecipe({
   },
 });
 
-export const selector = bentoSprinkles({
-  paddingX: 16,
-  paddingY: 8,
-  borderRadius: 4,
-  background: {
-    default: "secondaryTransparentEnabledBackground",
-    focus: "secondaryTransparentFocusBackground",
-    hover: "secondaryTransparentHoverBackground",
+export const dateSegment = style([
+  bentoSprinkles({ outline: { focus: "none" }, textTransform: "uppercase" }),
+  {
+    selectors: {
+      "&[data-placeholder=true]": {
+        color: vars.textColor.textSecondary,
+      },
+      "&[data-placeholder=true][aria-disabled=true]": {
+        color: vars.textColor.textDisabled,
+      },
+
+      "&:focus:not([readonly])": {
+        borderBottom: `1px solid ${vars.textColor.textSecondary}`,
+        marginBottom: "-1px",
+      },
+    },
   },
-});
+]);
diff --git a/packages/bento-design-system/src/DateField/DateField.tsx b/packages/bento-design-system/src/DateField/DateField.tsx
index ef9da193d..6f5e4ce14 100644
--- a/packages/bento-design-system/src/DateField/DateField.tsx
+++ b/packages/bento-design-system/src/DateField/DateField.tsx
@@ -1,18 +1,16 @@
+import { useDatePicker, useDateRangePicker } from "@react-aria/datepicker";
+import { useDatePickerState, useDateRangePickerState } from "@react-stately/datepicker";
+import { useRef } from "react";
 import { FieldProps } from "../Field/FieldProps";
-import { useRef, useState } from "react";
-import { inputRecipe } from "../Field/Field.css";
-import { bodyRecipe } from "../Typography/Body/Body.css";
-import { FocusedInput, useDatepicker, UseDatepickerProps } from "@datepicker-react/hooks";
-import { Calendar } from "./Calendar";
-import { Box, Button, Column, Columns, Field, Inline } from "..";
-import { useField } from "@react-aria/label";
+import { CalendarDate, DateValue, getLocalTimeZone } from "@internationalized/date";
 import { Input } from "./Input";
-import { IconMinus } from "../Icons";
-import { dateFieldRecipe } from "./DateField.css";
-import { LocalizedString } from "../util/LocalizedString";
-import { useBentoConfig } from "../BentoConfigContext";
-import { getReadOnlyBackgroundStyle } from "../Field/utils";
-import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
+import { Calendar } from "./Calendar";
+import { Box } from "../Box/Box";
+import { Field } from "../Field/Field";
+import { LocalizedString } from "../util/ConfigurableTypes";
+import { RangeValue } from "@react-types/shared";
+import { Inline } from "../Layout/Inline";
+import { Button } from "..";
 
 export type ShortcutProps<Value> = {
   label: LocalizedString;
@@ -25,104 +23,134 @@ type SingleDateFieldProps = {
 type RangeDateFieldProps = {
   type: "range";
   shortcuts?: ShortcutProps<[Date, Date]>[];
-} & FieldProps<[Date | null, Date | null]>;
+} & FieldProps<[Date, Date] | null>;
 type Props = (SingleDateFieldProps | RangeDateFieldProps) & {
-  minDate?: UseDatepickerProps["minBookingDate"];
-  maxDate?: UseDatepickerProps["maxBookingDate"];
-  shouldDisableDate?: UseDatepickerProps["isDateBlocked"];
+  minDate?: Date;
+  maxDate?: Date;
+  shouldDisableDate?: (date: Date) => boolean;
   readOnly?: boolean;
 };
 
-export function DateField(props: Props) {
-  const inputConfig = useBentoConfig().input;
-  const startInputRef = useRef<HTMLInputElement>(null);
-  const endInputRef = useRef<HTMLInputElement>(null);
-  const [focusedInput, setFocusedInput] = useState<FocusedInput>(
-    props.autoFocus ? "startDate" : null
-  );
-  const [isFocused, setIsFocused] = useState(props.autoFocus ?? false);
-  const [isOpen, setIsOpen] = useState(props.autoFocus ?? false);
-  const validationState = props.readOnly ? "notSet" : props.issues ? "invalid" : "valid";
+function dateToCalendarDate(date: Date): CalendarDate {
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
 
-  const {
-    goToDate,
-    activeMonths,
-    goToNextMonths,
-    goToPreviousMonths,
-    focusedDate,
-    isDateFocused,
-    isDateBlocked,
-    isDateHovered,
-    isDateSelected,
-    isFirstOrLastSelectedDate,
-    onDateFocus,
-    onDateHover,
-    onDateSelect,
-    isStartDate,
-    isEndDate,
-  } = useDatepicker({
-    onDatesChange: ({ startDate, endDate, focusedInput }) => {
-      const newFocusedInput =
-        props.type === "range" || focusedInput !== "endDate" ? focusedInput : null;
-      if (newFocusedInput === null) {
-        setIsOpen(false);
-        startInputRef.current && startInputRef.current.focus();
-      }
-      if (newFocusedInput === "endDate" && endInputRef.current) endInputRef.current.focus();
-      if (newFocusedInput === "startDate" && startInputRef.current) startInputRef.current.focus();
+function SingleDateField({ disabled, readOnly, ...props }: Extract<Props, { type?: "single" }>) {
+  const localTimeZone = getLocalTimeZone();
 
-      if (props.type === "range") {
-        props.onChange([startDate, endDate]);
-      } else {
-        props.onChange(startDate);
-      }
+  const internalProps = {
+    ...props,
+    value: props.value ? dateToCalendarDate(props.value) : props.value,
+    onChange: (date: CalendarDate | null) => {
+      props.onChange(date?.toDate(localTimeZone) ?? null);
     },
-    startDate: props.type === "range" ? props.value[0] : props.value,
-    endDate: props.type === "range" ? props.value[1] : null,
-    isDateBlocked: props.shouldDisableDate,
-    focusedInput,
-    numberOfMonths: 1,
-    minBookingDate: props.minDate,
-    maxBookingDate: props.maxDate,
-  });
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: props.issues ? "invalid" : "valid",
+    minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
+    maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
+    isDateUnavailable: props.shouldDisableDate
+      ? (date: DateValue) => props.shouldDisableDate!(date.toDate(localTimeZone))
+      : undefined,
+    shouldForceLeadingZeros: true,
+  } as const;
+  const state = useDatePickerState(internalProps);
+  const ref = useRef(null);
+  const {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    descriptionProps,
+    errorMessageProps,
+    calendarProps,
+  } = useDatePicker(internalProps, state, ref);
 
-  const selectDate = (date: Date) => {
-    if (!isDateBlocked(date)) {
-      onDateSelect(date);
-      onDateFocus(date);
-    }
-  };
+  const shortcuts = props.shortcuts && (
+    <Inline space={4}>
+      {props.shortcuts.map((shortcut) => (
+        <Button
+          key={shortcut.label}
+          kind="transparent"
+          hierarchy="secondary"
+          size="small"
+          label={shortcut.label}
+          onPress={() => {
+            props.onChange(shortcut.value);
+            state.close();
+          }}
+        />
+      ))}
+    </Inline>
+  );
 
-  const { labelProps, descriptionProps, errorMessageProps } = useField({
-    ...props,
-  });
+  return (
+    <Field
+      {...props}
+      disabled={disabled}
+      labelProps={labelProps}
+      assistiveTextProps={descriptionProps}
+      errorMessageProps={errorMessageProps}
+    >
+      <Box {...groupProps} ref={ref}>
+        <Input
+          type="single"
+          fieldProps={fieldProps}
+          buttonProps={buttonProps}
+          isCalendarOpen={state.isOpen}
+        />
+      </Box>
+      {state.isOpen && (
+        <Calendar
+          type="single"
+          {...calendarProps}
+          inputRef={ref}
+          onClose={state.close}
+          shortcuts={shortcuts}
+        />
+      )}
+    </Field>
+  );
+}
 
-  const onDateClear = () => {
-    if (props.type === "range") {
-      if (focusedInput === "startDate") {
-        props.onChange([null, props.value[1]]);
+function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type: "range" }>) {
+  const localTimeZone = getLocalTimeZone();
+  const internalProps = {
+    ...props,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    validationState: props.issues ? "invalid" : "valid",
+    minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
+    maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
+    isDateUnavailable: props.shouldDisableDate
+      ? (date: DateValue) => props.shouldDisableDate!(date.toDate(localTimeZone))
+      : undefined,
+    value: props.value
+      ? {
+          start: dateToCalendarDate(props.value[0]),
+          end: dateToCalendarDate(props.value[1]),
+        }
+      : props.value,
+    onChange: (range: RangeValue<CalendarDate> | null) => {
+      if (!range) {
+        props.onChange(null);
       } else {
-        props.onChange([props.value[0], null]);
+        props.onChange([range.start.toDate(localTimeZone), range.end.toDate(localTimeZone)]);
       }
-    } else {
-      props.onChange(null);
-    }
-  };
-
-  const onInputFocus = (input: NonNullable<FocusedInput>) => () => {
-    if (!props.disabled && !props.readOnly) {
-      setIsFocused(true);
-      setFocusedInput(input);
-    }
-  };
-
-  const onInputClick = (input: NonNullable<FocusedInput>) => () => {
-    if (!props.disabled && !props.readOnly) {
-      setIsFocused(true);
-      setFocusedInput(input);
-      setIsOpen(true);
-    }
-  };
+    },
+  } as const;
+  const state = useDateRangePickerState(internalProps);
+  const ref = useRef(null);
+  const {
+    groupProps,
+    labelProps,
+    buttonProps,
+    descriptionProps,
+    errorMessageProps,
+    calendarProps,
+    startFieldProps,
+    endFieldProps,
+  } = useDateRangePicker(internalProps, state, ref);
 
   const shortcuts = props.shortcuts && (
     <Inline space={4}>
@@ -134,15 +162,8 @@ export function DateField(props: Props) {
           size="small"
           label={shortcut.label}
           onPress={() => {
-            if (props.type === "range") {
-              const value = shortcut.value as [Date, Date];
-              props.onChange(value);
-              onDateFocus(value[0]);
-            } else {
-              const value = shortcut.value as Date;
-              props.onChange(value);
-              onDateFocus(value);
-            }
+            props.onChange(shortcut.value);
+            state.close();
           }}
         />
       ))}
@@ -152,101 +173,34 @@ export function DateField(props: Props) {
   return (
     <Field
       {...props}
+      disabled={disabled}
       labelProps={labelProps}
       assistiveTextProps={descriptionProps}
       errorMessageProps={errorMessageProps}
     >
-      <Box
-        {...getRadiusPropsFromConfig(inputConfig.radius)}
-        paddingX={inputConfig.paddingX}
-        paddingY={inputConfig.paddingY}
-        background={inputConfig.background.default}
-        className={[
-          inputRecipe({ validation: validationState || "notSet" }),
-          bodyRecipe({
-            color: props.disabled ? "disabled" : "primary",
-            weight: "default",
-            size: inputConfig.fontSize,
-            ellipsis: false,
-          }),
-          dateFieldRecipe({ validation: validationState || "notSet", isFocused }),
-          {
-            readOnly: props.readOnly,
-          },
-        ]}
-        style={getReadOnlyBackgroundStyle(inputConfig)}
-        disabled={props.disabled}
-      >
-        <Columns space={16} alignY="center">
-          <Input
-            for="startDate"
-            currentDate={props.type === "range" ? props.value[0] : props.value}
-            inputRef={startInputRef}
-            disabled={props.disabled || false}
-            readOnly={props.readOnly || false}
-            onChange={onDateFocus}
-            isFocused={focusedInput === "startDate"}
-            onDateSelect={selectDate}
-            onDateClear={onDateClear}
-            onFocus={onInputFocus("startDate")}
-            onClick={onInputClick("startDate")}
-            onBlur={() => setIsFocused(false)}
-            isOpen={isOpen}
-          />
-          {props.type === "range" && (
-            <>
-              <Column width="content">
-                <IconMinus size={12} />
-              </Column>
-              <Input
-                for="endDate"
-                currentDate={props.value[1]}
-                inputRef={endInputRef}
-                disabled={props.disabled || false}
-                readOnly={props.readOnly || false}
-                onChange={onDateFocus}
-                isFocused={focusedInput === "endDate"}
-                onDateSelect={selectDate}
-                onDateClear={onDateClear}
-                onFocus={onInputFocus("endDate")}
-                onClick={onInputClick("endDate")}
-                onBlur={() => setIsFocused(false)}
-                isOpen={isOpen}
-              />
-            </>
-          )}
-        </Columns>
+      <Box {...groupProps} ref={ref}>
+        <Input
+          type="range"
+          fieldProps={{ start: startFieldProps, end: endFieldProps }}
+          buttonProps={buttonProps}
+          isCalendarOpen={state.isOpen}
+        />
       </Box>
-      {isOpen && (
+      {state.isOpen && (
         <Calendar
-          inputRef={focusedInput === "startDate" ? startInputRef : endInputRef}
-          type={props.type || "single"}
-          focusedDate={focusedDate}
-          isDateFocused={isDateFocused}
-          isDateBlocked={isDateBlocked}
-          isDateHovered={isDateHovered}
-          isDateSelected={isDateSelected}
-          isStartDate={isStartDate}
-          isEndDate={isEndDate}
-          isFirstOrLastSelectedDate={isFirstOrLastSelectedDate}
-          onDateFocus={onDateFocus}
-          onDateHover={onDateHover}
-          onDateSelect={selectDate}
-          activeDate={activeMonths[0]}
-          goToNextMonth={goToNextMonths}
-          goToPreviousMonth={goToPreviousMonths}
-          selectActiveDate={goToDate}
-          onClose={() => {
-            setIsOpen(false);
-            onDateFocus((props.type === "range" ? props.value[0] : props.value) || new Date());
-          }}
+          type="range"
+          {...calendarProps}
+          inputRef={ref}
+          onClose={state.close}
           shortcuts={shortcuts}
-          maxDate={props.maxDate}
-          minDate={props.minDate}
         />
       )}
     </Field>
   );
 }
 
+export function DateField(props: Props) {
+  return props.type === "range" ? <RangeDateField {...props} /> : <SingleDateField {...props} />;
+}
+
 export type { Props as DateFieldProps };
diff --git a/packages/bento-design-system/src/DateField/Day.tsx b/packages/bento-design-system/src/DateField/Day.tsx
index 49108f722..3afdc5002 100644
--- a/packages/bento-design-system/src/DateField/Day.tsx
+++ b/packages/bento-design-system/src/DateField/Day.tsx
@@ -1,22 +1,31 @@
-import { useDay } from "@datepicker-react/hooks";
-import { useEffect, useRef } from "react";
-import { Box } from "..";
-import { Body } from "../Typography/Body/Body";
-import type { CommonCalendarProps } from "./Calendar";
+import { useCalendarCell } from "@react-aria/calendar";
+import { useRef } from "react";
+import { CalendarState, RangeCalendarState } from "@react-stately/calendar";
+import { CalendarDate, isToday, getLocalTimeZone } from "@internationalized/date";
+import { useBentoConfig } from "../BentoConfigContext";
+import { Box } from "../Box/Box";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import {
-  topLeftRadius,
-  topRightRadius,
   bottomLeftRadius,
   bottomRightRadius,
   dayRecipe,
-} from "./DateField.css";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useBentoConfig } from "../BentoConfigContext";
+  topLeftRadius,
+  topRightRadius,
+} from "../DateField/DateField.css";
+import { Body } from "../Typography/Body/Body";
+import { mergeProps } from "@react-aria/utils";
 
-type Props = CommonCalendarProps & {
-  date: Date;
-  label: string;
-  type: "single" | "range";
+type Props = (
+  | {
+      type: "single";
+      state: CalendarState;
+    }
+  | {
+      type: "range";
+      state: RangeCalendarState;
+    }
+) & {
+  date: CalendarDate;
 };
 
 function computeStyle(props: {
@@ -59,78 +68,85 @@ function computeStyle(props: {
 
 export function Day(props: Props) {
   const config = useBentoConfig().dateField;
-  const dayRef = useRef<HTMLElement>(null);
-  const ref = useRef<HTMLButtonElement | null>(null);
+  const ref = useRef(null);
   const {
-    disabledDate,
-    isWithinHoverRange,
+    cellProps,
+    buttonProps,
     isSelected,
-    isSelectedStartOrEnd,
-    onKeyDown: _onKeyDown,
-    ...rest
-  } = useDay({
-    ...props,
-    dayRef: ref,
-  });
-
-  function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {
-    if (e.key === "Enter") {
-      rest.onClick();
-    } else {
-      _onKeyDown(e);
-    }
-  }
+    isInvalid,
+    isFocused,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate,
+  } = useCalendarCell({ date: props.date }, props.state, ref);
 
   const style = computeStyle({
     type: props.type,
-    isDisabled: disabledDate,
-    isStartDate: props.isStartDate(props.date),
-    isEndDate: props.isEndDate(props.date),
-    isInRange: isSelected,
-    isInHoverRange: isWithinHoverRange,
-    isFocused: props.isDateFocused(props.date),
+    isDisabled: isDisabled || isUnavailable || isInvalid,
+    isStartDate:
+      props.type === "single"
+        ? isSelected
+        : (isSelected && props.state.value && props.date.compare(props.state.value.start) === 0) ||
+          (props.state.highlightedRange &&
+            props.date.compare(props.state.highlightedRange.start) === 0),
+    isEndDate:
+      props.type === "single"
+        ? isSelected
+        : (isSelected && props.state.value && props.date.compare(props.state.value.end) === 0) ||
+          (props.state.highlightedRange &&
+            props.date.compare(props.state.highlightedRange.end) === 0),
+    isInRange:
+      props.type === "single"
+        ? isSelected
+        : isSelected &&
+          props.state.value &&
+          props.date.compare(props.state.value.end) < 0 &&
+          props.date.compare(props.state.value.start) > 0,
+    isInHoverRange:
+      props.type === "single"
+        ? isSelected
+        : props.state.highlightedRange &&
+          props.date.compare(props.state.highlightedRange.start) > 0 &&
+          props.date.compare(props.state.highlightedRange.end) < 0,
+    isFocused: isFocused,
   });
 
-  const isToday = props.date.getTime() === new Date().setHours(0, 0, 0, 0);
-
-  useEffect(() => {
-    if (
-      dayRef.current &&
-      props.inputRef.current &&
-      props.isDateFocused(props.date) &&
-      document.activeElement !== props.inputRef.current
-    ) {
-      dayRef.current.focus();
-    }
-  }, [props.isDateFocused(props.date)]);
-
   return (
     <Box
-      style={assignInlineVars(
-        typeof config.radius === "object"
-          ? {
-              [topLeftRadius]: `${config.radius.topLeft}px`,
-              [topRightRadius]: `${config.radius.topRight}px`,
-              [bottomLeftRadius]: `${config.radius.bottomLeft}px`,
-              [bottomRightRadius]: `${config.radius.bottomRight}px`,
-            }
-          : {
-              [topLeftRadius]: `${config.radius}px`,
-              [topRightRadius]: `${config.radius}px`,
-              [bottomLeftRadius]: `${config.radius}px`,
-              [bottomRightRadius]: `${config.radius}px`,
-            }
-      )}
+      as="td"
+      {...mergeProps(cellProps, buttonProps)}
+      ref={ref}
       className={dayRecipe({ style })}
-      width={config.dayWidth}
-      height={config.dayHeight}
-      {...rest}
-      onKeyDown={onKeyDown}
-      ref={dayRef}
+      style={{
+        ...assignInlineVars(
+          typeof config.dayRadius === "object"
+            ? {
+                [topLeftRadius]: `${config.dayRadius.topLeft}px`,
+                [topRightRadius]: `${config.dayRadius.topRight}px`,
+                [bottomLeftRadius]: `${config.dayRadius.bottomLeft}px`,
+                [bottomRightRadius]: `${config.dayRadius.bottomRight}px`,
+              }
+            : {
+                [topLeftRadius]: `${config.dayRadius}px`,
+                [topRightRadius]: `${config.dayRadius}px`,
+                [bottomLeftRadius]: `${config.dayRadius}px`,
+                [bottomRightRadius]: `${config.dayRadius}px`,
+              }
+        ),
+        width: config.dayWidth,
+        height: config.dayHeight,
+      }}
     >
-      <Body size={config.daySize} color="inherit" weight={isToday ? "strong" : "default"}>
-        {props.label}
-      </Body>
+      {!isOutsideVisibleRange && (
+        <Body
+          size={config.daySize}
+          color="inherit"
+          weight={isToday(props.date, getLocalTimeZone()) ? "strong" : "default"}
+        >
+          {formattedDate}
+        </Body>
+      )}
     </Box>
   );
 }
diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index d592b8eef..e3ab6c1fd 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -1,144 +1,183 @@
-import { useTextField } from "@react-aria/textfield";
-import { InputHTMLAttributes, RefObject, useEffect, useState } from "react";
-import { Box } from "..";
-import { input } from "./DateField.css";
-import { getInputValue, parseDate as _parseDate } from "@datepicker-react/hooks";
-import { useDateFormatter } from "@react-aria/i18n";
-import InputMask from "react-input-mask";
-import { DateFormatter } from "@internationalized/date";
+import { CalendarDate, createCalendar } from "@internationalized/date";
+import { AriaDateFieldOptions, useDateField, useDateSegment } from "@react-aria/datepicker";
+import { useLocale } from "@react-aria/i18n";
+import {
+  DateFieldState,
+  DateSegment as DateSegmentType,
+  useDateFieldState,
+} from "@react-stately/datepicker";
+import { useRef } from "react";
+import { Box } from "../Box/Box";
+import { inputRecipe } from "../Field/Field.css";
+import { bodyRecipe } from "../Typography/Body/Body.css";
+import { useBentoConfig } from "../BentoConfigContext";
+import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
+import { Body } from "../Typography/Body/Body";
+import { Inline } from "../Layout/Inline";
+import useDimensions from "react-cool-dimensions";
+import { IconCalendar, IconMinus } from "../Icons";
+import { AriaButtonProps } from "@react-types/button";
+import { IconButton } from "../IconButton/IconButton";
+import { getReadOnlyBackgroundStyle } from "../Field/utils";
+import { match, __ } from "ts-pattern";
+import { dateFieldRecipe, dateSegment } from "./DateField.css";
+import { ValidationState } from "@react-types/shared";
+import { Column, Columns } from "../Layout/Columns";
 
-type Props = {
-  for: "startDate" | "endDate";
-  currentDate: Date | null;
-  inputRef: RefObject<HTMLInputElement>;
-  isFocused: boolean;
-  onClick: () => void;
-  onFocus: () => void;
-  onBlur: () => void;
-  onChange: (date: Date) => void;
-  disabled: boolean;
-  readOnly: boolean;
-  onDateSelect: (date: Date) => void;
-  onDateClear: () => void;
-  isOpen: boolean;
+type Props = (
+  | { type: "single"; fieldProps: AriaDateFieldOptions<CalendarDate> }
+  | {
+      type: "range";
+      fieldProps: {
+        start: AriaDateFieldOptions<CalendarDate>;
+        end: AriaDateFieldOptions<CalendarDate>;
+      };
+    }
+) & {
+  buttonProps: AriaButtonProps<"button">;
+  isCalendarOpen: boolean;
 };
 
-function getDatePattern(dateFormatter: DateFormatter): string {
-  const parts = dateFormatter.formatToParts(new Date());
+function DateSegment({ segment, state }: { segment: DateSegmentType; state: DateFieldState }) {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const config = useBentoConfig().input;
 
-  return parts
-    .map((part) => {
-      switch (part.type) {
-        case "day":
-          return "dd";
-        case "month":
-          return "MM";
-        case "year":
-          return "yyyy";
-        default:
-          return undefined;
-      }
-    })
-    .filter((a) => !!a)
-    .join("/");
+  return (
+    <Box
+      {...segmentProps}
+      ref={ref}
+      className={dateSegment}
+      readOnly={state.isReadOnly}
+      // Note: we override aria-disabled and data-placeholder because they're not set for dividers
+      aria-disabled={state.isDisabled}
+      data-placeholder={!state.value}
+    >
+      <Body size={config.fontSize} color="inherit">
+        {segment.text}
+      </Body>
+    </Box>
+  );
 }
 
-function parseDate(value: string, pattern: string): Date | null {
-  const parsedDate = _parseDate(value, pattern, new Date());
-  if (!isNaN(parsedDate.getTime())) {
-    return parsedDate;
-  }
-  return null;
+function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions<CalendarDate> }) {
+  const { locale } = useLocale();
+  const ref = useRef(null);
+  const state = useDateFieldState({
+    ...fieldProps,
+    locale,
+    createCalendar,
+  });
+  const { fieldProps: dateFieldProps } = useDateField(fieldProps, state, ref);
+  return (
+    <Box {...dateFieldProps} ref={ref}>
+      <Inline space={0}>
+        {state.segments.map((segment, i) => (
+          <DateSegment key={i} segment={segment} state={state} />
+        ))}
+      </Inline>
+    </Box>
+  );
 }
 
 export function Input(props: Props) {
-  const dateFormatter = useDateFormatter({ day: "2-digit", month: "2-digit", year: "numeric" });
-  const datePattern = getDatePattern(dateFormatter);
-  const dateMask = datePattern.replace(/[a-zA-Z]/g, "9");
-  const [value, setValue] = useState("");
-  function setCurrentValue() {
-    return props.currentDate
-      ? setValue(getInputValue(props.currentDate, (date) => dateFormatter.format(date), ""))
-      : setValue("");
-  }
-  const onFocus = () => {
-    if (!props.readOnly) {
-      props.inputRef.current && props.inputRef.current.select();
-      props.onFocus();
-    }
-  };
-  const onBlur = () => {
-    props.onBlur();
-    setCurrentValue();
-  };
+  const config = useBentoConfig().input;
 
-  const { inputProps } = useTextField(
-    {
-      ...props,
-      label: props.for,
-      placeholder: datePattern.toUpperCase(),
-      type: "text",
-      value,
-      onChange: (value) => {
-        props.onClick();
-        setValue(value);
-        const newDate = parseDate(value, datePattern);
-        if (newDate) {
-          props.onChange(newDate);
-        }
-      },
-      isDisabled: props.disabled,
-      isReadOnly: props.readOnly,
-      onBlur,
-      onFocus,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          if (props.isOpen) {
-            const date = parseDate(value, datePattern);
-            if (date) {
-              props.onDateSelect(date);
-            } else {
-              if (value === "") {
-                props.onDateClear();
-              } else {
-                setCurrentValue();
-              }
-            }
-          } else {
-            props.onClick();
-          }
-        }
-      },
-      autoComplete: "off",
-    },
-    props.inputRef
-  );
+  const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({
+    // This is needed to include the padding in the width
+    useBorderBoxSize: true,
+  });
 
-  useEffect(setCurrentValue, [props.currentDate]);
+  const { validationState, isDisabled, isReadOnly } = match(props)
+    .with({ type: "single" }, (props) => {
+      return {
+        validationState: props.fieldProps.isReadOnly
+          ? "notSet"
+          : props.fieldProps.validationState ?? "notSet",
+        isDisabled: props.fieldProps.isDisabled,
+        isReadOnly: props.fieldProps.isReadOnly,
+      } as const;
+    })
+    .with({ type: "range" }, (props) => {
+      const isReadOnly = props.fieldProps.start.isReadOnly && props.fieldProps.end.isReadOnly;
+      const validationState: ValidationState | "notSet" = isReadOnly
+        ? ("notSet" as const)
+        : match([
+            props.fieldProps.start.validationState,
+            props.fieldProps.end.validationState,
+          ] as const)
+            .with(["invalid", __], [__, "invalid"], () => "invalid" as const)
+            .with([undefined, undefined], () => "notSet" as const)
+            .with([__, "valid"], ["valid", __], () => "valid" as const)
+            .exhaustive();
+
+      return {
+        validationState,
+        isDisabled: props.fieldProps.start.isDisabled && props.fieldProps.end.isDisabled,
+        isReadOnly,
+      } as const;
+    })
+    .exhaustive();
 
   return (
-    <InputMask {...inputProps} mask={dateMask} maskChar="">
-      {(maskedInputProps: InputHTMLAttributes<HTMLInputElement>) => {
-        const { onFocus, onBlur, ...rest } = inputProps;
-        return (
-          <Box
-            as="input"
-            type="text"
-            className={input}
-            ref={props.inputRef}
-            onClick={() => {
-              if (!props.disabled && !props.readOnly) {
-                props.onClick();
-              }
-            }}
-            {...rest}
-            {...maskedInputProps}
-            color={undefined}
-            width={undefined}
-            height={undefined}
+    <Box
+      {...getRadiusPropsFromConfig(config.radius)}
+      paddingX={config.paddingX}
+      paddingY={config.paddingY}
+      background={config.background.default}
+      className={[
+        inputRecipe({ validation: validationState }),
+        bodyRecipe({
+          color: isDisabled ? "disabled" : "primary",
+          weight: "default",
+          size: config.fontSize,
+          ellipsis: false,
+        }),
+        dateFieldRecipe({ validation: validationState, isCalendarOpen: props.isCalendarOpen }),
+        {
+          readOnly: isReadOnly,
+        },
+      ]}
+      style={{ paddingRight: rightAccessoryWidth, ...getReadOnlyBackgroundStyle(config) }}
+      position="relative"
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+    >
+      {props.type === "single" ? (
+        <DateField fieldProps={props.fieldProps} />
+      ) : (
+        <Columns space={16}>
+          <DateField fieldProps={props.fieldProps.start} />
+          <Column width="content">
+            <IconMinus size={24} />
+          </Column>
+          <DateField fieldProps={props.fieldProps.end} />
+        </Columns>
+      )}
+      {!isReadOnly && (
+        <Box
+          ref={rightAccessoryRef}
+          position="absolute"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          paddingX={config.paddingX}
+          top={0}
+          bottom={0}
+          right={0}
+        >
+          <IconButton
+            kind="transparent"
+            hierarchy="secondary"
+            label="Calendar"
+            size={16}
+            icon={IconCalendar}
+            {...props.buttonProps}
+            onPress={props.buttonProps.onPress!}
+            isDisabled={isDisabled}
           />
-        );
-      }}
-    </InputMask>
+        </Box>
+      )}
+    </Box>
   );
 }
diff --git a/packages/bento-design-system/src/DateField/Selector.tsx b/packages/bento-design-system/src/DateField/Selector.tsx
index b5d08d6e7..cf79bd849 100644
--- a/packages/bento-design-system/src/DateField/Selector.tsx
+++ b/packages/bento-design-system/src/DateField/Selector.tsx
@@ -1,46 +1,45 @@
-import { MonthType } from "@datepicker-react/hooks";
 import { useDateFormatter } from "@react-aria/i18n";
 import { useMemo } from "react";
-import { Box, Column, Columns, Menu } from "..";
+import { Box, Button, Menu } from "..";
 import { useBentoConfig } from "../BentoConfigContext";
 import { ListProps } from "../List/List";
-import { Label } from "../Typography/Label/Label";
-import { selector } from "./DateField.css";
+import { CalendarDate, getLocalTimeZone, isSameYear, isSameMonth } from "@internationalized/date";
+import { DateValue } from "@react-aria/calendar";
 
-function getYears(activeDate: Date, minDate?: Date, maxDate?: Date): Date[] {
-  const firstYear = new Date().getFullYear() - 100;
+function getYears(
+  activeDate: CalendarDate,
+  minDate?: DateValue,
+  maxDate?: DateValue
+): CalendarDate[] {
+  const firstYear = activeDate.set({ year: activeDate.year - 100 });
   return Array(200)
     .fill(0)
     .map((_, diff) => {
-      const yearDate = new Date(activeDate);
-      yearDate.setFullYear(firstYear + diff);
-      return yearDate;
+      return firstYear.add({ years: diff });
     })
     .filter(
       (year) =>
-        (minDate === undefined || year.getFullYear() >= minDate.getFullYear()) &&
-        (maxDate === undefined || year.getFullYear() <= maxDate.getFullYear())
+        (minDate === undefined || year.year >= minDate.year) &&
+        (maxDate === undefined || year.year <= maxDate.year)
     );
 }
 
-function getMonths(activeDate: Date): Date[] {
+function getMonths(activeDate: CalendarDate): CalendarDate[] {
   return Array(12)
     .fill(0)
     .map((_, month) => {
-      const monthDate = new Date(activeDate);
-      monthDate.setMonth(month);
-      return monthDate;
+      return activeDate.set({ month: month + 1 });
     });
 }
 
 type Props = {
-  activeMonth: MonthType;
-  onSelect: (date: Date) => void;
+  activeDate: CalendarDate;
+  onSelect: (date: CalendarDate) => void;
 } & (
   | {
       datePart: "year";
-      maxDate?: Date;
-      minDate?: Date;
+      maxDate?: DateValue;
+      minDate?: DateValue;
     }
   | {
       datePart: "month";
@@ -49,46 +48,41 @@ type Props = {
     }
 );
 
-export function Selector({ datePart, activeMonth, maxDate, minDate, onSelect }: Props) {
+export function Selector({ datePart, activeDate, maxDate, minDate, onSelect }: Props) {
   const config = useBentoConfig().dateField;
   const formatter = useDateFormatter(
-    datePart === "month" ? { month: "long" } : { year: "numeric" }
+    datePart === "month" ? { month: "short" } : { year: "numeric" }
   );
 
   const values =
-    datePart === "month"
-      ? getMonths(activeMonth.date)
-      : getYears(activeMonth.date, minDate, maxDate);
+    datePart === "month" ? getMonths(activeDate) : getYears(activeDate, minDate, maxDate);
 
   const options: ListProps["items"] = useMemo(
     () =>
       values.map((value) => {
         return {
-          label: formatter.format(value),
+          label: formatter.format(value.toDate(getLocalTimeZone())),
           onPress: () => onSelect(value),
-          isSelected: value.getTime() === activeMonth.date.getTime(),
+          isSelected: isSameMonth(value, activeDate) && isSameYear(value, activeDate),
         };
       }),
-    [values, activeMonth, onSelect, formatter]
+    [values, activeDate, onSelect, formatter]
   );
 
   return (
     <Menu
       size="medium"
-      trigger={(ref, triggerProps, { isOpen }) => (
-        <Box ref={ref} {...triggerProps} cursor="pointer" outline="none" className={selector}>
-          <Columns space={8} align="center" alignY="center">
-            <Column width="content">
-              <Label size={config.monthYearLabelSize} color="secondary" uppercase>
-                {formatter.format(activeMonth.date)}
-              </Label>
-            </Column>
-            <Column width="content">
-              {isOpen
-                ? config.monthYearSelectIcons.open({ size: 12 })
-                : config.monthYearSelectIcons.close({ size: 12 })}
-            </Column>
-          </Columns>
+      trigger={(ref, triggerProps, { isOpen, toggle }) => (
+        <Box ref={ref} {...triggerProps} display="inline-block" outline="none" tabIndex={undefined}>
+          <Button
+            kind="transparent"
+            hierarchy="secondary"
+            icon={isOpen ? config.monthYearSelectIcons.open : config.monthYearSelectIcons.close}
+            iconPosition="trailing"
+            label={formatter.format(activeDate.toDate(getLocalTimeZone()))}
+            size="small"
+            onPress={toggle}
+          />
         </Box>
       )}
       items={options}
diff --git a/packages/bento-design-system/src/IconButton/IconButton.tsx b/packages/bento-design-system/src/IconButton/IconButton.tsx
index 527518c60..387ba34c3 100644
--- a/packages/bento-design-system/src/IconButton/IconButton.tsx
+++ b/packages/bento-design-system/src/IconButton/IconButton.tsx
@@ -9,12 +9,13 @@ import { LocalizedString } from "../util/LocalizedString";
 import { useBentoConfig } from "../BentoConfigContext";
 import { match } from "ts-pattern";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
+import { PressEvent } from "@react-types/shared";
 
 type Props = {
   kind: "solid" | "transparent" | "outline";
   hierarchy: "primary" | "secondary" | "danger";
   label: LocalizedString;
-  onPress: () => void;
+  onPress: (e: PressEvent) => void;
   size: Exclude<IconProps["size"], 40>;
   tabIndex?: number;
   isDisabled?: boolean;
@@ -33,7 +34,7 @@ export function IconButton(props: Props) {
       // since it's deprecated in favor of `onPress`, but it works in practice.
       ["onClick" as any]: props.onPress,
       onPress: (e) => {
-        if (e.pointerType === "keyboard") props.onPress();
+        if (e.pointerType === "keyboard") props.onPress(e);
       },
     },
     ref
@@ -59,7 +60,10 @@ export function IconButton(props: Props) {
       tabIndex={props.tabIndex ?? buttonProps.tabIndex}
       alignItems="center"
       justifyContent="center"
-      {...getRadiusPropsFromConfig(config.radius)}
+      {...match(props.kind)
+        .with("solid", "outline", () => getRadiusPropsFromConfig(config.radius))
+        .with("transparent", () => {})
+        .exhaustive()}
       {...match(props.kind)
         .with("solid", "outline", () =>
           paddingConfig && typeof paddingConfig === "object" && "paddingX" in paddingConfig
diff --git a/packages/bento-design-system/src/index.ts b/packages/bento-design-system/src/index.ts
index da61b68a6..299c3dfb4 100644
--- a/packages/bento-design-system/src/index.ts
+++ b/packages/bento-design-system/src/index.ts
@@ -25,6 +25,7 @@ export * from "./CheckboxGroupField/CheckboxGroupField";
 export * from "./Chip/Chip";
 export * from "./ContentBlock/ContentBlock";
 export * from "./ContentWithSidebar/ContentWithSidebar";
+export * from "./DateField/Calendar";
 export * from "./DateField/DateField";
 export * from "./Disclosure/Disclosure";
 export * from "./DisclosureGroup/DisclosureGroup";
@@ -126,4 +127,4 @@ export { useComponentsShowcase } from "./useComponentsShowcase";
 
 export type { ClassValue } from "clsx";
 
-export { Time } from "@internationalized/date";
+export type { Time, CalendarDate, DateValue } from "@internationalized/date";
diff --git a/packages/bento-design-system/src/util/defaultConfigs.tsx b/packages/bento-design-system/src/util/defaultConfigs.tsx
index 0073021d1..4bb322f3e 100644
--- a/packages/bento-design-system/src/util/defaultConfigs.tsx
+++ b/packages/bento-design-system/src/util/defaultConfigs.tsx
@@ -637,8 +637,8 @@ export const dateField: DateFieldConfig = {
     open: IconChevronUp,
     close: IconChevronDown,
   },
-  dayWidth: 40,
-  dayHeight: 40,
+  dayWidth: 44,
+  dayHeight: 44,
   dayRadius: 16,
   daySize: "medium",
 };
diff --git a/packages/bento-design-system/stories/Components/DateField.stories.tsx b/packages/bento-design-system/stories/Components/DateField.stories.tsx
index 6fc7f5aba..a38474b05 100644
--- a/packages/bento-design-system/stories/Components/DateField.stories.tsx
+++ b/packages/bento-design-system/stories/Components/DateField.stories.tsx
@@ -52,13 +52,6 @@ export const ReadOnly = {
   },
 } satisfies Story;
 
-export const Range = {
-  args: {
-    value: [value, addDays(value, 2)],
-    type: "range",
-  },
-} satisfies Story;
-
 const inOneWeek = addWeeks(today, 1);
 export const SingleWithMinMax = {
   args: {
@@ -70,16 +63,6 @@ export const SingleWithMinMax = {
 } satisfies Story;
 
 const inOneMonth = addMonths(today, 1);
-export const RangeWithMinMax = {
-  args: {
-    value: [null, null],
-    type: "range",
-    minDate: today,
-    maxDate: inOneMonth,
-    assistiveText: "You can select a date between today and one month from now",
-  },
-} satisfies Story;
-
 export const SingleWithShortcuts = {
   args: {
     value: null,
@@ -99,41 +82,20 @@ export const SingleWithShortcuts = {
     ],
   },
 } satisfies Story;
-
-export const RangeWithShortcuts = {
-  args: {
-    value: [null, null],
-    type: "range",
-    shortcuts: [
-      {
-        label: "This Week",
-        value: [startOfWeek(today), endOfWeek(today)],
-      },
-      {
-        label: "This Month",
-        value: [startOfMonth(today), endOfMonth(today)],
-      },
-      {
-        label: "This Year",
-        value: [startOfYear(today), endOfYear(today)],
-      },
-    ],
-  },
-};
-
 export const DisabledDates = {
   args: {
     shouldDisableDate: (date: Date) => date.getDay() === 0,
   },
 };
-
 export const CalendarOpen = {
   args: {
     value,
   },
   play: async () => {
-    const input = screen.getByRole("textbox");
-    await waitFor(() => input.click());
+    const button = screen.getByRole("button");
+    await waitFor(async () => {
+      await button.click();
+    });
     // wait a bit to see if it solves Chromatic snapshot flakiness
     await new Promise((resolve) => setTimeout(resolve, 1000));
   },
@@ -147,3 +109,41 @@ export const CalendarOpen = {
       ]
     : [],
 } satisfies Story;
+
+export const Range = {
+  args: {
+    value: [value, addDays(value, 2)],
+    type: "range",
+  },
+} satisfies Story;
+
+export const RangeWithMinMax = {
+  args: {
+    value: null,
+    type: "range",
+    minDate: today,
+    maxDate: inOneMonth,
+    assistiveText: "You can select a date between today and one month from now",
+  },
+} satisfies Story;
+
+export const RangeWithShortcuts = {
+  args: {
+    value: null,
+    type: "range",
+    shortcuts: [
+      {
+        label: "This Week",
+        value: [startOfWeek(today), endOfWeek(today)],
+      },
+      {
+        label: "This Month",
+        value: [startOfMonth(today), endOfMonth(today)],
+      },
+      {
+        label: "This Year",
+        value: [startOfYear(today), endOfYear(today)],
+      },
+    ],
+  },
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6b72ea04..44cb4438f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,7 @@ importers:
       '@phosphor-icons/react': 2.0.13
       '@react-aria/breadcrumbs': 3.5.4
       '@react-aria/button': 3.8.1
+      '@react-aria/calendar': 3.4.0
       '@react-aria/checkbox': 3.10.0
       '@react-aria/datepicker': 3.6.0
       '@react-aria/dialog': 3.5.4
@@ -51,6 +52,7 @@ importers:
       '@react-aria/tooltip': 3.6.1
       '@react-aria/utils': 3.19.0
       '@react-aria/visually-hidden': 3.8.3
+      '@react-stately/calendar': 3.3.0
       '@react-stately/checkbox': 3.4.4
       '@react-stately/datepicker': 3.6.0
       '@react-stately/menu': 3.5.4
@@ -62,6 +64,7 @@ importers:
       '@react-stately/tooltip': 3.4.3
       '@react-types/breadcrumbs': 3.6.1
       '@react-types/button': 3.7.4
+      '@react-types/calendar': 3.3.0
       '@react-types/datepicker': 3.5.0
       '@react-types/link': 3.4.4
       '@react-types/menu': 3.9.3
@@ -157,6 +160,7 @@ importers:
       '@internationalized/date': 3.4.0
       '@react-aria/breadcrumbs': 3.5.4_react@18.2.0
       '@react-aria/button': 3.8.1_react@18.2.0
+      '@react-aria/calendar': 3.4.0_biqbaboplfbrettd7655fr4n2y
       '@react-aria/checkbox': 3.10.0_react@18.2.0
       '@react-aria/datepicker': 3.6.0_biqbaboplfbrettd7655fr4n2y
       '@react-aria/dialog': 3.5.4_biqbaboplfbrettd7655fr4n2y
@@ -178,6 +182,7 @@ importers:
       '@react-aria/tooltip': 3.6.1_react@18.2.0
       '@react-aria/utils': 3.19.0_react@18.2.0
       '@react-aria/visually-hidden': 3.8.3_react@18.2.0
+      '@react-stately/calendar': 3.3.0_react@18.2.0
       '@react-stately/checkbox': 3.4.4_react@18.2.0
       '@react-stately/datepicker': 3.6.0_react@18.2.0
       '@react-stately/menu': 3.5.4_react@18.2.0
@@ -187,6 +192,7 @@ importers:
       '@react-stately/slider': 3.4.1_react@18.2.0
       '@react-stately/toggle': 3.6.1_react@18.2.0
       '@react-stately/tooltip': 3.4.3_react@18.2.0
+      '@react-types/calendar': 3.3.0_react@18.2.0
       '@react-types/overlays': 3.8.1_react@18.2.0
       '@react-types/radio': 3.5.0_react@18.2.0
       '@react-types/shared': 3.19.0_react@18.2.0
@@ -5370,6 +5376,26 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/calendar/3.4.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-Ly+9KsOXWZTlOYDZeIYCWNuMZg7ZiJC497Z4U3SqaWmDsZaqwU8ZnLmZ1xUWq1cYvK9rnWPnnpby1JUgttY9RA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || 18
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || 18
+    dependencies:
+      '@internationalized/date': 3.4.0
+      '@react-aria/i18n': 3.8.1_react@18.2.0
+      '@react-aria/interactions': 3.17.0_react@18.2.0
+      '@react-aria/live-announcer': 3.3.1
+      '@react-aria/utils': 3.19.0_react@18.2.0
+      '@react-stately/calendar': 3.3.0_react@18.2.0
+      '@react-types/button': 3.7.4_react@18.2.0
+      '@react-types/calendar': 3.3.0_react@18.2.0
+      '@react-types/shared': 3.19.0_react@18.2.0
+      '@swc/helpers': 0.5.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@react-aria/checkbox/3.10.0_react@18.2.0:
     resolution: {integrity: sha512-1s5jkmag+41Fa2BwoOoM5cRRadDh3N8khgsziuGzD0NqvZLRCtHgDetNlileezFHwOeOWK6zCqDOrYLJhcMi8g==}
     peerDependencies:
@@ -5751,6 +5777,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-stately/calendar/3.3.0_react@18.2.0:
+    resolution: {integrity: sha512-fnqdxCTlkikgldEyW8ciPNUWhqaUsQKTx6X6XGob6VCwK59k0LmdlgZX+dXj0q2ezC+w4lnvz8TzpoRQ7GY8lw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || 18
+    dependencies:
+      '@internationalized/date': 3.4.0
+      '@react-stately/utils': 3.7.0_react@18.2.0
+      '@react-types/calendar': 3.3.0_react@18.2.0
+      '@react-types/datepicker': 3.5.0_react@18.2.0
+      '@react-types/shared': 3.19.0_react@18.2.0
+      '@swc/helpers': 0.5.1
+      react: 18.2.0
+    dev: false
+
   /@react-stately/checkbox/3.4.4_react@18.2.0:
     resolution: {integrity: sha512-TYNod4+4TmS73F+sbKXAMoBH810ZEBdpMfXlNttUCXfVkDXc38W7ucvpQxXPwF+d+ZhGk4DJZsUYqfVPyXXSGg==}
     peerDependencies:
@@ -5926,6 +5966,16 @@ packages:
       '@react-types/shared': 3.19.0_react@18.2.0
       react: 18.2.0
 
+  /@react-types/calendar/3.3.0_react@18.2.0:
+    resolution: {integrity: sha512-5Qga+eixj+PembMwzcJmQlxif4XhSJJ54JcoyYHVf6mYLw3aE81Jc52OBi1FEWBJOW9YVOTk7VbWPFFF/oBI8A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || 18
+    dependencies:
+      '@internationalized/date': 3.4.0
+      '@react-types/shared': 3.19.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
   /@react-types/calendar/3.3.1_react@18.2.0:
     resolution: {integrity: sha512-9pn4M8GK6dCMyCN5oilsGYnphe+tSU5zfHucdiVCOyss3HrOBVxLQnr9eZfDxN/nEqz7fCu8QPIIMFFgOi/YCA==}
     peerDependencies: