@homebound/beam 2.141.2 → 2.143.0

package/dist/Css.d.ts

@@ -2849,6 +2849,9 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     }>;
+    get contentEmpty(): CssBuilder<T & {
+        content: import("csstype").Property.Content | undefined;
+    }>;
     get $(): T;
     if(t: boolean | Breakpoint): CssBuilder<T>;
     get else(): CssBuilder<T>;

package/dist/Css.js

@@ -859,6 +859,8 @@ class CssBuilder {
     get listReset() { return this.add("padding", 0).add("margin", 0).add("listStyle", "none"); }
     // underlay
     get underlay() { return this.add("position", "fixed").add("top", 0).add("bottom", 0).add("left", 0).add("right", 0).add("display", "flex").add("alignItems", "center").add("justifyContent", "center").add("backgroundColor", "rgba(36,36,36,0.2)"); }
+    // contentEmpty
+    get contentEmpty() { return this.add("content", "''"); }
     // aliases
     get $() { return maybeImportant(sortObject(this.rules), this.opts.important); }
     if(t) {

package/dist/components/ButtonDatePicker.js

@@ -5,16 +5,20 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
+const DatePicker_1 = require("./internal/DatePicker/DatePicker");
 const DatePickerOverlay_1 = require("./internal/DatePicker/DatePickerOverlay");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonDatePicker(props) {
-    const { defaultOpen, disabled, trigger } = props;
+    const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({}, props, { state: state, overlayProps: menuProps }, tid.datePicker), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: menuProps }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
+                    onSelect(d);
+                    state.close();
+                } }, tid.datePicker), void 0) }), void 0) }), void 0));
 }
 exports.ButtonDatePicker = ButtonDatePicker;

package/dist/components/Icon.d.ts

@@ -49,6 +49,7 @@ export declare const Icons: {
     attachment: import("@emotion/react/jsx-runtime").JSX.Element;
     archive: import("@emotion/react/jsx-runtime").JSX.Element;
     unarchive: import("@emotion/react/jsx-runtime").JSX.Element;
+    duplicate: import("@emotion/react/jsx-runtime").JSX.Element;
     errorCircle: import("@emotion/react/jsx-runtime").JSX.Element;
     checkCircle: import("@emotion/react/jsx-runtime").JSX.Element;
     infoCircle: import("@emotion/react/jsx-runtime").JSX.Element;
@@ -82,5 +83,6 @@ export declare const Icons: {
     templates: import("@emotion/react/jsx-runtime").JSX.Element;
     tradePartners: import("@emotion/react/jsx-runtime").JSX.Element;
     buildingHouse: import("@emotion/react/jsx-runtime").JSX.Element;
+    house: import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export declare type IconKey = keyof typeof Icons;

package/dist/components/Icon.js

@@ -50,6 +50,7 @@ exports.Icons = {
     attachment: ((0, jsx_runtime_1.jsx)("path", { d: "M5.70034 11.879L13.2477 4.15188C14.7481 2.61751 17.2048 2.61457 18.7439 4.15187C20.2147 5.69292 20.2456 8.1905 18.7439 9.72637L12.1677 16.4463C11.1677 17.4455 9.53953 17.4417 8.57861 16.4145L8.5763 16.4121C7.61217 15.4147 7.64468 13.8162 8.60983 12.8511L8.6113 12.8496L13.7859 7.56715C13.9307 7.42307 14.1608 7.40384 14.3248 7.56783L15.121 8.36403L15.1269 8.3691C15.2788 8.49929 15.2951 8.72507 15.1451 8.90458L9.9755 14.146C9.84287 14.2789 9.78341 14.4569 9.77747 14.6231C9.77157 14.7885 9.81776 14.9643 9.92515 15.0986L9.93923 15.1162L9.95684 15.1303C10.2011 15.3257 10.5715 15.346 10.8022 15.1153L17.3808 8.39291L17.3829 8.39073C18.1402 7.59359 18.1402 6.28461 17.3829 5.48747L17.3793 5.48379C16.6171 4.72167 15.3745 4.72167 14.6124 5.48379L14.6107 5.48549L7.06489 13.211L7.06402 13.2118C5.72803 14.5488 5.72839 16.7596 7.02689 18.0962C8.32851 19.4362 10.437 19.436 11.7387 18.0962L17.9191 11.7721C18.0556 11.6365 18.2859 11.6367 18.422 11.7728L19.2542 12.605L19.2601 12.6101C19.4197 12.7469 19.4187 12.9691 19.2846 13.1031L19.283 13.1048L13.1015 19.43C11.0256 21.5403 7.70624 21.5062 5.66445 19.4304C3.62176 17.3177 3.65669 13.9573 5.70034 11.879Z" }, void 0)),
     archive: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M19 10H5L5 18H19V10ZM3 8V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V8H3Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { "fill-rule": "evenodd", d: "M3.81818 6V8H20.1818V6H3.81818ZM2.90909 4C2.40701 4 2 4.44772 2 5V9C2 9.55228 2.40701 10 2.90909 10H21.0909C21.593 10 22 9.55228 22 9V5C22 4.44772 21.593 4 21.0909 4H2.90909Z" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "11", width: "8", height: "2", rx: "1" }, void 0)] }, void 0)),
     unarchive: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M13 12V8H16L12 3L8 8H11V12H13Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M17 10H19V18H5L5 10H7V8H3V18C3 19.1046 3.89543 20 5 20H19C20.1046 20 21 19.1046 21 18V8H17V10Z" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "8", y: "15", width: "8", height: "2", rx: "1" }, void 0)] }, void 0)),
