@homebound/beam 2.227.0 → 2.227.1

package/dist/forms/BoundCheckboxGroupField.js

@@ -11,7 +11,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundCheckboxGroupField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...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.CheckboxGroup, Object.assign({ label: label, values: field.value || [], onChange: (values) => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, { label: label, values: field.value || [], onChange: (values) => {
                 onChange(values);
                 field.maybeAutoSave();
             }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
@@ -20,6 +20,6 @@ function BoundCheckboxGroupField(props) {
             }, onFocus: () => {
                 field.focus();
                 (0, utils_1.maybeCall)(onFocus);
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundCheckboxGroupField = BoundCheckboxGroupField;

package/dist/forms/BoundChipSelectField.js

@@ -13,7 +13,7 @@ function BoundChipSelectField(props) {
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(ChipSelectField_1.ChipSelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
+            return ((0, jsx_runtime_1.jsx)(ChipSelectField_1.ChipSelectField, { label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
                     onSelect(value);
                     field.maybeAutoSave();
                 }, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
@@ -27,7 +27,7 @@ function BoundChipSelectField(props) {
                         await onCreateNew(v);
                         field.maybeAutoSave();
                     }
-                    : undefined }, others, testId), void 0));
-        } }, void 0));
+                    : undefined, ...others, ...testId }));
+        } }));
 }
 exports.BoundChipSelectField = BoundChipSelectField;

package/dist/forms/BoundDateField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { DateFieldProps } from "../inputs";
-export declare type BoundDateFieldProps = Omit<DateFieldProps, "label" | "value" | "onChange"> & {
+export type BoundDateFieldProps = Omit<DateFieldProps, "label" | "value" | "onChange"> & {
     field: FieldState<any, Date | null | undefined>;
     label?: string;
     onChange?: (value: Date | undefined) => void;

package/dist/forms/BoundDateField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundDateField(props) {
     const { field, readOnly, 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.DateField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateField, { label: label, value: field.value || undefined, onChange: (value) => {
                 onChange(value);
                 field.maybeAutoSave();
             }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
@@ -22,6 +22,6 @@ function BoundDateField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundDateField = BoundDateField;

package/dist/forms/BoundDateRangeField.d.ts

@@ -1,7 +1,7 @@
 import { FieldState } from "@homebound/form-state";
 import { DateRangeFieldProps } from "../inputs";
 import { DateRange } from "../types";
-export declare type BoundDateRangeFieldProps = Omit<DateRangeFieldProps, "label" | "value" | "onChange"> & {
+export type BoundDateRangeFieldProps = Omit<DateRangeFieldProps, "label" | "value" | "onChange"> & {
     field: FieldState<any, DateRange | null | undefined>;
     label?: string;
     onChange?: (value: DateRange | undefined) => void;

package/dist/forms/BoundDateRangeField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundDateRangeField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, readOnly, ...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) => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, { label: label, value: field.value || undefined, onChange: (value) => {
                 onChange(value);
                 field.maybeAutoSave();
             }, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
@@ -22,6 +22,6 @@ function BoundDateRangeField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            }, readOnly: readOnly || field.readOnly }, testId, others), void 0)) }, void 0));
+            }, readOnly: readOnly || field.readOnly, ...testId, ...others })) }));
 }
 exports.BoundDateRangeField = BoundDateRangeField;

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,7 +1,7 @@
 import { FieldState } from "@homebound/form-state";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
+export type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
     onSelect?: (values: V[], opts: O[]) => void;
     field: FieldState<any, V[] | null | undefined>;
     label?: string;

package/dist/forms/BoundMultiSelectField.js

@@ -14,7 +14,7 @@ function BoundMultiSelectField(props) {
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.MultiSelectField, Object.assign({ label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: (values, options) => {
+            return ((0, jsx_runtime_1.jsx)(inputs_1.MultiSelectField, { label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: (values, options) => {
                     onSelect(values, options);
                     field.maybeAutoSave();
                 }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
@@ -23,7 +23,7 @@ function BoundMultiSelectField(props) {
                 }, onFocus: () => {
                     field.focus();
                     (0, utils_1.maybeCall)(onFocus);
-                } }, others, testId), void 0));
-        } }, void 0));
+                }, ...others, ...testId }));
+        } }));
 }
 exports.BoundMultiSelectField = BoundMultiSelectField;

