@homebound/beam 3.2.0-alpha.2 → 3.2.0

package/dist/index.js

@@ -4902,7 +4902,7 @@ function Chips(props) {
 // src/components/Table/GridTable.tsx
 import memoizeOne from "memoize-one";
 import { runInAction } from "mobx";
-import React13, { useEffect as useEffect19, useMemo as useMemo24, useRef as useRef39, useState as useState29 } from "react";
+import React13, { useEffect as useEffect19, useMemo as useMemo24, useRef as useRef38, useState as useState29 } from "react";
 import { Virtuoso as Virtuoso2 } from "react-virtuoso";
 
 // src/components/Layout/ScrollableContent.tsx
@@ -5482,50 +5482,27 @@ function useHover2(props) {
 }
 
 // src/hooks/usePersistedFilter.ts
-import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8 } from "react";
 import { JsonParam, useQueryParams as useQueryParams2 } from "use-query-params";
 function usePersistedFilter({ storageKey, filterDefs }) {
-  const filterImpls = useMemo8(
-    () => Object.fromEntries(safeEntries(filterDefs).map(([key, def]) => [key, def(key)])),
-    [filterDefs]
-  );
-  const filterKeys = useMemo8(() => Object.keys(filterImpls), [filterImpls]);
+  const filterKeys = Object.keys(filterDefs);
   const defaultFilter = useMemo8(
     () => Object.fromEntries(
-      safeEntries(filterImpls).filter(([, def]) => def.defaultValue !== void 0).map(([key, def]) => [key, def.defaultValue])
+      safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     ),
-    [filterImpls]
+    [filterDefs]
   );
   const [{ filter: queryParamsFilter }, setQueryParams] = useQueryParams2({ filter: JsonParam });
-  const [storedFilter, setStoredFilter] = useSessionStorage(
-    storageKey,
-    dehydrateFilter(filterImpls, defaultFilter) ?? defaultFilter
-  );
+  const [storedFilter, setStoredFilter] = useSessionStorage(storageKey, queryParamsFilter ?? defaultFilter);
   const isQueryParamFilterValid = hasValidFilterKeys(queryParamsFilter, filterKeys);
-  const serializedQueryParamsFilter = useMemo8(() => JSON.stringify(queryParamsFilter), [queryParamsFilter]);
-  const serializedStoredFilter = useMemo8(() => JSON.stringify(storedFilter), [storedFilter]);
-  const queryParamsFilterSnapshot = useMemo8(
-    () => parseSerializedValue(serializedQueryParamsFilter),
-    [serializedQueryParamsFilter]
-  );
-  const storedFilterSnapshot = useMemo8(() => parseSerializedValue(serializedStoredFilter), [serializedStoredFilter]);
-  const hydratedQueryParamsFilter = useMemo8(
-    () => isQueryParamFilterValid ? hydrateFilter(filterImpls, queryParamsFilterSnapshot) : void 0,
-    [filterImpls, isQueryParamFilterValid, queryParamsFilterSnapshot]
-  );
-  const hydratedStoredFilter = useMemo8(
-    () => hasValidFilterKeys(storedFilterSnapshot, filterKeys) ? hydrateFilter(filterImpls, storedFilterSnapshot) : void 0,
-    [filterImpls, filterKeys, storedFilterSnapshot]
-  );
-  const rawFilter = hydratedQueryParamsFilter ?? hydratedStoredFilter ?? defaultFilter;
-  const filter = useStableValue(rawFilter);
-  const setFilter = (filter2) => setQueryParams({ filter: dehydrateFilter(filterImpls, filter2) });
+  const filter = isQueryParamFilterValid ? queryParamsFilter : storedFilter ?? defaultFilter;
+  const setFilter = (filter2) => setQueryParams({ filter: filter2 });
   useEffect6(
     () => {
       if (queryParamsFilter === void 0) {
         setQueryParams({ filter: storedFilter }, "replaceIn");
       } else if (!isQueryParamFilterValid) {
-        setQueryParams({ filter: dehydrateFilter(filterImpls, defaultFilter) }, "replaceIn");
+        setQueryParams({ filter: defaultFilter }, "replaceIn");
       } else if (JSON.stringify(queryParamsFilter) !== JSON.stringify(storedFilter)) {
         setStoredFilter(queryParamsFilter);
       }
@@ -5537,46 +5514,7 @@ function usePersistedFilter({ storageKey, filterDefs }) {
   return { setFilter, filter };
 }
 function hasValidFilterKeys(queryParamsFilter, definedKeys) {
-  return !!queryParamsFilter && safeKeys(queryParamsFilter).every((key) => definedKeys.includes(key));
-}
-function hydrateFilter(filterImpls, value) {
-  if (typeof value !== "object" || value === null) return void 0;
-  const hydratedEntries = [];
-  safeEntries(value).forEach(([key, rawValue]) => {
-    const filter = filterImpls[key];
-    if (!filter) return;
-    const hydratedValue = filter.hydrate ? filter.hydrate(rawValue) : rawValue;
-    if (hydratedValue !== void 0) {
-      hydratedEntries.push([key, hydratedValue]);
-    }
-  });
-  return Object.fromEntries(hydratedEntries);
-}
-function dehydrateFilter(filterImpls, value) {
-  if (!value) return value;
-  return Object.fromEntries(
-    safeEntries(value).map(([key, rawValue]) => {
-      const filter = filterImpls[key];
-      return [
-        key,
-        // Let each filter own serialization so persisted state stays stable for non-plain JSON values like PlainDate.
-        filter?.dehydrate ? filter.dehydrate(rawValue) : rawValue
-      ];
-    })
-  );
-}
-function parseSerializedValue(value) {
-  return value === void 0 ? void 0 : JSON.parse(value);
-}
-function useStableValue(value) {
-  const stableValue = useRef6(value);
-  const stableKey = useRef6(JSON.stringify(value));
-  const nextKey = JSON.stringify(value);
-  if (stableKey.current !== nextKey) {
-    stableValue.current = value;
-    stableKey.current = nextKey;
-  }
-  return stableValue.current;
+  return queryParamsFilter && safeKeys(queryParamsFilter).every((key) => definedKeys.includes(key));
 }
 
 // src/hooks/useSessionStorage.ts
@@ -5999,122 +5937,21 @@ function CollapseToggle(props) {
 import { useContext as useContext12 } from "react";
 
 // src/inputs/Autocomplete.tsx
-import { useCallback as useCallback10, useRef as useRef24 } from "react";
+import { useCallback as useCallback10, useRef as useRef23 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition5 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
 
 // src/components/internal/DatePicker/DatePicker.tsx
 import { DayPicker } from "react-day-picker";
 
-// src/utils/plainDate.ts
-import { Temporal } from "temporal-polyfill";
-function jsDateToPlainDate(date) {
-  return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-}
-function formatPlainDate(date, format) {
-  switch (format) {
-    case "shortDate":
-      return date.toLocaleString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" });
-    case "date":
-      return date.toLocaleString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" });
-    case "shortWeekdayMonthDay":
-      return date.toLocaleString("en-US", { weekday: "short", month: "short", day: "numeric" });
-    case "longWeekdayMonthDayYear":
-      return `${date.toLocaleString("en-US", { weekday: "long" })} ${date.toLocaleString("en-US", { month: "long" })} ${date.day}, ${formatYear(date.year)}`;
-    case "monthYear":
-      return date.toLocaleString("en-US", { month: "long", year: "numeric" });
-    case "shortMonth":
-      return date.toLocaleString("en-US", { month: "short" });
-    case "year":
-      return formatYear(date.year);
-    case "weekdayInitial":
-      return date.toLocaleString("en-US", { weekday: "narrow" });
-    case "weekday":
-      return date.toLocaleString("en-US", { weekday: "long" });
-    default:
-      throw new Error(`Unsupported date format: ${format}`);
-  }
-}
-function todayPlainDate() {
-  return Temporal.Now.plainDateISO();
-}
-function isPlainDate(value) {
-  return value instanceof Temporal.PlainDate;
-}
-function parsePersistedPlainDate(value) {
-  if (isPlainDate(value)) return value;
-  if (value instanceof Date && !Number.isNaN(value.getTime())) {
-    return jsDateToPlainDate(value);
-  }
-  if (typeof value !== "string") return void 0;
-  try {
-    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-      return Temporal.PlainDate.from(value);
-    }
-  } catch {
-    return void 0;
-  }
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? void 0 : jsDateToPlainDate(date);
-}
-function dehydratePlainDate(value) {
-  return value?.toString();
-}
-function padNumber(value, length) {
-  return Math.abs(value).toString().padStart(length, "0");
-}
-function formatYear(year) {
-  return `${year < 0 ? "-" : ""}${padNumber(year, 4)}`;
-}
-
-// src/components/internal/DatePicker/dates.ts
-function plainDateToJsDate(date) {
-  return new Date(date.year, date.month - 1, date.day, 12);
-}
-function dateRangeToJsDateRange(range) {
-  if (!range) return void 0;
-  return {
-    from: range.from ? plainDateToJsDate(range.from) : void 0,
-    to: range.to ? plainDateToJsDate(range.to) : void 0
-  };
-}
-function jsDateRangeToDateRange(range) {
-  if (!range) return void 0;
-  return {
-    from: range.from ? jsDateToPlainDate(range.from) : void 0,
-    to: range.to ? jsDateToPlainDate(range.to) : void 0
-  };
-}
-function dateMatcherToDayPickerMatcher(matcher) {
-  if (typeof matcher === "function") {
-    return function dayPickerMatcher(date) {
-      return matcher(jsDateToPlainDate(date));
-    };
-  }
-  if (Array.isArray(matcher)) {
-    return matcher.map(plainDateToJsDate);
-  }
-  if (isPlainDate(matcher)) {
-    return plainDateToJsDate(matcher);
-  }
-  return {
-    from: matcher.from ? plainDateToJsDate(matcher.from) : void 0,
-    to: matcher.to ? plainDateToJsDate(matcher.to) : void 0
-  };
-}
-function dateMatchersToDayPickerMatchers(matchers) {
-  if (matchers === void 0) return void 0;
-  return Array.isArray(matchers) ? matchers.map(dateMatcherToDayPickerMatcher) : dateMatcherToDayPickerMatcher(matchers);
-}
-
 // src/components/internal/DatePicker/Day.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef6 } from "react";
 import { useDayRender } from "react-day-picker";
 import { trussProps as trussProps12, mergeProps as mergeProps3 } from "@homebound/truss/runtime";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Day(props) {
   const tid = useTestIds(props, "datePickerDay");
-  const buttonRef = useRef7(null);
+  const buttonRef = useRef6(null);
   const {
     isHidden,
     isButton,
@@ -6241,19 +6078,18 @@ var rangeBaseStyles = {
 };
 
 // src/components/internal/DatePicker/Header.tsx
-import { addMonths, addYears } from "date-fns";
+import { addMonths, addYears, format } from "date-fns";
 import { useNavigation } from "react-day-picker";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function Header(props) {
   const {
     displayMonth
   } = props;
-  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = useNavigation();
   return /* @__PURE__ */ jsxs10("div", { className: "df jcsb aic ml_12px mr_2px h_32px", children: [
-    /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "monthYear") }),
+    /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ jsxs10("div", { children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
@@ -6264,41 +6100,36 @@ function YearSkipHeader(props) {
   const {
     displayMonth
   } = props;
-  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = useNavigation();
   return /* @__PURE__ */ jsxs10("div", { className: "df jcsb aic ml_12px mr_12px h_32px", children: [
     /* @__PURE__ */ jsxs10("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "shortMonth") }),
+      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "MMM") }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addYears(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "year") }),
+      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "yyyy") }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addYears(displayMonth, 1)) })
     ] })
   ] });
 }
 
 // src/components/internal/DatePicker/WeekHeader.tsx