+    duplicate: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M11 10H9V13H6V15H9V18H11V15H14V13H11V10Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M4 22H16C17.103 22 18 21.103 18 20V8C18 6.897 17.103 6 16 6H4C2.897 6 2 6.897 2 8V20C2 21.103 2.897 22 4 22ZM4 8H16L16.002 20H4V8Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M20 2H8V4H20V16H22V4C22 2.897 21.103 2 20 2Z" }, void 0)] }, void 0)),
     // Alerts
     errorCircle: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.953 2C6.465 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.493 2 11.953 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.567 4 11.953 4C16.391 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 7H13V14H11V7ZM11 15H13V17H11V15Z" }, void 0)] }, void 0)),
     checkCircle: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M9.99909 13.587L7.70009 11.292L6.28809 12.708L10.0011 16.413L16.7071 9.70697L15.2931 8.29297L9.99909 13.587Z" }, void 0)] }, void 0)),
@@ -87,5 +88,6 @@ exports.Icons = {
     finances: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M12 11C10 11 10 10.374 10 9.99996C10 9.51596 10.701 8.99996 12 8.99996C13.185 8.99996 13.386 9.63796 13.4 10.018L14.4 9.99996H15.4C15.4 8.97396 14.734 7.53096 13 7.12096V6.01196H11V7.08496C9.029 7.41596 8 8.71196 8 9.99996C8 11.12 8.52 13 12 13C14 13 14 13.676 14 14C14 14.415 13.38 15 12 15C10.159 15 10.011 14.143 10 14H8C8 14.918 8.661 16.553 11 16.92V18H13V16.915C14.971 16.584 16 15.288 16 14C16 12.88 15.48 11 12 11Z" }, void 0)] }, void 0)),
     templates: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H10C8.897 2 8 2.897 8 4V8H4C2.897 8 2 8.897 2 10V20C2 21.103 2.897 22 4 22H14C15.103 22 16 21.103 16 20V16H20C21.103 16 22 15.103 22 14V4C22 2.897 21.103 2 20 2ZM4 20V10H14L14.002 20H4ZM20 14H16V10C16 8.897 15.103 8 14 8H10V4H20V14Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M6 12H12V14H6V12ZM6 16H12V18H6V16Z" }, void 0)] }, void 0)),
     tradePartners: ((0, jsx_runtime_1.jsx)("path", { d: "M5.12204 21C5.50004 21.378 6.00204 21.586 6.53604 21.586C7.07004 21.586 7.57204 21.378 7.95004 21L12.286 16.664C13.002 16.885 13.745 16.997 14.503 16.997C16.506 16.997 18.39 16.218 19.805 14.802C21.951 12.655 22.592 9.453 21.437 6.644L20.867 5.256L16.623 9.499L14.502 7.377L18.745 3.134L17.356 2.563C16.446 2.189 15.485 2 14.499 2C12.496 2 10.613 2.78 9.19804 4.196C7.21304 6.18 6.51604 9.068 7.33604 11.714L3.00004 16.05C2.22004 16.829 2.22004 18.099 3.00004 18.878L5.12204 21ZM9.67004 12.209L9.41604 11.593C8.56804 9.532 9.03804 7.183 10.612 5.61C11.65 4.572 13.03 4 14.499 4C14.676 4 14.851 4.008 15.025 4.025L11.672 7.378L16.621 12.328L19.976 8.973C20.132 10.581 19.573 12.204 18.389 13.389C16.839 14.939 14.425 15.416 12.405 14.585L11.79 14.33L6.53604 19.586H6.53704L6.53604 20.586V19.586L4.41404 17.464L9.67004 12.209Z" }, void 0)),
-    buildingHouse: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19.0002 2.00002H9.00019C7.89719 2.00002 7.00019 2.89702 7.00019 4.00002V9.58602L2.29319 14.293C2.00719 14.579 1.92119 15.009 2.07619 15.383C2.23119 15.757 2.59619 16 3.00019 16V17V21C3.00019 21.553 3.44819 22 4.00019 22H12.0002H20.0002C20.5532 22 21.0002 21.553 21.0002 21V4.00002C21.0002 2.89702 20.1032 2.00002 19.0002 2.00002ZM11.0002 20H5.00019V17V15V14.414L8.00019 11.414L11.0002 14.414V15V18V20ZM19.0002 20H13.0002V18V16C13.4042 16 13.7702 15.757 13.9242 15.383C14.0792 15.009 13.9932 14.579 13.7072 14.293L9.00019 9.58602V4.00002H19.0002V20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 6.00002H13V8.00002H11V6.00002ZM15 6.00002H17V8.00002H15V6.00002ZM15 10.031H17V12H15V10.031ZM15 14H17V16H15V14ZM7 15H9V17H7V15Z" }, void 0)] }, void 0))
+    buildingHouse: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M19.0002 2.00002H9.00019C7.89719 2.00002 7.00019 2.89702 7.00019 4.00002V9.58602L2.29319 14.293C2.00719 14.579 1.92119 15.009 2.07619 15.383C2.23119 15.757 2.59619 16 3.00019 16V17V21C3.00019 21.553 3.44819 22 4.00019 22H12.0002H20.0002C20.5532 22 21.0002 21.553 21.0002 21V4.00002C21.0002 2.89702 20.1032 2.00002 19.0002 2.00002ZM11.0002 20H5.00019V17V15V14.414L8.00019 11.414L11.0002 14.414V15V18V20ZM19.0002 20H13.0002V18V16C13.4042 16 13.7702 15.757 13.9242 15.383C14.0792 15.009 13.9932 14.579 13.7072 14.293L9.00019 9.58602V4.00002H19.0002V20Z" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M11 6.00002H13V8.00002H11V6.00002ZM15 6.00002H17V8.00002H15V6.00002ZM15 10.031H17V12H15V10.031ZM15 14H17V16H15V14ZM7 15H9V17H7V15Z" }, void 0)] }, void 0)),
+    house: ((0, jsx_runtime_1.jsx)("path", { d: "M5.00299 22H9.00299H15.003H19.003C20.106 22 21.003 21.103 21.003 20V11C21.003 10.735 20.898 10.48 20.71 10.293L12.71 2.29301C12.319 1.90201 11.687 1.90201 11.296 2.29301L3.29599 10.293C3.10799 10.48 3.00299 10.735 3.00299 11V20C3.00299 21.103 3.89999 22 5.00299 22ZM10.003 20V15H14.003V20H10.003ZM5.00299 11.414L12.003 4.41401L19.003 11.414L19.004 20H16.003V15C16.003 13.897 15.106 13 14.003 13H10.003C8.89999 13 8.00299 13.897 8.00299 15V20H5.00299V11.414Z" }, void 0))
 };