package/dist/forms/BoundNumberField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { NumberFieldProps } from "../inputs/NumberField";
-export declare type BoundNumberFieldProps = Omit<NumberFieldProps, "value" | "onChange" | "label"> & {
+export type BoundNumberFieldProps = Omit<NumberFieldProps, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, number | null | undefined>;
     onChange?: (value: number | undefined) => void;

package/dist/forms/BoundNumberField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundNumberField(props) {
     const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key.replace(/InCents$/, "")), type = field.key.endsWith("InCents") ? "cents" : undefined, onFocus, onBlur, onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, label || field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ label: label, value: typeof field.value === "number" ? field.value : undefined, onChange: onChange, type: type, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onFocus: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { label: label, value: typeof field.value === "number" ? field.value : undefined, onChange: onChange, type: type, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onFocus: () => {
                 field.focus();
                 (0, utils_1.maybeCall)(onFocus);
             }, onBlur: () => {
@@ -19,6 +19,6 @@ function BoundNumberField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundNumberField = BoundNumberField;

package/dist/forms/BoundRadioGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { RadioGroupFieldProps } from "../inputs";
-export declare type BoundRadioGroupFieldProps<K extends string> = Omit<RadioGroupFieldProps<K>, "value" | "onChange" | "label"> & {
+export type BoundRadioGroupFieldProps<K extends string> = Omit<RadioGroupFieldProps<K>, "value" | "onChange" | "label"> & {
     field: FieldState<any, K | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (value: K) => void;

package/dist/forms/BoundRadioGroupField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundRadioGroupField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...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.RadioGroupField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.RadioGroupField, { label: label, value: field.value || undefined, onChange: (value) => {
                 onChange(value);
                 field.maybeAutoSave();
             }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
@@ -19,6 +19,6 @@ function BoundRadioGroupField(props) {
             }, onFocus: () => {
                 field.focus();
                 (0, utils_1.maybeCall)(onFocus);
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundRadioGroupField = BoundRadioGroupField;

package/dist/forms/BoundRichTextField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { RichTextFieldProps } from "../inputs/RichTextField";
-export declare type BoundRichTextFieldProps = Omit<RichTextFieldProps, "value" | "onChange"> & {
+export type BoundRichTextFieldProps = Omit<RichTextFieldProps, "value" | "onChange"> & {
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;
 };

package/dist/forms/BoundRichTextField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundRichTextField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), readOnly, onFocus, onBlur, ...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)(RichTextField_1.RichTextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, 
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { label: label, value: field.value || undefined, onChange: onChange, 
             // TODO: Potentially support this in the future?
             // errorMsg={field.touched ? field.errors.join(" ") : undefined}
             onBlur: () => {
@@ -19,6 +19,6 @@ function BoundRichTextField(props) {
             }, onFocus: () => {
                 field.focus();
                 (0, utils_1.maybeCall)(onFocus);
-            }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly }, testId, others), void 0)) }, void 0));
+            }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, ...testId, ...others })) }));
 }
 exports.BoundRichTextField = BoundRichTextField;

package/dist/forms/BoundSelectAndTextField.d.ts

@@ -12,6 +12,6 @@ export declare function BoundSelectAndTextField<O, V extends Value, X extends On
 export declare function BoundSelectAndTextField<O extends HasIdAndName<V>, V extends Value, X extends Only<TextFieldXss, X>>(props: Omit<BoundSelectAndTextFieldProps<O, V, X>, "selectFieldProps"> & {
     selectFieldProps: Optional<CompoundSelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">;
 }): JSX.Element;
-declare type CompoundSelectFieldProps<O, V extends Value> = Omit<BoundSelectFieldProps<O, V>, "compact">;
-declare type CompoundTextFieldProps<X> = Omit<BoundTextFieldProps<X>, "compact">;
+type CompoundSelectFieldProps<O, V extends Value> = Omit<BoundSelectFieldProps<O, V>, "compact">;
+type CompoundTextFieldProps<X> = Omit<BoundTextFieldProps<X>, "compact">;
 export {};

package/dist/forms/BoundSelectAndTextField.js

