@homebound/beam 3.2.0-alpha.3 → 3.2.0

package/dist/index.cjs

@@ -219,7 +219,6 @@ __export(index_exports, {
   filterTestIdPrefix: () => filterTestIdPrefix,
   formatDate: () => formatDate,
   formatDateRange: () => formatDateRange,
-  formatPlainDate: () => formatPlainDate,
   formatValue: () => formatValue,
   generateColumnId: () => generateColumnId,
   getAlignment: () => getAlignment,
@@ -5891,47 +5890,24 @@ function useHover2(props) {
 var import_react16 = require("react");
 var import_use_query_params2 = require("use-query-params");
 function usePersistedFilter({ storageKey, filterDefs }) {
-  const filterImpls = (0, import_react16.useMemo)(
-    () => Object.fromEntries(safeEntries(filterDefs).map(([key, def]) => [key, def(key)])),
-    [filterDefs]
-  );
-  const filterKeys = (0, import_react16.useMemo)(() => Object.keys(filterImpls), [filterImpls]);
+  const filterKeys = Object.keys(filterDefs);
   const defaultFilter = (0, import_react16.useMemo)(
     () => 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] = (0, import_use_query_params2.useQueryParams)({ filter: import_use_query_params2.JsonParam });
-  const [storedFilter, setStoredFilter] = useSessionStorage(
-    storageKey,
-    dehydrateFilter(filterImpls, defaultFilter) ?? defaultFilter
-  );
+  const [storedFilter, setStoredFilter] = useSessionStorage(storageKey, queryParamsFilter ?? defaultFilter);
   const isQueryParamFilterValid = hasValidFilterKeys(queryParamsFilter, filterKeys);
-  const serializedQueryParamsFilter = (0, import_react16.useMemo)(() => JSON.stringify(queryParamsFilter), [queryParamsFilter]);
-  const serializedStoredFilter = (0, import_react16.useMemo)(() => JSON.stringify(storedFilter), [storedFilter]);
-  const queryParamsFilterSnapshot = (0, import_react16.useMemo)(
-    () => parseSerializedValue(serializedQueryParamsFilter),
-    [serializedQueryParamsFilter]
-  );
-  const storedFilterSnapshot = (0, import_react16.useMemo)(() => parseSerializedValue(serializedStoredFilter), [serializedStoredFilter]);
-  const hydratedQueryParamsFilter = (0, import_react16.useMemo)(
-    () => isQueryParamFilterValid ? hydrateFilter(filterImpls, queryParamsFilterSnapshot) : void 0,
-    [filterImpls, isQueryParamFilterValid, queryParamsFilterSnapshot]
-  );
-  const hydratedStoredFilter = (0, import_react16.useMemo)(
-    () => 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 });
   (0, import_react16.useEffect)(
     () => {
       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);
       }
@@ -5943,46 +5919,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 = (0, import_react16.useRef)(value);
-  const stableKey = (0, import_react16.useRef)(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
@@ -6412,107 +6349,6 @@ var import_react_stately7 = require("react-stately");
 // src/components/internal/DatePicker/DatePicker.tsx
 var import_react_day_picker3 = require("react-day-picker");
 
-// src/utils/plainDate.ts
-var import_temporal_polyfill = require("temporal-polyfill");
-function jsDateToPlainDate(date) {
-  return new import_temporal_polyfill.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 import_temporal_polyfill.Temporal.Now.plainDateISO();
-}
-function isPlainDate(value) {
-  return value instanceof import_temporal_polyfill.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 import_temporal_polyfill.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
 var import_react21 = require("react");
 var import_react_day_picker = require("react-day-picker");
@@ -6654,12 +6490,11 @@ function Header(props) {
   const {
     displayMonth
   } = props;
-  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = (0, import_react_day_picker2.useNavigation)();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df jcsb aic ml_12px mr_2px h_32px", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "monthYear") }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: (0, import_date_fns.format)(displayMonth, "MMMM yyyy") }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, 1)) })
@@ -6670,41 +6505,36 @@ function YearSkipHeader(props) {
   const {
     displayMonth
   } = props;
-  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = (0, import_react_day_picker2.useNavigation)();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df jcsb aic ml_12px mr_12px h_32px", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, -1)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "shortMonth") }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: (0, import_date_fns.format)(displayMonth, "MMM") }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addMonths)(displayMonth, 1)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, -1)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "year") }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { className: "fw4 fz_16px lh_24px", children: (0, import_date_fns.format)(displayMonth, "yyyy") }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth((0, import_date_fns.addYears)(displayMonth, 1)) })
     ] })
   ] });
 }
 
 // src/components/internal/DatePicker/WeekHeader.tsx
