@homebound/beam 2.369.3 → 2.369.5

package/dist/forms/BoundCheckboxField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundCheckboxField = void 0;
+exports.BoundCheckboxField = BoundCheckboxField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -25,4 +25,3 @@ function BoundCheckboxField(props) {
                 }, disabled: disabled || field.readOnly, ...testId, ...others }));
         } }));
 }
-exports.BoundCheckboxField = BoundCheckboxField;

package/dist/forms/BoundCheckboxGroupField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundCheckboxGroupField = void 0;
+exports.BoundCheckboxGroupField = BoundCheckboxGroupField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -22,4 +22,3 @@ function BoundCheckboxGroupField(props) {
                 (0, utils_1.maybeCall)(onFocus);
             }, ...testId, ...others })) }));
 }
-exports.BoundCheckboxGroupField = BoundCheckboxGroupField;

package/dist/forms/BoundChipSelectField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { Value } from "../inputs";
 import { ChipSelectFieldProps } from "../inputs/ChipSelectField";

package/dist/forms/BoundChipSelectField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundChipSelectField = void 0;
+exports.BoundChipSelectField = BoundChipSelectField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const ChipSelectField_1 = require("../inputs/ChipSelectField");
@@ -30,4 +30,3 @@ function BoundChipSelectField(props) {
                     : undefined, ...others, ...testId }));
         } }));
 }
-exports.BoundChipSelectField = BoundChipSelectField;

package/dist/forms/BoundDateField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundDateField = void 0;
+exports.BoundDateField = BoundDateField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -24,4 +24,3 @@ function BoundDateField(props) {
                 field.maybeAutoSave();
             }, ...testId, ...others })) }));
 }
-exports.BoundDateField = BoundDateField;

package/dist/forms/BoundDateRangeField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundDateRangeField = void 0;
+exports.BoundDateRangeField = BoundDateRangeField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -24,4 +24,3 @@ function BoundDateRangeField(props) {
                 field.maybeAutoSave();
             }, readOnly: readOnly || field.readOnly, ...testId, ...others })) }));
 }
-exports.BoundDateRangeField = BoundDateRangeField;

package/dist/forms/BoundIconCardField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
-import { IconCardProps } from "../inputs";
 import { IconProps } from "../components";
+import { IconCardProps } from "../inputs";
 export type BoundIconCardFieldProps = Omit<IconCardProps, "label" | "selected" | "onChange"> & {
     field: FieldState<boolean | null | undefined>;
     icon: IconProps["icon"];

package/dist/forms/BoundIconCardField.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundIconCardField = void 0;
+exports.BoundIconCardField = BoundIconCardField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
-const defaultLabel_1 = require("../utils/defaultLabel");
 const utils_1 = require("../utils");
-const mobx_react_1 = require("mobx-react");
+const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `IconCard` and binds it to a form field. */
 function BoundIconCardField(props) {
     const { icon, field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
@@ -19,4 +19,3 @@ function BoundIconCardField(props) {
                 }, disabled: field.readOnly, ...testId, ...others }));
         } }));
 }
-exports.BoundIconCardField = BoundIconCardField;

package/dist/forms/BoundIconCardGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
-import { IconCardGroupProps } from "../inputs/IconCardGroup";
 import { Value } from "../inputs";
+import { IconCardGroupProps } from "../inputs/IconCardGroup";
 export type BoundIconCardGroupFieldProps<V extends Value> = Omit<IconCardGroupProps<V>, "label" | "values" | "onChange"> & {
     field: FieldState<V[] | null | undefined>;
     /** Make optional so that callers can override if they want to. */

package/dist/forms/BoundIconCardGroupField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundIconCardGroupField = void 0;
+exports.BoundIconCardGroupField = BoundIconCardGroupField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const IconCardGroup_1 = require("../inputs/IconCardGroup");
@@ -16,4 +16,3 @@ function BoundIconCardGroupField(props) {
                 field.maybeAutoSave();
             }, disabled: field.readOnly, ...testId, ...others })) }));
 }
-exports.BoundIconCardGroupField = BoundIconCardGroupField;