package/dist/components/internal/DatePicker/DatePicker.css

@@ -14,6 +14,11 @@
   --rdp-outline-selected: 2px solid rgba(3,105,161,1);
 }
 
+/* Added in By Beam */
+.rdp-cell:focus-visible {
+  outline: 0;
+}
+
 .rdp {
   /* Modified by Beam (1em -> 16px) */
   margin: 16px;

package/dist/components/internal/DatePicker/DatePickerOverlay.d.ts

@@ -1,9 +1,6 @@
-import { HTMLAttributes } from "react";
-import { OverlayTriggerState } from "react-stately";
-import { DatePickerProps } from "./DatePicker";
-interface DatePickerOverlayProps extends DatePickerProps {
+import { HTMLAttributes, PropsWithChildren } from "react";
+interface DatePickerOverlayProps {
     overlayProps: HTMLAttributes<HTMLElement>;
-    state: OverlayTriggerState;
 }
-export declare function DatePickerOverlay({ overlayProps, state, ...datePickerProps }: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function DatePickerOverlay({ overlayProps, children }: PropsWithChildren<DatePickerOverlayProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/DatePicker/DatePickerOverlay.js

@@ -2,16 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerOverlay = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const DatePicker_1 = require("./DatePicker");
 const Css_1 = require("../../../Css");
 // Small wrapper around DatePicker to provide necessary styling and state handling when displayed as an overlay.
-function DatePickerOverlay({ overlayProps, state, ...datePickerProps }) {
+function DatePickerOverlay({ overlayProps, children }) {
     return (
     // Adds `tabIndex` so clicking within the DatePicker will provide a `e.relatedTarget` on blur and focus events.
     // This allows for components such as the DateField to conditionally trigger their 'onBlur' prop. E.g. If the user leaves the field to interact with the DatePicker, then don't call onBlur
-    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
-                datePickerProps.onSelect(d);
-                state.close();
-            } }), void 0) }), void 0));
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { tabIndex: 0 }, { children: children }), void 0));
 }
 exports.DatePickerOverlay = DatePickerOverlay;

package/dist/components/internal/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,10 @@
+import { Matcher } from "react-day-picker";
+import { DateRange } from "../../../types";
+import "./DatePicker.css";
+export interface DateRangePickerProps {
+    range: DateRange | undefined;
+    onSelect: (range: DateRange | undefined) => void;
+    disabledDays?: Matcher | Matcher[];
+    dottedDays?: Matcher[];
+}
+export declare function DateRangePicker(props: DateRangePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/DatePicker/DateRangePicker.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_day_picker_1 = require("react-day-picker");
+const Day_1 = require("./Day");
+const Header_1 = require("./Header");
+const WeekHeader_1 = require("./WeekHeader");
+const Css_1 = require("../../../Css");
+const utils_1 = require("../../../utils");
+require("./DatePicker.css");
+function DateRangePicker(props) {
+    var _a;
+    const { range, onSelect, disabledDays, dottedDays } = props;
+    const tid = (0, utils_1.useTestIds)(props, "datePicker");
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dib.bgWhite.xs.$ }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "range", selected: range, components: { Caption: Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, defaultMonth: (_a = range === null || range === void 0 ? void 0 : range.to) !== null && _a !== void 0 ? _a : new Date(), onSelect: (selection, day, activeModifiers) => {
+                // Disallow returning disabled dates.
+                if (activeModifiers.disabled)
+                    return;
+                onSelect(selection);
+            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }, void 0) }), void 0));
+}
+exports.DateRangePicker = DateRangePicker;