+import { addDays, format as format2, startOfWeek } from "date-fns";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function WeekHeader() {
-  const today = todayPlainDate();
-  const start = today.subtract({
-    days: today.dayOfWeek % 7
-  });
+  const start = startOfWeek(/* @__PURE__ */ new Date());
   const days = [];
   for (let i = 0; i < 7; i++) {
-    days.push(start.add({
-      days: i
-    }));
+    days.push(addDays(start, i));
   }
   return /* @__PURE__ */ jsx18("thead", { className: "rdp-head", children: /* @__PURE__ */ jsx18("tr", { className: "rdp-head_row", children: days.map((day) => /* @__PURE__ */ jsxs11("th", { scope: "col", className: "pt1 pb_12px pr1 pl1 fw4 fz_12px lh_16px gray400", children: [
-    /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: formatPlainDate(day, "weekdayInitial") }),
-    /* @__PURE__ */ jsx18("span", { className: "rdp-vhidden", children: formatPlainDate(day, "weekday") })
-  ] }, formatPlainDate(day, "weekday"))) }) });
+    /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: format2(day, "EEEEE") }),
+    /* @__PURE__ */ jsx18("span", { className: "rdp-vhidden", children: format2(day, "EEEE") })
+  ] }, format2(day, "EEEE"))) }) });
 }
 
 // src/components/internal/DatePicker/DatePicker.tsx
@@ -6320,15 +6151,15 @@ function DatePicker(props) {
         Head: WeekHeader,
         Day
       },
-      selected: value ? [plainDateToJsDate(value)] : [],
-      defaultMonth: plainDateToJsDate(value ?? todayPlainDate()),
+      selected: value ? [value] : [],
+      defaultMonth: value ?? /* @__PURE__ */ new Date(),
       onDayClick: (day, modifiers) => {
         if (modifiers.disabled) return;
-        onSelect(jsDateToPlainDate(day));
+        onSelect(day);
       },
-      disabled: dateMatchersToDayPickerMatchers(disabledDays),
+      disabled: disabledDays,
       modifiers: {
-        indicatorDot: dateMatchersToDayPickerMatchers(dottedDays) ?? []
+        indicatorDot: dottedDays ?? []
       }
     }
   ) });
@@ -6355,21 +6186,21 @@ function DateRangePicker(props) {
     useYearPicker
   } = props;
   const tid = useTestIds(props, "datePicker");
-  return /* @__PURE__ */ jsx21("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ jsx21(DayPicker2, { mode: "range", selected: dateRangeToJsDateRange(range), components: {
+  return /* @__PURE__ */ jsx21("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ jsx21(DayPicker2, { mode: "range", selected: range, components: {
     Caption: useYearPicker ? YearSkipHeader : Header,
     Head: WeekHeader,
     Day
-  }, defaultMonth: plainDateToJsDate(range?.to ?? range?.from ?? todayPlainDate()), onSelect: (selection, day, activeModifiers) => {
+  }, defaultMonth: range?.to ?? /* @__PURE__ */ new Date(), onSelect: (selection, day, activeModifiers) => {
     if (activeModifiers.disabled) return;
-    onSelect(jsDateRangeToDateRange(selection));
-  }, disabled: dateMatchersToDayPickerMatchers(disabledDays), modifiers: {
-    indicatorDot: dateMatchersToDayPickerMatchers(dottedDays) ?? []
+    onSelect(selection);
+  }, disabled: disabledDays, modifiers: {
+    indicatorDot: dottedDays ?? []
   } }) });
 }
 
 // src/components/internal/Menu.tsx
 import { camelCase } from "change-case";
-import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef10, useState as useState11 } from "react";
 import { FocusScope, useFilter as useFilter2, useMenu } from "react-aria";
 import { Item, Section, useTreeData, useTreeState } from "react-stately";
 