package/dist/forms/BoundMultiLineSelectField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { MultiLineSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";

package/dist/forms/BoundMultiLineSelectField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundMultiLineSelectField = void 0;
+exports.BoundMultiLineSelectField = BoundMultiLineSelectField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -26,4 +26,3 @@ function BoundMultiLineSelectField(props) {
                 }, ...others, ...testId }));
         } }));
 }
-exports.BoundMultiLineSelectField = BoundMultiLineSelectField;

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";

package/dist/forms/BoundMultiSelectField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundMultiSelectField = void 0;
+exports.BoundMultiSelectField = BoundMultiSelectField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -26,4 +26,3 @@ function BoundMultiSelectField(props) {
                 }, ...others, ...testId }));
         } }));
 }
-exports.BoundMultiSelectField = BoundMultiSelectField;

package/dist/forms/BoundNumberField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundNumberField = void 0;
+exports.BoundNumberField = BoundNumberField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const NumberField_1 = require("../inputs/NumberField");
@@ -21,4 +21,3 @@ function BoundNumberField(props) {
                 field.maybeAutoSave();
             }, ...testId, ...others })) }));
 }
-exports.BoundNumberField = BoundNumberField;

package/dist/forms/BoundRadioGroupField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundRadioGroupField = void 0;
+exports.BoundRadioGroupField = BoundRadioGroupField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -21,4 +21,3 @@ function BoundRadioGroupField(props) {
                 (0, utils_1.maybeCall)(onFocus);
             }, ...testId, ...others })) }));
 }
-exports.BoundRadioGroupField = BoundRadioGroupField;

package/dist/forms/BoundRichTextField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundRichTextField = void 0;
+exports.BoundRichTextField = BoundRichTextField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const RichTextField_1 = require("../inputs/RichTextField");
@@ -21,4 +21,3 @@ function BoundRichTextField(props) {
                 (0, utils_1.maybeCall)(onFocus);
             }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, ...testId, ...others })) }));
 }
-exports.BoundRichTextField = BoundRichTextField;

package/dist/forms/BoundSelectAndTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Only } from "../Css";
 import { BoundSelectFieldProps, BoundTextFieldProps } from "./index";
 import { Value } from "../inputs/Value";

package/dist/forms/BoundSelectAndTextField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundSelectAndTextField = void 0;
+exports.BoundSelectAndTextField = BoundSelectAndTextField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const CompoundField_1 = require("../components/internal/CompoundField");
 const index_1 = require("./index");
@@ -12,4 +12,3 @@ function BoundSelectAndTextField(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, { ...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,4 +1,3 @@
-/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdIsh, HasNameIsh, Optional } from "../types";

package/dist/forms/BoundSelectField.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundSelectField = void 0;
+exports.BoundSelectField = BoundSelectField;
 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");
-const useTestIds_1 = require("../utils/useTestIds");
 const options_1 = require("../utils/options");
+const useTestIds_1 = require("../utils/useTestIds");
 function BoundSelectField(props) {
     const { field, options, readOnly, getOptionValue = options_1.defaultOptionValue, getOptionLabel = options_1.defaultOptionLabel, onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
@@ -25,4 +25,3 @@ function BoundSelectField(props) {
                 }, ...others, ...testId }));
         } }));
 }
-exports.BoundSelectField = BoundSelectField;

package/dist/forms/BoundSwitchField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundSwitchField = void 0;
+exports.BoundSwitchField = BoundSwitchField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -18,4 +18,3 @@ function BoundSwitchField(props) {
                 }, disabled: disabled || field.readOnly, ...testId, ...others }));
         } }));
 }
-exports.BoundSwitchField = BoundSwitchField;

package/dist/forms/BoundTextAreaField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundTextAreaField = void 0;
+exports.BoundTextAreaField = BoundTextAreaField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -21,4 +21,3 @@ function BoundTextAreaField(props) {
                 field.maybeAutoSave();
             }, ...testId, ...others })) }));
 }
-exports.BoundTextAreaField = BoundTextAreaField;