package/dist/components/internal/DatePicker/Day.js

@@ -19,22 +19,37 @@ function Day(props) {
         return (0, jsx_runtime_1.jsx)("div", Object.assign({}, divProps), void 0);
     }
     const { className, children, ...otherProps } = buttonProps;
-    const { selected = false, indicatorDot = false, disabled = false, today = false } = activeModifiers;
+    const { selected = false, indicatorDot = false, disabled = false, today = false, range_middle = false, range_start = false, range_end = false, } = activeModifiers;
+    // It is possible that we have selected only one day for the range. In this case the date will be both the start and end.
+    // When this happens, do not show styling as if there is an existing range.
+    const showRangeStyles = !(range_end === true && range_start === true);
+    const showActiveStyles = !disabled;
     return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, otherProps, { ref: buttonRef, type: "button", css: {
-            ...Css_1.Css.overflowHidden.pbPx(4).if(disabled).cursorNotAllowed.$,
+            ...Css_1.Css.relative.pbPx(4).outline0.if(disabled).cursorNotAllowed.$,
             // Do not apply interaction styles for disabled or already selected days.
             ...(!selected &&
                 !disabled && {
                 "&:hover:not(:active) > div": Css_1.Css.bgGray100.$,
-                "&:active > div": Css_1.Css.bgGray400.$,
             }),
+            ...(!disabled && { "&:active > div": Css_1.Css.bgGray400.gray900.$ }),
+            "&:focus:not(:active) > div": Css_1.Css.ba.bLightBlue700.if(selected).bLightBlue900.$,
+            ...(showRangeStyles &&
+                range_start &&
+                Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.rightPx(-2).wPx(8).$ }).$),
+            ...(showRangeStyles && range_end && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.wPx(8).leftPx(-2).$ }).$),
+            ...(showRangeStyles && range_middle && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.leftPx(-2).$ }).$),
         } }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-                ...Css_1.Css.relative.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
-                ...(today && Css_1.Css.bgGray100.$),
-                ...(selected && Css_1.Css.white.bgLightBlue700.$),
+                ...Css_1.Css.overflowHidden.gray900.relative.z1.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
+                ...(today && !range_middle && Css_1.Css.bgGray100.$),
+                ...(selected && !range_middle && Css_1.Css.white.bgLightBlue700.$),
                 ...(disabled && Css_1.Css.gray500.$),
             } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mtPx(-2).$ }, { children: children }), void 0), indicatorDot && ((0, jsx_runtime_1.jsx)("div", Object.assign({ 
                     // Using `absolute` position as to not change the placement of the day's number when this is introduced
-                    css: Css_1.Css.absolute.bottomPx(4).wPx(4).hPx(4).bgLightBlue700.br4.if(selected).bgWhite.$ }, tid.indicatorDot), void 0))] }), void 0) }), void 0));
+                    css: Css_1.Css.absolute
+                        .bottomPx(4)
+                        .wPx(4)
+                        .hPx(4)
+                        .bgLightBlue700.br4.if(selected && !range_middle).bgWhite.$ }, tid.indicatorDot), void 0))] }), void 0) }), void 0));
 }
 exports.Day = Day;
+const rangeBaseStyles = Css_1.Css.absolute.topPx(2).contentEmpty.hPx(30).wPx(32).bgLightBlue100.$;

package/dist/components/internal/DatePicker/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./DatePicker";
 export * from "./DatePickerOverlay";
+export * from "./DateRangePicker";

package/dist/components/internal/DatePicker/index.js

@@ -12,3 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DatePicker"), exports);
 __exportStar(require("./DatePickerOverlay"), exports);
+__exportStar(require("./DateRangePicker"), exports);

package/dist/forms/BoundDateRangeField.d.ts

@@ -0,0 +1,10 @@
+import { FieldState } from "@homebound/form-state";
+import { DateRangeFieldProps } from "../inputs";
+import { DateRange } from "../types";
+export declare type BoundDateRangeFieldProps = Omit<DateRangeFieldProps, "label" | "value" | "onChange"> & {
+    field: FieldState<any, DateRange | null | undefined>;
+    label?: string;
+    onChange?: (value: DateRange) => void;
+};
+/** Wraps `TextField` and binds it to a form field. */
+export declare function BoundDateRangeField(props: BoundDateRangeFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundDateRangeField.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundDateRangeField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
+const defaultLabel_1 = require("../utils/defaultLabel");
+/** Wraps `TextField` and binds it to a form field. */
+function BoundDateRangeField(props) {
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
+    const testId = (0, utils_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+                onChange(value);
+                field.maybeAutoSave();
+            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, onEnter: () => {
+                (0, utils_1.maybeCall)(onEnter);
+                field.maybeAutoSave();
+            } }, testId, others), void 0)) }, void 0));
+}
+exports.BoundDateRangeField = BoundDateRangeField;

package/dist/forms/formStateDomain.d.ts

@@ -1,6 +1,8 @@
+import { DateRange } from "../types";
 export declare const jan1: Date;
 export declare const jan2: Date;
 export declare const jan10: Date;