@@ -10,6 +10,6 @@ function BoundSelectAndTextField(props) {
     var _a, _b;
     const { selectFieldProps, textFieldProps, compact = true } = props;
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { children: [(0, jsx_runtime_1.jsx)(index_1.BoundSelectField, Object.assign({}, tid[(0, defaultTestId_1.defaultTestId)((_a = selectFieldProps.label) !== null && _a !== void 0 ? _a : selectFieldProps.field.key)], selectFieldProps, { sizeToContent: true, compact: compact }), void 0), (0, jsx_runtime_1.jsx)(index_1.BoundTextField, Object.assign({}, tid[(0, defaultTestId_1.defaultTestId)((_b = textFieldProps.label) !== null && _b !== void 0 ? _b : textFieldProps.field.key)], textFieldProps, { compact: compact }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { children: [(0, jsx_runtime_1.jsx)(index_1.BoundSelectField, { ...tid[(0, defaultTestId_1.defaultTestId)((_a = selectFieldProps.label) !== null && _a !== void 0 ? _a : selectFieldProps.field.key)], ...selectFieldProps, sizeToContent: true, compact: compact }), (0, jsx_runtime_1.jsx)(index_1.BoundTextField, { ...tid[(0, defaultTestId_1.defaultTestId)((_b = textFieldProps.label) !== null && _b !== void 0 ? _b : textFieldProps.field.key)], ...textFieldProps, compact: compact })] }));
 }
 exports.BoundSelectAndTextField = BoundSelectAndTextField;

package/dist/forms/BoundSelectField.d.ts

@@ -1,7 +1,7 @@
 import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundSelectFieldProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect" | "label"> & {
+export type BoundSelectFieldProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect" | "label"> & {
     onSelect?: (value: V | undefined, opt: O | undefined) => void;
     field: FieldState<any, V | null | undefined>;
     label?: string;

package/dist/forms/BoundSelectField.js

@@ -14,7 +14,7 @@ function BoundSelectField(props) {
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value, opt) => {
+            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, { label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value, opt) => {
                     onSelect(value, opt);
                     field.maybeAutoSave();
                 }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
@@ -23,7 +23,7 @@ function BoundSelectField(props) {
                 }, onFocus: () => {
                     field.focus();
                     (0, utils_1.maybeCall)(onFocus);
-                } }, others, testId), void 0));
-        } }, void 0));
+                }, ...others, ...testId }));
+        } }));
 }
 exports.BoundSelectField = BoundSelectField;

package/dist/forms/BoundSwitchField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { SwitchProps } from "../inputs";
-export declare type BoundSwitchFieldProps = Omit<SwitchProps, "selected" | "onChange" | "label"> & {
+export type BoundSwitchFieldProps = Omit<SwitchProps, "selected" | "onChange" | "label"> & {
     field: FieldState<any, boolean | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (value: boolean) => void;

package/dist/forms/BoundSwitchField.js

@@ -12,10 +12,10 @@ function BoundSwitchField(props) {
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.Switch, Object.assign({ label: label, labelStyle: labelStyle, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
+            return ((0, jsx_runtime_1.jsx)(inputs_1.Switch, { label: label, labelStyle: labelStyle, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
                     onChange(selected);
                     field.maybeAutoSave();
-                }, disabled: disabled || field.readOnly }, testId, others), void 0));
-        } }, void 0));
+                }, disabled: disabled || field.readOnly, ...testId, ...others }));
+        } }));
 }
 exports.BoundSwitchField = BoundSwitchField;

package/dist/forms/BoundTextAreaField.d.ts

@@ -2,7 +2,7 @@ import { FieldState } from "@homebound/form-state";
 import { Only } from "../Css";
 import { TextAreaFieldProps } from "../inputs";
 import { TextFieldXss } from "../interfaces";