+var import_date_fns2 = require("date-fns");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function WeekHeader() {
-  const today = todayPlainDate();
-  const start = today.subtract({
-    days: today.dayOfWeek % 7
-  });
+  const start = (0, import_date_fns2.startOfWeek)(/* @__PURE__ */ new Date());
   const days = [];
   for (let i = 0; i < 7; i++) {
-    days.push(start.add({
-      days: i
-    }));
+    days.push((0, import_date_fns2.addDays)(start, i));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: "rdp-head", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: "rdp-head_row", children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("th", { scope: "col", className: "pt1 pb_12px pr1 pl1 fw4 fz_12px lh_16px gray400", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: formatPlainDate(day, "weekdayInitial") }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "rdp-vhidden", children: formatPlainDate(day, "weekday") })
-  ] }, formatPlainDate(day, "weekday"))) }) });
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: (0, import_date_fns2.format)(day, "EEEEE") }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "rdp-vhidden", children: (0, import_date_fns2.format)(day, "EEEE") })
+  ] }, (0, import_date_fns2.format)(day, "EEEE"))) }) });
 }
 
 // src/components/internal/DatePicker/DatePicker.tsx
@@ -6726,15 +6556,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 ?? []
       }
     }
   ) });
@@ -6761,15 +6591,15 @@ function DateRangePicker(props) {
     useYearPicker
   } = props;
   const tid = useTestIds(props, "datePicker");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_day_picker4.DayPicker, { mode: "range", selected: dateRangeToJsDateRange(range), components: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_day_picker4.DayPicker, { 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 ?? []
   } }) });
 }
 
@@ -7922,7 +7752,6 @@ var RowState = class {
 };
 
 // src/components/Table/utils/sortRows.ts
-var import_temporal_polyfill2 = require("temporal-polyfill");
 function sortRows(columns, rows, sortState, caseSensitive) {
   const fn = sortFn(columns, sortState, caseSensitive);
   const sorted = [...rows].sort(fn);
@@ -7987,7 +7816,7 @@ function sortValue(value, caseSensitive) {
   if (maybeFn instanceof Function) {
     maybeFn = maybeFn();
   }
-  return normalizeSortValue(maybeFn, caseSensitive);
+  return typeof maybeFn === "string" && !caseSensitive ? maybeFn.toLowerCase() : maybeFn;
 }
 function ensureClientSideSortValueIsSortable(sortOn, isHeader, column2, idx, maybeContent) {
   if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column2.clientSideSort !== false) {
@@ -8002,24 +7831,7 @@ function ensureClientSideSortValueIsSortable(sortOn, isHeader, column2, idx, may
 }
 function canClientSideSort(value) {
   const t = typeof value;
-  return value === null || t === "undefined" || t === "number" || t === "string" || t === "bigint" || t === "boolean" || value instanceof Date || isPlainDate2(value) || isZonedDateTime(value);
-}
-function normalizeSortValue(value, caseSensitive) {
-  if (isPlainDate2(value)) {
-    return value.toString();
-  } else if (isZonedDateTime(value)) {
-    return value.epochNanoseconds;
-  } else if (typeof value === "string" && !caseSensitive) {
-    return value.toLowerCase();
-  } else {
-    return value;
-  }
-}
-function isPlainDate2(value) {
-  return value instanceof import_temporal_polyfill2.Temporal.PlainDate;
-}
-function isZonedDateTime(value) {
-  return value instanceof import_temporal_polyfill2.Temporal.ZonedDateTime;
+  return value === null || t === "undefined" || t === "number" || t === "string" || t === "boolean" || value instanceof Date;
 }
 
 // src/components/Table/components/Row.tsx
@@ -11295,6 +11107,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__ */ (0, import_jsx_runtime50.jsx)(
     import_react_virtuoso.Virtuoso,
     {
@@ -11302,11 +11115,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.
@@ -11349,7 +11157,8 @@ function VirtualizedOptions(props) {
       components: !loading ? {} : {
         Footer: typeof loading === "function" ? loading : () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingDots, { contrast })
       }
-    }
+    },
+    key
   );
 }
 