+export declare const jan19: Date;
 export declare const jan29: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
@@ -20,6 +22,7 @@ export interface AuthorInput {
     isAvailable?: boolean | null;
     animals?: string[] | null;
     bio?: string | null;
+    saleDates?: DateRange | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/forms/formStateDomain.js

@@ -3,10 +3,11 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan19 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
 exports.jan10 = new Date(2020, 0, 10);
+exports.jan19 = new Date(2020, 0, 19);
 exports.jan29 = new Date(2020, 0, 29);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };

package/dist/forms/index.d.ts

@@ -2,6 +2,7 @@ export * from "./BoundCheckboxField";
 export * from "./BoundCheckboxGroupField";
 export * from "./BoundChipSelectField";
 export * from "./BoundDateField";
+export * from "./BoundDateRangeField";
 export * from "./BoundMultiSelectField";
 export * from "./BoundNumberField";
 export * from "./BoundRadioGroupField";

package/dist/forms/index.js

@@ -14,6 +14,7 @@ __exportStar(require("./BoundCheckboxField"), exports);
 __exportStar(require("./BoundCheckboxGroupField"), exports);
 __exportStar(require("./BoundChipSelectField"), exports);
 __exportStar(require("./BoundDateField"), exports);
+__exportStar(require("./BoundDateRangeField"), exports);
 __exportStar(require("./BoundMultiSelectField"), exports);
 __exportStar(require("./BoundNumberField"), exports);
 __exportStar(require("./BoundRadioGroupField"), exports);

package/dist/inputs/DateFields/DateField.d.ts

@@ -0,0 +1,4 @@
+import { DateSingleFieldBaseProps } from "./DateFieldBase";
+export interface DateFieldProps extends Omit<DateSingleFieldBaseProps, "mode"> {
+}
+export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateFields/DateField.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DateFieldBase_1 = require("./DateFieldBase");
+function DateField(props) {
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "single" }), void 0);
+}
+exports.DateField = DateField;

package/dist/inputs/{DateField.mock.d.ts → DateFields/DateField.mock.d.ts}

@@ -1,3 +1,3 @@
-import { DateFieldProps } from "./";
+import { DateFieldProps } from "..";
 /** Mocks out `DateField` as a text `<input>` field. */
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/{DateField.mock.js → DateFields/DateField.mock.js}

@@ -4,7 +4,7 @@ exports.DateField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const date_fns_1 = require("date-fns");
 const react_1 = require("react");
-const utils_1 = require("../utils");
+const utils_1 = require("../../utils");
 /** Mocks out `DateField` as a text `<input>` field. */
 function DateField(props) {
     const { onChange = () => { }, errorMsg, onBlur, onFocus } = props;

package/dist/inputs/{DateField.d.ts → DateFields/DateFieldBase.d.ts}

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 import { Matcher } from "react-day-picker";
-import { TextFieldBaseProps } from "./TextFieldBase";
-export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
-    value: Date | undefined;
+import { DateFieldMode, dateFormats } from "./utils";
+import { TextFieldBaseProps } from "../TextFieldBase";
+import { DateRange } from "../../types";
+export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     label: string;
-    onChange: (value: Date) => void;
     /** Called when the component loses focus */
     onBlur?: () => void;
     /** Called when the component is in focus. */
@@ -27,12 +27,19 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
      */
     disabledDays?: Matcher | Matcher[];
     onEnter?: VoidFunction;
+    /** for storybook */
     defaultOpen?: boolean;
+    onChange: ((value: Date) => void) | ((value: DateRange) => void);
+    mode: DateFieldMode;
+}
+export interface DateSingleFieldBaseProps extends DateFieldBaseProps {
+    mode: "single";
+    value: Date | undefined;
+    onChange: (value: Date) => void;
+}
+export interface DateRangeFieldBaseProps extends DateFieldBaseProps {
+    mode: "range";
+    value: DateRange | undefined;
+    onChange: (value: DateRange) => void;
 }