-export declare type BoundTextAreaFieldProps<X> = Omit<TextAreaFieldProps<X>, "value" | "onChange" | "label"> & {
+export type BoundTextAreaFieldProps<X> = Omit<TextAreaFieldProps<X>, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;

package/dist/forms/BoundTextAreaField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundTextAreaField(props) {
     const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, 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.TextAreaField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
                 field.blur();
                 (0, utils_1.maybeCall)(onBlur);
             }, onFocus: () => {
@@ -19,6 +19,6 @@ function BoundTextAreaField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundTextAreaField = BoundTextAreaField;

package/dist/forms/BoundTextField.d.ts

@@ -2,7 +2,7 @@ import { FieldState } from "@homebound/form-state";
 import { Only } from "../Css";
 import { TextFieldProps } from "../inputs";
 import { TextFieldXss } from "../interfaces";
-export declare type BoundTextFieldProps<X> = Omit<TextFieldProps<X>, "value" | "onChange" | "label"> & {
+export type BoundTextFieldProps<X> = Omit<TextFieldProps<X>, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;

package/dist/forms/BoundTextField.js

@@ -10,7 +10,7 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundTextField(props) {
     const { field, readOnly, onBlur, onFocus, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), 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.TextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
                 (0, utils_1.maybeCall)(onBlur);
                 field.blur();
             }, onFocus: () => {
@@ -19,6 +19,6 @@ function BoundTextField(props) {
             }, onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
                 field.maybeAutoSave();
-            } }, testId, others), void 0)) }, void 0));
+            }, ...testId, ...others })) }));
 }
 exports.BoundTextField = BoundTextField;

package/dist/forms/BoundToggleChipGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { ToggleChipGroupProps } from "../inputs";
-export declare type BoundToggleChipGroupFieldProps = Omit<ToggleChipGroupProps, "values" | "onChange" | "label"> & {
+export type BoundToggleChipGroupFieldProps = Omit<ToggleChipGroupProps, "values" | "onChange" | "label"> & {
     field: FieldState<any, string[] | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: string[]) => void;

package/dist/forms/BoundToggleChipGroupField.js

@@ -10,6 +10,6 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundToggleChipGroupField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...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.ToggleChipGroup, Object.assign({ label: label, values: field.value || [], onChange: onChange }, testId, others), void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)(inputs_1.ToggleChipGroup, { label: label, values: field.value || [], onChange: onChange, ...testId, ...others }) }));
 }
 exports.BoundToggleChipGroupField = BoundToggleChipGroupField;

package/dist/forms/FormHeading.js

@@ -5,12 +5,12 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
 function FormHeading(props) {
     const { title, xss, isFirst = false, ...others } = props;
-    return ((0, jsx_runtime_1.jsx)("h3", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)("h3", { css: {
             ...Css_1.Css.baseMd.$,
             // Add space before the heading, but only if it's not first.
             ...(!isFirst && Css_1.Css.mt4.$),
             ...xss,
-        } }, others, { children: title }), void 0));
+        }, ...others, children: title }));
 }
 exports.FormHeading = FormHeading;
 // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720

package/dist/forms/FormLines.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { LabelSuffixStyle } from "../components/PresentationContext";
-export declare type FormWidth = 
+export type FormWidth = 
 /** 320px. */
 "sm"
 /** 480px, works well in a small, single-stack form. */

package/dist/forms/FormLines.js

@@ -19,12 +19,12 @@ function FormLines(props) {
         ...("labelSuffix" in props ? { labelSuffix } : {}),
         ...("compact" in props ? { compact } : {}),
     };
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: newFieldProps }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { fieldProps: newFieldProps, children: (0, jsx_runtime_1.jsx)("div", { css: {
                 // Note that we're purposefully not using display:flex so that our children's margins will collapse.
                 ...Css_1.Css.w(sizes[width]).$,
                 // Purposefully use this instead of childGap3 to put margin-bottom on the last line
                 "& > *": Css_1.Css.mb2.$,
-            } }, { children: react_1.Children.map(children, (child) => {
+            }, children: react_1.Children.map(children, (child) => {
                 if (child && typeof child === "object" && "type" in child && child.type.isFormHeading) {
                     const clone = (0, react_1.cloneElement)(child, { isFirst: firstFormHeading });
                     firstFormHeading = false;
@@ -33,12 +33,12 @@ function FormLines(props) {
                 else {
                     return child;
                 }
-            }) }), void 0) }), void 0));
+            }) }) }));
 }
 exports.FormLines = FormLines;
 /** Draws a line between form lines. */
 function FormDivider() {
-    return (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(1).my2.bgGray200.$ }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(1).my2.bgGray200.$ });
 }
 exports.FormDivider = FormDivider;
 /** Groups multiple fields side-by-side. */