package/dist/forms/BoundTextField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundTextField = void 0;
+exports.BoundTextField = BoundTextField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -21,4 +21,3 @@ function BoundTextField(props) {
                 field.maybeAutoSave();
             }, ...testId, ...others })) }));
 }
-exports.BoundTextField = BoundTextField;

package/dist/forms/BoundToggleChipGroupField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundToggleChipGroupField = void 0;
+exports.BoundToggleChipGroupField = BoundToggleChipGroupField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -12,4 +12,3 @@ function BoundToggleChipGroupField(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, { label: label, values: field.value || [], onChange: onChange, ...testId, ...others }) }));
 }
-exports.BoundToggleChipGroupField = BoundToggleChipGroupField;

package/dist/forms/BoundTreeSelectField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldState } from "@homebound/form-state";
 import { TreeSelectFieldProps, Value } from "../inputs";
 import { TreeSelectResponse } from "../inputs/TreeSelectField/utils";

package/dist/forms/BoundTreeSelectField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoundTreeSelectField = void 0;
+exports.BoundTreeSelectField = BoundTreeSelectField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
@@ -26,4 +26,3 @@ function BoundTreeSelectField(props) {
                 }, ...others, ...testId }));
         } }));
 }
-exports.BoundTreeSelectField = BoundTreeSelectField;

package/dist/forms/FormHeading.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormHeading = void 0;
+exports.FormHeading = FormHeading;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
 function FormHeading(props) {
@@ -12,6 +12,5 @@ function FormHeading(props) {
             ...xss,
         }, ...others, children: title }));
 }
-exports.FormHeading = FormHeading;
 // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720
 FormHeading.isFormHeading = true;

package/dist/forms/FormLines.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldGroup = exports.FormDivider = exports.FormLines = void 0;
+exports.FormLines = FormLines;
+exports.FormDivider = FormDivider;
+exports.FieldGroup = FieldGroup;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
+const components_1 = require("../components");
 const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
-const components_1 = require("../components");
 /**
  * Applies standard Form layout/size/spacing between lines.
  *
@@ -40,12 +42,10 @@ function FormLines(props) {
                 }
             }) }) }));
 }
-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.$ });
 }
-exports.FormDivider = FormDivider;
 /** Groups multiple fields side-by-side. */
 function FieldGroup(props) {
     // TODO Actually use title
@@ -58,7 +58,6 @@ function FieldGroup(props) {
         .join(" ");
     return (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dg.gap2.gtc(gtc).$, children: children });
 }
-exports.FieldGroup = FieldGroup;
 const sizes = {
     full: "100%",
     lg: "550px",

package/dist/forms/FormStateApp.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formConfig = exports.FormStateApp = void 0;
+exports.formConfig = void 0;
+exports.FormStateApp = FormStateApp;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const form_state_1 = require("@homebound/form-state");
 const mobx_react_1 = require("mobx-react");
@@ -25,7 +26,7 @@ function FormStateApp() {
     const [readOnly, setReadOnly] = (0, react_1.useState)(false);
     const formState = (0, form_state_1.useFormState)({
         config: exports.formConfig,
-        init: queryResponse,
+        init: { input: queryResponse },
         addRules(state) {
             state.lastName.rules.push(() => {
                 return state.firstName.value === state.lastName.value ? "Last name cannot equal first name" : undefined;
@@ -78,7 +79,6 @@ function FormStateApp() {
                                         }
                                     }, 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 }) },

package/dist/forms/StaticField.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StaticField = void 0;
+exports.StaticField = StaticField;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const PresentationContext_1 = require("../components/PresentationContext");
@@ -15,4 +15,3 @@ function StaticField(props) {
     const id = (0, utils_1.useId)();
     return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.if(labelStyle === "left").df.jcsb.maxw100.$, ...tid.container, 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.if(labelStyle === "left").w50.$, ...tid, children: value || children })] }));
 }
-exports.StaticField = StaticField;

package/dist/forms/StepperFormApp.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StepperFormApp = void 0;
+exports.StepperFormApp = StepperFormApp;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const form_state_1 = require("@homebound/form-state");
 const mobx_1 = require("mobx");