-export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare const dateFormats: {
-    short: string;
-    medium: string;
-    long: string;
-};
-export {};
+export declare function DateFieldBase(props: DateRangeFieldBaseProps | DateSingleFieldBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/{DateField.js → DateFields/DateFieldBase.js}

@@ -1,20 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = void 0;
+exports.DateFieldBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const date_fns_1 = require("date-fns");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const react_day_picker_1 = require("react-day-picker");
 const react_stately_1 = require("react-stately");
-const components_1 = require("../components");
-const internal_1 = require("../components/internal");
-const DatePickerOverlay_1 = require("../components/internal/DatePicker/DatePickerOverlay");
-const Css_1 = require("../Css");
-const TextFieldBase_1 = require("./TextFieldBase");
-const utils_1 = require("../utils");
-const defaultTestId_1 = require("../utils/defaultTestId");
-function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, ...others } = props;
+const components_1 = require("../../components");
+const internal_1 = require("../../components/internal");
+const DatePickerOverlay_1 = require("../../components/internal/DatePicker/DatePickerOverlay");
+const Css_1 = require("../../Css");
+const utils_1 = require("./utils");
+const TextFieldBase_1 = require("../TextFieldBase");
+const utils_2 = require("../../utils");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+function DateFieldBase(props) {
+    var _a;
+    const { label, disabled, required, value, onFocus, onBlur, 
+    // Pull `onChange` out of the props, but we're not directly using it. Do not want to keep it in `...others`
+    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -22,19 +26,14 @@ function DateField(props) {
     // Local focus state to conditionally call onBlur when the date picker closes.
     // E.g. If the picker closes due to focus going back to the input field then don't call onBlur. Also used to avoid updating WIP values
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const dateFormat = getDateFormat(format);
-    const [inputValue, setInputValue] = (0, react_1.useState)(value ? formatDate(value, dateFormat) : "");
-    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
+    const dateFormat = (0, utils_1.getDateFormat)(format);
+    // The `wipValue` allows the "range" mode to set the value to `undefined`, even if the `onChange` response cannot be undefined.
+    // This makes working within the DateRangePicker much more user friendly.
+    const [wipValue, setWipValue] = (0, react_1.useState)(value);
+    const [inputValue, setInputValue] = (0, react_1.useState)((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
+    const tid = (0, utils_2.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
-    // Handle case where the input value is updated from outside the component.
-    (0, react_1.useEffect)(() => {
-        // Avoid updating any WIP values.
-        if (!isFocused) {
-            setInputValue(value ? formatDate(value, dateFormat) : "");
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps - Do not include `isFocused`, we don't want to update the internal `inputValue` back to `value` just because focus state changes
-    }, [value, dateFormat]);
     const textFieldProps = {
         ...others,
         label,
@@ -47,7 +46,7 @@ function DateField(props) {
         onOpenChange: (isOpen) => {
             // Handles calling `onBlur` for the case where the user interacts with the overlay, removing focus from the input field, and eventually closes the overlay (whether clicking away, or selecting a date)
             if (!isOpen && !isFocused) {
-                (0, utils_1.maybeCall)(onBlur);
+                (0, utils_2.maybeCall)(onBlur);
             }
         },
         isOpen: defaultOpen,
@@ -55,16 +54,20 @@ function DateField(props) {
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         onFocus: () => {
+            var _a;
             // Open overlay on focus of the input.
             state.open();
             setIsFocused(true);
-            (0, utils_1.maybeCall)(onFocus);
-            if (value) {
+            (0, utils_2.maybeCall)(onFocus);
+            if (wipValue && dateFormat !== utils_1.dateFormats.short) {
                 // When focused, change to use the "short" date format, as it is simpler to update by hand and parse.
-                setInputValue(formatDate(value, dateFormats.short));
+                setInputValue((_a = (props.mode === "range"
+                    ? (0, utils_1.formatDateRange)(props.value, utils_1.dateFormats.short)
+                    : (0, utils_1.formatDate)(props.value, utils_1.dateFormats.short))) !== null && _a !== void 0 ? _a : "");
             }
         },
         onBlur: (e) => {
+            var _a, _b;
             setIsFocused(false);
             // If we are interacting any other part of `inputWrap` ref (such as the calendar button) return early as clicking anywhere within there will push focus to the input field.
             // Or if interacting with the DatePicker then also return early. The overlay will handle calling `onBlur` once it closes.
@@ -72,22 +75,23 @@ function DateField(props) {
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
                 return;
             }
-            const parsedDate = parseDate(inputValue, dateFormats.short);
+            const parsedDate = mode === "range" ? (0, utils_1.parseDateRange)(inputValue, utils_1.dateFormats.short) : (0, utils_1.parseDate)(inputValue, utils_1.dateFormats.short);
             // If the user leaves the input and has an invalid date, reset to previous value.
-            if (!parsedDate) {
-                setInputValue(value ? formatDate(value, dateFormat) : "");
+            if (!isParsedDateValid(parsedDate)) {
+                setWipValue(value);
+                setInputValue((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
             }
-            else if (dateFormat !== dateFormats.short) {
+            else if (dateFormat !== utils_1.dateFormats.short) {
                 // Or if we need to reset the dateFormat back from `short` to whatever the user specified
-                setInputValue(formatDate(parsedDate, dateFormat));
+                setInputValue((_b = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
             state.close();
-            (0, utils_1.maybeCall)(onBlur);
+            (0, utils_2.maybeCall)(onBlur);
         },
         onKeyDown: (e) => {
             var _a;
             if (e.key === "Enter") {
-                (0, utils_1.maybeCall)(onEnter);
+                (0, utils_2.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
         },
@@ -110,13 +114,38 @@ function DateField(props) {
         shouldUpdatePosition: true,
         offset: 4,
     });
+    // Handle case where the input value is updated from outside the component.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Avoid updating any WIP values.
+        if (!isFocused && !state.isOpen) {
+            setWipValue(value);
+            setInputValue((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps - Do not include `isFocused` or `state.isOpen`.
+        // We don't want to update the internal `wipValue` or `inputValue` back to `value` just because focus state changes or the overlay opens
+    }, [value, dateFormat]);
+    // Create a type safe `onChange` to handle both Single and Range date fields.
+    const onChange = (0, react_1.useCallback)((d) => {
+        setWipValue(d);
+        if (d && isParsedDateValid(d)) {
+            if (props.mode === "range" && (0, react_day_picker_1.isDateRange)(d)) {
+                props.onChange(d);
+                return;
+            }
+            if (props.mode === "single" && !(0, react_day_picker_1.isDateRange)(d)) {
+                props.onChange(d);
+                return;
+            }
+        }
+    }, [mode, props.onChange]);
     // If showing the short date format, "01/01/20", so set size to 8. If medium (Wed, Nov 23) use 10 characters (leaving out the `,` character in the count because it is so small)
     // Otherwise the long format can be `undefined`.
     // Setting the size attribute only impacts the fields when displayed in a container that doesn't allow the field to grow to its max width, such as in an inline container.
     // TODO: figure this out... seems weird to have now that we support multiple dates formats....
     // How do other applications handle this defined sizing? Appears they use hard coded widths depending on format, which is similar here (using `size` instead of css `width`).
     // But would also need to allow for the input to be `fullWidth`, which is basically also what we're accomplishing here... so maybe fine?
-    const inputSize = format === "short" ? 8 : format === "medium" ? 10 : undefined;
+    const inputSize = mode !== "range" ? (format === "short" ? 8 : format === "medium" ? 10 : undefined) : undefined;
     const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
@@ -124,55 +153,23 @@ function DateField(props) {
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
-                        const parsed = parseDate(v, dateFormats.short);
-                        if (parsed) {
-                            onChange(parsed);
-                        }
+                        const parsed = mode === "range" ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
+                        onChange(parsed);
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ value: value, onSelect: (d) => {
-                        setInputValue(formatDate(d, dateFormat));
-                        onChange(d);
-                    }, state: state, disabledDays: disabledDays, overlayProps: overlayProps }, tid.datePicker), void 0) }), void 0))] }, void 0));
-}
-exports.DateField = DateField;
-function formatDate(date, format) {
-    return (0, date_fns_1.format)(date, format);
-}
-function parseDate(str, format) {
-    // Copy/pasted from react-day-picker so that typing "2/2/2" doesn't turn into "02/02/0002"
-    const split = str.split("/");
-    if (split.length !== 3) {
-        return undefined;
-    }
-    // Wait for the year to be 2 chars
-    if (split[2].length !== 2) {
-        return undefined;
-    }
-    const month = parseInt(split[0], 10) - 1;
-    const day = parseInt(split[1], 10);
-    let year = parseInt(split[2], 10);
-    // This is also ~verbatim copy/pasted from react-day-picker
-    if (isNaN(year) ||
-        String(year).length > 4 ||
-        isNaN(month) ||
-        isNaN(day) ||
-        day <= 0 ||
-        day > 31 ||
-        month < 0 ||
-        month >= 12) {
-        return undefined;
-    }
-    const parsed = (0, date_fns_1.parse)(str, format, new Date());
-    if (!(0, date_fns_1.isDate)(parsed)) {
-        return undefined;
-    }
-    return parsed;
+                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                            var _a;
+                            // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
+                            setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
+                            onChange(dr);
+                        } }, tid.datePicker), void 0)) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, Object.assign({ value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
+                            var _a;
+                            setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
+                            onChange(d);
+                            state.close();
+                        } }, tid.datePicker), void 0)) }), void 0) }), void 0))] }, void 0));
 }