@@ -11476,7 +11285,7 @@ function ListBox(props) {
       boxShadow: "bshBasic h_bshHover"
     } : {}
   }), ref: listBoxRef, ...listBoxProps, children: [
-    isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
+    isMultiSelect && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)(ListBoxToggleChip, { state, option: o, getOptionValue, getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o))) }),
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "p_0 m_0 lis_none fg1", children: hasSections ? [...state.collection].map((section) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ListBoxSection,
       {
@@ -11627,14 +11436,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
     };
@@ -11733,7 +11543,9 @@ function TreeSelectFieldBase(props) {
             searchValue: void 0,
             allowCollapsing: true,
             selectedKeys: [],
-            selectedOptions: []
+            selectedOptions: [],
+            selectedChipOptions: [],
+            selectedOptionsLabels: []
           }));
           onSelect({
             all: {
@@ -11800,6 +11612,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.
@@ -11807,7 +11620,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: {
@@ -11906,7 +11720,7 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(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__ */ (0, import_jsx_runtime54.jsx)(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 })
       }
     )
   ] });
@@ -11936,6 +11750,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
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -11974,7 +11807,6 @@ function ComboBoxInput(props) {
   } = useTreeSelectFieldProvider();
   const [isFocused, setIsFocused] = (0, import_react45.useState)(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 ? {
@@ -11982,6 +11814,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
@@ -11992,7 +11826,7 @@ function ComboBoxInput(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(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__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: isTree ? selectedOptionsLabels?.length ?? 0 : state.selectionManager.selectedKeys.size, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
+  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Tooltip, { title: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...(0, import_runtime40.trussProps)({
     ...{
       borderRadius: "br4",
       outline: "outline0",
@@ -12630,37 +12464,69 @@ function CheckboxGroupItem(props) {
 }
 
 // src/inputs/DateFields/DateField.mock.tsx
+var import_date_fns3 = require("date-fns");
 var import_react50 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function DateFieldMock(props) {
+  const { onChange = () => {
+  }, errorMsg, onBlur, onFocus } = props;
+  const [value, setValue] = (0, import_react50.useState)(props.value ? (0, import_date_fns3.format)(props.value, "MM/dd/yy") : "");
+  const tid = useTestIds(props, "date");
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "input",
+    {
+      ...tid,
+      "data-error": !!errorMsg,
+      value,
+      onChange: (e) => {
+        const { value: value2 } = e.target;
+        setValue(value2);
+        onChange((0, import_date_fns3.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
+var import_react51 = require("react");
+var import_react_aria31 = require("react-aria");
+var import_react_day_picker5 = require("react-day-picker");
+var import_react_stately10 = require("react-stately");
 
 // src/inputs/DateFields/utils.ts
-var import_temporal_polyfill3 = require("temporal-polyfill");
+var import_date_fns4 = require("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 (0, import_date_fns4.format)(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 ? (0, import_date_fns4.format)(from, format4) : "";
+  const toFormatted = to ? (0, import_date_fns4.format)(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 && import_temporal_polyfill3.Temporal.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) {
@@ -12668,81 +12534,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 import_temporal_polyfill3.Temporal.PlainDate.from({
-      year: yearLength === 2 ? normalizeTwoDigitYear(year, todayPlainDate().year) : year,
-      month,
-      day
-    });
-  } catch {
+  const parsed = (0, import_date_fns4.parse)(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
-var import_jsx_runtime60 = require("react/jsx-runtime");
-function DateFieldMock(props) {
-  const { onChange = () => {
-  }, errorMsg, onBlur, onFocus } = props;
-  const [value, setValue] = (0, import_react50.useState)(formatDate(props.value, dateFormats.short));
-  const tid = useTestIds(props, "date");
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    "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 && (0, import_date_fns4.isDate)(d) && d.toString() !== "Invalid Date";
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-var import_react51 = require("react");
-var import_react_aria31 = require("react-aria");
-var import_react_stately10 = require("react-stately");
 var import_runtime43 = require("@homebound/truss/runtime");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function DateFieldBase(props) {
@@ -12758,7 +12574,7 @@ function DateFieldBase(props) {
     errorMsg,
     helperText,
     readOnly,
-    format = "short",
+    format: format4 = "short",
     iconLeft = false,
     hideCalendarIcon = false,
     disabledDays,
@@ -12775,7 +12591,7 @@ function DateFieldBase(props) {
   const buttonRef = (0, import_react51.useRef)(null);
   const overlayRef = (0, import_react51.useRef)(null);
   const isFocused = (0, import_react51.useRef)(false);
-  const dateFormat = getDateFormat(format);
+  const dateFormat = getDateFormat(format4);
   const [wipValue, setWipValue] = (0, import_react51.useState)(value);
   const [inputValue, setInputValue] = (0, import_react51.useState)((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
   const tid = useTestIds(props, defaultTestId(label));
@@ -12864,20 +12680,16 @@ function DateFieldBase(props) {
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
-        if (isRangeMode && isDateRangeValue(d)) {
+        if (isRangeMode && (0, import_react_day_picker5.isDateRange)(d)) {
           props.onChange(d);
           return;
         }
-        if (!isRangeMode && !isDateRangeValue(d)) {
+        if (!isRangeMode && !(0, import_react_day_picker5.isDateRange)(d)) {
           props.onChange(d);
           return;
         }
       } else {
-        if (isRangeMode) {
-          props.onChange(void 0);
-        } else {
-          props.onChange(void 0);
-        }
+        props.onChange(void 0);
         return;
       }
     },
@@ -12885,7 +12697,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__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: inputValue !== "" && !state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
     setInputValue("");
     onChange(void 0);
@@ -12947,10 +12759,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 && (!(0, import_react_day_picker5.isDateRange)(d) || (0, import_react_day_picker5.isDateRange)(d) && isValidDate(d.from) && isValidDate(d.to));
 }
 
 // src/utils/withTestMock.tsx
@@ -15467,7 +15276,7 @@ function useScrollStorage(tableId, enabled = true) {
 }
 
 // src/components/Table/hooks/useSetupColumnSizes.ts
-var import_utils67 = require("@react-aria/utils");
+var import_utils66 = require("@react-aria/utils");
 var import_react70 = require("react");
 
 // src/components/Table/hooks/useColumnResizing.ts
@@ -15591,7 +15400,7 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds, visib
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]
   );
-  (0, import_utils67.useResizeObserver)({ ref: resizeRef, onResize });
+  (0, import_utils66.useResizeObserver)({ ref: resizeRef, onResize });
   return { columnSizes, tableWidth, resizedWidths, setResizedWidth, setResizedWidths, resetColumnWidths };
 }
 
@@ -16184,7 +15993,7 @@ function ToggleChips(props) {
 }
 
 // src/components/Accordion.tsx
-var import_utils70 = require("@react-aria/utils");
+var import_utils69 = require("@react-aria/utils");
 var import_react73 = require("react");
 var import_react_aria40 = require("react-aria");
 var import_runtime54 = require("@homebound/truss/runtime");
@@ -16210,7 +16019,7 @@ function Accordion(props) {
     xss
   } = props;
   const tid = useTestIds(props, "accordion");
-  const id = (0, import_utils70.useId)();
+  const id = (0, import_utils69.useId)();
   const [expanded, setExpanded] = (0, import_react73.useState)(defaultExpanded && !disabled);
   const {
     isFocusVisible,
@@ -16232,7 +16041,7 @@ function Accordion(props) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl, setContentHeight]);
-  (0, import_utils70.useResizeObserver)({
+  (0, import_utils69.useResizeObserver)({
     ref: contentRef,
     onResize
   });
@@ -16523,7 +16332,7 @@ var import_react102 = require("react");
 var import_react_aria46 = require("react-aria");
 
 // src/components/Modal/Modal.tsx
-var import_utils74 = require("@react-aria/utils");
+var import_utils73 = require("@react-aria/utils");
 var import_react78 = require("react");
 var import_react_aria41 = require("react-aria");
 var import_react_dom3 = require("react-dom");
@@ -16646,7 +16455,7 @@ function Modal(props) {
     };
   }
   const [hasScroll, setHasScroll] = (0, import_react78.useState)(forceScrolling ?? false);
-  (0, import_utils74.useResizeObserver)({
+  (0, import_utils73.useResizeObserver)({
     ref: modalBodyRef,
     onResize: (0, import_react78.useCallback)(
       () => {
@@ -18286,7 +18095,7 @@ function FormHeading(props) {
 FormHeading.isFormHeading = true;
 
 // src/forms/StaticField.tsx
-var import_utils102 = require("@react-aria/utils");
+var import_utils101 = require("@react-aria/utils");
 var import_runtime65 = require("@homebound/truss/runtime");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 function StaticField(props) {
@@ -18300,7 +18109,7 @@ function StaticField(props) {
     children
   } = props;
   const tid = useTestIds(props, typeof label === "string" ? defaultTestId(label) : "staticField");
-  const id = (0, import_utils102.useId)();
+  const id = (0, import_utils101.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { ...(0, import_runtime65.trussProps)({
     ...labelStyle === "left" ? {
       display: "df",
@@ -18984,16 +18793,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__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
       vertical && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Label, { label }),
       /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(CompoundField, { children: [
@@ -19010,8 +18811,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",
@@ -19023,13 +18824,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`]
           }
@@ -19038,9 +18835,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
 var import_jsx_runtime128 = require("react/jsx-runtime");
@@ -19048,17 +18842,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__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
@@ -19070,17 +18853,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`]
         }
@@ -19088,17 +18862,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
 var import_jsx_runtime129 = require("react/jsx-runtime");
@@ -19904,10 +19667,10 @@ function useGridTableLayoutState({
   });
   (0, import_react99.useEffect)(() => {
     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,
@@ -20422,7 +20185,7 @@ var import_react106 = require("react");
 var import_react_aria49 = require("react-aria");
 
 // src/components/Tag.tsx
-var import_utils119 = require("@react-aria/utils");
+var import_utils118 = require("@react-aria/utils");
 var import_react105 = require("react");
 var import_runtime78 = require("@homebound/truss/runtime");
 var import_jsx_runtime152 = require("react/jsx-runtime");
@@ -20438,7 +20201,7 @@ function Tag(props) {
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react105.useState)(false);
   const ref = (0, import_react105.useRef)(null);
-  (0, import_utils119.useResizeObserver)({
+  (0, import_utils118.useResizeObserver)({
     ref,
     onResize: () => {
       if (ref.current) {
@@ -21135,7 +20898,7 @@ function HbSpinnerProvider({
 }
 
 // src/components/MaxLines.tsx
-var import_utils127 = require("@react-aria/utils");
+var import_utils126 = require("@react-aria/utils");
 var import_react115 = require("react");
 var import_runtime85 = require("@homebound/truss/runtime");
 var import_jsx_runtime160 = require("react/jsx-runtime");
@@ -21146,7 +20909,7 @@ function MaxLines({
   const elRef = (0, import_react115.useRef)(null);
   const [hasMore, setHasMore] = (0, import_react115.useState)(false);
   const [expanded, setExpanded] = (0, import_react115.useState)(false);
-  (0, import_utils127.useLayoutEffect)(() => {
+  (0, import_utils126.useLayoutEffect)(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
@@ -21157,7 +20920,7 @@ function MaxLines({
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  (0, import_utils127.useResizeObserver)({
+  (0, import_utils126.useResizeObserver)({
     ref: elRef,
     onResize
   });
@@ -21178,7 +20941,7 @@ function MaxLines({
 }
 
 // src/components/ScrollShadows.tsx
-var import_utils128 = require("@react-aria/utils");
+var import_utils127 = require("@react-aria/utils");
 var import_react116 = require("react");
 var import_runtime86 = require("@homebound/truss/runtime");
 var import_jsx_runtime161 = require("react/jsx-runtime");
@@ -21265,7 +21028,7 @@ function ScrollShadows(props) {
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
   const onResize = (0, import_react116.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils128.useResizeObserver)({
+  (0, import_utils127.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
@@ -22302,7 +22065,6 @@ function useToast() {
   filterTestIdPrefix,
   formatDate,
   formatDateRange,
-  formatPlainDate,
   formatValue,
   generateColumnId,
   getAlignment,