@@ -51,7 +51,7 @@ function FieldGroup(props) {
         return typeof width === `number` ? `${width}fr` : width;
     })
         .join(" ");
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dg.gap2.gtc(gtc).$ }, { children: children }), void 0);
+    return (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dg.gap2.gtc(gtc).$, children: children });
 }
 exports.FieldGroup = FieldGroup;
 const sizes = {

package/dist/forms/FormStateApp.js

@@ -56,23 +56,23 @@ function FormStateApp() {
         { value: "a:4", label: "Iguana" },
         { value: "a:5", label: "Turtle" },
     ];
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.$, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.wPx(700).$, children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, { labelSuffix: { required: "*", optional: "(Opt)" }, children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }), (0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Website", children: (0, jsx_runtime_1.jsx)("a", { href: "https://google.com", children: "google.com" }) })] }), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows })] }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
                                         if (formState.canSave()) {
                                             formState.commitChanges();
                                         }
-                                    }, label: "Save" }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Read Only", onClick: () => setReadOnly(!readOnly) }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt1.$ }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Form Values:" }, void 0), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(formState.value, null, 2) }, void 0)] }), void 0)] }, void 0)] }), void 0)) }, void 0));
+                                    }, label: "Save" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Read Only", onClick: () => setReadOnly(!readOnly) }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mt1.$, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Form Values:" }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(formState.value, null, 2) })] })] })] })) }));
 }
 exports.FormStateApp = FormStateApp;
 function createColumns(formState) {
     return [
-        { header: "#", data: ({ id }) => (0, jsx_runtime_1.jsx)("span", { children: id.value }, void 0) },
+        { header: "#", data: ({ id }) => (0, jsx_runtime_1.jsx)("span", { children: id.value }) },
         {
             header: "Title",
-            data: ({ title }) => (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { label: "Book Title", hideLabel: true, compact: true, field: title }, void 0),
+            data: ({ title }) => (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { label: "Book Title", hideLabel: true, compact: true, field: title }),
         },
         {
             header: "Actions",
-            data: (row) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: () => formState.books.remove(row.value) }, void 0),
+            data: (row) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: () => formState.books.remove(row.value) }),
         },
     ];
 }

package/dist/forms/StaticField.js

@@ -10,6 +10,6 @@ function StaticField(props) {
     const { label, value, children } = props;
     const tid = (0, useTestIds_1.useTestIds)(props, typeof label === "string" ? (0, defaultTestId_1.defaultTestId)(label) : "staticField");
     const id = (0, utils_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smMd.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id, ...tid.label, children: label }), (0, jsx_runtime_1.jsx)("div", { id: id, css: Css_1.Css.smMd.gray900.df.aic.$, ...tid, children: value || children })] }));
 }
 exports.StaticField = StaticField;

package/dist/forms/StepperFormApp.js

@@ -23,7 +23,7 @@ function StepperFormApp() {
             });
         },
     });