-const dateFormats = {
-    short: "MM/dd/yy",
-    medium: "EEE, MMM d",
-    long: "EEEE LLLL d, uuuu",
-};
-function getDateFormat(format) {
-    return format ? dateFormats[format] : dateFormats.short;
+exports.DateFieldBase = DateFieldBase;
+function isParsedDateValid(d) {
+    // Only consider a DateRange valid when both `from` and `to` values are valid dates
+    return d !== undefined && (!(0, react_day_picker_1.isDateRange)(d) || ((0, react_day_picker_1.isDateRange)(d) && (0, utils_1.isValidDate)(d.from) && (0, utils_1.isValidDate)(d.to)));
 }

package/dist/inputs/DateFields/DateRangeField.d.ts

@@ -0,0 +1,4 @@
+import { DateRangeFieldBaseProps } from "./DateFieldBase";
+export interface DateRangeFieldProps extends Omit<DateRangeFieldBaseProps, "mode"> {
+}
+export declare function DateRangeField(props: DateRangeFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateFields/DateRangeField.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DateFieldBase_1 = require("./DateFieldBase");
+function DateRangeField(props) {
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "range" }), void 0);
+}
+exports.DateRangeField = DateRangeField;

package/dist/inputs/DateFields/index.d.ts

@@ -0,0 +1,5 @@
+export { DateField } from "./DateField";
+export type { DateFieldProps } from "./DateField";
+export { DateRangeField } from "./DateRangeField";
+export type { DateRangeFieldProps } from "./DateRangeField";
+export * from "./utils";

package/dist/inputs/DateFields/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeField = exports.DateField = void 0;
+var DateField_1 = require("./DateField");
+Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return DateField_1.DateField; } });
+var DateRangeField_1 = require("./DateRangeField");
+Object.defineProperty(exports, "DateRangeField", { enumerable: true, get: function () { return DateRangeField_1.DateRangeField; } });
+__exportStar(require("./utils"), exports);

package/dist/inputs/DateFields/utils.d.ts

