@medplum/react 2.0.16 → 2.0.18

package/dist/cjs/index.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('prop-types'), require('@mantine/notifications')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', 'prop-types', '@mantine/notifications'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.medplum = global.medplum || {}, global.medplum.react = {}), global.medplum.core, global.React, global.mantine.core, global.PropTypes, global.mantine.notifications));
-})(this, (function (exports, core, React, core$1, PropTypes, notifications) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('prop-types'), require('react-router-dom'), require('@mantine/notifications')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', 'prop-types', 'react-router-dom', '@mantine/notifications'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.medplum = global.medplum || {}, global.medplum.react = {}), global.medplum.core, global.React, global.mantine.core, global.PropTypes, global.ReactRouterDOM, global.mantine.notifications));
+})(this, (function (exports, core, React, core$1, PropTypes, reactRouterDom, notifications) { 'use strict';
 
     function AddressDisplay(props) {
         const address = props.value;
@@ -154,169 +154,7 @@
     }
 
     /**
-     * Kills a browser event.
-     * Prevents default behavior.
-     * Stops event propagation.
-     * @param e The event.
-     */
-    function killEvent(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    /**
-     * Returns true if the element is a checkbox or a table cell containing a checkbox.
-     * Table cells containing checkboxes are commonly accidentally clicked.
-     * @param el The HTML DOM element.
-     * @returns True if the element is a checkbox or a table cell containing a checkbox.
-     */
-    function isCheckboxCell(el) {
-        if (isCheckboxElement(el)) {
-            return true;
-        }
-        if (el instanceof HTMLTableCellElement) {
-            const children = el.children;
-            if (children.length === 1 && isCheckboxElement(children[0])) {
-                return true;
-            }
-        }
-        return false;
-    }
-    function isCheckboxElement(el) {
-        return el instanceof HTMLInputElement && el.type === 'checkbox';
-    }
-
-    function AsyncAutocomplete(props) {
-        const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, creatable, ...rest } = props;
-        const defaultItems = toDefaultItems(defaultValue);
-        const inputRef = React.useRef(null);
-        const [lastValue, setLastValue] = React.useState(undefined);
-        const [timer, setTimer] = React.useState();
-        const [abortController, setAbortController] = React.useState();
-        const [autoSubmit, setAutoSubmit] = React.useState();
-        const [options, setOptions] = React.useState(defaultItems?.map(toOption));
-        const lastValueRef = React.useRef();
-        lastValueRef.current = lastValue;
-        const timerRef = React.useRef();
-        timerRef.current = timer;
-        const abortControllerRef = React.useRef();
-        abortControllerRef.current = abortController;
-        const autoSubmitRef = React.useRef();
-        autoSubmitRef.current = autoSubmit;
-        const optionsRef = React.useRef();
-        optionsRef.current = options;
-        const handleTimer = React.useCallback(() => {
-            setTimer(undefined);
-            const value = inputRef.current?.value?.trim() || '';
-            if (value === lastValueRef.current) {
-                // Nothing has changed, move on
-                return;
-            }
-            setLastValue(value);
-            const newAbortController = new AbortController();
-            setAbortController(newAbortController);
-            loadOptions(value, newAbortController.signal)
-                .then((newValues) => {
-                if (!newAbortController.signal.aborted) {
-                    setOptions(newValues.map(toOption));
-                    setAbortController(undefined);
-                    if (autoSubmitRef.current) {
-                        if (newValues.length > 0) {
-                            onChange(newValues.slice(0, 1));
-                        }
-                        setAutoSubmit(false);
-                    }
-                }
-            })
-                .catch(console.log);
-        }, [loadOptions, onChange, toOption]);
-        const handleSearchChange = React.useCallback(() => {
-            if (abortControllerRef.current) {
-                abortControllerRef.current.abort();
-                setAbortController(undefined);
-            }
-            if (timerRef.current !== undefined) {
-                window.clearTimeout(timerRef.current);
-            }
-            const newTimer = window.setTimeout(() => handleTimer(), 100);
-            setTimer(newTimer);
-        }, [handleTimer]);
-        const handleChange = React.useCallback((values) => {
-            const result = [];
-            for (const value of values) {
-                let item = optionsRef.current?.find((option) => option.value === value)?.resource;
-                if (!item && creatable !== false) {
-                    item = onCreate(value);
-                }
-                if (item)
-                    result.push(item);
-            }
-            onChange(result);
-        }, [creatable, onChange, onCreate]);
-        const handleKeyDown = React.useCallback((e) => {
-            if (e.key === 'Enter') {
-                if (!timerRef.current && !abortControllerRef.current) {
-                    killEvent(e);
-                    if (optionsRef.current && optionsRef.current.length > 0) {
-                        setOptions(optionsRef.current.slice(0, 1));
-                        handleChange([optionsRef.current[0].value]);
-                    }
-                }
-                else {
-                    // The user pressed enter, but we don't have results yet.
-                    // We need to wait for the results to come in.
-                    setAutoSubmit(true);
-                }
-            }
-        }, [handleChange]);
-        const handleCreate = React.useCallback((input) => {
-            const option = toOption(onCreate(input));
-            setOptions([...optionsRef.current, option]);
-            return option;
-        }, [onCreate, setOptions, toOption]);
-        const handleFilter = React.useCallback((_value, selected) => !selected, []);
-        React.useEffect(() => {
-            return () => {
-                if (abortControllerRef.current) {
-                    abortControllerRef.current.abort();
-                }
-            };
-        }, []);
-        return (React.createElement(core$1.MultiSelect, { ...rest, ref: inputRef, defaultValue: defaultItems.map(toKey), searchable: true, onKeyDown: handleKeyDown, onSearchChange: handleSearchChange, data: options, onFocus: handleTimer, onChange: handleChange, onCreate: handleCreate, rightSectionWidth: 40, rightSection: abortController ? React.createElement(core$1.Loader, { size: 16 }) : null, filter: handleFilter, creatable: true }));
-    }
-    function toDefaultItems(defaultValue) {
-        if (!defaultValue) {
-            return [];
-        }
-        if (Array.isArray(defaultValue)) {
-            return defaultValue;
-        }
-        return [defaultValue];
-    }
-
-    function AttachmentDisplay(props) {
-        const value = props.value;
-        const { contentType, url, title } = value ?? {};
-        if (!url) {
-            return null;
-        }
-        return (React.createElement("div", { "data-testid": "attachment-display" },
-            contentType?.startsWith('image/') && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value?.title })),
-            contentType?.startsWith('video/') && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
-                React.createElement("source", { type: contentType, src: url }))),
-            contentType === 'application/pdf' && !title?.endsWith('.pdf') && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
-                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
-            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
-                React.createElement(core$1.Anchor, { href: value?.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, value?.title || 'Download'))));
-    }
-
-    function AttachmentArrayDisplay(props) {
-        return (React.createElement("div", null, props.values &&
-            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
-                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
-    }
-
-    /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var defaultAttributes = {
@@ -332,7 +170,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var __defProp = Object.defineProperty;
@@ -395,7 +233,7 @@
     };
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconAdjustmentsHorizontal = createReactComponent(
@@ -415,7 +253,7 @@
     );
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconAlertCircle = createReactComponent("alert-circle", "IconAlertCircle", [
@@ -425,7 +263,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBleachOff = createReactComponent("bleach-off", "IconBleachOff", [
@@ -440,7 +278,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBleach = createReactComponent("bleach", "IconBleach", [
@@ -454,7 +292,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBoxMultiple = createReactComponent("box-multiple", "IconBoxMultiple", [
@@ -475,7 +313,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBracketsContain = createReactComponent("brackets-contain", "IconBracketsContain", [
@@ -487,7 +325,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBucketOff = createReactComponent("bucket-off", "IconBucketOff", [
@@ -509,7 +347,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconBucket = createReactComponent("bucket", "IconBucket", [
@@ -524,7 +362,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCalendar = createReactComponent("calendar", "IconCalendar", [
@@ -543,7 +381,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCheck = createReactComponent("check", "IconCheck", [
@@ -551,7 +389,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCheckbox = createReactComponent("checkbox", "IconCheckbox", [
@@ -566,7 +404,15 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconChevronDown = createReactComponent("chevron-down", "IconChevronDown", [
+      ["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]
+    ]);
+
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCircleMinus = createReactComponent("circle-minus", "IconCircleMinus", [
@@ -575,7 +421,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCirclePlus = createReactComponent("circle-plus", "IconCirclePlus", [
@@ -585,7 +431,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCloudUpload = createReactComponent("cloud-upload", "IconCloudUpload", [
@@ -601,7 +447,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconColumns = createReactComponent("columns", "IconColumns", [
@@ -616,7 +462,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconCurrencyDollar = createReactComponent("currency-dollar", "IconCurrencyDollar", [
@@ -631,7 +477,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconDots = createReactComponent("dots", "IconDots", [
@@ -641,7 +487,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconEdit = createReactComponent("edit", "IconEdit", [
@@ -663,7 +509,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconEqualNot = createReactComponent("equal-not", "IconEqualNot", [
@@ -673,7 +519,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconEqual = createReactComponent("equal", "IconEqual", [
@@ -682,7 +528,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconFileAlert = createReactComponent("file-alert", "IconFileAlert", [
@@ -699,7 +545,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconFilePlus = createReactComponent("file-plus", "IconFilePlus", [
@@ -716,7 +562,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconFilter = createReactComponent("filter", "IconFilter", [
@@ -730,7 +576,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconListDetails = createReactComponent("list-details", "IconListDetails", [
@@ -755,7 +601,22 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconLogout = createReactComponent("logout", "IconLogout", [
+      [
+        "path",
+        {
+          d: "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2",
+          key: "svg-0"
+        }
+      ],
+      ["path", { d: "M7 12h14l-3 -3m0 6l3 -3", key: "svg-1" }]
+    ]);
+
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconMathGreater = createReactComponent("math-greater", "IconMathGreater", [
@@ -763,7 +624,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconMathLower = createReactComponent("math-lower", "IconMathLower", [
@@ -771,7 +632,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconMessage = createReactComponent("message", "IconMessage", [
@@ -787,7 +648,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconPin = createReactComponent("pin", "IconPin", [
@@ -803,7 +664,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconPinnedOff = createReactComponent("pinned-off", "IconPinnedOff", [
@@ -820,7 +681,25 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconPlus = createReactComponent("plus", "IconPlus", [
+      ["path", { d: "M12 5l0 14", key: "svg-0" }],
+      ["path", { d: "M5 12l14 0", key: "svg-1" }]
+    ]);
+
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconSearch = createReactComponent("search", "IconSearch", [
+      ["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }],
+      ["path", { d: "M21 21l-6 -6", key: "svg-1" }]
+    ]);
+
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconSettings = createReactComponent("settings", "IconSettings", [
@@ -835,7 +714,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconSortAscending = createReactComponent("sort-ascending", "IconSortAscending", [
@@ -847,7 +726,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconSortDescending = createReactComponent("sort-descending", "IconSortDescending", [
@@ -859,7 +738,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconSquare = createReactComponent("square", "IconSquare", [
@@ -873,7 +752,22 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconSwitchHorizontal = createReactComponent(
+      "switch-horizontal",
+      "IconSwitchHorizontal",
+      [
+        ["path", { d: "M16 3l4 4l-4 4", key: "svg-0" }],
+        ["path", { d: "M10 7l10 0", key: "svg-1" }],
+        ["path", { d: "M8 13l-4 4l4 4", key: "svg-2" }],
+        ["path", { d: "M4 17l9 0", key: "svg-3" }]
+      ]
+    );
+
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconTableExport = createReactComponent("table-export", "IconTableExport", [
@@ -891,7 +785,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconTrash = createReactComponent("trash", "IconTrash", [
@@ -906,7 +800,7 @@
     ]);
 
     /**
-     * @tabler/icons-react v2.16.0 - MIT
+     * @tabler/icons-react v2.17.0 - MIT
      */
 
     var IconX = createReactComponent("x", "IconX", [
@@ -914,751 +808,1058 @@
       ["path", { d: "M6 6l12 12", key: "svg-1" }]
     ]);
 
-    function AttachmentButton(props) {
-        const medplum = useMedplum();
-        const fileInputRef = React.useRef(null);
-        function onClick(e) {
-            killEvent(e);
-            fileInputRef.current?.click();
+    /**
+     * ErrorBoundary is a React component that handles errors in its child components.
+     * See: https://reactjs.org/docs/error-boundaries.html
+     */
+    class ErrorBoundary extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = {};
         }
-        function onFileChange(e) {
-            killEvent(e);
-            const files = e.target.files;
-            if (files) {
-                Array.from(files).forEach(processFile);
-            }
+        static getDerivedStateFromError(error) {
+            return { error };
         }
-        /**
-         * Processes a single file.
-         *
-         * @param {File} file The file descriptor.
-         */
-        function processFile(file) {
-            if (!file) {
-                return;
-            }
-            const fileName = file.name;
-            if (!fileName) {
-                return;
-            }
-            if (props.onUploadStart) {
-                props.onUploadStart();
+        componentDidCatch(error, errorInfo) {
+            console.error('Uncaught error:', error, errorInfo);
+        }
+        render() {
+            if (this.state.error) {
+                return (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), title: "Something went wrong", color: "red" }, core.normalizeErrorString(this.state.error)));
             }
-            const filename = file.name;
-            const contentType = file.type || 'application/octet-stream';
-            medplum
-                .createBinary(file, filename, contentType, props.onUploadProgress)
-                .then((binary) => {
-                props.onUpload({
-                    contentType: binary.contentType,
-                    url: binary.url,
-                    title: filename,
-                });
-            })
-                .catch((outcome) => {
-                alert(outcome?.issue?.[0]?.details?.text);
-            });
+            return this.props.children;
         }
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", "data-testid": "upload-file-input", style: { display: 'none' }, ref: fileInputRef, onChange: (e) => onFileChange(e) }),
-            props.children({ onClick })));
     }
 
-    function AttachmentArrayInput(props) {
-        const [values, setValues] = React.useState(props.defaultValue ?? []);
-        const valuesRef = React.useRef();
-        valuesRef.current = values;
-        function setValuesWrapper(newValues) {
-            setValues(newValues);
-            if (props.onChange) {
-                props.onChange(newValues);
-            }
-        }
-        return (React.createElement("table", { style: { width: '100%' } },
-            React.createElement("colgroup", null,
-                React.createElement("col", { width: "97%" }),
-                React.createElement("col", { width: "3%" })),
-            React.createElement("tbody", null,
-                values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
-                    React.createElement("td", null,
-                        React.createElement(AttachmentDisplay, { value: v, maxWidth: 200 })),
-                    React.createElement("td", null,
-                        React.createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
-                                killEvent(e);
-                                const copy = values.slice();
-                                copy.splice(index, 1);
-                                setValuesWrapper(copy);
-                            } },
-                            React.createElement(IconCircleMinus, null)))))),
-                React.createElement("tr", null,
-                    React.createElement("td", null),
-                    React.createElement("td", null,
-                        React.createElement(AttachmentButton, { onUpload: (attachment) => {
-                                setValuesWrapper([...valuesRef.current, attachment]);
-                            } }, (props) => (React.createElement(core$1.ActionIcon, { ...props, title: "Add", size: "sm", color: "green" },
-                            React.createElement(IconCloudUpload, { size: 16 })))))))));
+    function Loading() {
+        return (React.createElement(core$1.Center, { style: { width: '100%', height: '100vh' } },
+            React.createElement(core$1.Loader, null)));
     }
 
-    function AttachmentInput(props) {
-        const [value, setValue] = React.useState(props.defaultValue);
-        function setValueWrapper(newValue) {
-            setValue(newValue);
-            if (props.onChange) {
-                props.onChange(newValue);
-            }
-        }
-        if (value) {
-            return (React.createElement(React.Fragment, null,
-                React.createElement(AttachmentDisplay, { value: value, maxWidth: 200 }),
-                React.createElement(core$1.Button, { onClick: (e) => {
-                        killEvent(e);
-                        setValueWrapper(undefined);
-                    } }, "Remove")));
+    function HumanNameDisplay(props) {
+        const name = props.value;
+        if (!name) {
+            return null;
         }
-        return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, { ...props }, "Upload...")));
-    }
-
-    const useStyles$e = core$1.createStyles(() => ({
-        root: {
-            '@media (max-width: 800px)': {
-                paddingLeft: 4,
-                paddingRight: 4,
-            },
-        },
-    }));
-    function Container(props) {
-        const { children, ...others } = props;
-        const { classes } = useStyles$e();
-        return (React.createElement(core$1.Container, { className: classes.root, ...others }, children));
-    }
-
-    const useStyles$d = core$1.createStyles((theme, { width, fill }) => ({
-        paper: {
-            maxWidth: width,
-            margin: `${theme.spacing.xl} auto`,
-            padding: fill ? 0 : theme.spacing.md,
-            '@media (max-width: 800px)': {
-                padding: fill ? 0 : 8,
-            },
-            '& img': {
-                width: '100%',
-                maxWidth: '100%',
-            },
-            '& video': {
-                width: '100%',
-                maxWidth: '100%',
-            },
-        },
-    }));
-    const defaultProps$1 = {
-        shadow: 'xs',
-        radius: 'md',
-        withBorder: true,
-    };
-    function Panel(props) {
-        const { className, children, width, fill, unstyled, ...others } = core$1.useComponentDefaultProps('Panel', defaultProps$1, props);
-        const { classes, cx } = useStyles$d({ width, fill }, { name: 'Panel', unstyled });
-        return (React.createElement(core$1.Paper, { className: cx(classes.paper, className), ...others }, children));
-    }
-
-    function Document(props) {
-        const { children, ...others } = props;
-        return (React.createElement(Container, null,
-            React.createElement(Panel, { ...others }, children)));
+        return React.createElement(React.Fragment, null, core.formatHumanName(name, props.options));
     }
 
     /**
-     * Parses an HTML form and returns the result as a JavaScript object.
-     * @param form The HTML form element.
+     * Kills a browser event.
+     * Prevents default behavior.
+     * Stops event propagation.
+     * @param e The event.
      */
-    function parseForm(form) {
-        const result = {};
-        for (const element of Array.from(form.elements)) {
-            if (element instanceof HTMLInputElement) {
-                parseInputElement(result, element);
-            }
-            else if (element instanceof HTMLTextAreaElement) {
-                result[element.name] = element.value;
-            }
-            else if (element instanceof HTMLSelectElement) {
-                parseSelectElement(result, element);
-            }
-        }
-        return result;
+    function killEvent(e) {
+        e.preventDefault();
+        e.stopPropagation();
     }
     /**
-     * Parses an HTML input element.
-     * Sets the name/value pair in the result,
-     * but only if the element is enabled and checked.
-     * @param el The input element.
-     * @param result The result builder.
+     * Returns true if the element is a checkbox or a table cell containing a checkbox.
+     * Table cells containing checkboxes are commonly accidentally clicked.
+     * @param el The HTML DOM element.
+     * @returns True if the element is a checkbox or a table cell containing a checkbox.
      */
-    function parseInputElement(result, el) {
-        if (el.disabled) {
-            // Ignore disabled elements
-            return;
+    function isCheckboxCell(el) {
+        if (isCheckboxElement(el)) {
+            return true;
         }
-        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
-            // Ignore unchecked radio or checkbox elements
-            return;
+        if (el instanceof HTMLTableCellElement) {
+            const children = el.children;
+            if (children.length === 1 && isCheckboxElement(children[0])) {
+                return true;
+            }
         }
-        result[el.name] = el.value;
+        return false;
     }
-    /**
-     * Parses an HTML select element.
-     * Sets the name/value pair if one is selected.
-     * @param result The result builder.
-     * @param el The select element.
-     */
-    function parseSelectElement(result, el) {
-        result[el.name] = el.value;
+    function isCheckboxElement(el) {
+        return el instanceof HTMLInputElement && el.type === 'checkbox';
     }
 
-    function Form(props) {
-        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
-                e.preventDefault();
-                const formData = parseForm(e.target);
-                if (props.onSubmit) {
-                    props.onSubmit(formData);
+    function MedplumLink(props) {
+        const navigate = useMedplumNavigate();
+        const { to, suffix, label, onClick, children, ...rest } = props;
+        let href = getHref(to);
+        if (suffix) {
+            href += '/' + suffix;
+        }
+        return (React.createElement(core$1.Anchor, { href: href, "aria-label": label, onClick: (e) => {
+                killEvent(e);
+                if (onClick) {
+                    onClick(e);
                 }
-            } }, props.children));
+                else if (to) {
+                    navigate(href);
+                }
+            }, ...rest }, children));
     }
-
-    function Logo(props) {
-        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 491 491", style: { width: props.size, height: props.size } },
-            React.createElement("title", null, "Medplum Logo"),
-            React.createElement("path", { fill: props.fill || '#ad7136', d: "M282 67c6-16 16-29 29-40L289 0c-22 17-37 41-43 68l17 23 19-24z" }),
-            React.createElement("path", { fill: props.fill || '#946af9', d: "M311 63c-17 0-33 4-48 11-16-7-32-11-49-11-87 0-158 96-158 214s71 214 158 214c17 0 33-4 49-11 15 7 31 11 48 11 87 0 158-96 158-214S398 63 311 63z" }),
-            React.createElement("path", { fill: props.fill || '#7857c5', d: "M231 489l-17 2c-87 0-158-96-158-214S127 63 214 63l17 1c-39 12-70 102-70 213s31 201 70 212z" }),
-            React.createElement("path", { fill: props.fill || '#40bc26', d: "M207 220a176 176 0 01-177 43A176 176 0 01251 43l1 5c17 59 2 125-45 172z" }),
-            React.createElement("path", { fill: props.fill || '#33961e', d: "M252 48A421 421 0 0057 270l-27-7A176 176 0 01251 43l1 5z" })));
+    function getHref(to) {
+        if (to) {
+            if (typeof to === 'string') {
+                return getStringHref(to);
+            }
+            else if (core.isResource(to)) {
+                return getResourceHref(to);
+            }
+            else if (core.isReference(to)) {
+                return getReferenceHref(to);
+            }
+        }
+        return '#';
     }
-
-    function getErrorsForInput(outcome, expression) {
-        return outcome?.issue
-            ?.filter((issue) => isExpressionMatch(issue.expression?.[0], expression))
-            ?.map((issue) => issue.details?.text)
-            ?.join('\n');
+    function getStringHref(to) {
+        if (to.startsWith('http://') || to.startsWith('https://') || to.startsWith('/')) {
+            return to;
+        }
+        return '/' + to;
     }
-    function getIssuesForExpression(outcome, expression) {
-        return outcome?.issue?.filter((issue) => isExpressionMatch(issue.expression?.[0], expression));
+    function getResourceHref(to) {
+        return `/${to.resourceType}/${to.id}`;
     }
-    function isExpressionMatch(expr1, expr2) {
-        // Expression can be either "fieldName" or "resourceType.fieldName"
-        if (expr1 === expr2) {
-            return true;
-        }
-        if (!expr1 || !expr2) {
-            return false;
-        }
-        const dot1 = expr1.indexOf('.');
-        if (dot1 >= 0 && expr1.substring(dot1 + 1) === expr2) {
-            return true;
-        }
-        const dot2 = expr2.indexOf('.');
-        if (dot2 >= 0 && expr2.substring(dot2 + 1) === expr1) {
-            return true;
-        }
-        return false;
+    function getReferenceHref(to) {
+        return `/${to.reference}`;
     }
 
-    function NewProjectForm(props) {
+    /**
+     * React Hook to use a FHIR reference.
+     * Handles the complexity of resolving references and caching resources.
+     * @param value The resource or reference to resource.
+     * @returns The resolved resource.
+     */
+    function useResource(value, setOutcome) {
         const medplum = useMedplum();
-        const [outcome, setOutcome] = React.useState();
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: async (formData) => {
-                try {
-                    props.handleAuthResponse(await medplum.startNewProject({
-                        login: props.login,
-                        projectName: formData.projectName,
-                    }));
-                }
-                catch (err) {
-                    setOutcome(err);
-                }
-            } },
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
-                React.createElement(Logo, { size: 32 }),
-                React.createElement(core$1.Title, null, "Create project")),
-            React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
-                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum",
-                    ' ',
-                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
-                    ' and ',
-                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
-                    ".")),
-            React.createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
-                React.createElement(core$1.Button, { type: "submit" }, "Create project"))));
+        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
+        const setResourceIfChanged = React.useCallback((r) => {
+            if (!core.deepEquals(r, resource)) {
+                setResource(r);
+            }
+        }, [resource, setResource]);
+        React.useEffect(() => {
+            setResourceIfChanged(getInitialResource(medplum, value));
+        }, [medplum, value, setResourceIfChanged]);
+        React.useEffect(() => {
+            let subscribed = true;
+            if (core.isReference(value)) {
+                medplum
+                    .readReference(value)
+                    .then((r) => {
+                    if (subscribed) {
+                        setResourceIfChanged(r);
+                    }
+                })
+                    .catch((err) => {
+                    if (subscribed) {
+                        setResourceIfChanged(undefined);
+                        if (setOutcome) {
+                            setOutcome(core.normalizeOperationOutcome(err));
+                        }
+                    }
+                });
+            }
+            return (() => (subscribed = false));
+        }, [medplum, resource, value, setResourceIfChanged, setOutcome]);
+        return resource;
     }
-
     /**
-     * Dynamically creates a script tag for the specified JavaScript file.
-     * @param src The JavaScript file URL.
+     * Returns the initial resource value based on the input value.
+     * If the input value is a resource, returns the resource.
+     * If the input value is a reference to a resource available in the cache, returns the resource.
+     * Otherwise, returns undefined.
+     * @param medplum The medplum client.
+     * @param value The resource or reference to resource.
+     * @returns An initial resource if available; undefined otherwise.
      */
-    function createScriptTag(src, onload) {
-        const head = document.getElementsByTagName('head')[0];
-        const script = document.createElement('script');
-        script.async = true;
-        script.src = src;
-        script.onload = onload || null;
-        head.appendChild(script);
+    function getInitialResource(medplum, value) {
+        if (value) {
+            if (core.isResource(value)) {
+                return value;
+            }
+            if (core.isReference(value)) {
+                return medplum.getCachedReference(value);
+            }
+        }
+        return undefined;
     }
 
-    function GoogleButton(props) {
-        const medplum = useMedplum();
-        const { googleClientId, handleGoogleCredential } = props;
-        const parentRef = React.useRef(null);
-        const [scriptLoaded, setScriptLoaded] = React.useState(typeof google !== 'undefined');
-        const [initialized, setInitialized] = React.useState(false);
-        const [buttonRendered, setButtonRendered] = React.useState(false);
-        React.useEffect(() => {
-            if (typeof google === 'undefined') {
-                createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
+    function ResourceAvatar(props) {
+        const resource = useResource(props.value);
+        const text = resource ? core.getDisplayString(resource) : props.alt ?? '';
+        const imageUrl = (resource && core.getImageSrc(resource)) ?? props.src;
+        const radius = props.radius ?? 'xl';
+        const avatarProps = { ...props };
+        delete avatarProps.value;
+        delete avatarProps.link;
+        if (props.link) {
+            return (React.createElement(MedplumLink, { to: resource },
+                React.createElement(core$1.Avatar, { src: imageUrl, alt: text, radius: radius, ...avatarProps })));
+        }
+        return React.createElement(core$1.Avatar, { src: imageUrl, alt: text, radius: radius, ...avatarProps });
+    }
+
+    function AsyncAutocomplete(props) {
+        const { defaultValue, toKey, toOption, loadOptions, onChange, onCreate, creatable, ...rest } = props;
+        const defaultItems = toDefaultItems(defaultValue);
+        const inputRef = React.useRef(null);
+        const [lastValue, setLastValue] = React.useState(undefined);
+        const [timer, setTimer] = React.useState();
+        const [abortController, setAbortController] = React.useState();
+        const [autoSubmit, setAutoSubmit] = React.useState();
+        const [options, setOptions] = React.useState(defaultItems?.map(toOption));
+        const lastValueRef = React.useRef();
+        lastValueRef.current = lastValue;
+        const timerRef = React.useRef();
+        timerRef.current = timer;
+        const abortControllerRef = React.useRef();
+        abortControllerRef.current = abortController;
+        const autoSubmitRef = React.useRef();
+        autoSubmitRef.current = autoSubmit;
+        const optionsRef = React.useRef();
+        optionsRef.current = options;
+        const handleTimer = React.useCallback(() => {
+            setTimer(undefined);
+            const value = inputRef.current?.value?.trim() || '';
+            if (value === lastValueRef.current) {
+                // Nothing has changed, move on
                 return;
             }
-            if (!initialized) {
-                google.accounts.id.initialize({
-                    client_id: googleClientId,
-                    callback: handleGoogleCredential,
-                });
-                setInitialized(true);
+            setLastValue(value);
+            const newAbortController = new AbortController();
+            setAbortController(newAbortController);
+            loadOptions(value, newAbortController.signal)
+                .then((newValues) => {
+                if (!newAbortController.signal.aborted) {
+                    setOptions(newValues.map(toOption));
+                    setAbortController(undefined);
+                    if (autoSubmitRef.current) {
+                        if (newValues.length > 0) {
+                            onChange(newValues.slice(0, 1));
+                        }
+                        setAutoSubmit(false);
+                    }
+                }
+            })
+                .catch(console.log);
+        }, [loadOptions, onChange, toOption]);
+        const handleSearchChange = React.useCallback(() => {
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+                setAbortController(undefined);
             }
-            if (parentRef.current && !buttonRendered) {
-                google.accounts.id.renderButton(parentRef.current, {});
-                setButtonRendered(true);
+            if (timerRef.current !== undefined) {
+                window.clearTimeout(timerRef.current);
             }
-        }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
-        if (!googleClientId) {
-            return null;
-        }
-        return React.createElement("div", { ref: parentRef });
+            const newTimer = window.setTimeout(() => handleTimer(), 100);
+            setTimer(newTimer);
+        }, [handleTimer]);
+        const handleChange = React.useCallback((values) => {
+            const result = [];
+            for (const value of values) {
+                let item = optionsRef.current?.find((option) => option.value === value)?.resource;
+                if (!item && creatable !== false) {
+                    item = onCreate(value);
+                }
+                if (item)
+                    result.push(item);
+            }
+            onChange(result);
+        }, [creatable, onChange, onCreate]);
+        const handleKeyDown = React.useCallback((e) => {
+            if (e.key === 'Enter') {
+                if (!timerRef.current && !abortControllerRef.current) {
+                    killEvent(e);
+                    if (optionsRef.current && optionsRef.current.length > 0) {
+                        setOptions(optionsRef.current.slice(0, 1));
+                        handleChange([optionsRef.current[0].value]);
+                    }
+                }
+                else {
+                    // The user pressed enter, but we don't have results yet.
+                    // We need to wait for the results to come in.
+                    setAutoSubmit(true);
+                }
+            }
+        }, [handleChange]);
+        const handleCreate = React.useCallback((input) => {
+            const option = toOption(onCreate(input));
+            setOptions([...optionsRef.current, option]);
+            return option;
+        }, [onCreate, setOptions, toOption]);
+        const handleFilter = React.useCallback((_value, selected) => !selected, []);
+        React.useEffect(() => {
+            return () => {
+                if (abortControllerRef.current) {
+                    abortControllerRef.current.abort();
+                }
+            };
+        }, []);
+        return (React.createElement(core$1.MultiSelect, { ...rest, ref: inputRef, defaultValue: defaultItems.map(toKey), searchable: true, onKeyDown: handleKeyDown, onSearchChange: handleSearchChange, data: options, onFocus: handleTimer, onChange: handleChange, onCreate: handleCreate, rightSectionWidth: 40, rightSection: abortController ? React.createElement(core$1.Loader, { size: 16 }) : null, filter: handleFilter, creatable: true }));
     }
-    function getGoogleClientId(clientId) {
-        if (clientId) {
-            return clientId;
+    function toDefaultItems(defaultValue) {
+        if (!defaultValue) {
+            return [];
         }
-        if (typeof window !== 'undefined') {
-            const origin = window.location.protocol + '//' + window.location.host;
-            const authorizedOrigins = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com,https://storybook.medplum.com,https://graphiql.medplum.com,https://www.medplum.com"?.split(',') ?? [];
-            if (authorizedOrigins.includes(origin)) {
-                return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
-            }
+        if (Array.isArray(defaultValue)) {
+            return defaultValue;
         }
-        return undefined;
+        return [defaultValue];
     }
 
-    function OperationOutcomeAlert(props) {
-        const issues = props.outcome?.issue || props.issues;
-        if (!issues) {
-            return null;
+    const useStyles$h = core$1.createStyles(() => {
+        return {
+            searchInput: {
+                input: {
+                    width: 220,
+                    transition: 'width 0.2s',
+                },
+                'input:focus': {
+                    width: 400,
+                },
+                '@media (max-width: 800px)': {
+                    input: {
+                        width: 150,
+                    },
+                    'input:focus': {
+                        width: 150,
+                    },
+                },
+            },
+        };
+    });
+    function toKey$1(resource) {
+        return resource.id;
+    }
+    function toOption$1(resource) {
+        return {
+            value: resource.id,
+            label: core.getDisplayString(resource),
+            resource,
+        };
+    }
+    function HeaderSearchInput() {
+        const { classes } = useStyles$h();
+        const navigate = useMedplumNavigate();
+        const medplum = useMedplum();
+        const location = reactRouterDom.useLocation();
+        const loadData = React.useCallback(async (input, signal) => {
+            const query = buildGraphQLQuery(input);
+            const options = { signal };
+            const response = (await medplum.graphql(query, undefined, undefined, options));
+            return getResourcesFromResponse(response, input);
+        }, [medplum]);
+        const handleSelect = React.useCallback((item) => {
+            if (item.length > 0) {
+                navigate(`/${core.getReferenceString(item[0])}`);
+            }
+        }, [navigate]);
+        return (React.createElement(AsyncAutocomplete, { key: location.pathname, size: "sm", radius: "md", className: classes.searchInput, icon: React.createElement(IconSearch, { size: 16 }), placeholder: "Search", itemComponent: ItemComponent$1, toKey: toKey$1, toOption: toOption$1, onChange: handleSelect, loadOptions: loadData }));
+    }
+    const ItemComponent$1 = React.forwardRef(({ resource, ...others }, ref) => {
+        let helpText = undefined;
+        if (resource.resourceType === 'Patient') {
+            helpText = resource.birthDate;
         }
-        return (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text)))));
+        else if (resource.resourceType === 'ServiceRequest') {
+            helpText = resource.subject?.display;
+        }
+        return (React.createElement("div", { ref: ref, ...others },
+            React.createElement(core$1.Group, { noWrap: true },
+                React.createElement(ResourceAvatar, { value: resource }),
+                React.createElement("div", null,
+                    React.createElement(core$1.Text, null, core.getDisplayString(resource)),
+                    React.createElement(core$1.Text, { size: "xs", color: "dimmed" }, helpText)))));
+    });
+    function buildGraphQLQuery(input) {
+        const escaped = JSON.stringify(input);
+        if (core.isUUID(input)) {
+            return `{
+      Patients1: PatientList(_id: ${escaped}, _count: 1) {
+        resourceType
+        id
+        identifier {
+          system
+          value
+        }
+        name {
+          given
+          family
+        }
+        birthDate
+      }
+      ServiceRequestList(_id: ${escaped}, _count: 1) {
+        resourceType
+        id
+        identifier {
+          system
+          value
+        }
+        subject {
+          display
+        }
+      }
+    }`.replace(/\s+/g, ' ');
+        }
+        return `{
+    Patients1: PatientList(name: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      name {
+        given
+        family
+      }
+      birthDate
+    }
+    Patients2: PatientList(identifier: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      name {
+        given
+        family
+      }
+      birthDate
+    }
+    ServiceRequestList(identifier: ${escaped}, _count: 5) {
+      resourceType
+      id
+      identifier {
+        system
+        value
+      }
+      subject {
+        display
+      }
+    }
+  }`.replace(/\s+/g, ' ');
     }
-
     /**
-     * Dynamically loads the recaptcha script.
-     * We do not want to load the script on page load unless the user needs it.
-     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     * Returns a de-duped and sorted list of resources from the search response.
+     * The search request is actually 3+ separate searches, which can include duplicates.
+     * This function combines the results, de-dupes, and sorts by relevance.
+     * @param response The response from a search query.
+     * @param query The user entered search query.
+     * @returns The resources to display in the autocomplete.
      */
-    function initRecaptcha(siteKey) {
-        if (typeof grecaptcha === 'undefined') {
-            createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);
+    function getResourcesFromResponse(response, query) {
+        const resources = [];
+        if (response.data.Patients1) {
+            resources.push(...response.data.Patients1);
+        }
+        if (response.data.Patients2) {
+            resources.push(...response.data.Patients2);
+        }
+        if (response.data.ServiceRequestList) {
+            resources.push(...response.data.ServiceRequestList);
         }
+        return sortByRelevance(dedupeResources(resources), query).slice(0, 5);
     }
     /**
-     * Starts a request to generate a recapcha token.
-     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
-     * @returns Promise to a recaptcha token for the current user.
+     * Removes duplicate resources from an array by ID.
+     * @param resources The array of resources with possible duplicates.
+     * @returns The array of resources with no duplicates.
      */
-    function getRecaptcha(siteKey) {
-        return new Promise((resolve, reject) => {
-            grecaptcha.ready(async () => {
-                try {
-                    resolve(await grecaptcha.execute(siteKey, { action: 'submit' }));
-                }
-                catch (err) {
-                    reject(err);
-                }
-            });
+    function dedupeResources(resources) {
+        const ids = new Set();
+        const result = [];
+        for (const resource of resources) {
+            if (!ids.has(resource.id)) {
+                ids.add(resource.id);
+                result.push(resource);
+            }
+        }
+        return result;
+    }
+    /**
+     * Sorts an array of resources by relevance.
+     * @param resources The candidate resources.
+     * @param query The user entered search string.
+     * @returns The sorted array of resources.
+     */
+    function sortByRelevance(resources, query) {
+        return resources.sort((a, b) => {
+            return getResourceScore(b, query) - getResourceScore(a, query);
         });
     }
-
-    function NewUserForm(props) {
-        const googleClientId = getGoogleClientId(props.googleClientId);
-        const recaptchaSiteKey = props.recaptchaSiteKey;
-        const medplum = useMedplum();
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        React.useEffect(() => {
-            if (recaptchaSiteKey) {
-                initRecaptcha(recaptchaSiteKey);
+    /**
+     * Calculates a relevance score of a candidate resource.
+     * Higher scores are better.
+     * @param resource The candidate resource.
+     * @param query The user entered search string.
+     * @returns The relevance score of the candidate resource.
+     */
+    function getResourceScore(resource, query) {
+        let bestScore = 0;
+        if (resource.identifier) {
+            for (const identifier of resource.identifier) {
+                bestScore = Math.max(bestScore, getStringScore(identifier.value, query));
             }
-        }, [recaptchaSiteKey]);
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: async (formData) => {
-                try {
-                    let recaptchaToken = '';
-                    if (recaptchaSiteKey) {
-                        recaptchaToken = await getRecaptcha(recaptchaSiteKey);
-                    }
-                    props.handleAuthResponse(await medplum.startNewUser({
-                        projectId: props.projectId,
-                        firstName: formData.firstName,
-                        lastName: formData.lastName,
-                        email: formData.email,
-                        password: formData.password,
-                        remember: formData.remember === 'true',
-                        recaptchaSiteKey,
-                        recaptchaToken,
-                    }));
-                }
-                catch (err) {
-                    setOutcome(err);
-                }
-            } },
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
-            React.createElement(OperationOutcomeAlert, { issues: issues }),
-            googleClientId && (React.createElement(React.Fragment, null,
-                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: async (response) => {
-                            try {
-                                props.handleAuthResponse(await medplum.startGoogleLogin({
-                                    googleClientId: response.clientId,
-                                    googleCredential: response.credential,
-                                    createUser: true,
-                                }));
-                            }
-                            catch (err) {
-                                setOutcome(err);
-                            }
-                        } })),
-                React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
-            React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.TextInput, { name: "firstName", type: "text", label: "First name", placeholder: "First name", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
-                React.createElement(core$1.TextInput, { name: "lastName", type: "text", label: "Last name", placeholder: "Last name", required: true, error: getErrorsForInput(outcome, 'lastName') }),
-                React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
-                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
-                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum",
-                    ' ',
-                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
-                    ' and ',
-                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
-                    "."),
-                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "This site is protected by reCAPTCHA and the Google",
-                    ' ',
-                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
-                    ' and ',
-                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
-                    " apply.")),
-            React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
-                React.createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
-                React.createElement(core$1.Button, { type: "submit" }, "Create account"))));
+        }
+        if (resource.resourceType === 'Patient' && resource.name) {
+            for (const name of resource.name) {
+                bestScore = Math.max(bestScore, getStringScore(core.formatHumanName(name), query));
+            }
+        }
+        return bestScore;
+    }
+    /**
+     * Calculates a relevance score of a candidate display string.
+     * Higher scores are better.
+     * @param str The candidate display string.
+     * @param query The user entered search string.
+     * @returns The relevance score of the candidate string.
+     */
+    function getStringScore(str, query) {
+        if (!str) {
+            return 0;
+        }
+        const index = str.toLowerCase().indexOf(query.toLowerCase());
+        if (index < 0) {
+            return 0;
+        }
+        return 100 - index;
     }
 
-    function RegisterForm(props) {
-        const { type, projectId, googleClientId, recaptchaSiteKey, onSuccess } = props;
-        const medplum = useMedplum();
-        const [login, setLogin] = React.useState(undefined);
-        const [outcome, setOutcome] = React.useState();
-        React.useEffect(() => {
-            if (type === 'patient' && login) {
-                medplum
-                    .startNewPatient({ login, projectId: projectId })
-                    .then((response) => medplum.processCode(response.code))
-                    .then(() => onSuccess())
-                    .catch((err) => setOutcome(err));
+    const useStyles$g = core$1.createStyles((theme) => ({
+        logoButton: {
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+            borderRadius: theme.radius.sm,
+            transition: 'background-color 100ms ease',
+            '&:hover': {
+                backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+            },
+        },
+        user: {
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+            borderRadius: theme.radius.sm,
+            transition: 'background-color 100ms ease',
+            '&:hover': {
+                backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+            },
+        },
+        userName: {
+            fontWeight: 500,
+            lineHeight: 1,
+            marginRight: 3,
+            [theme.fn.smallerThan('xs')]: {
+                display: 'none',
+            },
+        },
+        userActive: {
+            backgroundColor: theme.fn.lighten(theme.fn.variant({ variant: 'filled', color: theme.primaryColor }).background, 0.8),
+        },
+    }));
+    function Header(props) {
+        const context = useMedplumContext();
+        const { medplum, profile, navigate } = context;
+        const logins = medplum.getLogins();
+        const { classes, cx } = useStyles$g();
+        const [userMenuOpened, setUserMenuOpened] = React.useState(false);
+        return (React.createElement(core$1.Header, { height: 60, p: 8, style: { zIndex: 101 } },
+            React.createElement(core$1.Group, { position: "apart" },
+                React.createElement(core$1.Group, { spacing: "xs" },
+                    React.createElement(core$1.UnstyledButton, { className: classes.logoButton, onClick: props.navbarToggle }, props.logo),
+                    React.createElement(HeaderSearchInput, null)),
+                React.createElement(core$1.Menu, { width: 260, shadow: "xl", position: "bottom-end", transitionProps: { transition: 'pop-top-right' }, opened: userMenuOpened, onClose: () => setUserMenuOpened(false) },
+                    React.createElement(core$1.Menu.Target, null,
+                        React.createElement(core$1.UnstyledButton, { className: cx(classes.user, { [classes.userActive]: userMenuOpened }), onClick: () => setUserMenuOpened((o) => !o) },
+                            React.createElement(core$1.Group, { spacing: 7 },
+                                React.createElement(ResourceAvatar, { value: profile, radius: "xl", size: 24 }),
+                                React.createElement(core$1.Text, { size: "sm", className: classes.userName }, core.formatHumanName(profile?.name?.[0])),
+                                React.createElement(IconChevronDown, { size: 12, stroke: 1.5 })))),
+                    React.createElement(core$1.Menu.Dropdown, null,
+                        React.createElement(core$1.Stack, { align: "center", p: "xl" },
+                            React.createElement(ResourceAvatar, { size: "xl", radius: 100, value: context.profile }),
+                            React.createElement(HumanNameDisplay, { value: context.profile?.name?.[0] }),
+                            React.createElement(core$1.Text, { color: "dimmed", size: "xs" }, medplum.getActiveLogin()?.project?.display)),
+                        logins.length > 1 && React.createElement(core$1.Menu.Divider, null),
+                        logins.map((login) => login.profile?.reference !== core.getReferenceString(context.profile) && (React.createElement(core$1.Menu.Item, { key: login.profile?.reference, onClick: () => {
+                                medplum
+                                    .setActiveLogin(login)
+                                    .then(() => window.location.reload())
+                                    .catch(console.log);
+                            } },
+                            React.createElement(core$1.Group, null,
+                                React.createElement(core$1.Avatar, { radius: "xl" }),
+                                React.createElement("div", { style: { flex: 1 } },
+                                    React.createElement(core$1.Text, { size: "sm", weight: 500 }, login.profile?.display),
+                                    React.createElement(core$1.Text, { color: "dimmed", size: "xs" }, login.project?.display)))))),
+                        React.createElement(core$1.Menu.Divider, null),
+                        React.createElement(core$1.Menu.Item, { icon: React.createElement(IconSwitchHorizontal, { size: 14, stroke: 1.5 }), onClick: () => navigate('/signin') }, "Add another account"),
+                        React.createElement(core$1.Menu.Item, { icon: React.createElement(IconSettings, { size: 14, stroke: 1.5 }), onClick: () => navigate(`/${core.getReferenceString(profile)}`) }, "Account settings"),
+                        React.createElement(core$1.Menu.Item, { icon: React.createElement(IconLogout, { size: 14, stroke: 1.5 }), onClick: async () => {
+                                await medplum.signOut();
+                                navigate('/signin');
+                            } }, "Sign out"),
+                        React.createElement(core$1.Text, { size: "xs", color: "dimmed", align: "center" }, props.version))))));
+    }
+
+    /**
+     * Parses an HTML form and returns the result as a JavaScript object.
+     * @param form The HTML form element.
+     */
+    function parseForm(form) {
+        const result = {};
+        for (const element of Array.from(form.elements)) {
+            if (element instanceof HTMLInputElement) {
+                parseInputElement(result, element);
             }
-        }, [medplum, type, projectId, login, onSuccess]);
-        function handleAuthResponse(response) {
-            if (response.code) {
-                medplum
-                    .processCode(response.code)
-                    .then(() => onSuccess())
-                    .catch(console.log);
+            else if (element instanceof HTMLTextAreaElement) {
+                result[element.name] = element.value;
             }
-            else if (response.login) {
-                setLogin(response.login);
+            else if (element instanceof HTMLSelectElement) {
+                parseSelectElement(result, element);
             }
         }
-        return (React.createElement(Document, { width: 450 },
-            outcome && React.createElement("pre", null, JSON.stringify(outcome, null, 2)),
-            !login && (React.createElement(NewUserForm, { projectId: projectId, googleClientId: googleClientId, recaptchaSiteKey: recaptchaSiteKey, handleAuthResponse: handleAuthResponse }, props.children)),
-            login && type === 'project' && React.createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse })));
+        return result;
     }
-
-    function AuthenticationForm(props) {
-        const [email, setEmail] = React.useState();
-        if (!email) {
-            return React.createElement(EmailForm, { setEmail: setEmail, ...props });
+    /**
+     * Parses an HTML input element.
+     * Sets the name/value pair in the result,
+     * but only if the element is enabled and checked.
+     * @param el The input element.
+     * @param result The result builder.
+     */
+    function parseInputElement(result, el) {
+        if (el.disabled) {
+            // Ignore disabled elements
+            return;
         }
-        else {
-            return React.createElement(PasswordForm, { email: email, ...props });
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            // Ignore unchecked radio or checkbox elements
+            return;
         }
+        result[el.name] = el.value;
     }
-    function EmailForm(props) {
-        const { setEmail, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
-        const medplum = useMedplum();
-        const googleClientId = !props.disableGoogleAuth && getGoogleClientId(props.googleClientId);
-        const isExternalAuth = React.useCallback(async (authMethod) => {
-            if (!authMethod.authorizeUrl) {
-                return false;
-            }
-            const state = JSON.stringify({
-                ...(await medplum.ensureCodeChallenge(baseLoginRequest)),
-                domain: authMethod.domain,
-            });
-            const url = new URL(authMethod.authorizeUrl);
-            url.searchParams.set('state', state);
-            window.location.assign(url.toString());
-            return true;
-        }, [medplum, baseLoginRequest]);
-        const handleSubmit = React.useCallback(async (formData) => {
-            const authMethod = await medplum.post('auth/method', { email: formData.email });
-            if (!(await isExternalAuth(authMethod))) {
-                setEmail(formData.email);
-            }
-        }, [medplum, isExternalAuth, setEmail]);
-        const handleGoogleCredential = React.useCallback(async (response) => {
-            const authResponse = await medplum.startGoogleLogin({
-                ...baseLoginRequest,
-                googleCredential: response.credential,
-            });
-            if (!(await isExternalAuth(authResponse))) {
-                handleAuthResponse(authResponse);
-            }
-        }, [medplum, baseLoginRequest, isExternalAuth, handleAuthResponse]);
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
-            googleClientId && (React.createElement(React.Fragment, null,
-                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: handleGoogleCredential })),
-                React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
-            React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true }),
-            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
-                React.createElement("div", null, onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register"))),
-                React.createElement(core$1.Button, { type: "submit" }, "Next"))));
+    /**
+     * Parses an HTML select element.
+     * Sets the name/value pair if one is selected.
+     * @param result The result builder.
+     * @param el The select element.
+     */
+    function parseSelectElement(result, el) {
+        result[el.name] = el.value;
     }
-    function PasswordForm(props) {
-        const { onForgotPassword, handleAuthResponse, children, ...baseLoginRequest } = props;
+
+    function Form(props) {
+        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
+                e.preventDefault();
+                const formData = parseForm(e.target);
+                if (props.onSubmit) {
+                    props.onSubmit(formData);
+                }
+            } }, props.children));
+    }
+
+    function BookmarkDialog(props) {
         const medplum = useMedplum();
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        const handleSubmit = React.useCallback((formData) => {
+        const config = medplum.getUserConfiguration();
+        const location = reactRouterDom.useLocation();
+        function submitHandler(formData) {
+            const { menuname, bookmarkname: name } = formData;
+            const target = location.pathname + location.search;
+            const newConfig = core.deepClone(config);
+            const menu = newConfig?.menu?.find(({ title }) => title === menuname);
+            menu?.link?.push({ name, target });
             medplum
-                .startLogin({
-                ...baseLoginRequest,
-                password: formData.password,
-                remember: formData.remember === 'on',
+                .updateResource(newConfig)
+                .then((res) => {
+                // refresh current config menu
+                config.menu = res.menu;
+                medplum.dispatchEvent({ type: 'change' });
+                notifications.showNotification({ color: 'green', message: 'Success' });
+                props.onOk();
             })
-                .then(handleAuthResponse)
-                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
-        }, [medplum, baseLoginRequest, handleAuthResponse]);
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
-            React.createElement(OperationOutcomeAlert, { issues: issues }),
-            React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
-            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
-                onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
-                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
-                React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
+                .catch((err) => {
+                notifications.showNotification({ color: 'red', message: core.normalizeErrorString(err) });
+            });
+        }
+        return (React.createElement(core$1.Modal, { title: "Add Bookmark", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: props.onCancel },
+            React.createElement(Form, { onSubmit: submitHandler },
+                React.createElement(core$1.Stack, null,
+                    React.createElement(SelectMenu, { config: config }),
+                    React.createElement(core$1.TextInput, { label: "Bookmark Name", type: "text", name: "bookmarkname", placeholder: "bookmark name", withAsterisk: true }),
+                    React.createElement(core$1.Group, { position: "right" },
+                        React.createElement(core$1.Button, { mt: "sm", type: "submit" }, "OK"))))));
     }
-
-    function ChooseProfileForm(props) {
-        const medplum = useMedplum();
-        const [outcome, setOutcome] = React.useState();
-        return (React.createElement(core$1.Stack, null,
-            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
-                React.createElement(Logo, { size: 32 }),
-                React.createElement(core$1.Title, { order: 3 }, "Choose profile")),
-            React.createElement(OperationOutcomeAlert, { outcome: outcome }),
-            props.memberships.map((membership) => (React.createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
-                    medplum
-                        .post('auth/profile', {
-                        login: props.login,
-                        profile: membership.id,
-                    })
-                        .then(props.handleAuthResponse)
-                        .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
-                } },
-                React.createElement(core$1.Group, null,
-                    React.createElement(core$1.Avatar, { radius: "xl" }),
-                    React.createElement("div", { style: { flex: 1 } },
-                        React.createElement(core$1.Text, { size: "sm", weight: 500 }, membership.profile?.display),
-                        React.createElement(core$1.Text, { color: "dimmed", size: "xs" }, membership.project?.display))))))));
+    function SelectMenu(props) {
+        function userConfigToMenu(config) {
+            return config?.menu?.map((menu) => menu.title);
+        }
+        const menus = userConfigToMenu(props.config);
+        return (React.createElement(core$1.NativeSelect, { name: "menuname", defaultValue: menus?.[0], label: "Select Menu Option", placeholder: "Menu", data: menus, withAsterisk: true }));
     }
 
-    function ChooseScopeForm(props) {
-        const medplum = useMedplum();
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
-                medplum
-                    .post('auth/scope', {
-                    login: props.login,
-                    scope: Object.keys(formData).join(' '),
-                })
-                    .then(props.handleAuthResponse)
-                    .catch(console.log);
-            } },
-            React.createElement(core$1.Stack, null,
-                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
-                    React.createElement(Logo, { size: 32 }),
-                    React.createElement(core$1.Title, null, "Choose scope")),
-                React.createElement(core$1.Stack, null, (props.scope || 'openid').split(' ').map((scopeName) => (React.createElement(core$1.Checkbox, { key: scopeName, id: scopeName, name: scopeName, label: scopeName, defaultChecked: true })))),
-                React.createElement(core$1.Group, { position: "right", mt: "xl" },
-                    React.createElement(core$1.Button, { type: "submit" }, "Set scope")))));
+    function toKey(element) {
+        return element.code;
     }
-
-    function MfaForm(props) {
-        const medplum = useMedplum();
-        const [errorMessage, setErrorMessage] = React.useState(undefined);
-        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
-                setErrorMessage(undefined);
-                medplum
-                    .post('auth/mfa/verify', {
-                    login: props.login,
-                    token: formData.token,
-                })
-                    .then(props.handleAuthResponse)
-                    .catch((err) => setErrorMessage(core.normalizeErrorString(err)));
-            } },
-            React.createElement(core$1.Stack, null,
-                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
-                    React.createElement(Logo, { size: 32 }),
-                    React.createElement(core$1.Title, null, "Enter MFA code")),
-                errorMessage && (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), title: "Error", color: "red" }, errorMessage)),
-                React.createElement(core$1.Stack, null,
-                    React.createElement(core$1.TextInput, { name: "token", label: "MFA code", required: true })),
-                React.createElement(core$1.Group, { position: "right", mt: "xl" },
-                    React.createElement(core$1.Button, { type: "submit" }, "Submit code")))));
+    function toOption(element) {
+        return {
+            value: element.code,
+            label: getDisplay(element),
+            resource: element,
+        };
+    }
+    function createValue(input) {
+        return {
+            code: input,
+            display: input,
+        };
     }
-
     /**
-     * The SignInForm component allows users to sign in to Medplum.
-     *
-     * "Signing in" is a multi-step process:
-     * 1) Authentication - identify the user
-     * 2) MFA - If MFA is enabled, prompt for MFA code
-     * 3) Choose profile - If the user has multiple profiles, prompt to choose one
-     * 4) Choose scope - If the user has multiple scopes, prompt to choose one
-     * 5) Success - Return to the caller with either a code or a redirect
+     * A low-level component to autocomplete based on a FHIR Valueset.
      */
-    function SignInForm(props) {
-        const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode, ...baseLoginRequest } = props;
+    function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
-        const [login, setLogin] = React.useState(undefined);
-        const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
-        const [memberships, setMemberships] = React.useState(undefined);
-        const handleCode = React.useCallback((code) => {
-            if (onCode) {
-                onCode(code);
-            }
-            else {
-                medplum
-                    .processCode(code)
-                    .then(() => {
-                    if (onSuccess) {
-                        onSuccess();
-                    }
-                })
-                    .catch(console.log);
-            }
-        }, [medplum, onCode, onSuccess]);
-        const handleAuthResponse = React.useCallback((response) => {
-            setAuthenticatorRequired(!!response.mfaRequired);
-            if (response.login) {
-                setLogin(response.login);
-            }
-            if (response.memberships) {
-                setMemberships(response.memberships);
-            }
-            if (response.code) {
-                if (chooseScopes) {
-                    setMemberships(undefined);
-                }
-                else {
-                    handleCode(response.code);
+        const { elementDefinition, creatable, clearable, ...rest } = props;
+        const loadValues = React.useCallback(async (input, signal) => {
+            const system = elementDefinition.binding?.valueSet;
+            const valueSet = await medplum.searchValueSet(system, input, { signal });
+            const valueSetElements = valueSet.expansion?.contains;
+            const newData = [];
+            for (const valueSetElement of valueSetElements) {
+                if (valueSetElement.code && !newData.some((item) => item.code === valueSetElement.code)) {
+                    newData.push(valueSetElement);
                 }
             }
-        }, [chooseScopes, handleCode]);
-        const handleScopeResponse = React.useCallback((response) => {
-            handleCode(response.code);
-        }, [handleCode]);
-        React.useEffect(() => {
-            if (props.login) {
-                medplum
-                    .get('auth/login/' + props.login)
-                    .then(handleAuthResponse)
-                    .catch(console.error);
-            }
-        }, [medplum, props, handleAuthResponse]);
-        return (React.createElement(Document, { width: 450 }, (() => {
-            if (!login) {
-                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, disableGoogleAuth: props.disableGoogleAuth, ...baseLoginRequest }, props.children));
-            }
-            else if (mfaRequired) {
-                return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });
-            }
-            else if (memberships) {
-                return React.createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
-            }
-            else if (props.projectId === 'new') {
-                return React.createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
-            }
-            else if (props.chooseScopes) {
-                return React.createElement(ChooseScopeForm, { login: login, scope: props.scope, handleAuthResponse: handleScopeResponse });
-            }
-            else {
-                return React.createElement("div", null, "Success");
-            }
-        })()));
+            return newData;
+        }, [medplum, elementDefinition]);
+        return (React.createElement(AsyncAutocomplete, { ...rest, creatable: creatable ?? true, clearable: clearable ?? true, toKey: toKey, toOption: toOption, loadOptions: loadValues, onCreate: createValue, getCreateLabel: creatable === false ? undefined : (query) => `+ Create ${query}` }));
+    }
+    function getDisplay(item) {
+        return item.display || item.code || '';
     }
 
-    const DEFAULT_IGNORED_PROPERTIES = [
-        'meta',
-        'implicitRules',
-        'language',
-        'text',
-        'contained',
-        'extension',
-        'modifierExtension',
-    ];
+    function CodeInput(props) {
+        const [value, setValue] = React.useState(props.defaultValue);
+        function handleChange(newValues) {
+            const newValue = newValues[0];
+            const newCode = valueSetElementToCode(newValue);
+            setValue(newCode);
+            if (props.onChange) {
+                props.onChange(newCode);
+            }
+        }
+        return (React.createElement(ValueSetAutocomplete, { elementDefinition: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange, creatable: props.creatable, maxSelectedValues: props.maxSelectedValues, clearSearchOnChange: props.clearSearchOnChange, clearable: props.clearable }));
+    }
+    function codeToValueSetElement(code) {
+        return code ? { code } : undefined;
+    }
+    function valueSetElementToCode(element) {
+        return element?.code;
+    }
 
-    const useStyles$c = core$1.createStyles((theme) => ({
-        root: {
-            display: 'grid',
-            gridTemplateColumns: '30% 70%',
-            margin: 0,
-            '& > dt, & > dd': {
-                padding: `${theme.spacing.sm} ${theme.spacing.sm}`,
-                borderTop: `0.1px solid ${theme.colors.gray[3]}`,
-                margin: 0,
+    const useStyles$f = core$1.createStyles((theme) => {
+        return {
+            menuTitle: {
+                margin: '20px 0 4px 6px',
+                fontSize: '9px',
+                fontWeight: 'normal',
+                textTransform: 'uppercase',
+                letterSpacing: '2px',
             },
-        },
-        compact: {
-            gridTemplateColumns: '20% 80%',
-            '& > dt, & > dd': {
-                padding: `0 ${theme.spacing.xs} ${theme.spacing.xs} 0`,
-                border: 0,
+            link: {
+                ...theme.fn.focusStyles(),
+                display: 'flex',
+                alignItems: 'center',
+                textDecoration: 'none',
+                fontSize: theme.fontSizes.sm,
+                color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+                padding: `8px 12px`,
+                borderRadius: theme.radius.sm,
+                fontWeight: 500,
+                '&:hover': {
+                    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+                    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+                    textDecoration: 'none',
+                    [`& svg`]: {
+                        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+                    },
+                },
+                '& svg': {
+                    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+                    marginRight: theme.spacing.sm,
+                    strokeWidth: 1.5,
+                    width: 18,
+                    height: 18,
+                },
             },
-        },
-    }));
-    function DescriptionList(props) {
-        const { children, compact } = props;
-        const { classes, cx } = useStyles$c();
-        return React.createElement("dl", { className: cx(classes.root, { [classes.compact]: compact }) }, children);
-    }
-    function DescriptionListEntry(props) {
+            linkActive: {
+                '&, &:hover': {
+                    backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
+                    color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+                    [`& svg`]: {
+                        color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+                    },
+                },
+            },
+        };
+    });
+    function Navbar(props) {
+        const { classes } = useStyles$f();
+        const navigate = useMedplumNavigate();
+        const [bookmarkDialogVisible, setBookmarkDialogVisible] = React.useState(false);
+        function onLinkClick(e, to) {
+            e.stopPropagation();
+            e.preventDefault();
+            navigate(to);
+            if (window.innerWidth < 768) {
+                props.closeNavbar();
+            }
+        }
+        function navigateResourceType(resourceType) {
+            if (resourceType) {
+                navigate(`/${resourceType}`);
+            }
+        }
         return (React.createElement(React.Fragment, null,
-            React.createElement("dt", null, props.term),
-            React.createElement("dd", null, props.children)));
-    }
-
-    function CodeableConceptDisplay(props) {
-        return React.createElement(React.Fragment, null, core.formatCodeableConcept(props.value));
+            React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
+                React.createElement(core$1.Navbar.Section, { mb: "sm" },
+                    React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
+                            binding: {
+                                valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
+                            },
+                        }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
+                React.createElement(core$1.Navbar.Section, { grow: true },
+                    props.menus?.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
+                        React.createElement(core$1.Text, { className: classes.menuTitle }, menu.title),
+                        menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, onClick: (e) => onLinkClick(e, link.href) },
+                            React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
+                            React.createElement("span", null, link.label))))))),
+                    props.displayAddBookmark && (React.createElement(core$1.Button, { variant: "subtle", size: "xs", mt: "xl", leftIcon: React.createElement(IconPlus, { size: "0.75rem" }), onClick: () => setBookmarkDialogVisible(true) }, "Add Bookmark")))),
+            React.createElement(BookmarkDialog, { visible: bookmarkDialogVisible, onOk: () => setBookmarkDialogVisible(false), onCancel: () => setBookmarkDialogVisible(false) })));
+    }
+    function NavbarLink(props) {
+        const { classes, cx } = useStyles$f();
+        const location = reactRouterDom.useLocation();
+        const [searchParams] = reactRouterDom.useSearchParams();
+        const toUrl = new URL(props.to, window.location.protocol + '//' + window.location.host);
+        const isActive = location.pathname === toUrl.pathname && matchesParams(searchParams, toUrl);
+        return (React.createElement(MedplumLink, { onClick: props.onClick, to: props.to, className: cx(classes.link, { [classes.linkActive]: isActive }) }, props.children));
     }
-
+    /**
+     * Returns true if the search params match.
+     * @param searchParams The current search params.
+     * @param toUrl The destination URL of the link.
+     * @returns True if the search params match.
+     */
+    function matchesParams(searchParams, toUrl) {
+        for (const [key, value] of toUrl.searchParams.entries()) {
+            if (searchParams.get(key) !== value) {
+                return false;
+            }
+        }
+        return true;
+    }
+    function NavLinkIcon(props) {
+        if (props.icon) {
+            return props.icon;
+        }
+        return React.createElement(core$1.Space, { w: 30 });
+    }
+
+    function AppShell(props) {
+        const theme = core$1.useMantineTheme();
+        const [navbarOpen, setNavbarOpen] = React.useState(localStorage['navbarOpen'] === 'true');
+        const medplum = useMedplum();
+        const profile = useMedplumProfile();
+        function setNavbarOpenWrapper(open) {
+            localStorage['navbarOpen'] = open.toString();
+            setNavbarOpen(open);
+        }
+        function closeNavbar() {
+            setNavbarOpenWrapper(false);
+        }
+        function toggleNavbar() {
+            setNavbarOpenWrapper(!navbarOpen);
+        }
+        if (medplum.isLoading()) {
+            return React.createElement(Loading, null);
+        }
+        return (React.createElement(core$1.AppShell, { styles: {
+                main: {
+                    background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+                },
+            }, padding: 0, fixed: true, header: profile && React.createElement(Header, { logo: props.logo, version: props.version, navbarToggle: toggleNavbar }), navbar: profile && navbarOpen ? (React.createElement(Navbar, { menus: props.menus, closeNavbar: closeNavbar, displayAddBookmark: props.displayAddBookmark })) : undefined },
+            React.createElement(ErrorBoundary, null,
+                React.createElement(React.Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
+    }
+
+    function AttachmentDisplay(props) {
+        const value = props.value;
+        const { contentType, url, title } = value ?? {};
+        if (!url) {
+            return null;
+        }
+        return (React.createElement("div", { "data-testid": "attachment-display" },
+            contentType?.startsWith('image/') && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value?.title })),
+            contentType?.startsWith('video/') && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
+                React.createElement("source", { type: contentType, src: url }))),
+            contentType === 'application/pdf' && !title?.endsWith('.pdf') && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
+                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
+            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
+                React.createElement(core$1.Anchor, { href: value?.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, value?.title || 'Download'))));
+    }
+
+    function AttachmentArrayDisplay(props) {
+        return (React.createElement("div", null, props.values &&
+            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
+                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+    }
+
+    function AttachmentButton(props) {
+        const medplum = useMedplum();
+        const fileInputRef = React.useRef(null);
+        function onClick(e) {
+            killEvent(e);
+            fileInputRef.current?.click();
+        }
+        function onFileChange(e) {
+            killEvent(e);
+            const files = e.target.files;
+            if (files) {
+                Array.from(files).forEach(processFile);
+            }
+        }
+        /**
+         * Processes a single file.
+         *
+         * @param {File} file The file descriptor.
+         */
+        function processFile(file) {
+            if (!file) {
+                return;
+            }
+            const fileName = file.name;
+            if (!fileName) {
+                return;
+            }
+            if (props.onUploadStart) {
+                props.onUploadStart();
+            }
+            const filename = file.name;
+            const contentType = file.type || 'application/octet-stream';
+            medplum
+                .createBinary(file, filename, contentType, props.onUploadProgress)
+                .then((binary) => {
+                props.onUpload({
+                    contentType: binary.contentType,
+                    url: binary.url,
+                    title: filename,
+                });
+            })
+                .catch((outcome) => {
+                alert(outcome?.issue?.[0]?.details?.text);
+            });
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { type: "file", "data-testid": "upload-file-input", style: { display: 'none' }, ref: fileInputRef, onChange: (e) => onFileChange(e) }),
+            props.children({ onClick })));
+    }
+
+    function AttachmentArrayInput(props) {
+        const [values, setValues] = React.useState(props.defaultValue ?? []);
+        const valuesRef = React.useRef();
+        valuesRef.current = values;
+        function setValuesWrapper(newValues) {
+            setValues(newValues);
+            if (props.onChange) {
+                props.onChange(newValues);
+            }
+        }
+        return (React.createElement("table", { style: { width: '100%' } },
+            React.createElement("colgroup", null,
+                React.createElement("col", { width: "97%" }),
+                React.createElement("col", { width: "3%" })),
+            React.createElement("tbody", null,
+                values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
+                    React.createElement("td", null,
+                        React.createElement(AttachmentDisplay, { value: v, maxWidth: 200 })),
+                    React.createElement("td", null,
+                        React.createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
+                                killEvent(e);
+                                const copy = values.slice();
+                                copy.splice(index, 1);
+                                setValuesWrapper(copy);
+                            } },
+                            React.createElement(IconCircleMinus, null)))))),
+                React.createElement("tr", null,
+                    React.createElement("td", null),
+                    React.createElement("td", null,
+                        React.createElement(AttachmentButton, { onUpload: (attachment) => {
+                                setValuesWrapper([...valuesRef.current, attachment]);
+                            } }, (props) => (React.createElement(core$1.ActionIcon, { ...props, title: "Add", size: "sm", color: "green" },
+                            React.createElement(IconCloudUpload, { size: 16 })))))))));
+    }
+
+    function AttachmentInput(props) {
+        const [value, setValue] = React.useState(props.defaultValue);
+        function setValueWrapper(newValue) {
+            setValue(newValue);
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
+        }
+        if (value) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(AttachmentDisplay, { value: value, maxWidth: 200 }),
+                React.createElement(core$1.Button, { onClick: (e) => {
+                        killEvent(e);
+                        setValueWrapper(undefined);
+                    } }, "Remove")));
+        }
+        return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, { ...props }, "Upload...")));
+    }
+
+    const DEFAULT_IGNORED_PROPERTIES = [
+        'meta',
+        'implicitRules',
+        'language',
+        'text',
+        'contained',
+        'extension',
+        'modifierExtension',
+    ];
+
+    const useStyles$e = core$1.createStyles((theme) => ({
+        root: {
+            display: 'grid',
+            gridTemplateColumns: '30% 70%',
+            margin: 0,
+            '& > dt, & > dd': {
+                padding: `${theme.spacing.sm} ${theme.spacing.sm}`,
+                borderTop: `0.1px solid ${theme.colors.gray[3]}`,
+                margin: 0,
+            },
+        },
+        compact: {
+            gridTemplateColumns: '20% 80%',
+            '& > dt, & > dd': {
+                padding: `0 ${theme.spacing.xs} ${theme.spacing.xs} 0`,
+                border: 0,
+            },
+        },
+    }));
+    function DescriptionList(props) {
+        const { children, compact } = props;
+        const { classes, cx } = useStyles$e();
+        return React.createElement("dl", { className: cx(classes.root, { [classes.compact]: compact }) }, children);
+    }
+    function DescriptionListEntry(props) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("dt", null, props.term),
+            React.createElement("dd", null, props.children)));
+    }
+
+    function CodeableConceptDisplay(props) {
+        return React.createElement(React.Fragment, null, core.formatCodeableConcept(props.value));
+    }
+
     function CodingDisplay(props) {
         return React.createElement(React.Fragment, null, core.formatCoding(props.value));
     }
@@ -1699,14 +1900,6 @@
             contactDetail.telecom?.map((telecom, index) => (React.createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
     }
 
-    function HumanNameDisplay(props) {
-        const name = props.value;
-        if (!name) {
-            return null;
-        }
-        return React.createElement(React.Fragment, null, core.formatHumanName(name, props.options));
-    }
-
     function IdentifierDisplay(props) {
         return (React.createElement("div", null,
             props.value?.system,
@@ -1737,50 +1930,6 @@
             React.createElement(QuantityDisplay, { value: value.denominator })));
     }
 
-    function MedplumLink(props) {
-        const navigate = useMedplumNavigate();
-        const { to, suffix, label, onClick, children, ...rest } = props;
-        let href = getHref(to);
-        if (suffix) {
-            href += '/' + suffix;
-        }
-        return (React.createElement(core$1.Anchor, { href: href, "aria-label": label, onClick: (e) => {
-                killEvent(e);
-                if (onClick) {
-                    onClick();
-                }
-                else if (to) {
-                    navigate(href);
-                }
-            }, ...rest }, children));
-    }
-    function getHref(to) {
-        if (to) {
-            if (typeof to === 'string') {
-                return getStringHref(to);
-            }
-            else if (core.isResource(to)) {
-                return getResourceHref(to);
-            }
-            else if (core.isReference(to)) {
-                return getReferenceHref(to);
-            }
-        }
-        return '#';
-    }
-    function getStringHref(to) {
-        if (to.startsWith('http://') || to.startsWith('https://') || to.startsWith('/')) {
-            return to;
-        }
-        return '/' + to;
-    }
-    function getResourceHref(to) {
-        return `/${to.resourceType}/${to.id}`;
-    }
-    function getReferenceHref(to) {
-        return `/${to.reference}`;
-    }
-
     function ReferenceDisplay(props) {
         if (!props.value) {
             return null;
@@ -1947,69 +2096,36 @@
                 React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, withAsterisk: props.withAsterisk }, (() => null)()))));
     }
 
-    function FormSection(props) {
-        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, withAsterisk: props.withAsterisk, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
+    function getErrorsForInput(outcome, expression) {
+        return outcome?.issue
+            ?.filter((issue) => isExpressionMatch(issue.expression?.[0], expression))
+            ?.map((issue) => issue.details?.text)
+            ?.join('\n');
     }
-
-    /**
-     * React Hook to use a FHIR reference.
-     * Handles the complexity of resolving references and caching resources.
-     * @param value The resource or reference to resource.
-     * @returns The resolved resource.
-     */
-    function useResource(value, setOutcome) {
-        const medplum = useMedplum();
-        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
-        const setResourceIfChanged = React.useCallback((r) => {
-            if (!core.deepEquals(r, resource)) {
-                setResource(r);
-            }
-        }, [resource, setResource]);
-        React.useEffect(() => {
-            setResourceIfChanged(getInitialResource(medplum, value));
-        }, [medplum, value, setResourceIfChanged]);
-        React.useEffect(() => {
-            let subscribed = true;
-            if (core.isReference(value)) {
-                medplum
-                    .readReference(value)
-                    .then((r) => {
-                    if (subscribed) {
-                        setResourceIfChanged(r);
-                    }
-                })
-                    .catch((err) => {
-                    if (subscribed) {
-                        setResourceIfChanged(undefined);
-                        if (setOutcome) {
-                            setOutcome(core.normalizeOperationOutcome(err));
-                        }
-                    }
-                });
-            }
-            return (() => (subscribed = false));
-        }, [medplum, resource, value, setResourceIfChanged, setOutcome]);
-        return resource;
+    function getIssuesForExpression(outcome, expression) {
+        return outcome?.issue?.filter((issue) => isExpressionMatch(issue.expression?.[0], expression));
     }
-    /**
-     * Returns the initial resource value based on the input value.
-     * If the input value is a resource, returns the resource.
-     * If the input value is a reference to a resource available in the cache, returns the resource.
-     * Otherwise, returns undefined.
-     * @param medplum The medplum client.
-     * @param value The resource or reference to resource.
-     * @returns An initial resource if available; undefined otherwise.
-     */
-    function getInitialResource(medplum, value) {
-        if (value) {
-            if (core.isResource(value)) {
-                return value;
-            }
-            if (core.isReference(value)) {
-                return medplum.getCachedReference(value);
-            }
+    function isExpressionMatch(expr1, expr2) {
+        // Expression can be either "fieldName" or "resourceType.fieldName"
+        if (expr1 === expr2) {
+            return true;
         }
-        return undefined;
+        if (!expr1 || !expr2) {
+            return false;
+        }
+        const dot1 = expr1.indexOf('.');
+        if (dot1 >= 0 && expr1.substring(dot1 + 1) === expr2) {
+            return true;
+        }
+        const dot2 = expr2.indexOf('.');
+        if (dot2 >= 0 && expr2.substring(dot2 + 1) === expr1) {
+            return true;
+        }
+        return false;
+    }
+
+    function FormSection(props) {
+        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, withAsterisk: props.withAsterisk, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
     }
 
     function ResourceForm(props) {
@@ -2058,46 +2174,6 @@
         return obj;
     }
 
-    function toKey(element) {
-        return element.code;
-    }
-    function toOption(element) {
-        return {
-            value: element.code,
-            label: getDisplay(element),
-            resource: element,
-        };
-    }
-    function createValue(input) {
-        return {
-            code: input,
-            display: input,
-        };
-    }
-    /**
-     * A low-level component to autocomplete based on a FHIR Valueset.
-     */
-    function ValueSetAutocomplete(props) {
-        const medplum = useMedplum();
-        const { elementDefinition, creatable, clearable, ...rest } = props;
-        const loadValues = React.useCallback(async (input, signal) => {
-            const system = elementDefinition.binding?.valueSet;
-            const valueSet = await medplum.searchValueSet(system, input, { signal });
-            const valueSetElements = valueSet.expansion?.contains;
-            const newData = [];
-            for (const valueSetElement of valueSetElements) {
-                if (valueSetElement.code && !newData.some((item) => item.code === valueSetElement.code)) {
-                    newData.push(valueSetElement);
-                }
-            }
-            return newData;
-        }, [medplum, elementDefinition]);
-        return (React.createElement(AsyncAutocomplete, { ...rest, creatable: creatable ?? true, clearable: clearable ?? true, toKey: toKey, toOption: toOption, loadOptions: loadValues, onCreate: createValue, getCreateLabel: creatable === false ? undefined : (query) => `+ Create ${query}` }));
-    }
-    function getDisplay(item) {
-        return item.display || item.code || '';
-    }
-
     function CodeableConceptInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
         function handleChange(newValues) {
@@ -2129,25 +2205,6 @@
         };
     }
 
-    function CodeInput(props) {
-        const [value, setValue] = React.useState(props.defaultValue);
-        function handleChange(newValues) {
-            const newValue = newValues[0];
-            const newCode = valueSetElementToCode(newValue);
-            setValue(newCode);
-            if (props.onChange) {
-                props.onChange(newCode);
-            }
-        }
-        return (React.createElement(ValueSetAutocomplete, { elementDefinition: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange, creatable: props.creatable, maxSelectedValues: props.maxSelectedValues, clearSearchOnChange: props.clearSearchOnChange, clearable: props.clearable }));
-    }
-    function codeToValueSetElement(code) {
-        return code ? { code } : undefined;
-    }
-    function valueSetElementToCode(element) {
-        return element?.code;
-    }
-
     function CodingInput(props) {
         const [value, setValue] = React.useState(props.defaultValue);
         function handleChange(newValues) {
@@ -2518,21 +2575,6 @@
                 }) })));
     }
 
-    function ResourceAvatar(props) {
-        const resource = useResource(props.value);
-        const text = resource ? core.getDisplayString(resource) : props.alt ?? '';
-        const imageUrl = (resource && core.getImageSrc(resource)) ?? props.src;
-        const radius = props.radius ?? 'xl';
-        const avatarProps = { ...props };
-        delete avatarProps.value;
-        delete avatarProps.link;
-        if (props.link) {
-            return (React.createElement(MedplumLink, { to: resource },
-                React.createElement(core$1.Avatar, { src: imageUrl, alt: text, radius: radius, ...avatarProps })));
-        }
-        return React.createElement(core$1.Avatar, { src: imageUrl, alt: text, radius: radius, ...avatarProps });
-    }
-
     /**
      * Defines which search parameters will be used by the type ahead to search for each resourceType
      */
@@ -2924,7 +2966,7 @@
         })));
     }
 
-    const useStyles$b = core$1.createStyles((theme) => ({
+    const useStyles$d = core$1.createStyles((theme) => ({
         table: {
             width: 350,
             '& th': {
@@ -2969,7 +3011,7 @@
         return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
     }
     function CalendarInput(props) {
-        const { classes } = useStyles$b();
+        const { classes } = useStyles$d();
         const { onChangeMonth, onClick } = props;
         const [month, setMonth] = React.useState(getStartMonth);
         function moveMonth(delta) {
@@ -3052,13 +3094,27 @@
         return false;
     }
 
-    const useStyles$a = core$1.createStyles((theme) => ({
+    const useStyles$c = core$1.createStyles(() => ({
+        root: {
+            '@media (max-width: 800px)': {
+                paddingLeft: 4,
+                paddingRight: 4,
+            },
+        },
+    }));
+    function Container(props) {
+        const { children, ...others } = props;
+        const { classes } = useStyles$c();
+        return (React.createElement(core$1.Container, { className: classes.root, ...others }, children));
+    }
+
+    const useStyles$b = core$1.createStyles((theme) => ({
         noteBody: { fontSize: theme.fontSizes.sm },
         noteCite: { fontSize: theme.fontSizes.xs, marginBlockStart: 3 },
         noteRoot: { padding: 5 },
     }));
     function NoteDisplay({ value }) {
-        const { classes } = useStyles$a();
+        const { classes } = useStyles$b();
         if (!value) {
             return null;
         }
@@ -3151,7 +3207,7 @@
         return React.createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
     }
 
-    const useStyles$9 = core$1.createStyles((theme) => ({
+    const useStyles$a = core$1.createStyles((theme) => ({
         table: {
             border: `0.1px solid ${theme.colors.gray[5]}`,
             borderCollapse: 'collapse',
@@ -3246,7 +3302,7 @@
                         core.formatDateTime(specimen.receivedTime)))))))));
     }
     function ObservationTable(props) {
-        const { classes } = useStyles$9();
+        const { classes } = useStyles$a();
         return (React.createElement("table", { className: classes.table },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -3260,7 +3316,7 @@
             React.createElement("tbody", null, props.value?.map((observation, index) => (React.createElement(ObservationRow, { key: `obs-${observation.id}-${index}`, hideObservationNotes: props.hideObservationNotes, value: observation }))))));
     }
     function ObservationRow(props) {
-        const { classes, cx } = useStyles$9();
+        const { classes, cx } = useStyles$a();
         const observation = useResource(props.value);
         if (!observation) {
             return null;
@@ -3310,6 +3366,35 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
+    const useStyles$9 = core$1.createStyles((theme, { width, fill }) => ({
+        paper: {
+            maxWidth: width,
+            margin: `${theme.spacing.xl} auto`,
+            padding: fill ? 0 : theme.spacing.md,
+            '@media (max-width: 800px)': {
+                padding: fill ? 0 : 8,
+            },
+            '& img': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+            '& video': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+        },
+    }));
+    const defaultProps$1 = {
+        shadow: 'xs',
+        radius: 'md',
+        withBorder: true,
+    };
+    function Panel(props) {
+        const { className, children, width, fill, unstyled, ...others } = core$1.useComponentDefaultProps('Panel', defaultProps$1, props);
+        const { classes, cx } = useStyles$9({ width, fill }, { name: 'Panel', unstyled });
+        return (React.createElement(core$1.Paper, { className: cx(classes.paper, className), ...others }, children));
+    }
+
     const useStyles$8 = core$1.createStyles((theme) => ({
         root: {
             borderCollapse: 'collapse',
@@ -3400,29 +3485,6 @@
             }, ignoreMissingValues: props.ignoreMissingValues }));
     }
 
-    /**
-     * ErrorBoundary is a React component that handles errors in its child components.
-     * See: https://reactjs.org/docs/error-boundaries.html
-     */
-    class ErrorBoundary extends React.Component {
-        constructor(props) {
-            super(props);
-            this.state = {};
-        }
-        static getDerivedStateFromError(error) {
-            return { error };
-        }
-        componentDidCatch(error, errorInfo) {
-            console.error('Uncaught error:', error, errorInfo);
-        }
-        render() {
-            if (this.state.error) {
-                return (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), title: "Something went wrong", color: "red" }, core.normalizeErrorString(this.state.error)));
-            }
-            return this.props.children;
-        }
-    }
-
     function Timeline(props) {
         return React.createElement(Container, null, props.children);
     }
@@ -3783,10 +3845,21 @@
 
     function DefaultResourceTimeline(props) {
         return (React.createElement(ResourceTimeline, { value: props.resource, loadTimelineResources: async (medplum, resourceType, id) => {
-                return Promise.allSettled([medplum.readHistory(resourceType, id)]);
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
+                return Promise.allSettled([
+                    medplum.readHistory(resourceType, id),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
+                ]);
             } }));
     }
 
+    function Document(props) {
+        const { children, ...others } = props;
+        return (React.createElement(Container, null,
+            React.createElement(Panel, { ...others }, children)));
+    }
+
     function EncounterTimeline(props) {
         return (React.createElement(ResourceTimeline, { value: props.encounter, loadTimelineResources: async (medplum, _resourceType, id) => {
                 return Promise.allSettled([
@@ -3895,6 +3968,7 @@
         'of-type': 'of type',
         missing: 'missing',
         identifier: 'identifier',
+        iterate: 'iterate',
     };
     /**
      * Sets the array of filters.
@@ -4565,7 +4639,7 @@
             return null;
         }
         const resourceType = props.search.resourceType;
-        const searchParams = core.globalSchema.types[resourceType].searchParams;
+        const searchParams = core.globalSchema.types[resourceType].searchParams ?? {};
         const filters = search.filters || [];
         return (React.createElement(core$1.Modal, { title: "Filters", closeButtonProps: { 'aria-label': 'Close' }, size: 900, opened: props.visible, onClose: props.onCancel },
             React.createElement("div", null,
@@ -5056,8 +5130,8 @@
         return (React.createElement("div", { className: classes.root, "data-testid": "search-control" },
             !props.hideToolbar && (React.createElement(core$1.Group, { position: "apart", mb: "xl" },
                 React.createElement(core$1.Group, { spacing: 2 },
-                    React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconFilter, { size: iconSize }), onClick: () => setState({ ...stateRef.current, fieldEditorVisible: true }) }, "Fields"),
-                    React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconColumns, { size: iconSize }), onClick: () => setState({ ...stateRef.current, filterEditorVisible: true }) }, "Filters"),
+                    React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconColumns, { size: iconSize }), onClick: () => setState({ ...stateRef.current, fieldEditorVisible: true }) }, "Fields"),
+                    React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconFilter, { size: iconSize }), onClick: () => setState({ ...stateRef.current, filterEditorVisible: true }) }, "Filters"),
                     props.onNew && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconFilePlus, { size: iconSize }), onClick: props.onNew }, "New...")),
                     !isMobile && isExportPassed() && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconTableExport, { size: iconSize }), onClick: props.onExport ? props.onExport : () => setState({ ...stateRef.current, exportDialogVisible: true }) }, "Export...")),
                     !isMobile && props.onDelete && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(IconTrash, { size: iconSize }), onClick: () => props.onDelete(Object.keys(state.selected)) }, "Delete...")),
@@ -5293,16 +5367,37 @@
     }
     const MemoizedFhirPathTable = React.memo(FhirPathTable);
 
+    function Logo(props) {
+        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 491 491", style: { width: props.size, height: props.size } },
+            React.createElement("title", null, "Medplum Logo"),
+            React.createElement("path", { fill: props.fill || '#ad7136', d: "M282 67c6-16 16-29 29-40L289 0c-22 17-37 41-43 68l17 23 19-24z" }),
+            React.createElement("path", { fill: props.fill || '#946af9', d: "M311 63c-17 0-33 4-48 11-16-7-32-11-49-11-87 0-158 96-158 214s71 214 158 214c17 0 33-4 49-11 15 7 31 11 48 11 87 0 158-96 158-214S398 63 311 63z" }),
+            React.createElement("path", { fill: props.fill || '#7857c5', d: "M231 489l-17 2c-87 0-158-96-158-214S127 63 214 63l17 1c-39 12-70 102-70 213s31 201 70 212z" }),
+            React.createElement("path", { fill: props.fill || '#40bc26', d: "M207 220a176 176 0 01-177 43A176 176 0 01251 43l1 5c17 59 2 125-45 172z" }),
+            React.createElement("path", { fill: props.fill || '#33961e', d: "M252 48A421 421 0 0057 270l-27-7A176 176 0 01251 43l1 5z" })));
+    }
+
+    function OperationOutcomeAlert(props) {
+        const issues = props.outcome?.issue || props.issues;
+        if (!issues) {
+            return null;
+        }
+        return (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => (React.createElement("div", { "data-testid": "text-field-error", key: issue.details?.text }, issue.details?.text)))));
+    }
+
     function PatientTimeline(props) {
-        const loadTimelineResources = React.useCallback((medplum, _resourceType, id) => {
+        const loadTimelineResources = React.useCallback((medplum, resourceType, id) => {
+            const ref = `${resourceType}/${id}`;
+            const _count = 100;
             return Promise.allSettled([
                 medplum.readHistory('Patient', id),
-                medplum.search('Communication', 'subject=Patient/' + id),
-                medplum.search('Device', 'patient=Patient/' + id),
-                medplum.search('DeviceRequest', 'patient=Patient/' + id),
-                medplum.search('DiagnosticReport', 'subject=Patient/' + id),
-                medplum.search('Media', 'subject=Patient/' + id),
-                medplum.search('ServiceRequest', 'subject=Patient/' + id),
+                medplum.search('Communication', { subject: ref, _count }),
+                medplum.search('Device', { patient: ref, _count }),
+                medplum.search('DeviceRequest', { patient: ref, _count }),
+                medplum.search('DiagnosticReport', { subject: ref, _count }),
+                medplum.search('Media', { subject: ref, _count }),
+                medplum.search('ServiceRequest', { subject: ref, _count }),
+                medplum.search('Task', { subject: ref, _count }),
             ]);
         }, []);
         return (React.createElement(ResourceTimeline, { value: props.patient, loadTimelineResources: loadTimelineResources, createCommunication: (resource, sender, text) => ({
@@ -6892,12 +6987,15 @@
     }
 
     function ServiceRequestTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, _resourceType, id) => {
+        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, resourceType, id) => {
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
                 return Promise.allSettled([
                     medplum.readHistory('ServiceRequest', id),
-                    medplum.search('Communication', 'based-on=ServiceRequest/' + id),
-                    medplum.search('Media', '_count=100&based-on=ServiceRequest/' + id),
-                    medplum.search('DiagnosticReport', 'based-on=ServiceRequest/' + id),
+                    medplum.search('Communication', { 'based-on': ref, _count }),
+                    medplum.search('DiagnosticReport', { 'based-on': ref, _count }),
+                    medplum.search('Media', { 'based-on': ref, _count }),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
                 ]);
             }, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
@@ -6918,9 +7016,455 @@
             }) }));
     }
 
+    function NewProjectForm(props) {
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: async (formData) => {
+                try {
+                    props.handleAuthResponse(await medplum.startNewProject({
+                        login: props.login,
+                        projectName: formData.projectName,
+                    }));
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            } },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                React.createElement(Logo, { size: 32 }),
+                React.createElement(core$1.Title, null, "Create project")),
+            React.createElement(core$1.Stack, { spacing: "xl" },
+                React.createElement(core$1.TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
+                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    ' and ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    ".")),
+            React.createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
+                React.createElement(core$1.Button, { type: "submit" }, "Create project"))));
+    }
+
+    /**
+     * Dynamically creates a script tag for the specified JavaScript file.
+     * @param src The JavaScript file URL.
+     */
+    function createScriptTag(src, onload) {
+        const head = document.getElementsByTagName('head')[0];
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = src;
+        script.onload = onload || null;
+        head.appendChild(script);
+    }
+
+    function GoogleButton(props) {
+        const medplum = useMedplum();
+        const { googleClientId, handleGoogleCredential } = props;
+        const parentRef = React.useRef(null);
+        const [scriptLoaded, setScriptLoaded] = React.useState(typeof google !== 'undefined');
+        const [initialized, setInitialized] = React.useState(false);
+        const [buttonRendered, setButtonRendered] = React.useState(false);
+        React.useEffect(() => {
+            if (typeof google === 'undefined') {
+                createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
+                return;
+            }
+            if (!initialized) {
+                google.accounts.id.initialize({
+                    client_id: googleClientId,
+                    callback: handleGoogleCredential,
+                });
+                setInitialized(true);
+            }
+            if (parentRef.current && !buttonRendered) {
+                google.accounts.id.renderButton(parentRef.current, {});
+                setButtonRendered(true);
+            }
+        }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
+        if (!googleClientId) {
+            return null;
+        }
+        return React.createElement("div", { ref: parentRef });
+    }
+    function getGoogleClientId(clientId) {
+        if (clientId) {
+            return clientId;
+        }
+        if (typeof window !== 'undefined') {
+            const origin = window.location.protocol + '//' + window.location.host;
+            const authorizedOrigins = "undefined"?.split(',') ?? [];
+            if (authorizedOrigins.includes(origin)) {
+                return "undefined";
+            }
+        }
+        return undefined;
+    }
+
+    /**
+     * Dynamically loads the recaptcha script.
+     * We do not want to load the script on page load unless the user needs it.
+     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     */
+    function initRecaptcha(siteKey) {
+        if (typeof grecaptcha === 'undefined') {
+            createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);
+        }
+    }
+    /**
+     * Starts a request to generate a recapcha token.
+     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     * @returns Promise to a recaptcha token for the current user.
+     */
+    function getRecaptcha(siteKey) {
+        return new Promise((resolve, reject) => {
+            grecaptcha.ready(async () => {
+                try {
+                    resolve(await grecaptcha.execute(siteKey, { action: 'submit' }));
+                }
+                catch (err) {
+                    reject(err);
+                }
+            });
+        });
+    }
+
+    function NewUserForm(props) {
+        const googleClientId = getGoogleClientId(props.googleClientId);
+        const recaptchaSiteKey = props.recaptchaSiteKey;
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        React.useEffect(() => {
+            if (recaptchaSiteKey) {
+                initRecaptcha(recaptchaSiteKey);
+            }
+        }, [recaptchaSiteKey]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: async (formData) => {
+                try {
+                    let recaptchaToken = '';
+                    if (recaptchaSiteKey) {
+                        recaptchaToken = await getRecaptcha(recaptchaSiteKey);
+                    }
+                    props.handleAuthResponse(await medplum.startNewUser({
+                        projectId: props.projectId,
+                        firstName: formData.firstName,
+                        lastName: formData.lastName,
+                        email: formData.email,
+                        password: formData.password,
+                        remember: formData.remember === 'true',
+                        recaptchaSiteKey,
+                        recaptchaToken,
+                    }));
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            } },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: async (response) => {
+                            try {
+                                props.handleAuthResponse(await medplum.startGoogleLogin({
+                                    googleClientId: response.clientId,
+                                    googleCredential: response.credential,
+                                    createUser: true,
+                                }));
+                            }
+                            catch (err) {
+                                setOutcome(err);
+                            }
+                        } })),
+                React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+            React.createElement(core$1.Stack, { spacing: "xl" },
+                React.createElement(core$1.TextInput, { name: "firstName", type: "text", label: "First name", placeholder: "First name", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
+                React.createElement(core$1.TextInput, { name: "lastName", type: "text", label: "Last name", placeholder: "Last name", required: true, error: getErrorsForInput(outcome, 'lastName') }),
+                React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
+                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
+                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    ' and ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    "."),
+                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
+                    "This site is protected by reCAPTCHA and the Google",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
+                    ' and ',
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    " apply.")),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
+                React.createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
+                React.createElement(core$1.Button, { type: "submit" }, "Create account"))));
+    }
+
+    function RegisterForm(props) {
+        const { type, projectId, googleClientId, recaptchaSiteKey, onSuccess } = props;
+        const medplum = useMedplum();
+        const [login, setLogin] = React.useState(undefined);
+        const [outcome, setOutcome] = React.useState();
+        React.useEffect(() => {
+            if (type === 'patient' && login) {
+                medplum
+                    .startNewPatient({ login, projectId: projectId })
+                    .then((response) => medplum.processCode(response.code))
+                    .then(() => onSuccess())
+                    .catch((err) => setOutcome(err));
+            }
+        }, [medplum, type, projectId, login, onSuccess]);
+        function handleAuthResponse(response) {
+            if (response.code) {
+                medplum
+                    .processCode(response.code)
+                    .then(() => onSuccess())
+                    .catch(console.log);
+            }
+            else if (response.login) {
+                setLogin(response.login);
+            }
+        }
+        return (React.createElement(Document, { width: 450 },
+            outcome && React.createElement("pre", null, JSON.stringify(outcome, null, 2)),
+            !login && (React.createElement(NewUserForm, { projectId: projectId, googleClientId: googleClientId, recaptchaSiteKey: recaptchaSiteKey, handleAuthResponse: handleAuthResponse }, props.children)),
+            login && type === 'project' && React.createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse })));
+    }
+
+    function AuthenticationForm(props) {
+        const [email, setEmail] = React.useState();
+        if (!email) {
+            return React.createElement(EmailForm, { setEmail: setEmail, ...props });
+        }
+        else {
+            return React.createElement(PasswordForm, { email: email, ...props });
+        }
+    }
+    function EmailForm(props) {
+        const { setEmail, onRegister, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const medplum = useMedplum();
+        const googleClientId = !props.disableGoogleAuth && getGoogleClientId(props.googleClientId);
+        const isExternalAuth = React.useCallback(async (authMethod) => {
+            if (!authMethod.authorizeUrl) {
+                return false;
+            }
+            const state = JSON.stringify({
+                ...(await medplum.ensureCodeChallenge(baseLoginRequest)),
+                domain: authMethod.domain,
+            });
+            const url = new URL(authMethod.authorizeUrl);
+            url.searchParams.set('state', state);
+            window.location.assign(url.toString());
+            return true;
+        }, [medplum, baseLoginRequest]);
+        const handleSubmit = React.useCallback(async (formData) => {
+            const authMethod = await medplum.post('auth/method', { email: formData.email });
+            if (!(await isExternalAuth(authMethod))) {
+                setEmail(formData.email);
+            }
+        }, [medplum, isExternalAuth, setEmail]);
+        const handleGoogleCredential = React.useCallback(async (response) => {
+            const authResponse = await medplum.startGoogleLogin({
+                ...baseLoginRequest,
+                googleCredential: response.credential,
+            });
+            if (!(await isExternalAuth(authResponse))) {
+                handleAuthResponse(authResponse);
+            }
+        }, [medplum, baseLoginRequest, isExternalAuth, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: handleGoogleCredential })),
+                React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+            React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true }),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
+                React.createElement("div", null, onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register"))),
+                React.createElement(core$1.Button, { type: "submit" }, "Next"))));
+    }
+    function PasswordForm(props) {
+        const { onForgotPassword, handleAuthResponse, children, ...baseLoginRequest } = props;
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        const handleSubmit = React.useCallback((formData) => {
+            medplum
+                .startLogin({
+                ...baseLoginRequest,
+                password: formData.password,
+                remember: formData.remember === 'on',
+            })
+                .then(handleAuthResponse)
+                .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
+        }, [medplum, baseLoginRequest, handleAuthResponse]);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: handleSubmit },
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
+            React.createElement(OperationOutcomeAlert, { issues: issues }),
+            React.createElement(core$1.Stack, { spacing: "xl" },
+                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'password') })),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
+                onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
+                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
+                React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
+    }
+
+    function ChooseProfileForm(props) {
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        return (React.createElement(core$1.Stack, null,
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                React.createElement(Logo, { size: 32 }),
+                React.createElement(core$1.Title, { order: 3 }, "Choose profile")),
+            React.createElement(OperationOutcomeAlert, { outcome: outcome }),
+            props.memberships.map((membership) => (React.createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
+                    medplum
+                        .post('auth/profile', {
+                        login: props.login,
+                        profile: membership.id,
+                    })
+                        .then(props.handleAuthResponse)
+                        .catch((err) => setOutcome(core.normalizeOperationOutcome(err)));
+                } },
+                React.createElement(core$1.Group, null,
+                    React.createElement(core$1.Avatar, { radius: "xl" }),
+                    React.createElement("div", { style: { flex: 1 } },
+                        React.createElement(core$1.Text, { size: "sm", weight: 500 }, membership.profile?.display),
+                        React.createElement(core$1.Text, { color: "dimmed", size: "xs" }, membership.project?.display))))))));
+    }
+
+    function ChooseScopeForm(props) {
+        const medplum = useMedplum();
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+                medplum
+                    .post('auth/scope', {
+                    login: props.login,
+                    scope: Object.keys(formData).join(' '),
+                })
+                    .then(props.handleAuthResponse)
+                    .catch(console.log);
+            } },
+            React.createElement(core$1.Stack, null,
+                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                    React.createElement(Logo, { size: 32 }),
+                    React.createElement(core$1.Title, null, "Choose scope")),
+                React.createElement(core$1.Stack, null, (props.scope || 'openid').split(' ').map((scopeName) => (React.createElement(core$1.Checkbox, { key: scopeName, id: scopeName, name: scopeName, label: scopeName, defaultChecked: true })))),
+                React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                    React.createElement(core$1.Button, { type: "submit" }, "Set scope")))));
+    }
+
+    function MfaForm(props) {
+        const medplum = useMedplum();
+        const [errorMessage, setErrorMessage] = React.useState(undefined);
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+                setErrorMessage(undefined);
+                medplum
+                    .post('auth/mfa/verify', {
+                    login: props.login,
+                    token: formData.token,
+                })
+                    .then(props.handleAuthResponse)
+                    .catch((err) => setErrorMessage(core.normalizeErrorString(err)));
+            } },
+            React.createElement(core$1.Stack, null,
+                React.createElement(core$1.Center, { sx: { flexDirection: 'column' } },
+                    React.createElement(Logo, { size: 32 }),
+                    React.createElement(core$1.Title, null, "Enter MFA code")),
+                errorMessage && (React.createElement(core$1.Alert, { icon: React.createElement(IconAlertCircle, { size: 16 }), title: "Error", color: "red" }, errorMessage)),
+                React.createElement(core$1.Stack, null,
+                    React.createElement(core$1.TextInput, { name: "token", label: "MFA code", required: true })),
+                React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                    React.createElement(core$1.Button, { type: "submit" }, "Submit code")))));
+    }
+
+    /**
+     * The SignInForm component allows users to sign in to Medplum.
+     *
+     * "Signing in" is a multi-step process:
+     * 1) Authentication - identify the user
+     * 2) MFA - If MFA is enabled, prompt for MFA code
+     * 3) Choose profile - If the user has multiple profiles, prompt to choose one
+     * 4) Choose scope - If the user has multiple scopes, prompt to choose one
+     * 5) Success - Return to the caller with either a code or a redirect
+     */
+    function SignInForm(props) {
+        const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode, ...baseLoginRequest } = props;
+        const medplum = useMedplum();
+        const [login, setLogin] = React.useState(undefined);
+        const [mfaRequired, setAuthenticatorRequired] = React.useState(false);
+        const [memberships, setMemberships] = React.useState(undefined);
+        const handleCode = React.useCallback((code) => {
+            if (onCode) {
+                onCode(code);
+            }
+            else {
+                medplum
+                    .processCode(code)
+                    .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
+        }, [medplum, onCode, onSuccess]);
+        const handleAuthResponse = React.useCallback((response) => {
+            setAuthenticatorRequired(!!response.mfaRequired);
+            if (response.login) {
+                setLogin(response.login);
+            }
+            if (response.memberships) {
+                setMemberships(response.memberships);
+            }
+            if (response.code) {
+                if (chooseScopes) {
+                    setMemberships(undefined);
+                }
+                else {
+                    handleCode(response.code);
+                }
+            }
+        }, [chooseScopes, handleCode]);
+        const handleScopeResponse = React.useCallback((response) => {
+            handleCode(response.code);
+        }, [handleCode]);
+        React.useEffect(() => {
+            if (props.login) {
+                medplum
+                    .get('auth/login/' + props.login)
+                    .then(handleAuthResponse)
+                    .catch(console.error);
+            }
+        }, [medplum, props, handleAuthResponse]);
+        return (React.createElement(Document, { width: 450 }, (() => {
+            if (!login) {
+                return (React.createElement(AuthenticationForm, { onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse, disableGoogleAuth: props.disableGoogleAuth, ...baseLoginRequest }, props.children));
+            }
+            else if (mfaRequired) {
+                return React.createElement(MfaForm, { login: login, handleAuthResponse: handleAuthResponse });
+            }
+            else if (memberships) {
+                return React.createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
+            }
+            else if (props.projectId === 'new') {
+                return React.createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
+            }
+            else if (props.chooseScopes) {
+                return React.createElement(ChooseScopeForm, { login: login, scope: props.scope, handleAuthResponse: handleScopeResponse });
+            }
+            else {
+                return React.createElement("div", null, "Success");
+            }
+        })()));
+    }
+
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
     exports.AnnotationInput = AnnotationInput;
+    exports.AppShell = AppShell;
     exports.AsyncAutocomplete = AsyncAutocomplete;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
     exports.AttachmentArrayInput = AttachmentArrayInput;
@@ -6954,10 +7498,12 @@
     exports.FhirPathTable = FhirPathTable;
     exports.Form = Form;
     exports.FormSection = FormSection;
+    exports.Header = Header;
     exports.HumanNameDisplay = HumanNameDisplay;
     exports.HumanNameInput = HumanNameInput;
     exports.IdentifierDisplay = IdentifierDisplay;
     exports.IdentifierInput = IdentifierInput;
+    exports.Loading = Loading;
     exports.Logo = Logo;
     exports.MedplumLink = MedplumLink;
     exports.MedplumProvider = MedplumProvider;
@@ -6965,6 +7511,7 @@
     exports.MemoizedSearchControl = MemoizedSearchControl;
     exports.MoneyDisplay = MoneyDisplay;
     exports.MoneyInput = MoneyInput;
+    exports.Navbar = Navbar;
     exports.ObservationTable = ObservationTable;
     exports.OperationOutcomeAlert = OperationOutcomeAlert;
     exports.Panel = Panel;