@@ -25,7 +25,6 @@ function StepperFormApp() {
     });
     return (0, jsx_runtime_1.jsx)(StepperForm, { formState: formState });
 }
-exports.StepperFormApp = StepperFormApp;
 function StepperForm({ formState }) {
     const [steps, setSteps] = (0, react_1.useState)(() => [
         { state: "incomplete", label: "Author Details", value: "author" },

package/dist/forms/SubmitButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubmitButton = void 0;
+exports.SubmitButton = SubmitButton;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const src_1 = require("..");
 /** Provides a Button that will auto-disable if `formState` is invalid. */
@@ -20,4 +20,3 @@ function SubmitButton(props) {
             }
         }, ...others }));
 }
-exports.SubmitButton = SubmitButton;

package/dist/forms/formStateDomain.js

@@ -15,7 +15,7 @@ var AuthorHeight;
 (function (AuthorHeight) {
     AuthorHeight[AuthorHeight["SHORT"] = 0] = "SHORT";
     AuthorHeight[AuthorHeight["TALL"] = 1] = "TALL";
-})(AuthorHeight = exports.AuthorHeight || (exports.AuthorHeight = {}));
+})(AuthorHeight || (exports.AuthorHeight = AuthorHeight = {}));
 class DateOnly {
     constructor(date) {
         this.date = date;

package/dist/forms/index.d.ts

@@ -3,6 +3,8 @@ export * from "./BoundCheckboxGroupField";
 export * from "./BoundChipSelectField";
 export * from "./BoundDateField";
 export * from "./BoundDateRangeField";
+export * from "./BoundIconCardField";
+export * from "./BoundIconCardGroupField";
 export * from "./BoundMultiLineSelectField";
 export * from "./BoundMultiSelectField";
 export * from "./BoundNumberField";
@@ -15,8 +17,6 @@ export * from "./BoundTextAreaField";
 export * from "./BoundTextField";
 export * from "./BoundToggleChipGroupField";
 export * from "./BoundTreeSelectField";
-export * from "./BoundIconCardField";
-export * from "./BoundIconCardGroupField";
 export * from "./FormHeading";
 export * from "./FormLines";
 export * from "./StaticField";

package/dist/forms/index.js

@@ -19,6 +19,8 @@ __exportStar(require("./BoundCheckboxGroupField"), exports);
 __exportStar(require("./BoundChipSelectField"), exports);
 __exportStar(require("./BoundDateField"), exports);
 __exportStar(require("./BoundDateRangeField"), exports);
+__exportStar(require("./BoundIconCardField"), exports);
+__exportStar(require("./BoundIconCardGroupField"), exports);
 __exportStar(require("./BoundMultiLineSelectField"), exports);
 __exportStar(require("./BoundMultiSelectField"), exports);
 __exportStar(require("./BoundNumberField"), exports);
@@ -31,8 +33,6 @@ __exportStar(require("./BoundTextAreaField"), exports);
 __exportStar(require("./BoundTextField"), exports);
 __exportStar(require("./BoundToggleChipGroupField"), exports);
 __exportStar(require("./BoundTreeSelectField"), exports);
-__exportStar(require("./BoundIconCardField"), exports);
-__exportStar(require("./BoundIconCardGroupField"), exports);
 __exportStar(require("./FormHeading"), exports);
 __exportStar(require("./FormLines"), exports);
 __exportStar(require("./StaticField"), exports);

package/dist/forms/labelUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLabelSuffix = void 0;
+exports.getLabelSuffix = getLabelSuffix;
 const PresentationContext_1 = require("../components/PresentationContext");
 function getLabelSuffix(required) {
     var _a, _b;
@@ -17,4 +17,3 @@ function getLabelSuffix(required) {
         return undefined;
     }
 }
-exports.getLabelSuffix = getLabelSuffix;

package/dist/hooks/useBreakpoint.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBreakpoint = void 0;
+exports.useBreakpoint = useBreakpoint;
 const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const react_1 = require("react");
 const index_1 = require("../utils/index");
@@ -31,7 +31,6 @@ function useBreakpoint() {
     }, [handleResize]);
     return breakpoints;
 }