@@ -0,0 +1,14 @@
+import { DateRange } from "../../types";
+export declare type DateFieldModeTuple = readonly ["range", DateRange] | readonly ["single", Date];
+export declare type DateFieldMode = "single" | "range";
+export declare const dateFormats: {
+    short: string;
+    medium: string;
+    long: string;
+};
+export declare function getDateFormat(format: keyof typeof dateFormats | undefined): string;
+export declare function formatDate(date: Date | undefined, format: string): string;
+export declare function formatDateRange(date: DateRange | undefined, format: string): string | undefined;
+export declare function parseDate(str: string, format: string): Date | undefined;
+export declare function parseDateRange(str: string, format: string): DateRange | undefined;
+export declare function isValidDate(d: Date | undefined): boolean;

package/dist/inputs/DateFields/utils.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDate = exports.parseDateRange = exports.parseDate = exports.formatDateRange = exports.formatDate = exports.getDateFormat = exports.dateFormats = void 0;
+const date_fns_1 = require("date-fns");
+exports.dateFormats = {
+    short: "MM/dd/yy",
+    medium: "EEE, MMM d",
+    long: "EEEE LLLL d, uuuu",
+};
+function getDateFormat(format) {
+    return format ? exports.dateFormats[format] : exports.dateFormats.short;
+}
+exports.getDateFormat = getDateFormat;
+function formatDate(date, format) {
+    if (!date)
+        return "";
+    return (0, date_fns_1.format)(date, format);
+}
+exports.formatDate = formatDate;
+function formatDateRange(date, format) {
+    if (!date)
+        return "";
+    const { from, to } = date;
+    const fromFormatted = from ? (0, date_fns_1.format)(from, format) : "";
+    const toFormatted = to ? (0, date_fns_1.format)(to, format) : "";
+    // return `undefined` if both dates are improperly formatted
+    return !fromFormatted && !toFormatted ? undefined : `${fromFormatted} - ${toFormatted}`;
+}
+exports.formatDateRange = formatDateRange;
+function parseDate(str, format) {
+    return parseDateString(str, format);
+}
+exports.parseDate = parseDate;
+function parseDateRange(str, format) {
+    const [from = "", to = ""] = str.split("-");
+    const fromDate = parseDateString(from.trim(), format);
+    const toDate = parseDateString(to.trim(), format);
+    // In the event the user mixes up the to/from dates then correct them.
+    if (toDate && fromDate && toDate < fromDate) {
+        return { from: toDate, to: fromDate };
+    }
+    // If both dates are undefined, return undefined rather than { from: undefined; to: undefined }
+    if (toDate === undefined && fromDate === undefined) {
+        return undefined;
+    }
+    return { from: fromDate, to: toDate };
+}
+exports.parseDateRange = parseDateRange;
+function parseDateString(str, format) {
+    // Copy/pasted from react-day-picker so that typing "2/2/2" doesn't turn into "02/02/0002"
+    const split = str.split("/");
+    if (split.length !== 3) {
+        return undefined;
+    }
+    // Wait for the year to be 2 chars
+    if (split[2].length !== 2) {
+        return undefined;
+    }
+    const month = parseInt(split[0], 10) - 1;
+    const day = parseInt(split[1], 10);
+    let year = parseInt(split[2], 10);
+    // This is also ~verbatim copy/pasted from react-day-picker
+    if (isNaN(year) ||
+        String(year).length > 4 ||
+        isNaN(month) ||
+        isNaN(day) ||
+        day <= 0 ||
+        day > 31 ||
+        month < 0 ||
+        month >= 12) {
+        return undefined;
+    }
+    const parsed = (0, date_fns_1.parse)(str, format, new Date());
+    if (!isValidDate(parsed)) {
+        return undefined;
+    }
+    return parsed;
+}
+function isValidDate(d) {
+    return d !== undefined && (0, date_fns_1.isDate)(d) && d.toString() !== "Invalid Date";
+}
+exports.isValidDate = isValidDate;

package/dist/inputs/TextFieldBase.js

@@ -117,6 +117,6 @@ function TextFieldBase(props) {
                                 // Reset focus to input element
                                 (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
-            }), errorMsg && !compound && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0)), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+            }), !compound && !inputProps.disabled && !inputProps.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMsg && !errorInTooltip && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }, void 0))] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/inputs/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChipSelectField";
-export * from "./DateField";
+export * from "./DateFields";
 export * from "./MultiSelectField";
 export * from "./NumberField";
 export type { NumberFieldProps } from "./NumberField";

package/dist/inputs/index.js

@@ -14,7 +14,7 @@ exports.RadioGroupField = void 0;
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxGroup"), exports);
 __exportStar(require("./ChipSelectField"), exports);
-__exportStar(require("./DateField"), exports);
+__exportStar(require("./DateFields"), exports);
 __exportStar(require("./MultiSelectField"), exports);
 __exportStar(require("./NumberField"), exports);
 var RadioGroupField_1 = require("./RadioGroupField");

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import { DateRange as _DateRange } from "react-day-picker";
+export type { _DateRange as DateRange };
 export declare type HasIdAndName<V = string> = {
     id: V;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.141.2",
+  "version": "2.143.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -43,7 +43,7 @@
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.14.1",
-    "react-day-picker": "^8.0.6",
+    "react-day-picker": "^8.0.7",
     "react-popper": "^2.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",