-    return (0, jsx_runtime_1.jsx)(StepperForm, { formState: formState }, void 0);
+    return (0, jsx_runtime_1.jsx)(StepperForm, { formState: formState });
 }
 exports.StepperFormApp = StepperFormApp;
 function StepperForm({ formState }) {
@@ -64,26 +64,26 @@ function StepperForm({ formState }) {
         // Return the disposer in order to clean up useEffect.
         return disposer;
     }, [setStep, formState.birthday.valid, formState.books.valid, formState.firstName.valid, formState.lastName.valid]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Stepper_1.Stepper, { steps: steps, currentStep: currentStep, onChange: setActiveStep }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt2.$ }, { children: [currentStep === "author" && (0, jsx_runtime_1.jsx)(AuthorDetails, { formState: formState, onNext: onNext }, void 0), currentStep === "books" && (0, jsx_runtime_1.jsx)(BookList, { formState: formState, onNext: onNext, onBack: onBack }, void 0), currentStep === "misc" && (0, jsx_runtime_1.jsx)(MiscAuthorDetails, { formState: formState, onBack: onBack }, void 0)] }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Stepper_1.Stepper, { steps: steps, currentStep: currentStep, onChange: setActiveStep }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mt2.$, children: [currentStep === "author" && (0, jsx_runtime_1.jsx)(AuthorDetails, { formState: formState, onNext: onNext }), currentStep === "books" && (0, jsx_runtime_1.jsx)(BookList, { formState: formState, onNext: onNext, onBack: onBack }), currentStep === "misc" && (0, jsx_runtime_1.jsx)(MiscAuthorDetails, { formState: formState, onBack: onBack })] })] }));
 }
 function AuthorDetails({ formState, onNext }) {
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.mb1.$ }, { children: "Author Details" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.firstName, helperText: "Required to enable next step" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.lastName, helperText: "Required to enable next step" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.jcfe.bt.bGray300.py1.mt2.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Books", disabled: !formState.firstName.valid || !formState.lastName.valid, onClick: onNext }, void 0) }), void 0)] }, void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.firstName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { field: formState.lastName, helperText: "Required to enable next step" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.jcfe.bt.bGray300.py1.mt2.$, children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Books", disabled: !formState.firstName.valid || !formState.lastName.valid, onClick: onNext }) })] })) }));
 }
 function BookList({ formState, onNext, onBack }) {
     const columns = (0, react_1.useMemo)(() => createColumns(formState), [formState]);
     const rows = (0, hooks_1.useComputed)(() => [components_1.simpleHeader, ...formState.books.rows.map((data) => ({ kind: "data", id: data.id.value, data }))], []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext }, void 0)] }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", { css: Css_1.Css.df.aic.$, children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext })] })] }));
 }
 function createColumns(formState) {
     return [
-        { header: "#", data: ({ id }) => (0, jsx_runtime_1.jsx)("span", { children: id.value }, void 0) },
+        { header: "#", data: ({ id }) => (0, jsx_runtime_1.jsx)("span", { children: id.value }) },
         {
             header: "Title",
-            data: ({ title }) => (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { label: "", compact: true, field: title }, void 0),
+            data: ({ title }) => (0, jsx_runtime_1.jsx)(BoundTextField_1.BoundTextField, { label: "", compact: true, field: title }),
         },
         {
             header: "Actions",
-            data: (row) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: () => formState.books.remove(row.value) }, void 0),
+            data: (row) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "x", onClick: () => formState.books.remove(row.value) }),
         },
     ];
 }
@@ -91,13 +91,13 @@ function MiscAuthorDetails({ formState, onBack }) {
     const [showFormData, setShowFormData] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a, _b;
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.mb1.$ }, { children: "Author Details" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { css: Css_1.Css.mb1.$, children: "Author Details" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }) }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mb2.$, children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
                                     if (formState.canSave()) {
                                         formState.commitChanges();
                                         setShowFormData(true);
                                     }
-                                }, label: "Save" }, void 0)] }), void 0), showFormData && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt5.$ }, { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Form saved!" }, void 0), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "First Name" }, void 0), " ", formState.value.firstName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Last Name" }, void 0), " ", formState.value.lastName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Books" }, void 0), " ", (_a = formState.value.books) === null || _a === void 0 ? void 0 : _a.map((b) => b.title).join(", ")] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Birthday" }, void 0), " ", (_b = formState.value.birthday) === null || _b === void 0 ? void 0 : _b.toDateString()] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Height" }, void 0), " ", formState.value.heightInInches] }, void 0)] }, void 0)] }), void 0))] }, void 0));
-        } }, void 0));
+                                }, label: "Save" })] }), showFormData && ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mt5.$, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Form saved!" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "First Name" }), " ", formState.value.firstName] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Last Name" }), " ", formState.value.lastName] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Books" }), " ", (_a = formState.value.books) === null || _a === void 0 ? void 0 : _a.map((b) => b.title).join(", ")] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Birthday" }), " ", (_b = formState.value.birthday) === null || _b === void 0 ? void 0 : _b.toDateString()] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Height" }), " ", formState.value.heightInInches] })] })] }))] }));
+        } }));
 }
 // Configure the fields/behavior for AuthorInput's fields
 const formConfig = {

package/dist/forms/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/hooks/index.js

@@ -1,7 +1,11 @@
 "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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/dist/hooks/useBreakpoint.d.ts

@@ -1,5 +1,5 @@
 import { Breakpoint } from "../Css";
-declare type BreakpointsType = Record<Breakpoint, boolean>;
+type BreakpointsType = Record<Breakpoint, boolean>;
 /**
  * A React hook to return a record of responsive breakpoints that updates on resize.
  *

package/dist/hooks/useQueryState.d.ts

@@ -1,4 +1,4 @@
-export declare type UseQueryState<V> = [V, (value: V) => void];
+export type UseQueryState<V> = [V, (value: V) => void];
 /**
  * Very similar to `useState` but persists in the query string.
  *