-exports.useBreakpoint = useBreakpoint;
 function matchMediaBreakpoints() {
     const bps = {};
     (0, index_1.safeEntries)(Css_1.Breakpoints).forEach(([name, bp]) => {

package/dist/hooks/useComputed.d.ts

@@ -1,2 +1,43 @@
-/** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
+/**
+ * Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes.
+ *
+ * Some examples:
+ *
+ * ```ts
+ * // Good, watching a single value
+ * const firstName = useComputed(() => author.firstName, [author]);
+ *
+ * // Good, watching multiple values in a single `useComputed`
+ * const { firstName, lastName } = useComputed(() => {
+ *   // Make sure to read the values
+ *   const { firstName, lastName } = author;
+ *   return { firstName, lastName };
+ * }, [author]);
+ *
+ * // Good, watching a form-state field
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState]);
+ *
+ * // Good, watching an observable `formState` + a POJO/immutable `items` which is not an observable
+ * const item = useComputed(() => {
+ *   return items.find((i) => i.id === formState.itemId.value);
+ * }, [formState, items]);
+ *
+ * // Bad, fn and deps are "watching the same thing".
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState.firstName.value]);
+ * ```
+ *
+ * Note that the difference between the `fn` and the `deps` is:
+ *
+ * - `fn` is "which values we are watching in the observable" (i.e. store or `formState`), and
+ * - `deps` is "which observable we're watching" (i.e. store or `formState`)
+ *
+ * So the `deps` array shouldn't overlap with any of the "watched values" of the `fn` lambda,
+ * other than the root observer itself (which admittedly should rarely change, i.e. our stores
+ * are generally global-ish/very stable, but can change if the user switches pages i.e. "from
+ * editing author:1 t editing author:2").
+ */
 export declare function useComputed<T>(fn: (prev: T | undefined) => T, deps: readonly any[]): T;

package/dist/hooks/useComputed.js

@@ -1,10 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComputed = void 0;
+exports.useComputed = useComputed;
 const mobx_1 = require("mobx");
 const react_1 = require("react");
 const shallowEqual_1 = require("../utils/shallowEqual");
-/** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
+/**
+ * Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes.
+ *
+ * Some examples:
+ *
+ * ```ts
+ * // Good, watching a single value
+ * const firstName = useComputed(() => author.firstName, [author]);
+ *
+ * // Good, watching multiple values in a single `useComputed`
+ * const { firstName, lastName } = useComputed(() => {
+ *   // Make sure to read the values
+ *   const { firstName, lastName } = author;
+ *   return { firstName, lastName };
+ * }, [author]);
+ *
+ * // Good, watching a form-state field
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState]);
+ *
+ * // Good, watching an observable `formState` + a POJO/immutable `items` which is not an observable
+ * const item = useComputed(() => {
+ *   return items.find((i) => i.id === formState.itemId.value);
+ * }, [formState, items]);
+ *
+ * // Bad, fn and deps are "watching the same thing".
+ * const firstName = useComputed(() => {
+ *   return formState.firstName.value;
+ * }, [formState.firstName.value]);
+ * ```
+ *
+ * Note that the difference between the `fn` and the `deps` is:
+ *
+ * - `fn` is "which values we are watching in the observable" (i.e. store or `formState`), and
+ * - `deps` is "which observable we're watching" (i.e. store or `formState`)
+ *
+ * So the `deps` array shouldn't overlap with any of the "watched values" of the `fn` lambda,
+ * other than the root observer itself (which admittedly should rarely change, i.e. our stores
+ * are generally global-ish/very stable, but can change if the user switches pages i.e. "from
+ * editing author:1 t editing author:2").
+ */
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders
     const [, setTick] = (0, react_1.useState)(0);
@@ -64,4 +105,3 @@ function useComputed(fn, deps) {
     // We can use `!` here b/c we know that `autorun` set current
     return ref.current.value;
 }
-exports.useComputed = useComputed;