@@ -6414,7 +6245,7 @@ import { trussProps as trussProps21 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/MenuSearchField.tsx
 import { useTextField } from "@react-aria/textfield";
-import { useRef as useRef10 } from "react";
+import { useRef as useRef9 } from "react";
 
 // src/inputs/TextFieldBase.tsx
 import { useState as useState10 } from "react";
@@ -6513,7 +6344,7 @@ function InlineLabel({
 
 // src/components/Table/components/Row.tsx
 import { observer } from "mobx-react";
-import React6, { useCallback as useCallback6, useContext as useContext10, useRef as useRef9 } from "react";
+import React6, { useCallback as useCallback6, useContext as useContext10, useRef as useRef8 } from "react";
 import { mergeProps as mergeProps5 } from "react-aria";
 
 // src/components/Table/components/cell.tsx
@@ -6579,7 +6410,7 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 };
 
 // src/components/Table/components/ColumnResizeHandle.tsx
-import { useCallback as useCallback5, useContext as useContext8, useEffect as useEffect7, useRef as useRef8, useState as useState9 } from "react";
+import { useCallback as useCallback5, useContext as useContext8, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
 import { trussProps as trussProps16 } from "@homebound/truss/runtime";
 import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function findScrollableParent(element) {
@@ -6617,13 +6448,13 @@ function ColumnResizeHandle({
   const [guideLineX, setGuideLineX] = useState9(null);
   const [guideLineTop, setGuideLineTop] = useState9(0);
   const [guideLineHeight, setGuideLineHeight] = useState9(0);
-  const startXRef = useRef8(0);
-  const startWidthRef = useRef8(0);
-  const startHandleRightRef = useRef8(0);
-  const handleRef = useRef8(null);
-  const rafRef = useRef8(null);
-  const pendingMouseXRef = useRef8(null);
-  const scrollableParentRef = useRef8(null);
+  const startXRef = useRef7(0);
+  const startWidthRef = useRef7(0);
+  const startHandleRightRef = useRef7(0);
+  const handleRef = useRef7(null);
+  const rafRef = useRef7(null);
+  const pendingMouseXRef = useRef7(null);
+  const scrollableParentRef = useRef7(null);
   const tid = useTestIds({}, "columnResizeHandle");
   const handleMouseDown = useCallback5((e) => {
     e.preventDefault();
@@ -7765,7 +7596,7 @@ function RowImpl(props) {
   let foundFirstContentColumn = false;
   let minStickyLeftOffset = 0;
   let expandColumnHidden = false;
-  const ref = useRef9(null);
+  const ref = useRef8(null);
   const dragOverCallback = useCallback6((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback2(dragOverCallback, 100);
   const RowContent = () => /* @__PURE__ */ jsx28(RowTag, { ...mergeProps_12(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx28(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
@@ -8531,7 +8362,7 @@ var textFieldBaseMultilineTopPadding = 11;
 import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuSearchField(props) {
   const tid = useTestIds(props);
-  const inputRef = useRef10(null);
+  const inputRef = useRef9(null);
   const { labelProps, inputProps } = useTextField({ ...props }, inputRef);
   return /* @__PURE__ */ jsx31(
     TextFieldBase,
@@ -8615,7 +8446,7 @@ function Menu(props) {
       keys !== "all" && onChange && onChange([...keys.values()].map((k) => k.toString())[0]);
     }
   });
-  const menuRef = useRef11(null);
+  const menuRef = useRef10(null);
   const {
     menuProps
   } = useMenu({
@@ -8657,7 +8488,7 @@ function Menu(props) {
 }
 
 // src/components/internal/MenuItem.tsx
-import { useRef as useRef14 } from "react";
+import { useRef as useRef13 } from "react";
 import { useHover as useHover7, useMenuItem } from "react-aria";
 import { useHistory } from "react-router";
 import { Link as Link3 } from "react-router-dom";
@@ -8912,12 +8743,12 @@ var pressedOverlayCss = {
 };
 
 // src/components/ButtonModal.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef12 } from "react";
 import { useMenuTrigger } from "react-aria";
 import { useMenuTriggerState } from "react-stately";
 
 // src/components/internal/OverlayTrigger.tsx
-import { useMemo as useMemo13, useRef as useRef12 } from "react";
+import { useMemo as useMemo13, useRef as useRef11 } from "react";
 import { useOverlayPosition } from "react-aria";
 
 // src/components/Button.tsx
@@ -9607,7 +9438,7 @@ function OverlayTrigger(props) {
       }
     }
   }), [menuTriggerProps, state]);
-  const popoverRef = useRef12(null);
+  const popoverRef = useRef11(null);
   const {
     overlayProps: positionProps
   } = useOverlayPosition({
@@ -9669,7 +9500,7 @@ import { jsx as jsx39 } from "react/jsx-runtime";
 function ButtonModal(props) {
   const { storybookDefaultOpen, trigger, disabled, content, title } = props;
   const state = useMenuTriggerState({ isOpen: storybookDefaultOpen });
-  const buttonRef = useRef13(null);
+  const buttonRef = useRef12(null);
   const { menuTriggerProps } = useMenuTrigger({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -9753,7 +9584,7 @@ function MenuItemImpl(props) {
   const isDisabled = Boolean(disabled);
   const isSelected = state.selectionManager.selectedKeys.has(label);
   const isFocused = state.selectionManager.focusedKey === item.key;
-  const ref = useRef14(null);
+  const ref = useRef13(null);
   const history = useHistory();
   const {
     hoverProps,
@@ -9900,7 +9731,7 @@ function Popover(props) {
 }
 
 // src/inputs/internal/ComboBoxBase.tsx
-import { useCallback as useCallback9, useEffect as useEffect14, useMemo as useMemo16, useRef as useRef23, useState as useState19 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect14, useMemo as useMemo16, useRef as useRef22, useState as useState19 } from "react";
 import { useButton as useButton7, useComboBox as useComboBox2, useFilter as useFilter4, useOverlayPosition as useOverlayPosition4 } from "react-aria";
 import { Item as Item4, useComboBoxState as useComboBoxState2 } from "react-stately";
 import { trussProps as trussProps39 } from "@homebound/truss/runtime";
@@ -9971,13 +9802,13 @@ function useGrowingTextField({ inputRef, inputWrapRef, value, disabled, maxLines
 }
 
 // src/inputs/TreeSelectField/TreeSelectField.tsx
-import React9, { useCallback as useCallback8, useContext as useContext11, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef22, useState as useState17 } from "react";
+import React9, { useCallback as useCallback8, useContext as useContext11, useEffect as useEffect13, useMemo as useMemo15, useRef as useRef21, useState as useState17 } from "react";
 import { useButton as useButton6, useComboBox, useFilter as useFilter3, useOverlayPosition as useOverlayPosition3 } from "react-aria";
 import { Item as Item3, useComboBoxState } from "react-stately";
 import { trussProps as trussProps37 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/ListBox.tsx
-import { useEffect as useEffect12, useRef as useRef21, useState as useState16 } from "react";
+import { useEffect as useEffect12, useRef as useRef20, useState as useState16 } from "react";
 import { useListBox } from "react-aria";
 import { trussProps as trussProps36 } from "@homebound/truss/runtime";
 
@@ -9990,17 +9821,17 @@ import { useListBoxSection, useSeparator as useSeparator2 } from "react-aria";
 import { trussProps as trussProps35 } from "@homebound/truss/runtime";
 
 // src/inputs/internal/Option.tsx
-import { useRef as useRef17 } from "react";
+import { useRef as useRef16 } from "react";
 import { mergeProps as mergeProps12, useHover as useHover8, useOption } from "react-aria";
 
 // src/inputs/ChipSelectField.tsx
 import { camelCase as camelCase2 } from "change-case";
-import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef16, useState as useState15 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef15, useState as useState15 } from "react";
 import { mergeProps as mergeProps11, useButton as useButton5, useFocus as useFocus2, useOverlayPosition as useOverlayPosition2, useSelect } from "react-aria";
 import { Item as Item2, Section as Section2, useListData, useSelectState } from "react-stately";
 
 // src/inputs/ChipTextField.tsx
-import { useEffect as useEffect9, useRef as useRef15, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef14, useState as useState14 } from "react";
 import { useFocus } from "react-aria";
 import { trussProps as trussProps28 } from "@homebound/truss/runtime";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -10019,7 +9850,7 @@ function ChipTextField(props) {
   const {
     fieldProps
   } = usePresentationContext();
-  const valueRef = useRef15(value);
+  const valueRef = useRef14(value);
   const tid = useTestIds(props, "chipField");
   const [isFocused, setIsFocused] = useState14(false);
   const {
@@ -10040,7 +9871,7 @@ function ChipTextField(props) {
     onBlur: () => maybeCall(onBlur),
     onFocusChange: setIsFocused
   });
-  const fieldRef = useRef15(null);
+  const fieldRef = useRef14(null);
   useEffect9(
     () => {
       autoFocus && fieldRef.current?.focus();
@@ -10147,7 +9978,7 @@ function defaultOptionLabel(opt) {
 import { trussProps as trussProps30 } from "@homebound/truss/runtime";
 import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function ChipSelectField(props) {
-  const firstRender = useRef16(true);
+  const firstRender = useRef15(true);
   const {
     fieldProps
   } = usePresentationContext();
@@ -10205,10 +10036,10 @@ function ChipSelectField(props) {
   } = useFocus2({
     onFocusChange: setIsClearFocused
   });
-  const buttonRef = useRef16(null);
-  const popoverRef = useRef16(null);
-  const listBoxRef = useRef16(null);
-  const wrapperRef = useRef16(null);
+  const buttonRef = useRef15(null);
+  const popoverRef = useRef15(null);
+  const listBoxRef = useRef15(null);
+  const wrapperRef = useRef15(null);
   const listData = useListData({
     initialItems: !onCreateNew ? options : [{
       title: "Options",
@@ -10412,7 +10243,7 @@ function Option(props) {
     scrollToIndex,
     disabledReason
   } = props;
-  const ref = useRef17(null);
+  const ref = useRef16(null);
   const {
     hoverProps,
     isHovered
@@ -10491,7 +10322,7 @@ function Option(props) {
 
 // src/inputs/internal/VirtualizedOptions.tsx
 import { getInteractionModality } from "@react-aria/interactions";
-import { useEffect as useEffect11, useRef as useRef20 } from "react";
+import { useEffect as useEffect11, useRef as useRef19 } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 // src/inputs/internal/LoadingDots.tsx
@@ -10539,11 +10370,11 @@ function LoadingDots({
 }
 
 // src/inputs/TreeSelectField/TreeOption.tsx
-import { useRef as useRef19 } from "react";
+import { useRef as useRef18 } from "react";
 import { useHover as useHover10, useOption as useOption2 } from "react-aria";
 
 // src/inputs/CheckboxBase.tsx
-import { useRef as useRef18 } from "react";
+import { useRef as useRef17 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing5, useHover as useHover9, VisuallyHidden as VisuallyHidden3 } from "react-aria";
 import { trussProps as trussProps33 } from "@homebound/truss/runtime";
 import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -10562,7 +10393,7 @@ function CheckboxBase(props) {
     tooltip,
     fullWidth = false
   } = props;
-  const ref = useRef18(null);
+  const ref = useRef17(null);
   const {
     isFocusVisible,
     focusProps
@@ -10707,7 +10538,7 @@ function TreeOption(props) {
   const leveledOption = item.value;
   if (!leveledOption) return null;
   const [option, level] = leveledOption;
-  const ref = useRef19(null);
+  const ref = useRef18(null);
   const {
     hoverProps,
     isHovered
@@ -10857,7 +10688,7 @@ function VirtualizedOptions(props) {
     isTree,
     allowCollapsing
   } = props;
-  const virtuosoRef = useRef20(null);
+  const virtuosoRef = useRef19(null);
   const focusedKey = state.selectionManager.focusedKey;
   const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
   const selectedItem = state.selectionManager.selectedKeys.size > 0 ? state.collection.getItem([...state.selectionManager.selectedKeys.values()][0]) : void 0;
@@ -10871,6 +10702,7 @@ function VirtualizedOptions(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [focusedItem]
   );
+  const key = process.env.NODE_ENV === "test" ? items.length : "virtuoso";
   return /* @__PURE__ */ jsx50(
     Virtuoso,
     {
@@ -10878,11 +10710,6 @@ function VirtualizedOptions(props) {
       totalListHeightChanged: onListHeightChange,
       totalCount: items.length,
       ...process.env.NODE_ENV === "test" ? {
-        // In tests, we render all rows so assertions can see expands/async-loaded items. However,
-        // the `initialItemCount` (next prop) is only applied on amount, so we set `key={items.length}`
-        // to force a remount when our list changes -- and we only want/need this in tests, b/c otherwise
-        // in production a Virtuoso remount causes visible flashing.
-        key: items.length,
         // We don't really need to set this, but it's handy for tests, which would otherwise render
         // just 1 row. A better way to do this would be to jest.mock out Virtuoso with an impl that
         // just rendered everything, but doing this for now.
@@ -10925,7 +10752,8 @@ function VirtualizedOptions(props) {
       components: !loading ? {} : {
         Footer: typeof loading === "function" ? loading : () => /* @__PURE__ */ jsx50(LoadingDots, { contrast })
       }
-    }
+    },
+    key
   );
 }
 
@@ -11015,9 +10843,9 @@ function ListBox(props) {
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
   const firstItem = state.collection.at(0);
   const hasSections = firstItem && firstItem.type === "section";
-  const selectedList = useRef21(null);
-  const firstRender = useRef21(true);
-  const virtuosoListHeight = useRef21(0);
+  const selectedList = useRef20(null);
+  const firstRender = useRef20(true);
+  const virtuosoListHeight = useRef20(0);
   const onListHeightChange = (listHeight) => {
     virtuosoListHeight.current = listHeight;
     const height = (selectedList.current?.offsetHeight || 0) + listHeight;
@@ -11052,7 +10880,7 @@ function ListBox(props) {
       boxShadow: "bshBasic h_bshHover"
     } : {}
   }), ref: listBoxRef, ...listBoxProps, children: [
-    isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && /* @__PURE__ */ jsx53("ul", { className: "p_0 m_0 lis_none pt2 pl2 pb1 pr1 df bbs_solid bbw_1px bcGray200 flexWrap_wrap maxh_50 oa", ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ jsx53(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
+    isMultiSelect && selectedOptions.length > 0 && /* @__PURE__ */ jsx53("ul", { className: "p_0 m_0 lis_none pt2 pl2 pb1 pr1 df bbs_solid bbw_1px bcGray200 flexWrap_wrap maxh_50 oa", ref: selectedList, children: selectedOptions.map((o) => /* @__PURE__ */ jsx53(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
     /* @__PURE__ */ jsx53("ul", { className: "p_0 m_0 lis_none fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ jsx53(
       ListBoxSection,
       {
@@ -11203,14 +11031,15 @@ function TreeSelectFieldBase(props) {
       if (!maybeOption) return [];
       return [maybeOption.option];
     });
-    const selectedOptionsLabels = chipDisplay === "root" ? initialOptions.flatMap((o) => getTopLevelSelections(o, selectedKeys, getOptionValue)).map(getOptionLabel) : chipDisplay === "leaf" ? selectedOptions.filter((o) => !o.children || o.children.length === 0).map(getOptionLabel) : selectedOptions.map(getOptionLabel);
+    const selectedChipState = getSelectedChipState(initialOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue);
     return {
       selectedKeys: [...selectedKeys],
       searchValue: void 0,
-      inputValue: selectedOptions.length === 1 ? getOptionLabel([...selectedOptions][0]) : isReadOnly && selectedOptions.length > 0 ? selectedOptionsLabels.join(", ") : selectedOptions.length === 0 ? nothingSelectedText : "",
+      inputValue: selectedOptions.length === 1 ? getOptionLabel([...selectedOptions][0]) : isReadOnly && selectedOptions.length > 0 ? selectedChipState.labels.join(", ") : selectedOptions.length === 0 ? nothingSelectedText : "",
       selectedOptions,
+      selectedChipOptions: selectedChipState.options,
       allOptions: initialOptions,
-      selectedOptionsLabels,
+      selectedOptionsLabels: selectedChipState.labels,
       optionsLoading: false,
       allowCollapsing: true
     };
@@ -11259,7 +11088,7 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }, []);
-  const firstOpen = useRef22(true);
+  const firstOpen = useRef21(true);
   function onOpenChange(isOpen) {
     if (firstOpen.current && isOpen) {
       maybeInitLoad(options, setFieldState);
@@ -11309,7 +11138,9 @@ function TreeSelectFieldBase(props) {
             searchValue: void 0,
             allowCollapsing: true,
             selectedKeys: [],
-            selectedOptions: []
+            selectedOptions: [],
+            selectedChipOptions: [],
+            selectedOptionsLabels: []
           }));
           onSelect({
             all: {
@@ -11376,6 +11207,7 @@ function TreeSelectFieldBase(props) {
         const rootValues = rootOptions.map(getOptionValue);
         const leafOptions = selectedOptions.filter((o) => !o.children || o.children.length === 0);
         const leafValues = leafOptions.map(getOptionValue);
+        const selectedChipState = getSelectedChipState(fieldState.allOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue);
         setFieldState((prevState) => ({
           ...prevState,
           // Since we reset the list of options upon selection changes, then set the `inputValue` to empty string to reflect that.
@@ -11383,7 +11215,8 @@ function TreeSelectFieldBase(props) {
           searchValue: void 0,
           selectedKeys: [...selectedKeys],
           selectedOptions,
-          selectedOptionsLabels: chipDisplay === "root" ? rootOptions.map(getOptionLabel) : chipDisplay === "leaf" ? leafOptions.map(getOptionLabel) : selectedOptions.map(getOptionLabel)
+          selectedChipOptions: selectedChipState.options,
+          selectedOptionsLabels: selectedChipState.labels
         }));
         onSelect({
           all: {
@@ -11416,12 +11249,12 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
-  const comboBoxRef = useRef22(null);
-  const triggerRef = useRef22(null);
-  const inputRef = useRef22(null);
-  const inputWrapRef = useRef22(null);
-  const listBoxRef = useRef22(null);
-  const popoverRef = useRef22(null);
+  const comboBoxRef = useRef21(null);
+  const triggerRef = useRef21(null);
+  const inputRef = useRef21(null);
+  const inputWrapRef = useRef21(null);
+  const listBoxRef = useRef21(null);
+  const popoverRef = useRef21(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -11482,7 +11315,7 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ jsx54(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true })
+        children: /* @__PURE__ */ jsx54(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true })
       }
     )
   ] });
@@ -11512,6 +11345,25 @@ function isOptionFullySelected(option, selectedKeys, disabledKeys, groupKeys, ge
   if (!option.children || option.children.length === 0) return false;
   return option.children.every((child) => isOptionFullySelected(child, selectedKeys, disabledKeys, groupKeys, getOptionValue));
 }
+function getSelectedChipState(allOptions, selectedOptions, selectedKeys, chipDisplay, getOptionLabel, getOptionValue) {
+  const options = chipDisplay === "root" ? dedupeOptionsByValue(allOptions.flatMap((option) => getTopLevelSelections(option, selectedKeys, getOptionValue)), getOptionValue) : chipDisplay === "leaf" ? selectedOptions.filter(isLeafOption) : selectedOptions;
+  return {
+    options,
+    labels: options.map(getOptionLabel)
+  };
+}
+function dedupeOptionsByValue(options, getOptionValue) {
+  const seen = /* @__PURE__ */ new Set();
+  return options.filter(function filterOption(option) {
+    const key = valueToKey(getOptionValue(option));
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+function isLeafOption(option) {
+  return !option.children || option.children.length === 0;
+}
 
 // src/inputs/internal/ComboBoxInput.tsx
 import { jsx as jsx55 } from "react/jsx-runtime";
@@ -11550,7 +11402,6 @@ function ComboBoxInput(props) {
   } = useTreeSelectFieldProvider();
   const [isFocused, setIsFocused] = useState18(false);
   const isMultiSelect = state.selectionManager.selectionMode === "multiple";
-  const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
   const showChipSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 0;
   const showFieldDecoration = (!isMultiSelect || isMultiSelect && !isFocused) && fieldDecoration && selectedOptions.length === 1;
   const multilineProps = allowWrap ? {
@@ -11558,6 +11409,8 @@ function ComboBoxInput(props) {
     multiline: true
   } : {};
   const chipLabels = isTree ? selectedOptionsLabels || [] : selectedOptions.map((o) => getOptionLabel(o));
+  const selectedChipCount = chipLabels.length;
+  const showNumSelection = isMultiSelect && selectedChipCount > 1;
   useGrowingTextField({
     // This says: When using a multiselect, then only enable the growing textfield when we are focused on it.
     // Because otherwise, we're not displaying the input element that dictates the height (we're displaying <Chips/>). This would cause incorrect calculations
@@ -11568,7 +11421,7 @@ function ComboBoxInput(props) {
   });
   return /* @__PURE__ */ jsx55(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ jsx55(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? {
     fontWeight: "fw5"
-  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ jsx55(Tooltip, { title: /* @__PURE__ */ jsx55(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx55(CountBadge, { count: isTree ? selectedOptionsLabels?.length ?? 0 : state.selectionManager.selectedKeys.size, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx55("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps38({
+  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ jsx55(Tooltip, { title: /* @__PURE__ */ jsx55(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx55(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx55("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps38({
     ...{
       borderRadius: "br4",
       outline: "outline0",
@@ -11772,7 +11625,7 @@ function ComboBoxBase(props) {
       }));
     }
   }
-  const firstOpen = useRef23(true);
+  const firstOpen = useRef22(true);
   function onOpenChange(isOpen) {
     if (firstOpen.current && isOpen) {
       maybeInitLoad();
@@ -11785,12 +11638,12 @@ function ComboBoxBase(props) {
       }));
     }
   }
-  const comboBoxRef = useRef23(null);
-  const triggerRef = useRef23(null);
-  const inputRef = useRef23(null);
-  const inputWrapRef = useRef23(null);
-  const listBoxRef = useRef23(null);
-  const popoverRef = useRef23(null);
+  const comboBoxRef = useRef22(null);
+  const triggerRef = useRef22(null);
+  const inputRef = useRef22(null);
+  const inputWrapRef = useRef22(null);
+  const listBoxRef = useRef22(null);
+  const popoverRef = useRef22(null);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
   const comboBoxChildren = useCallback9((item) => /* @__PURE__ */ jsx56(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
   const selectedKeys = useMemo16(() => {
@@ -12024,10 +11877,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = useComboBoxState3(comboBoxProps);
-  const inputWrapRef = useRef24(null);
-  const inputRef = useRef24(null);
-  const listBoxRef = useRef24(null);
-  const popoverRef = useRef24(null);
+  const inputWrapRef = useRef23(null);
+  const inputRef = useRef23(null);
+  const listBoxRef = useRef23(null);
+  const popoverRef = useRef23(null);
   const { inputProps, listBoxProps, labelProps } = useComboBox3(
     {
       ...comboBoxProps,
@@ -12094,7 +11947,7 @@ function Autocomplete(props) {
 }
 
 // src/inputs/Checkbox.tsx
-import { useRef as useRef25 } from "react";
+import { useRef as useRef24 } from "react";
 import { useCheckbox } from "react-aria";
 import { useToggleState } from "react-stately";
 import { jsx as jsx58 } from "react/jsx-runtime";
@@ -12104,7 +11957,7 @@ function Checkbox(props) {
   const isIndeterminate = selected === "indeterminate";
   const ariaProps = { isSelected, isDisabled: !!disabled, isIndeterminate, ...otherProps };
   const checkboxProps = { ...ariaProps, "aria-label": label };
-  const ref = useRef25(null);
+  const ref = useRef24(null);
   const toggleState = useToggleState(ariaProps);
   const { inputProps } = useCheckbox(checkboxProps, toggleState, ref);
   return /* @__PURE__ */ jsx58(
@@ -12123,7 +11976,7 @@ function Checkbox(props) {
 }
 
 // src/inputs/CheckboxGroup.tsx
-import { useRef as useRef26 } from "react";
+import { useRef as useRef25 } from "react";
 import { useCheckboxGroup, useCheckboxGroupItem } from "react-aria";
 import { useCheckboxGroupState } from "react-stately";
 import { trussProps as trussProps40 } from "@homebound/truss/runtime";
@@ -12198,7 +12051,7 @@ function CheckboxGroupItem(props) {
     ...ariaProps,
     "aria-label": label
   };
-  const ref = useRef26(null);
+  const ref = useRef25(null);
   const {
     inputProps
   } = useCheckboxGroupItem(checkboxProps, groupState, ref);
@@ -12206,37 +12059,69 @@ function CheckboxGroupItem(props) {
 }
 
 // src/inputs/DateFields/DateField.mock.tsx
+import { format as format3, parse } from "date-fns";
 import { useState as useState20 } from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+function DateFieldMock(props) {
+  const { onChange = () => {
+  }, errorMsg, onBlur, onFocus } = props;
+  const [value, setValue] = useState20(props.value ? format3(props.value, "MM/dd/yy") : "");
+  const tid = useTestIds(props, "date");
+  return /* @__PURE__ */ jsx60(
+    "input",
+    {
+      ...tid,
+      "data-error": !!errorMsg,
+      value,
+      onChange: (e) => {
+        const { value: value2 } = e.target;
+        setValue(value2);
+        onChange(parse(value2, "MM/dd/yy", /* @__PURE__ */ new Date()));
+      },
+      onBlur: () => maybeCall(onBlur),
+      onFocus: () => maybeCall(onFocus),
+      disabled: !!props.disabled,
+      readOnly: !!props.readOnly,
+      "data-disabled-days": JSON.stringify(props.disabledDays)
+    }
+  );
+}
+
+// src/inputs/DateFields/DateFieldBase.tsx
+import { useCallback as useCallback11, useEffect as useEffect15, useRef as useRef26, useState as useState21 } from "react";
+import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
+import { isDateRange } from "react-day-picker";
+import { useOverlayTriggerState } from "react-stately";
 
 // src/inputs/DateFields/utils.ts
-import { Temporal as Temporal2 } from "temporal-polyfill";
+import { format as dateFnsFormat, parse as dateFnsParse, isDate } from "date-fns";
 var dateFormats = {
-  short: "shortDate",
-  medium: "shortWeekdayMonthDay",
-  long: "longWeekdayMonthDayYear"
+  short: "MM/dd/yy",
+  medium: "EEE, MMM d",
+  long: "EEEE LLLL d, uuuu"
 };
-function getDateFormat(format) {
-  return format ? dateFormats[format] : dateFormats.short;
+function getDateFormat(format4) {
+  return format4 ? dateFormats[format4] : dateFormats.short;
 }
-function formatDate(date, format) {
+function formatDate(date, format4) {
   if (!date) return "";
-  return formatPlainDate(date, format);
+  return dateFnsFormat(date, format4);
 }
-function formatDateRange(date, format) {
+function formatDateRange(date, format4) {
   if (!date) return "";
   const { from, to } = date;
-  const fromFormatted = from ? formatPlainDate(from, format) : "";
-  const toFormatted = to ? formatPlainDate(to, format) : "";
+  const fromFormatted = from ? dateFnsFormat(from, format4) : "";
+  const toFormatted = to ? dateFnsFormat(to, format4) : "";
   return !fromFormatted && !toFormatted ? void 0 : `${fromFormatted} - ${toFormatted}`;
 }
-function parseDate(str, format) {
-  return parseDateString(str, format);
+function parseDate(str, format4) {
+  return parseDateString(str, format4);
 }
-function parseDateRange(str, format) {
+function parseDateRange(str, format4) {
   const [from = "", to = ""] = str.split("-");
-  const fromDate = parseDateString(from.trim(), format);
-  const toDate = parseDateString(to.trim(), format);
-  if (toDate && fromDate && Temporal2.PlainDate.compare(toDate, fromDate) < 0) {
+  const fromDate = parseDateString(from.trim(), format4);
+  const toDate = parseDateString(to.trim(), format4);
+  if (toDate && fromDate && toDate < fromDate) {
     return { from: toDate, to: fromDate };
   }
   if (toDate === void 0 && fromDate === void 0) {
@@ -12244,81 +12129,31 @@ function parseDateRange(str, format) {
   }
   return { from: fromDate, to: toDate };
 }
-function parseDateString(str, format) {
-  if (format !== dateFormats.short && format !== "date") {
-    return void 0;
-  }
+function parseDateString(str, format4) {
   const split = str.split("/");
   if (split.length !== 3) {
     return void 0;
   }
-  const yearLength = format === dateFormats.short ? 2 : 4;
-  if (split[2].length !== yearLength) {
+  if (split[2].length !== 2) {
     return void 0;
   }
-  const month = parseInt(split[0], 10);
+  const month = parseInt(split[0], 10) - 1;
   const day = parseInt(split[1], 10);
   const year = parseInt(split[2], 10);
-  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day) || day <= 0 || day > 31 || month <= 0 || month > 12) {
+  if (isNaN(year) || String(year).length > 4 || isNaN(month) || isNaN(day) || day <= 0 || day > 31 || month < 0 || month >= 12) {
     return void 0;
   }
-  try {
-    return Temporal2.PlainDate.from({
-      year: yearLength === 2 ? normalizeTwoDigitYear(year, todayPlainDate().year) : year,
-      month,
-      day
-    });
-  } catch {
+  const parsed = dateFnsParse(str, format4, /* @__PURE__ */ new Date());
+  if (!isValidDate(parsed)) {
     return void 0;
   }
+  return parsed;
 }
 function isValidDate(d) {
-  return d !== void 0 && isPlainDate(d);
-}
-function normalizeTwoDigitYear(twoDigitYear, currentYear) {
-  const isCommonEra = currentYear > 0;
-  const absCurrentYear = isCommonEra ? currentYear : 1 - currentYear;
-  if (absCurrentYear <= 50) {
-    return isCommonEra ? twoDigitYear || 100 : 1 - (twoDigitYear || 100);
-  }
-  const rangeEnd = absCurrentYear + 50;
-  const rangeEndCentury = Math.floor(rangeEnd / 100) * 100;
-  const isPreviousCentury = twoDigitYear >= rangeEnd % 100;
-  const normalizedYear = twoDigitYear + rangeEndCentury - (isPreviousCentury ? 100 : 0);
-  return isCommonEra ? normalizedYear : 1 - normalizedYear;
-}
-
-// src/inputs/DateFields/DateField.mock.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
-function DateFieldMock(props) {
-  const { onChange = () => {
-  }, errorMsg, onBlur, onFocus } = props;
-  const [value, setValue] = useState20(formatDate(props.value, dateFormats.short));
-  const tid = useTestIds(props, "date");
-  return /* @__PURE__ */ jsx60(
-    "input",
-    {
-      ...tid,
-      "data-error": !!errorMsg,
-      value,
-      onChange: (e) => {
-        const { value: value2 } = e.target;
-        setValue(value2);
-        onChange(parseDate(value2, dateFormats.short));
-      },
-      onBlur: () => maybeCall(onBlur),
-      onFocus: () => maybeCall(onFocus),
-      disabled: !!props.disabled,
-      readOnly: !!props.readOnly,
-      "data-disabled-days": JSON.stringify(props.disabledDays)
-    }
-  );
+  return d !== void 0 && isDate(d) && d.toString() !== "Invalid Date";
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-import { useCallback as useCallback11, useEffect as useEffect15, useRef as useRef27, useState as useState21 } from "react";
-import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
-import { useOverlayTriggerState } from "react-stately";
 import { trussProps as trussProps41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment18, jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 function DateFieldBase(props) {
@@ -12334,7 +12169,7 @@ function DateFieldBase(props) {
     errorMsg,
     helperText,
     readOnly,
-    format = "short",
+    format: format4 = "short",
     iconLeft = false,
     hideCalendarIcon = false,
     disabledDays,
@@ -12346,12 +12181,12 @@ function DateFieldBase(props) {
     ...others
   } = props;
   const isRangeMode = mode === "range";
-  const inputRef = useRef27(null);
-  const inputWrapRef = useRef27(null);
-  const buttonRef = useRef27(null);
-  const overlayRef = useRef27(null);
-  const isFocused = useRef27(false);
-  const dateFormat = getDateFormat(format);
+  const inputRef = useRef26(null);
+  const inputWrapRef = useRef26(null);
+  const buttonRef = useRef26(null);
+  const overlayRef = useRef26(null);
+  const isFocused = useRef26(false);
+  const dateFormat = getDateFormat(format4);
   const [wipValue, setWipValue] = useState21(value);
   const [inputValue, setInputValue] = useState21((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
   const tid = useTestIds(props, defaultTestId(label));
@@ -12440,20 +12275,16 @@ function DateFieldBase(props) {
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
-        if (isRangeMode && isDateRangeValue(d)) {
+        if (isRangeMode && isDateRange(d)) {
           props.onChange(d);
           return;
         }
-        if (!isRangeMode && !isDateRangeValue(d)) {
+        if (!isRangeMode && !isDateRange(d)) {
           props.onChange(d);
           return;
         }
       } else {
-        if (isRangeMode) {
-          props.onChange(void 0);
-        } else {
-          props.onChange(void 0);
-        }
+        props.onChange(void 0);
         return;
       }
     },
@@ -12461,7 +12292,7 @@ function DateFieldBase(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isRangeMode, props.onChange]
   );
-  const inputSize = !isRangeMode ? format === "short" ? 8 : format === "medium" ? 10 : void 0 : void 0;
+  const inputSize = !isRangeMode ? format4 === "short" ? 8 : format4 === "medium" ? 10 : void 0 : void 0;
   const clearButton = /* @__PURE__ */ jsx61(Fragment18, { children: inputValue !== "" && !state.isOpen && /* @__PURE__ */ jsx61(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
     setInputValue("");
     onChange(void 0);
@@ -12523,10 +12354,7 @@ function DateFieldBase(props) {
   ] });
 }
 function isParsedDateValid(d) {
-  return d !== void 0 && (!isDateRangeValue(d) || isValidDate(d.from) && isValidDate(d.to));
-}
-function isDateRangeValue(value) {
-  return typeof value === "object" && value !== null && ("from" in value || "to" in value);
+  return d !== void 0 && (!isDateRange(d) || isDateRange(d) && isValidDate(d.from) && isValidDate(d.to));
 }
 
 // src/utils/withTestMock.tsx
@@ -12713,7 +12541,7 @@ function MultiSelectField(props) {
 
 // src/inputs/NumberField.tsx
 import { NumberParser } from "@internationalized/number";
-import { useMemo as useMemo18, useRef as useRef28, useState as useState23 } from "react";
+import { useMemo as useMemo18, useRef as useRef27, useState as useState23 } from "react";
 import { mergeProps as mergeProps15, useLocale, useNumberField } from "react-aria";
 import { useNumberFieldState } from "react-stately";
 import { jsx as jsx68 } from "react/jsx-runtime";
@@ -12800,11 +12628,11 @@ function NumberField(props) {
     };
   }, [type, numberFormatOptions, defaultFormatOptions, numFractionDigits]);
   const numberParser = useMemo18(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
-  const valueRef = useRef28({
+  const valueRef = useRef27({
     wip: false
   });
-  const lastSentRef = useRef28(void 0);
-  const focusValueRef = useRef28(void 0);
+  const lastSentRef = useRef27(void 0);
+  const focusValueRef = useRef27(void 0);
   const [, forceRender] = useState23(0);
   const propValue = value === void 0 ? Number.NaN : value / factor;
   if (valueRef.current.wip && !Object.is(valueRef.current.value, propValue)) {
@@ -12852,7 +12680,7 @@ function NumberField(props) {
     ...otherProps
   };
   const state = useNumberFieldState(useProps);
-  const inputRef = useRef28(null);
+  const inputRef = useRef27(null);
   const {
     labelProps,
     inputProps,
@@ -12904,7 +12732,7 @@ function formatValue(value, factor, numFractionDigits, numIntegerDigits, positiv
 }
 
 // src/inputs/RadioGroupField.tsx
-import { Fragment as Fragment19, useMemo as useMemo19, useRef as useRef29 } from "react";
+import { Fragment as Fragment19, useMemo as useMemo19, useRef as useRef28 } from "react";
 import { useFocusRing as useFocusRing6, useHover as useHover12, useRadio, useRadioGroup } from "react-aria";
 import { useRadioGroupState } from "react-stately";
 import { trussProps as trussProps44 } from "@homebound/truss/runtime";
@@ -12980,7 +12808,7 @@ function Radio(props) {
   } = props;
   const labelId = `${parentId}-${value}-label`;
   const descriptionId = `${parentId}-${value}-description`;
-  const ref = useRef29(null);
+  const ref = useRef28(null);
   const {
     inputProps,
     isDisabled
@@ -13150,7 +12978,7 @@ var radioDisabled = {
 
 // src/inputs/RichTextField.tsx
 import DOMPurify from "dompurify";
-import { createElement, useEffect as useEffect16, useMemo as useMemo20, useRef as useRef30, useState as useState25 } from "react";
+import { createElement, useEffect as useEffect16, useMemo as useMemo20, useRef as useRef29, useState as useState25 } from "react";
 
 // src/inputs/RichTextField.mock.tsx
 import { camelCase as camelCase3 } from "change-case";
@@ -13206,13 +13034,13 @@ function RichTextFieldImpl(props) {
     fullWidth = fieldProps?.fullWidth ?? false
   } = props;
   const [editor, setEditor] = useState25();
-  const editorElement = useRef30();
-  const currentHtml = useRef30(void 0);
-  const onChangeRef = useRef30(onChange);
+  const editorElement = useRef29();
+  const currentHtml = useRef29(void 0);
+  const onChangeRef = useRef29(onChange);
   onChangeRef.current = onChange;
-  const onBlurRef = useRef30(onBlur);
+  const onBlurRef = useRef29(onBlur);
   onBlurRef.current = onBlur;
-  const onFocusRef = useRef30(onFocus);
+  const onFocusRef = useRef29(onFocus);
   onFocusRef.current = onFocus;
   const id = useMemo20(() => {
     if (readOnly) return;
@@ -13363,7 +13191,7 @@ function SelectField(props) {
 }
 
 // src/inputs/Switch.tsx
-import { useRef as useRef31 } from "react";
+import { useRef as useRef30 } from "react";
 import { useFocusRing as useFocusRing7, useHover as useHover13, useSwitch, VisuallyHidden as VisuallyHidden5 } from "react-aria";
 import { trussProps as trussProps46 } from "@homebound/truss/runtime";
 import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -13396,7 +13224,7 @@ function Switch(props) {
     ...otherProps
   };
   const state = toToggleState(isSelected, onChange);
-  const ref = useRef31(null);
+  const ref = useRef30(null);
   const {
     inputProps
   } = useSwitch({
@@ -13548,7 +13376,7 @@ function switchCircleSelectedStyles(isCompact) {
 }
 
 // src/inputs/TextAreaField.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef31 } from "react";
 import { mergeProps as mergeProps16, useTextField as useTextField3 } from "react-aria";
 import { jsx as jsx74 } from "react/jsx-runtime";
 function TextAreaField(props) {
@@ -13566,8 +13394,8 @@ function TextAreaField(props) {
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
   const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
-  const inputRef = useRef32(null);
-  const inputWrapRef = useRef32(null);
+  const inputRef = useRef31(null);
+  const inputWrapRef = useRef31(null);
   useGrowingTextField({ inputRef, inputWrapRef, value, maxLines });
   const { labelProps, inputProps } = useTextField3(
     {
@@ -13605,7 +13433,7 @@ function TextAreaField(props) {
 }
 
 // src/inputs/TextField.tsx
-import { useRef as useRef33 } from "react";
+import { useRef as useRef32 } from "react";
 import { mergeProps as mergeProps17, useTextField as useTextField4 } from "react-aria";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function TextField(props) {
@@ -13633,7 +13461,7 @@ function TextField(props) {
     validationState: errorMsg ? "invalid" : "valid",
     value
   };
-  const inputRef = useRef33(null);
+  const inputRef = useRef32(null);
   const { labelProps, inputProps } = useTextField4(
     {
       ...textFieldProps,
@@ -13669,7 +13497,7 @@ function TextField(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-import { useRef as useRef34, useState as useState26 } from "react";
+import { useRef as useRef33, useState as useState26 } from "react";
 import { useFocusRing as useFocusRing8, useHover as useHover14, usePress, useSwitch as useSwitch2, VisuallyHidden as VisuallyHidden6 } from "react-aria";
 import { useToggleState as useToggleState3 } from "react-stately";
 import { trussProps as trussProps47 } from "@homebound/truss/runtime";
@@ -13703,8 +13531,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = useRef34(null);
-  const ref = useRef34(null);
+  const labelRef = useRef33(null);
+  const ref = useRef33(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,
@@ -13790,7 +13618,7 @@ var togglePressStyles = {
 };
 
 // src/inputs/ToggleChipGroup.tsx
-import { useRef as useRef35 } from "react";
+import { useRef as useRef34 } from "react";
 import { useCheckboxGroup as useCheckboxGroup2, useCheckboxGroupItem as useCheckboxGroupItem2, useFocusRing as useFocusRing9, VisuallyHidden as VisuallyHidden7 } from "react-aria";
 import { useCheckboxGroupState as useCheckboxGroupState2 } from "react-stately";
 import { trussProps as trussProps48 } from "@homebound/truss/runtime";
@@ -13863,7 +13691,7 @@ function ToggleChip2(props) {
   } = props;
   const isDisabled = !!disabled;
   const isReadOnly = !!readonly;
-  const ref = useRef35(null);
+  const ref = useRef34(null);
   const {
     inputProps
   } = useCheckboxGroupItem2({
@@ -14913,9 +14741,9 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-import { useCallback as useCallback12, useRef as useRef36 } from "react";
+import { useCallback as useCallback12, useRef as useRef35 } from "react";
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
-  const hasLockedColumnsRef = useRef36(false);
+  const hasLockedColumnsRef = useRef35(false);
   const distributeAdjustment = useCallback12(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
@@ -15044,7 +14872,7 @@ function useScrollStorage(tableId, enabled = true) {
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
 import { useResizeObserver } from "@react-aria/utils";
-import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef37, useState as useState28 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect18, useRef as useRef36, useState as useState28 } from "react";
 
 // src/components/Table/hooks/useColumnResizing.ts
 import { useCallback as useCallback13, useEffect as useEffect17, useState as useState27 } from "react";
@@ -15103,9 +14931,9 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
   const { resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths } = useColumnResizing(
     disableColumnResizing ? void 0 : visibleColumnsStorageKey
   );
-  const calculateImmediately = useRef37(true);
+  const calculateImmediately = useRef36(true);
   const [tableWidth, setTableWidth] = useState28();
-  const prevTableWidthRef = useRef37(tableWidth);
+  const prevTableWidthRef = useRef36(tableWidth);
   const [columnSizes, setColumnSizes] = useState28(
     calcColumnSizes(columns, tableWidth, style.minWidthPx, expandedColumnIds, resizedWidths)
   );
@@ -15172,9 +15000,9 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
 }
 
 // src/hooks/useRenderCount.ts
-import { useCallback as useCallback15, useRef as useRef38 } from "react";
+import { useCallback as useCallback15, useRef as useRef37 } from "react";
 function useRenderCount() {
-  const ref = useRef38(/* @__PURE__ */ new Map());
+  const ref = useRef37(/* @__PURE__ */ new Map());
   const getCount = useCallback15((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
@@ -15231,10 +15059,10 @@ function GridTable(props) {
     disableColumnResizing = false
   } = props;
   const columnsWithIds = useMemo24(() => assignDefaultColumnIds(_columns), [_columns]);
-  const virtuosoRef = useRef39(null);
-  const virtuosoRangeRef = useRef39(null);
-  const resizeRef = useRef39(null);
-  const tableContainerRef = useRef39(null);
+  const virtuosoRef = useRef38(null);
+  const virtuosoRangeRef = useRef38(null);
+  const resizeRef = useRef38(null);
+  const tableContainerRef = useRef38(null);
   const api = useMemo24(
     () => {
       const api2 = props.api ?? new GridTableApiImpl();
@@ -15249,7 +15077,7 @@ function GridTable(props) {
     [props.api]
   );
   const [draggedRow, _setDraggedRow] = useState29(void 0);
-  const draggedRowRef = useRef39(draggedRow);
+  const draggedRowRef = useRef38(draggedRow);
   const setDraggedRow = (row) => {
     draggedRowRef.current = row;
     _setDraggedRow(row);
@@ -16095,17 +15923,17 @@ var variantStyles2 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext7, useContext as useContext17, useMemo as useMemo40, useReducer, useRef as useRef46 } from "react";
+import { createContext as createContext7, useContext as useContext17, useMemo as useMemo40, useReducer, useRef as useRef45 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback17, useEffect as useEffect23, useRef as useRef41, useState as useState32 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect23, useRef as useRef40, useState as useState32 } from "react";
 import { FocusScope as FocusScope4, OverlayContainer as OverlayContainer2, useDialog, useModal as useModal2, useOverlay as useOverlay2, usePreventScroll } from "react-aria";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Modal/useModal.tsx
-import { useEffect as useEffect22, useMemo as useMemo27, useRef as useRef40 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo27, useRef as useRef39 } from "react";
 
 // src/components/Modal/ModalContext.tsx
 import { createContext as createContext4, useContext as useContext13, useMemo as useMemo26 } from "react";
@@ -16123,8 +15951,8 @@ function useModalContext() {
 function useModal() {
   const { modalState, modalCanCloseChecks } = useBeamContext();
   const { inModal } = useModalContext();
-  const lastCanClose = useRef40();
-  const api = useRef40();
+  const lastCanClose = useRef39();
+  const api = useRef39();
   useEffect22(() => {
     return () => {
       modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16177,7 +16005,7 @@ function Modal(props) {
     allowClosing = true
   } = props;
   const isFixedHeight = typeof size !== "string";
-  const ref = useRef41(null);
+  const ref = useRef40(null);
   const {
     modalBodyDiv,
     modalFooterDiv,
@@ -16208,9 +16036,9 @@ function Modal(props) {
     role: "dialog"
   }, ref);
   const [[width2, height], setSize] = useState32(getSize(size));
-  const modalBodyRef = useRef41(null);
-  const modalFooterRef = useRef41(null);
-  const modalHeaderRef = useRef41(null);
+  const modalBodyRef = useRef40(null);
+  const modalFooterRef = useRef40(null);
+  const modalHeaderRef = useRef40(null);
   const testId = useTestIds({}, testIdPrefix);
   usePreventScroll();
   const {
@@ -16506,7 +16334,7 @@ function useSnackbarContext() {
 
 // src/components/SuperDrawer/SuperDrawer.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect as useEffect24, useRef as useRef42 } from "react";
+import { useEffect as useEffect24, useRef as useRef41 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/SuperDrawer/utils.ts
@@ -16528,7 +16356,7 @@ function SuperDrawer() {
   const {
     closeDrawer
   } = useSuperDrawer();
-  const headerRef = useRef42(null);
+  const headerRef = useRef41(null);
   const testId = useTestIds({}, "superDrawer");
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const {
@@ -16623,7 +16451,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback21, useEffect as useEffect25, useMemo as useMemo33, useRef as useRef43, useState as useState39 } from "react";
+import React16, { createRef, useCallback as useCallback21, useEffect as useEffect25, useMemo as useMemo33, useRef as useRef42, useState as useState39 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -18291,7 +18119,7 @@ function SectionNavLink(props) {
     });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = useRef43(null);
+  const buttonRef = useRef42(null);
   const {
     buttonProps,
     isPressed
@@ -18441,7 +18269,7 @@ function invertSpacing(value) {
 import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState42 } from "react";
 
 // src/components/ButtonMenu.tsx
-import { useRef as useRef44 } from "react";
+import { useRef as useRef43 } from "react";
 import { useMenuTrigger as useMenuTrigger2 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState2 } from "react-stately";
 import { jsx as jsx125 } from "react/jsx-runtime";
@@ -18453,7 +18281,7 @@ function ButtonMenu(props) {
     onChange = props.onChange;
   }
   const state = useMenuTriggerState2({ isOpen: defaultOpen });
-  const buttonRef = useRef44(null);
+  const buttonRef = useRef43(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger2({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -18560,16 +18388,8 @@ function dateFilter(props) {
 }
 var anyOption = {};
 var DateFilter = class extends BaseFilter {
-  hydrate(value) {
-    if (!isDateFilterValue(value)) return void 0;
-    const hydratedValue = parsePersistedPlainDate(value.value);
-    return hydratedValue ? { op: value.op, value: hydratedValue } : void 0;
-  }
-  dehydrate(value) {
-    return value ? { op: value.op, value: dehydratePlainDate(value.value) } : void 0;
-  }
   render(value, setValue, tid, inModal, vertical) {
-    const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
+    const { label, operations, getOperationValue, getOperationLabel } = this.props;
     return /* @__PURE__ */ jsxs65(Fragment28, { children: [
       vertical && /* @__PURE__ */ jsx127(Label, { label }),
       /* @__PURE__ */ jsxs65(CompoundField, { children: [
@@ -18586,8 +18406,8 @@ var DateFilter = class extends BaseFilter {
             getOptionLabel: (o) => o === anyOption ? "Any" : getOperationLabel(o),
             value: value?.op,
             onSelect: (op) => (
-              // default the selected date to the filter's default date or today if it doesn't exist in the filter's value
-              setValue(op ? { op, value: value?.value ?? defaultValue?.value ?? todayPlainDate() } : void 0)
+              // default the selected date to today if it doesn't exist in the filter's value
+              setValue(op ? { op, value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date() } : void 0)
             ),
             label: inModal ? `${label} date filter operation` : label,
             labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above",
@@ -18599,13 +18419,9 @@ var DateFilter = class extends BaseFilter {
           DateField,
           {
             labelStyle: "inline",
-            value: value?.value ?? defaultValue?.value ?? todayPlainDate(),
+            value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
-            onChange: (d) => {
-              if (d && value) {
-                setValue({ ...value, value: d });
-              }
-            },
+            onChange: (d) => setValue({ ...value, value: d }),
             disabled: !value,
             ...tid[`${defaultTestId(this.label)}_dateField`]
           }
@@ -18614,9 +18430,6 @@ var DateFilter = class extends BaseFilter {
     ] });
   }
 };
-function isDateFilterValue(value) {
-  return typeof value === "object" && value !== null && "op" in value && "value" in value;
-}
 
 // src/components/Filters/DateRangeFilter.tsx
 import { Fragment as Fragment29, jsx as jsx128, jsxs as jsxs66 } from "react/jsx-runtime";
@@ -18624,17 +18437,6 @@ function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
 var DateRangeFilter = class extends BaseFilter {
-  hydrate(value) {
-    if (!isDateRangeFilterValue(value)) return void 0;
-    const hydratedValue = hydrateDateRange(value.value);
-    return hydratedValue ? { op: value.op, value: hydratedValue } : void 0;
-  }
-  dehydrate(value) {
-    return value ? {
-      op: value.op,
-      value: value.value ? { from: dehydratePlainDate(value.value.from), to: dehydratePlainDate(value.value.to) } : void 0
-    } : void 0;
-  }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
     return /* @__PURE__ */ jsxs66(Fragment29, { children: [
@@ -18646,17 +18448,8 @@ var DateRangeFilter = class extends BaseFilter {
           isRangeFilterField: true,
           placeholder: placeholderText,
           label: testFieldLabel ?? "Date",
-          value: value?.value,
-          onChange: (d) => {
-            if (!d) {
-              setValue(void 0);
-              return;
-            }
-            const op = value?.op ?? defaultValue?.op;
-            if (op !== void 0) {
-              setValue({ op, value: d });
-            }
-          },
+          value: value?.value ? { from: new Date(value.value.from), to: new Date(value.value.to) } : void 0,
+          onChange: (d) => d ? setValue({ op: defaultValue?.op, value: d }) : setValue(void 0),
           disabledDays,
           ...tid[`${defaultTestId(this.label)}_dateField`]
         }
@@ -18664,17 +18457,6 @@ var DateRangeFilter = class extends BaseFilter {
     ] });
   }
 };
-function isDateRangeFilterValue(value) {
-  return typeof value === "object" && value !== null && "op" in value && "value" in value;
-}
-function hydrateDateRange(value) {
-  if (typeof value !== "object" || value === null) return void 0;
-  const { from, to } = value;
-  const hydratedFrom = parsePersistedPlainDate(from);
-  const hydratedTo = parsePersistedPlainDate(to);
-  if (hydratedFrom === void 0 && hydratedTo === void 0) return void 0;
-  return { from: hydratedFrom, to: hydratedTo };
-}
 
 // src/components/Filters/MultiFilter.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
@@ -19236,7 +19018,7 @@ function toPageNumberSize(page) {
 }
 
 // src/components/Table/components/EditColumnsButton.tsx
-import { Fragment as Fragment33, useCallback as useCallback22, useMemo as useMemo36, useRef as useRef45 } from "react";
+import { Fragment as Fragment33, useCallback as useCallback22, useMemo as useMemo36, useRef as useRef44 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
 import { jsx as jsx141, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -19251,7 +19033,7 @@ function EditColumnsButton(props) {
   const state = useMenuTriggerState3({
     isOpen: defaultOpen
   });
-  const buttonRef = useRef45(null);
+  const buttonRef = useRef44(null);
   const {
     menuTriggerProps
   } = useMenuTrigger3({
@@ -19480,10 +19262,10 @@ function useGridTableLayoutState({
   });
   useEffect27(() => {
     if (page.limit !== persistedPageSize) setPersistedPageSize(page.limit);
-    setPage((prev) => prev.offset === 0 ? prev : {
+    setPage((prev) => ({
       ...prev,
       offset: 0
-    });
+    }));
   }, [page.limit, persistedPageSize, setPersistedPageSize, filter, searchString]);
   return {
     filter,
@@ -19744,18 +19526,18 @@ var BeamContext = createContext7({
 });
 function BeamProvider({ children, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef46();
+  const modalRef = useRef45();
   const modalHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo40(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef46([]);
+  const modalCanCloseChecksRef = useRef45([]);
   const modalFooterDiv = useMemo40(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef46([]);
-  const drawerCanCloseChecks = useRef46([]);
-  const drawerCanCloseDetailsChecks = useRef46([]);
+  const drawerContentStackRef = useRef45([]);
+  const drawerCanCloseChecks = useRef45([]);
+  const drawerCanCloseDetailsChecks = useRef45([]);
   const sdHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const context = useMemo40(() => {
     return {
@@ -19798,14 +19580,14 @@ function useBeamContext() {
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef47 } from "react";
+import { useRef as useRef46 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx150 } from "react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef47(null);
+  const buttonRef = useRef46(null);
   const {
     menuTriggerProps,
     menuProps: { autoFocus: _af, ...menuProps }
@@ -19828,7 +19610,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef48 } from "react";
+import { useRef as useRef47 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
 import { trussProps as trussProps73 } from "@homebound/truss/runtime";
 import { jsx as jsx151, jsxs as jsxs78 } from "react/jsx-runtime";
@@ -19876,7 +19658,7 @@ function GroupButton(props) {
     isDisabled: !!disabled,
     ...otherProps
   };
-  const ref = useRef48(null);
+  const ref = useRef47(null);
   const {
     buttonProps,
     isPressed
@@ -19999,7 +19781,7 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef49, useState as useState44 } from "react";
+import { useRef as useRef48, useState as useState44 } from "react";
 import { trussProps as trussProps74 } from "@homebound/truss/runtime";
 import { jsx as jsx152, jsxs as jsxs79 } from "react/jsx-runtime";
 function Tag(props) {
@@ -20013,7 +19795,7 @@ function Tag(props) {
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = useState44(false);
-  const ref = useRef49(null);
+  const ref = useRef48(null);
   useResizeObserver4({
     ref,
     onResize: () => {
@@ -20222,7 +20004,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback24, useRef as useRef50 } from "react";
+import { useCallback as useCallback24, useRef as useRef49 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext8, useContext as useContext18 } from "react";
@@ -20245,12 +20027,12 @@ function DnDGrid(props) {
     onReorder,
     activeItemStyles
   } = props;
-  const gridEl = useRef50(null);
-  const dragEl = useRef50();
-  const cloneEl = useRef50();
-  const initialOrder = useRef50();
-  const reorderViaKeyboard = useRef50(false);
-  const transformFrom = useRef50({
+  const gridEl = useRef49(null);
+  const dragEl = useRef49();
+  const cloneEl = useRef49();
+  const initialOrder = useRef49();
+  const reorderViaKeyboard = useRef49(false);
+  const transformFrom = useRef49({
     x: 0,
     y: 0
   });
@@ -20712,14 +20494,14 @@ function HbSpinnerProvider({
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback25, useEffect as useEffect30, useRef as useRef51, useState as useState45 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect30, useRef as useRef50, useState as useState45 } from "react";
 import { trussProps as trussProps80 } from "@homebound/truss/runtime";
 import { jsx as jsx160, jsxs as jsxs82 } from "react/jsx-runtime";
 function MaxLines({
   maxLines,
   children
 }) {
-  const elRef = useRef51(null);
+  const elRef = useRef50(null);
   const [hasMore, setHasMore] = useState45(false);
   const [expanded, setExpanded] = useState45(false);
   useLayoutEffect2(() => {
@@ -20755,7 +20537,7 @@ function MaxLines({
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef52, useState as useState46 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo47, useRef as useRef51, useState as useState46 } from "react";
 import { trussProps as trussProps81 } from "@homebound/truss/runtime";
 import { jsx as jsx161, jsxs as jsxs83 } from "react/jsx-runtime";
 function ScrollShadows(props) {
@@ -20775,7 +20557,7 @@ function ScrollShadows(props) {
   }
   const [showStartShadow, setShowStartShadow] = useState46(false);
   const [showEndShadow, setShowEndShadow] = useState46(false);
-  const scrollRef = useRef52(null);
+  const scrollRef = useRef51(null);
   const [startShadowStyles, endShadowStyles] = useMemo47(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = {
@@ -20948,7 +20730,7 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef53 } from "react";
+import { useRef as useRef52 } from "react";
 import { useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
 import { trussProps as trussProps82 } from "@homebound/truss/runtime";
 import { jsx as jsx162, jsxs as jsxs84 } from "react/jsx-runtime";
@@ -21026,7 +20808,7 @@ function StepButton(props) {
     onPress: onClick,
     isDisabled: disabled
   };
-  const ref = useRef53(null);
+  const ref = useRef52(null);
   const {
     buttonProps,
     isPressed
@@ -21420,7 +21202,7 @@ function visit(rows, fn) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect32, useMemo as useMemo49, useRef as useRef54, useState as useState47 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo49, useRef as useRef53, useState as useState47 } from "react";
 import { mergeProps as mergeProps26, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath, Route } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
@@ -21479,7 +21261,7 @@ function Tabs(props) {
   } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState47(selected);
-  const ref = useRef54(null);
+  const ref = useRef53(null);
   useEffect32(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -21877,7 +21659,6 @@ export {
   filterTestIdPrefix,
   formatDate,
   formatDateRange,
-  formatPlainDate,
   formatValue,
   generateColumnId,
   getAlignment,