@medplum/react 0.10.2 → 1.0.1

package/dist/cjs/index.js

@@ -1,19 +1,15 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('@tabler/icons'), require('react-router-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', '@tabler/icons', 'react-router-dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.medplum = global.medplum || {}, global.medplum.ui = {}), global.medplum.core, global.React, global.mantine.core, global.tabler.icons, global.ReactRouterDOM));
-})(this, (function (exports, core, React, core$1, icons, reactRouterDom) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('@mantine/core'), require('@tabler/icons'), require('react-router-dom'), require('@mantine/notifications')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '@mantine/core', '@tabler/icons', '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.tabler.icons, global.ReactRouterDOM, global.mantine.notifications));
+})(this, (function (exports, core, React, core$1, icons, reactRouterDom, notifications) { 'use strict';
 
     function AddressDisplay(props) {
         const address = props.value;
         if (!address) {
             return null;
         }
-        return React__default["default"].createElement(React__default["default"].Fragment, null, core.formatAddress(address));
+        return React.createElement(React.Fragment, null, core.formatAddress(address));
     }
 
     function getLine(address, index) {
@@ -58,14 +54,14 @@
         function setPostalCode(postalCode) {
             setValueWrapper(Object.assign(Object.assign({}, valueRef.current), { postalCode }));
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "address-use", defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: (e) => setUse(e.currentTarget.value), data: ['', 'home', 'work', 'temp', 'old', 'billing'] }),
-            React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "address-type", defaultValue: value === null || value === void 0 ? void 0 : value.type, onChange: (e) => setType(e.currentTarget.value), data: ['', 'postal', 'physical', 'both'] }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Line 1", defaultValue: getLine(value, 0), onChange: (e) => setLine1(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Line 2", defaultValue: getLine(value, 1), onChange: (e) => setLine2(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "City", defaultValue: value.city, onChange: (e) => setCity(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "State", defaultValue: value.state, onChange: (e) => setState(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: (e) => setPostalCode(e.currentTarget.value) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.NativeSelect, { "data-testid": "address-use", defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: (e) => setUse(e.currentTarget.value), data: ['', 'home', 'work', 'temp', 'old', 'billing'] }),
+            React.createElement(core$1.NativeSelect, { "data-testid": "address-type", defaultValue: value === null || value === void 0 ? void 0 : value.type, onChange: (e) => setType(e.currentTarget.value), data: ['', 'postal', 'physical', 'both'] }),
+            React.createElement(core$1.TextInput, { placeholder: "Line 1", defaultValue: getLine(value, 0), onChange: (e) => setLine1(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Line 2", defaultValue: getLine(value, 1), onChange: (e) => setLine2(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "City", defaultValue: value.city, onChange: (e) => setCity(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "State", defaultValue: value.state, onChange: (e) => setState(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: (e) => setPostalCode(e.currentTarget.value) })));
     }
 
     function AttachmentDisplay(props) {
@@ -74,20 +70,20 @@
         if (!url) {
             return null;
         }
-        return (React__default["default"].createElement("div", { "data-testid": "attachment-display" },
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React__default["default"].createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React__default["default"].createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
-                React__default["default"].createElement("source", { type: contentType, src: url }))),
-            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React__default["default"].createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
-                React__default["default"].createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
-            React__default["default"].createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
-                React__default["default"].createElement("a", { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
+        return (React.createElement("div", { "data-testid": "attachment-display" },
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
+            (contentType === null || contentType === void 0 ? void 0 : 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 === null || title === void 0 ? void 0 : 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("a", { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
     }
 
     function AttachmentArrayDisplay(props) {
-        return (React__default["default"].createElement("div", null, props.values &&
-            props.values.map((v, index) => (React__default["default"].createElement("div", { key: 'attatchment-' + index },
-                React__default["default"].createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+        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 }))))));
     }
 
     const reactContext = React.createContext(undefined);
@@ -112,7 +108,7 @@
             return () => medplum.removeEventListeneer('change', eventListener);
         }, [medplum, state]);
         const medplumContext = Object.assign(Object.assign({}, state), { medplum });
-        return React__default["default"].createElement(reactContext.Provider, { value: medplumContext }, props.children);
+        return React.createElement(reactContext.Provider, { value: medplumContext }, props.children);
     }
     /**
      * Returns the MedplumContext instance.
@@ -196,10 +192,13 @@
             if (!fileName) {
                 return;
             }
+            if (props.onUploadStart) {
+                props.onUploadStart();
+            }
             const filename = file.name;
             const contentType = file.type || 'application/octet-stream';
             medplum
-                .createBinary(file, filename, contentType)
+                .createBinary(file, filename, contentType, props.onUploadProgress)
                 .then((binary) => {
                 props.onUpload({
                     contentType: binary.contentType,
@@ -212,8 +211,8 @@
                 alert((_c = (_b = (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.details) === null || _c === void 0 ? void 0 : _c.text);
             });
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("input", { type: "file", "data-testid": "upload-file-input", style: { display: 'none' }, ref: fileInputRef, onChange: (e) => onFileChange(e) }),
+        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 })));
     }
 
@@ -228,29 +227,29 @@
                 props.onChange(newValues);
             }
         }
-        return (React__default["default"].createElement("table", { style: { width: '100%' } },
-            React__default["default"].createElement("colgroup", null,
-                React__default["default"].createElement("col", { width: "97%" }),
-                React__default["default"].createElement("col", { width: "3%" })),
-            React__default["default"].createElement("tbody", null,
-                values.map((v, index) => (React__default["default"].createElement("tr", { key: `${index}-${values.length}` },
-                    React__default["default"].createElement("td", null,
-                        React__default["default"].createElement(AttachmentDisplay, { value: v, maxWidth: 200 })),
-                    React__default["default"].createElement("td", { className: "medplum-right" },
-                        React__default["default"].createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
+        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__default["default"].createElement(icons.IconCircleMinus, null)))))),
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("td", null),
-                    React__default["default"].createElement("td", { className: "medplum-right" },
-                        React__default["default"].createElement(AttachmentButton, { onUpload: (attachment) => {
+                            React.createElement(icons.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__default["default"].createElement(core$1.ActionIcon, Object.assign({}, props, { title: "Add", size: "sm", color: "green" }),
-                            React__default["default"].createElement(icons.IconCloudUpload, { size: 16 })))))))));
+                            } }, (props) => (React.createElement(core$1.ActionIcon, Object.assign({}, props, { title: "Add", size: "sm", color: "green" }),
+                            React.createElement(icons.IconCloudUpload, { size: 16 })))))))));
     }
 
     function AttachmentInput(props) {
@@ -262,19 +261,23 @@
             }
         }
         if (value) {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(AttachmentDisplay, { value: value, maxWidth: 200 }),
-                React__default["default"].createElement(core$1.Button, { onClick: (e) => {
+            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__default["default"].createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React__default["default"].createElement(core$1.Button, Object.assign({}, props), "Upload...")));
+        return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, Object.assign({}, props), "Upload...")));
     }
 
     function Document(props) {
-        return (React__default["default"].createElement("main", { className: "medplum-document" },
-            React__default["default"].createElement("article", { style: { maxWidth: props.width } }, props.children)));
+        let style = undefined;
+        if (props.width) {
+            style = { maxWidth: props.width };
+        }
+        return (React.createElement(core$1.Container, null,
+            React.createElement(core$1.Paper, { style: style, mx: "auto", my: "lg", p: "lg", shadow: "xs", radius: "sm", withBorder: true }, props.children)));
     }
 
     /******************************************************************************
@@ -362,7 +365,7 @@
     }
 
     function Form(props) {
-        return (React__default["default"].createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
+        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
                 e.preventDefault();
                 const formData = parseForm(e.target);
                 if (props.onSubmit) {
@@ -372,13 +375,13 @@
     }
 
     function Logo(props) {
-        return (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 491 491", style: { width: props.size, height: props.size } },
-            React__default["default"].createElement("title", null, "Medplum Logo"),
-            React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("path", { fill: props.fill || '#33961e', d: "M252 48A421 421 0 0057 270l-27-7A176 176 0 01251 43l1 5z" })));
+        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 getErrorsForInput(outcome, expression) {
@@ -411,7 +414,7 @@
     function NewProjectForm(props) {
         const medplum = useMedplum();
         const [outcome, setOutcome] = React.useState();
-        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     props.handleAuthResponse(yield medplum.startNewProject({
                         login: props.login,
@@ -422,19 +425,19 @@
                     setOutcome(err);
                 }
             }) },
-            React__default["default"].createElement("div", { className: "medplum-center" },
-                React__default["default"].createElement(Logo, { size: 32 }),
-                React__default["default"].createElement("h1", null, "Create project")),
-            React__default["default"].createElement(core$1.Stack, { spacing: "xl" },
-                React__default["default"].createElement(core$1.TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
-                React__default["default"].createElement(core$1.Text, { color: "dimmed", size: "xs" },
+            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__default["default"].createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React__default["default"].createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     ".")),
-            React__default["default"].createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Create project"))));
+            React.createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
+                React.createElement(core$1.Button, { type: "submit" }, "Create project"))));
     }
 
     /**
@@ -477,7 +480,7 @@
         if (!googleClientId) {
             return null;
         }
-        return React__default["default"].createElement("div", { ref: parentRef });
+        return React.createElement("div", { ref: parentRef });
     }
     function getGoogleClientId(clientId) {
         var _a, _b;
@@ -527,7 +530,7 @@
         const [outcome, setOutcome] = React.useState();
         const issues = getIssuesForExpression(outcome, undefined);
         React.useEffect(() => initRecaptcha(recaptchaSiteKey), [recaptchaSiteKey]);
-        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const recaptchaToken = yield getRecaptcha(recaptchaSiteKey);
                     props.handleAuthResponse(yield medplum.startNewUser({
@@ -545,14 +548,14 @@
                     setOutcome(err);
                 }
             }) },
-            React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
-            issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, props.children),
+            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => {
                 var _a, _b;
-                return (React__default["default"].createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
+                return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
             }))),
-            googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
                             try {
                                 props.handleAuthResponse(yield medplum.startGoogleLogin({
                                     googleClientId: response.clientId,
@@ -564,28 +567,28 @@
                                 setOutcome(err);
                             }
                         }) })),
-                React__default["default"].createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
-            React__default["default"].createElement(core$1.Stack, { spacing: "xl" },
-                React__default["default"].createElement(core$1.TextInput, { name: "firstName", type: "text", label: "First name", placeholder: "First name", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
-                React__default["default"].createElement(core$1.TextInput, { name: "lastName", type: "text", label: "Last name", placeholder: "Last name", required: true, error: getErrorsForInput(outcome, 'lastName') }),
-                React__default["default"].createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
-                React__default["default"].createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
-                React__default["default"].createElement(core$1.Text, { color: "dimmed", size: "xs" },
+                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__default["default"].createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React__default["default"].createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     "."),
-                React__default["default"].createElement(core$1.Text, { color: "dimmed", size: "xs" },
+                React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
                     "This site is protected by reCAPTCHA and the Google",
                     ' ',
-                    React__default["default"].createElement("a", { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
+                    React.createElement("a", { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React__default["default"].createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     " apply.")),
-            React__default["default"].createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
-                React__default["default"].createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Create account"))));
+            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) {
@@ -613,82 +616,64 @@
                 setLogin(response.login);
             }
         }
-        return (React__default["default"].createElement(Document, { width: 450 },
-            outcome && React__default["default"].createElement("pre", null, JSON.stringify(outcome, null, 2)),
-            !login && (React__default["default"].createElement(NewUserForm, { projectId: projectId, googleClientId: googleClientId, recaptchaSiteKey: recaptchaSiteKey, handleAuthResponse: handleAuthResponse }, props.children)),
-            login && type === 'project' && React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse })));
+        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 { generatePkce, onForgotPassword, onRegister, handleAuthResponse, children } = props, baseLoginRequest = __rest(props, ["generatePkce", "onForgotPassword", "onRegister", "handleAuthResponse", "children"]);
         const medplum = useMedplum();
         const googleClientId = getGoogleClientId(props.googleClientId);
         const [outcome, setOutcome] = React.useState();
         const issues = getIssuesForExpression(outcome, undefined);
         function startPkce() {
             return __awaiter(this, void 0, void 0, function* () {
-                if (props.generatePkce) {
+                if (generatePkce) {
                     yield medplum.startPkce();
                 }
             });
         }
-        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+        return (React.createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
                 startPkce()
-                    .then(() => medplum.startLogin({
-                    projectId: props.projectId,
-                    clientId: props.clientId,
-                    scope: props.scope,
-                    nonce: props.nonce,
-                    codeChallenge: props.codeChallenge,
-                    codeChallengeMethod: props.codeChallengeMethod,
-                    email: formData.email,
-                    password: formData.password,
-                    remember: formData.remember === 'true',
-                }))
-                    .then(props.handleAuthResponse)
+                    .then(() => medplum.startLogin(Object.assign(Object.assign({}, baseLoginRequest), { email: formData.email, password: formData.password, remember: formData.remember === 'on' })))
+                    .then(handleAuthResponse)
                     .catch(setOutcome);
             } },
-            React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
-            issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
+            React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
+            issues && (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), color: "red" }, issues.map((issue) => {
                 var _a, _b;
-                return (React__default["default"].createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
+                return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
             }))),
-            googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
-                    React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
+            googleClientId && (React.createElement(React.Fragment, null,
+                React.createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
+                    React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
                             startPkce()
-                                .then(() => medplum.startGoogleLogin({
-                                projectId: props.projectId,
-                                clientId: props.clientId,
-                                scope: props.scope,
-                                nonce: props.nonce,
-                                codeChallenge: props.codeChallenge,
-                                codeChallengeMethod: props.codeChallengeMethod,
-                                googleClientId: response.clientId,
-                                googleCredential: response.credential,
-                            }))
+                                .then(() => medplum.startGoogleLogin(Object.assign(Object.assign({}, baseLoginRequest), { googleCredential: response.credential })))
                                 .then(props.handleAuthResponse)
                                 .catch(setOutcome);
                         } })),
-                React__default["default"].createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
-            React__default["default"].createElement(core$1.Stack, { spacing: "xl" },
-                React__default["default"].createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
-                React__default["default"].createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
-            React__default["default"].createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
-                props.onForgotPassword && (React__default["default"].createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onForgotPassword, size: "xs" }, "Forgot password")),
-                props.onRegister && (React__default["default"].createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onRegister, size: "xs" }, "Register")),
-                React__default["default"].createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Sign in"))));
+                React.createElement(core$1.Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+            React.createElement(core$1.Stack, { spacing: "xl" },
+                React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
+                React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
+                onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
+                onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
+                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs" }),
+                React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
 
     function ChooseProfileForm(props) {
         const medplum = useMedplum();
-        return (React__default["default"].createElement(core$1.Stack, null,
-            React__default["default"].createElement("div", { className: "medplum-center" },
-                React__default["default"].createElement(Logo, { size: 32 }),
-                React__default["default"].createElement(core$1.Text, { size: "lg", weight: 500 }, "Choose profile")),
+        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, null, "Choose profile")),
             props.memberships.map((membership) => {
                 var _a, _b;
-                return (React__default["default"].createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
+                return (React.createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
                         medplum
                             .post('auth/profile', {
                             login: props.login,
@@ -697,15 +682,36 @@
                             .then(props.handleAuthResponse)
                             .catch(console.log);
                     } },
-                    React__default["default"].createElement(core$1.Group, null,
-                        React__default["default"].createElement(core$1.Avatar, { radius: "xl" }),
-                        React__default["default"].createElement("div", { style: { flex: 1 } },
-                            React__default["default"].createElement(core$1.Text, { size: "sm", weight: 500 }, (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display),
-                            React__default["default"].createElement(core$1.Text, { color: "dimmed", size: "xs" }, (_b = membership.project) === null || _b === void 0 ? void 0 : _b.display)))));
+                    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 }, (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display),
+                            React.createElement(core$1.Text, { color: "dimmed", size: "xs" }, (_b = membership.project) === null || _b === void 0 ? void 0 : _b.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 SignInForm(props) {
+        const { chooseScopes, onSuccess, onForgotPassword, onRegister, onCode } = props, baseLoginRequest = __rest(props, ["chooseScopes", "onSuccess", "onForgotPassword", "onRegister", "onCode"]);
         const medplum = useMedplum();
         const [login, setLogin] = React.useState(undefined);
         const [memberships, setMemberships] = React.useState(undefined);
@@ -717,43 +723,56 @@
                 setMemberships(response.memberships);
             }
             if (response.code) {
-                if (props.onCode) {
-                    props.onCode(response.code);
+                if (chooseScopes) {
+                    setMemberships(undefined);
                 }
                 else {
-                    medplum
-                        .processCode(response.code)
-                        .then(() => {
-                        if (props.onSuccess) {
-                            props.onSuccess();
-                        }
-                    })
-                        .catch(console.log);
+                    handleCode(response.code);
                 }
             }
         }
-        return (React__default["default"].createElement(Document, { width: 450 }, (() => {
+        function handleScopeResponse(response) {
+            handleCode(response.code);
+        }
+        function handleCode(code) {
+            if (onCode) {
+                onCode(code);
+            }
+            else {
+                medplum
+                    .processCode(code)
+                    .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                    .catch(console.log);
+            }
+        }
+        return (React.createElement(Document, { width: 450 }, (() => {
             if (!login) {
-                return (React__default["default"].createElement(AuthenticationForm, { projectId: props.projectId, clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, generatePkce: !props.onCode, codeChallenge: props.codeChallenge, codeChallengeMethod: props.codeChallengeMethod, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+                return (React.createElement(AuthenticationForm, Object.assign({ generatePkce: !onCode, onForgotPassword: onForgotPassword, onRegister: onRegister, handleAuthResponse: handleAuthResponse }, baseLoginRequest), props.children));
             }
             else if (memberships) {
-                return React__default["default"].createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
+                return React.createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
             }
             else if (props.projectId === 'new') {
-                return React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
+                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__default["default"].createElement("div", null, "Success");
+                return React.createElement("div", null, "Success");
             }
         })()));
     }
 
     function CheckboxFormSection(props) {
-        return (React__default["default"].createElement("div", { className: "medplum-checkbox-form-section" },
-            React__default["default"].createElement("div", { className: "medplum-checkbox-form-section-checkbox-container" }, props.children),
-            React__default["default"].createElement("div", { className: "medplum-checkbox-form-section-details-container" },
-                React__default["default"].createElement("label", { htmlFor: props.htmlFor }, props.title),
-                React__default["default"].createElement("p", null, props.description))));
+        return (React.createElement(core$1.Group, { noWrap: true },
+            React.createElement("div", null, props.children),
+            React.createElement("div", null,
+                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
     }
 
     const DEFAULT_IGNORED_PROPERTIES = [
@@ -767,16 +786,7 @@
     ];
 
     function FormSection(props) {
-        const issues = getIssuesForExpression(props.outcome, props.htmlFor);
-        const invalid = issues && issues.length > 0;
-        return (React__default["default"].createElement("fieldset", { className: "medplum-form-section" },
-            props.title && React__default["default"].createElement("label", { htmlFor: props.htmlFor }, props.title),
-            props.description && React__default["default"].createElement("p", null, props.description),
-            props.children,
-            invalid && (React__default["default"].createElement("div", { id: props.htmlFor + '-errors', className: "medplum-input-error" }, issues === null || issues === void 0 ? void 0 : issues.map((issue) => {
-                var _a, _b;
-                return (React__default["default"].createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
-            })))));
+        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
     }
 
     const system = {
@@ -851,22 +861,23 @@
             }
         }, [medplum, defaultValue]);
         if (!schema || !value) {
-            return React__default["default"].createElement("div", null, "Loading...");
+            return React.createElement("div", null, "Loading...");
         }
-        return (React__default["default"].createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
+        return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
                 e.preventDefault();
                 if (props.onSubmit) {
                     props.onSubmit(value);
                 }
             } },
-            React__default["default"].createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
-                React__default["default"].createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
-            React__default["default"].createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
-                React__default["default"].createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true })),
-            React__default["default"].createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
-            React__default["default"].createElement(core$1.Group, null,
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "OK"),
-                props.onDelete && (React__default["default"].createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
+            React.createElement(core$1.Stack, { mb: "xl" },
+                React.createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
+                React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
+            React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                React.createElement(core$1.Button, { type: "submit" }, "OK"),
+                props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
                         props.onDelete(value);
                     } }, "Delete")))));
     }
@@ -884,13 +895,34 @@
         return obj;
     }
 
+    const useStyles$b = core$1.createStyles((theme) => ({
+        root: {
+            display: 'grid',
+            gridTemplateColumns: '30% 70%',
+            margin: 0,
+            '& > dt, & > dd': {
+                padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,
+                borderTop: `0.1px solid ${theme.colors.gray[3]}`,
+                margin: 0,
+            },
+        },
+        compact: {
+            gridTemplateColumns: '20% 80%',
+            '& > dt, & > dd': {
+                padding: `0 ${theme.spacing.xs}px ${theme.spacing.xs}px 0`,
+                border: 0,
+            },
+        },
+    }));
     function DescriptionList(props) {
-        return React__default["default"].createElement("dl", { className: 'medplum-description-list' + (props.compact ? ' compact' : '') }, props.children);
+        const { children, compact } = props;
+        const { classes, cx } = useStyles$b();
+        return React.createElement("dl", { className: cx(classes.root, { [classes.compact]: compact }) }, children);
     }
     function DescriptionListEntry(props) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("dt", null, props.term),
-            React__default["default"].createElement("dd", null, props.children)));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("dt", null, props.term),
+            React.createElement("dd", null, props.children)));
     }
 
     function BackboneElementDisplay(props) {
@@ -902,17 +934,20 @@
         const typeName = typedValue.type;
         const typeSchema = core.globalSchema.types[typeName];
         if (!typeSchema) {
-            return React__default["default"].createElement("div", null,
+            return React.createElement("div", null,
                 typeName,
                 "\u00A0not implemented");
         }
-        if (typeof value === 'object' && 'name' in value && Object.keys(value).length === 1) {
+        if (typeof value === 'object' &&
+            'name' in value &&
+            Object.keys(value).length === 1 &&
+            typeof value.name === 'string') {
             // Special case for common BackboneElement pattern
             // Where there is an object with a single property 'name'
             // Just display the name value.
-            return React__default["default"].createElement("div", null, value.name);
+            return React.createElement("div", null, value.name);
         }
-        return (React__default["default"].createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
+        return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
             const key = entry[0];
             if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
                 return null;
@@ -923,14 +958,14 @@
                 (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
                 return null;
             }
-            return (React__default["default"].createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
-                React__default["default"].createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
+            return (React.createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
+                React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
         })));
     }
 
     function CodingDisplay(props) {
         var _a, _b;
-        return React__default["default"].createElement(React__default["default"].Fragment, null, ((_a = props.value) === null || _a === void 0 ? void 0 : _a.display) || ((_b = props.value) === null || _b === void 0 ? void 0 : _b.code));
+        return React.createElement(React.Fragment, null, ((_a = props.value) === null || _a === void 0 ? void 0 : _a.display) || ((_b = props.value) === null || _b === void 0 ? void 0 : _b.code));
     }
 
     function CodeableConceptDisplay(props) {
@@ -939,12 +974,12 @@
             return null;
         }
         if (value.text) {
-            return React__default["default"].createElement(React__default["default"].Fragment, null, value.text);
+            return React.createElement(React.Fragment, null, value.text);
         }
         if (value.coding) {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, value.coding.map((coding, index) => (React__default["default"].createElement(React__default["default"].Fragment, { key: 'coding-' + index },
-                index > 0 && React__default["default"].createElement(React__default["default"].Fragment, null, ', '),
-                React__default["default"].createElement(CodingDisplay, { value: coding }))))));
+            return (React.createElement(React.Fragment, null, value.coding.map((coding, index) => (React.createElement(React.Fragment, { key: 'coding-' + index },
+                index > 0 && React.createElement(React.Fragment, null, ', '),
+                React.createElement(CodingDisplay, { value: coding }))))));
         }
         return null;
     }
@@ -971,7 +1006,7 @@
             }
             builder.push(']');
         }
-        return React__default["default"].createElement(React__default["default"].Fragment, null, builder.join('').trim());
+        return React.createElement(React.Fragment, null, builder.join('').trim());
     }
 
     function ContactDetailDisplay(props) {
@@ -980,10 +1015,10 @@
         if (!contactDetail) {
             return null;
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        return (React.createElement(React.Fragment, null,
             contactDetail.name,
             contactDetail.name && ': ', (_a = contactDetail.telecom) === null || _a === void 0 ? void 0 :
-            _a.map((telecom, index) => (React__default["default"].createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
+            _a.map((telecom, index) => (React.createElement(ContactPointDisplay, { key: 'telecom-' + index, value: telecom })))));
     }
 
     function HumanNameDisplay(props) {
@@ -991,55 +1026,23 @@
         if (!name) {
             return null;
         }
-        return React__default["default"].createElement(React__default["default"].Fragment, null, core.formatHumanName(name, props.options));
+        return React.createElement(React.Fragment, null, core.formatHumanName(name, props.options));
     }
 
     function IdentifierDisplay(props) {
         var _a, _b;
-        return (React__default["default"].createElement("div", null, (_a = props.value) === null || _a === void 0 ? void 0 :
+        return (React.createElement("div", null, (_a = props.value) === null || _a === void 0 ? void 0 :
             _a.system,
             ": ", (_b = props.value) === null || _b === void 0 ? void 0 :
             _b.value));
     }
 
     function QuantityDisplay(props) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, formatQuantityString(props.value));
-    }
-    function formatQuantityString(quantity) {
-        if (!quantity) {
-            return '';
-        }
-        const result = [];
-        if (quantity.comparator) {
-            result.push(quantity.comparator);
-            result.push(' ');
-        }
-        if (quantity.value !== undefined) {
-            result.push(quantity.value);
-        }
-        if (quantity.unit) {
-            if (quantity.unit !== '%') {
-                result.push(' ');
-            }
-            result.push(quantity.unit);
-        }
-        return result.join('');
+        return React.createElement(React.Fragment, null, core.formatQuantity(props.value));
     }
 
     function RangeDisplay(props) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, formatRangeString(props.value));
-    }
-    function formatRangeString(range) {
-        if (!range || (!range.low && !range.high)) {
-            return '';
-        }
-        if (range.low && !range.high) {
-            return `>= ${formatQuantityString(range.low)}`;
-        }
-        if (!range.low && range.high) {
-            return `<= ${formatQuantityString(range.high)}`;
-        }
-        return `${formatQuantityString(range.low)} - ${formatQuantityString(range.high)}`;
+        return React.createElement(React.Fragment, null, core.formatRange(props.value));
     }
 
     function RatioDisplay(props) {
@@ -1047,27 +1050,28 @@
         if (!value) {
             return null;
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(QuantityDisplay, { value: value.numerator }),
+        return (React.createElement(React.Fragment, null,
+            React.createElement(QuantityDisplay, { value: value.numerator }),
             "\u00A0/\u00A0",
-            React__default["default"].createElement(QuantityDisplay, { value: value.denominator })));
+            React.createElement(QuantityDisplay, { value: value.denominator })));
     }
 
     function MedplumLink(props) {
         const navigate = reactRouterDom.useNavigate();
-        let href = getHref(props.to);
-        if (props.suffix) {
-            href += '/' + props.suffix;
+        const { to, suffix, label, onClick, children } = props, rest = __rest(props, ["to", "suffix", "label", "onClick", "children"]);
+        let href = getHref(to);
+        if (suffix) {
+            href += '/' + suffix;
         }
-        return (React__default["default"].createElement("a", { href: href, id: props.id, "aria-label": props.label, "data-testid": props.testid || 'link', className: props.className, onClick: (e) => {
+        return (React.createElement(core$1.Anchor, Object.assign({ href: href, "aria-label": label, onClick: (e) => {
                 killEvent(e);
-                if (props.onClick) {
-                    props.onClick();
+                if (onClick) {
+                    onClick();
                 }
-                else if (props.to) {
+                else if (to) {
                     navigate(href);
                 }
-            } }, props.children));
+            } }, rest), children));
     }
     function getHref(to) {
         if (to) {
@@ -1104,10 +1108,10 @@
         // The "link" prop defaults to "true"; undefined is treated as "true"
         // To disable the link, it must be explicitly "false"
         if (props.link !== false && props.value.reference) {
-            return React__default["default"].createElement(MedplumLink, { to: props.value }, displayString);
+            return React.createElement(MedplumLink, { to: props.value }, displayString);
         }
         else {
-            return React__default["default"].createElement(React__default["default"].Fragment, null, displayString);
+            return React.createElement(React.Fragment, null, displayString);
         }
     }
 
@@ -1116,8 +1120,8 @@
         const property = props.property;
         const values = (_a = props.values) !== null && _a !== void 0 ? _a : [];
         const propertyType = (_c = (_b = property.type) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.code;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, values.map((v, index) => (React__default["default"].createElement("div", { key: `${index}-${values.length}` },
-            React__default["default"].createElement(ResourcePropertyDisplay, { arrayElement: true, property: property, propertyType: propertyType, value: v, ignoreMissingValues: props.ignoreMissingValues, link: props.link }))))));
+        return (React.createElement(React.Fragment, null, values.map((v, index) => (React.createElement("div", { key: `${index}-${values.length}` },
+            React.createElement(ResourcePropertyDisplay, { arrayElement: true, property: property, propertyType: propertyType, value: v, ignoreMissingValues: props.ignoreMissingValues, link: props.link }))))));
     }
 
     function ResourcePropertyDisplay(props) {
@@ -1125,13 +1129,13 @@
         const { property, propertyType, value } = props;
         if ((property === null || property === void 0 ? void 0 : property.max) === '*' && !props.arrayElement) {
             if (propertyType === 'Attachment') {
-                return React__default["default"].createElement(AttachmentArrayDisplay, { values: value, maxWidth: props.maxWidth });
+                return React.createElement(AttachmentArrayDisplay, { values: value, maxWidth: props.maxWidth });
             }
-            return (React__default["default"].createElement(ResourceArrayDisplay, { property: property, values: value, ignoreMissingValues: props.ignoreMissingValues, link: props.link }));
+            return (React.createElement(ResourceArrayDisplay, { property: property, values: value, ignoreMissingValues: props.ignoreMissingValues, link: props.link }));
         }
         switch (propertyType) {
             case core.PropertyType.boolean:
-                return React__default["default"].createElement("div", null, value === undefined ? '' : Boolean(value).toString());
+                return React.createElement(React.Fragment, null, value === undefined ? '' : Boolean(value).toString());
             case core.PropertyType.SystemString:
             case core.PropertyType.code:
             case core.PropertyType.date:
@@ -1141,49 +1145,49 @@
             case core.PropertyType.unsignedInt:
             case core.PropertyType.uri:
             case core.PropertyType.url:
-                return React__default["default"].createElement("div", null, value);
+                return React.createElement(React.Fragment, null, value);
             case core.PropertyType.canonical:
-                return React__default["default"].createElement(ReferenceDisplay, { value: { reference: value }, link: props.link });
+                return React.createElement(ReferenceDisplay, { value: { reference: value }, link: props.link });
             case core.PropertyType.dateTime:
             case core.PropertyType.instant:
-                return React__default["default"].createElement("div", null, core.formatDateTime(value));
+                return React.createElement(React.Fragment, null, core.formatDateTime(value));
             case core.PropertyType.markdown:
-                return React__default["default"].createElement("pre", null, value);
+                return React.createElement("pre", null, value);
             case core.PropertyType.Address:
-                return React__default["default"].createElement(AddressDisplay, { value: value });
+                return React.createElement(AddressDisplay, { value: value });
             case core.PropertyType.Annotation:
-                return React__default["default"].createElement("div", null, value === null || value === void 0 ? void 0 : value.text);
+                return React.createElement(React.Fragment, null, value === null || value === void 0 ? void 0 : value.text);
             case core.PropertyType.Attachment:
-                return React__default["default"].createElement(AttachmentDisplay, { value: value, maxWidth: props.maxWidth });
+                return React.createElement(AttachmentDisplay, { value: value, maxWidth: props.maxWidth });
             case core.PropertyType.CodeableConcept:
-                return React__default["default"].createElement(CodeableConceptDisplay, { value: value });
+                return React.createElement(CodeableConceptDisplay, { value: value });
             case core.PropertyType.Coding:
-                return React__default["default"].createElement(CodingDisplay, { value: value });
+                return React.createElement(CodingDisplay, { value: value });
             case core.PropertyType.ContactDetail:
-                return React__default["default"].createElement(ContactDetailDisplay, { value: value });
+                return React.createElement(ContactDetailDisplay, { value: value });
             case core.PropertyType.ContactPoint:
-                return React__default["default"].createElement(ContactPointDisplay, { value: value });
+                return React.createElement(ContactPointDisplay, { value: value });
             case core.PropertyType.HumanName:
-                return React__default["default"].createElement(HumanNameDisplay, { value: value });
+                return React.createElement(HumanNameDisplay, { value: value });
             case core.PropertyType.Identifier:
-                return React__default["default"].createElement(IdentifierDisplay, { value: value });
+                return React.createElement(IdentifierDisplay, { value: value });
             case core.PropertyType.Period:
-                return React__default["default"].createElement("div", null, core.formatPeriod(value));
+                return React.createElement(React.Fragment, null, core.formatPeriod(value));
             case core.PropertyType.Quantity:
-                return React__default["default"].createElement(QuantityDisplay, { value: value });
+                return React.createElement(QuantityDisplay, { value: value });
             case core.PropertyType.Range:
-                return React__default["default"].createElement(RangeDisplay, { value: value });
+                return React.createElement(RangeDisplay, { value: value });
             case core.PropertyType.Ratio:
-                return React__default["default"].createElement(RatioDisplay, { value: value });
+                return React.createElement(RatioDisplay, { value: value });
             case core.PropertyType.Reference:
-                return React__default["default"].createElement(ReferenceDisplay, { value: value, link: props.link });
+                return React.createElement(ReferenceDisplay, { value: value, link: props.link });
             case core.PropertyType.Timing:
-                return React__default["default"].createElement("div", null, core.formatTiming(value));
+                return React.createElement(React.Fragment, null, core.formatTiming(value));
             default:
                 if (!(property === null || property === void 0 ? void 0 : property.path)) {
                     throw Error(`Displaying property of type ${props.propertyType} requires element definition path`);
                 }
-                return (React__default["default"].createElement(BackboneElementDisplay, { value: { type: core.buildTypeName((_a = property === null || property === void 0 ? void 0 : property.path) === null || _a === void 0 ? void 0 : _a.split('.')), value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
+                return (React.createElement(BackboneElementDisplay, { value: { type: core.buildTypeName((_a = property === null || property === void 0 ? void 0 : property.path) === null || _a === void 0 ? void 0 : _a.split('.')), value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
         }
     }
     /**
@@ -1225,7 +1229,7 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
+        return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
     }
 
     function valueSetElementToAutocompleteItem(element) {
@@ -1238,8 +1242,8 @@
     function ValueSetAutocomplete(props) {
         const medplum = useMedplum();
         const { property, defaultValue } = props;
-        const [textValues, setTextValues] = React.useState(defaultValue ? [defaultValue.code] : []);
-        const [data, setData] = React.useState(defaultValue ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
+        const [textValues, setTextValues] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [defaultValue.code] : []);
+        const [data, setData] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.code) ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
         const dataRef = React.useRef();
         dataRef.current = data;
         const loadValues = React.useCallback((input) => __awaiter(this, void 0, void 0, function* () {
@@ -1249,7 +1253,7 @@
             const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
             const newData = [...dataRef.current];
             for (const valueSetElement of valueSetElements) {
-                if (!newData.some((item) => item.value === valueSetElement.code)) {
+                if (valueSetElement.code && !newData.some((item) => item.value === valueSetElement.code)) {
                     newData.push(valueSetElementToAutocompleteItem(valueSetElement));
                 }
             }
@@ -1274,7 +1278,7 @@
         React.useEffect(() => {
             loadValues('').catch(console.log);
         }, [loadValues]);
-        return (React__default["default"].createElement(core$1.MultiSelect, { data: data, placeholder: props.placeholder, searchable: true, creatable: true, clearable: true, value: textValues, filter: (value, selected, item) => {
+        return (React.createElement(core$1.MultiSelect, { data: data, placeholder: props.placeholder, searchable: true, creatable: true, clearable: true, value: textValues, filter: (value, selected, item) => {
                 var _a, _b;
                 return !!(textValues.length === 0 &&
                     !selected &&
@@ -1295,7 +1299,7 @@
                 props.onChange(newConcept);
             }
         }
-        return (React__default["default"].createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codeableConceptToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codeableConceptToValueSetElement(value), onChange: handleChange }));
     }
     function codeableConceptToValueSetElement(concept) {
         var _a, _b, _c, _d, _e, _f;
@@ -1327,7 +1331,7 @@
                 props.onChange(newCode);
             }
         }
-        return (React__default["default"].createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
     }
     function codeToValueSetElement(code) {
         return code ? { code } : undefined;
@@ -1345,7 +1349,7 @@
                 props.onChange(newConcept);
             }
         }
-        return (React__default["default"].createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codingToValueSetElement(value), onChange: handleChange }));
+        return (React.createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codingToValueSetElement(value), onChange: handleChange }));
     }
     function codingToValueSetElement(coding) {
         return {
@@ -1396,10 +1400,10 @@
             }
             setContactPointWrapper(newValue);
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "system", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: (e) => setSystem(e.currentTarget.value), data: ['', 'email', 'phone', 'fax', 'pager', 'sms', 'other'] }),
-            React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "use", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.use, onChange: (e) => setUse(e.currentTarget.value), data: ['', 'home', 'work', 'temp', 'old', 'mobile'] }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: (e) => setValue(e.currentTarget.value) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.NativeSelect, { "data-testid": "system", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: (e) => setSystem(e.currentTarget.value), data: ['', 'email', 'phone', 'fax', 'pager', 'sms', 'other'] }),
+            React.createElement(core$1.NativeSelect, { "data-testid": "use", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.use, onChange: (e) => setUse(e.currentTarget.value), data: ['', 'home', 'work', 'temp', 'old', 'mobile'] }),
+            React.createElement(core$1.TextInput, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: (e) => setValue(e.currentTarget.value) })));
     }
 
     function ContactDetailInput(props) {
@@ -1427,9 +1431,9 @@
             }
             setContactDetailWrapper(newValue);
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.TextInput, { "data-testid": props.name + '-name', name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: (e) => setName(e.currentTarget.value) }),
-            React__default["default"].createElement(ContactPointInput, { name: props.name + '-telecom', defaultValue: (_a = contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.telecom) === null || _a === void 0 ? void 0 : _a[0], onChange: setTelecom })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.TextInput, { "data-testid": props.name + '-name', name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: (e) => setName(e.currentTarget.value) }),
+            React.createElement(ContactPointInput, { name: props.name + '-telecom', defaultValue: (_a = contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.telecom) === null || _a === void 0 ? void 0 : _a[0], onChange: setTelecom })));
     }
 
     /**
@@ -1441,7 +1445,7 @@
      * @returns The JSX element to render.
      */
     function DateTimeInput(props) {
-        return (React__default["default"].createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, placeholder: props.placeholder, type: getInputType(), defaultValue: convertIsoToLocal(props.defaultValue), error: getErrorsForInput(props.outcome, props.name), onChange: (e) => {
+        return (React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, placeholder: props.placeholder, type: getInputType(), defaultValue: convertIsoToLocal(props.defaultValue), error: getErrorsForInput(props.outcome, props.name), onChange: (e) => {
                 if (props.onChange) {
                     const newValue = e.currentTarget.value;
                     props.onChange(convertLocalToIso(newValue));
@@ -1496,7 +1500,7 @@
     }
 
     function ExtensionInput(props) {
-        return (React__default["default"].createElement(core$1.JsonInput, { id: props.name, name: props.name, "data-testid": "extension-input", defaultValue: core.stringify(props.defaultValue), onChange: (newValue) => {
+        return (React.createElement(core$1.JsonInput, { id: props.name, name: props.name, "data-testid": "extension-input", defaultValue: core.stringify(props.defaultValue), onChange: (newValue) => {
                 if (props.onChange) {
                     props.onChange(JSON.parse(newValue));
                 }
@@ -1529,12 +1533,12 @@
         function setSuffix(suffix) {
             setValueWrapper(Object.assign(Object.assign({}, valueRef.current), { suffix: suffix ? suffix.split(' ') : undefined }));
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.NativeSelect, { defaultValue: value === null || value === void 0 ? void 0 : value.use, "data-testid": "use", onChange: (e) => setUse(e.currentTarget.value), data: ['', 'temp', 'old', 'usual', 'official', 'nickname', 'anonymous', 'maiden'] }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Prefix", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.prefix) === null || _a === void 0 ? void 0 : _a.join(' '), onChange: (e) => setPrefix(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Given", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.given) === null || _b === void 0 ? void 0 : _b.join(' '), onChange: (e) => setGiven(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Family", defaultValue: value === null || value === void 0 ? void 0 : value.family, onChange: (e) => setFamily(e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Suffix", defaultValue: (_c = value === null || value === void 0 ? void 0 : value.suffix) === null || _c === void 0 ? void 0 : _c.join(' '), onChange: (e) => setSuffix(e.currentTarget.value) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.NativeSelect, { defaultValue: value === null || value === void 0 ? void 0 : value.use, "data-testid": "use", onChange: (e) => setUse(e.currentTarget.value), data: ['', 'temp', 'old', 'usual', 'official', 'nickname', 'anonymous', 'maiden'] }),
+            React.createElement(core$1.TextInput, { placeholder: "Prefix", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.prefix) === null || _a === void 0 ? void 0 : _a.join(' '), onChange: (e) => setPrefix(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Given", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.given) === null || _b === void 0 ? void 0 : _b.join(' '), onChange: (e) => setGiven(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Family", defaultValue: value === null || value === void 0 ? void 0 : value.family, onChange: (e) => setFamily(e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { placeholder: "Suffix", defaultValue: (_c = value === null || value === void 0 ? void 0 : value.suffix) === null || _c === void 0 ? void 0 : _c.join(' '), onChange: (e) => setSuffix(e.currentTarget.value) })));
     }
 
     function IdentifierInput(props) {
@@ -1545,9 +1549,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "System", defaultValue: value === null || value === void 0 ? void 0 : value.system, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { system: e.currentTarget.value })) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Value", defaultValue: value === null || value === void 0 ? void 0 : value.value, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: e.currentTarget.value })) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.TextInput, { placeholder: "System", defaultValue: value === null || value === void 0 ? void 0 : value.system, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { system: e.currentTarget.value })) }),
+            React.createElement(core$1.TextInput, { placeholder: "Value", defaultValue: value === null || value === void 0 ? void 0 : value.value, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: e.currentTarget.value })) })));
     }
 
     function PeriodInput(props) {
@@ -1558,9 +1562,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(DateTimeInput, { name: props.name + '.start', placeholder: "Start", defaultValue: value === null || value === void 0 ? void 0 : value.start, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { start: newValue })) }),
-            React__default["default"].createElement(DateTimeInput, { name: props.name + '.end', placeholder: "End", defaultValue: value === null || value === void 0 ? void 0 : value.end, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { end: newValue })) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(DateTimeInput, { name: props.name + '.start', placeholder: "Start", defaultValue: value === null || value === void 0 ? void 0 : value.start, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { start: newValue })) }),
+            React.createElement(DateTimeInput, { name: props.name + '.end', placeholder: "End", defaultValue: value === null || value === void 0 ? void 0 : value.end, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { end: newValue })) })));
     }
 
     function QuantityInput(props) {
@@ -1572,10 +1576,10 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.NativeSelect, { style: { width: 80 }, "data-testid": props.name + '-comparator', defaultValue: value === null || value === void 0 ? void 0 : value.comparator, data: ['', '<', '<=', '>=', '>'], onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { comparator: e.currentTarget.value })) }),
-            React__default["default"].createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name, type: "number", step: "any", placeholder: "Value", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toString(), onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: tryParseNumber(e.currentTarget.value) })) }),
-            React__default["default"].createElement(core$1.TextInput, { placeholder: "Unit", defaultValue: value === null || value === void 0 ? void 0 : value.unit, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { unit: e.currentTarget.value })) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.NativeSelect, { style: { width: 80 }, "data-testid": props.name + '-comparator', defaultValue: value === null || value === void 0 ? void 0 : value.comparator, data: ['', '<', '<=', '>=', '>'], onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { comparator: e.currentTarget.value })) }),
+            React.createElement(core$1.TextInput, { id: props.name, name: props.name, "data-testid": props.name + '-value', type: "number", step: "any", placeholder: "Value", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.value) === null || _a === void 0 ? void 0 : _a.toString(), onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { value: tryParseNumber(e.currentTarget.value) })) }),
+            React.createElement(core$1.TextInput, { placeholder: "Unit", "data-testid": props.name + '-unit', defaultValue: value === null || value === void 0 ? void 0 : value.unit, onChange: (e) => setValueWrapper(Object.assign(Object.assign({}, value), { unit: e.currentTarget.value })) })));
     }
     function tryParseNumber(str) {
         if (!str) {
@@ -1598,9 +1602,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(QuantityInput, { name: props.name + '-low', defaultValue: value === null || value === void 0 ? void 0 : value.low, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { low: v })) }),
-            React__default["default"].createElement(QuantityInput, { name: props.name + '-high', defaultValue: value === null || value === void 0 ? void 0 : value.high, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { high: v })) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(QuantityInput, { name: props.name + '-low', defaultValue: value === null || value === void 0 ? void 0 : value.low, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { low: v })) }),
+            React.createElement(QuantityInput, { name: props.name + '-high', defaultValue: value === null || value === void 0 ? void 0 : value.high, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { high: v })) })));
     }
 
     /**
@@ -1617,9 +1621,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(QuantityInput, { name: props.name + '-numerator', defaultValue: value === null || value === void 0 ? void 0 : value.numerator, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { numerator: v })) }),
-            React__default["default"].createElement(QuantityInput, { name: props.name + '-denominator', defaultValue: value === null || value === void 0 ? void 0 : value.denominator, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { denominator: v })) })));
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(QuantityInput, { name: props.name + '-numerator', defaultValue: value === null || value === void 0 ? void 0 : value.numerator, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { numerator: v })) }),
+            React.createElement(QuantityInput, { name: props.name + '-denominator', defaultValue: value === null || value === void 0 ? void 0 : value.denominator, onChange: (v) => setValueWrapper(Object.assign(Object.assign({}, value), { denominator: v })) })));
     }
 
     function ResourceAvatar(props) {
@@ -1632,12 +1636,28 @@
         delete avatarProps.value;
         delete avatarProps.link;
         if (props.link) {
-            return (React__default["default"].createElement(MedplumLink, { to: resource },
-                React__default["default"].createElement(core$1.Avatar, Object.assign({ src: imageUrl, alt: text, radius: radius }, avatarProps))));
+            return (React.createElement(MedplumLink, { to: resource },
+                React.createElement(core$1.Avatar, Object.assign({ src: imageUrl, alt: text, radius: radius }, avatarProps))));
         }
-        return React__default["default"].createElement(core$1.Avatar, Object.assign({ src: imageUrl, alt: text, radius: radius }, avatarProps));
+        return React.createElement(core$1.Avatar, Object.assign({ src: imageUrl, alt: text, radius: radius }, avatarProps));
     }
 
+    /**
+     * Defines which search parameters will be used by the type ahead to search for each resourceType
+     */
+    const SEARCH_CODES = {
+        Schedule: '_id',
+        Task: '_id',
+        Patient: 'name',
+        Practitioner: 'name',
+        Questionnaire: 'name',
+        ServiceRequest: '_id',
+        DiagnosticReport: '_id',
+        Specimen: '_id',
+        Observation: 'code',
+        RequestGroup: '_id',
+        ActivityDefinition: 'name',
+    };
     function ResourceInput(props) {
         const medplum = useMedplum();
         const defaultValue = useResource(props.defaultValue);
@@ -1652,7 +1672,12 @@
         function loadValues(input) {
             return __awaiter(this, void 0, void 0, function* () {
                 setLoading(true);
-                const resources = yield medplum.searchResources(props.resourceType, 'name=' + encodeURIComponent(input) + '&_count=10');
+                const searchCode = SEARCH_CODES[props.resourceType] || 'name';
+                const searchParams = new URLSearchParams({
+                    [searchCode]: encodeURIComponent(input),
+                    _count: '10',
+                });
+                const resources = yield medplum.searchResources(props.resourceType, searchParams);
                 setData(resources.map((resource) => ({ value: core.getDisplayString(resource), resource })));
                 setLoading(false);
             });
@@ -1670,16 +1695,16 @@
                 props.onChange(item.resource);
             }
         }
-        return (React__default["default"].createElement(core$1.Autocomplete, { itemComponent: ItemComponent, value: value, data: data, placeholder: props.placeholder, onFocus: () => loadValues(value), onChange: handleChange, onItemSubmit: handleSelect, rightSection: loading ? React__default["default"].createElement(core$1.Loader, { size: 16 }) : null }));
+        return (React.createElement(core$1.Autocomplete, { itemComponent: ItemComponent, value: value, data: data, placeholder: props.placeholder, onFocus: () => loadValues(value), onChange: handleChange, onItemSubmit: handleSelect, rightSection: loading ? React.createElement(core$1.Loader, { size: 16 }) : null }));
     }
     const ItemComponent = React.forwardRef((_a, ref) => {
         var { value, resource } = _a, others = __rest(_a, ["value", "resource"]);
-        return (React__default["default"].createElement("div", Object.assign({ ref: ref }, others),
-            React__default["default"].createElement(core$1.Group, { noWrap: true },
-                React__default["default"].createElement(ResourceAvatar, { value: resource }),
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(core$1.Text, null, value),
-                    React__default["default"].createElement(core$1.Text, { size: "xs", color: "dimmed" }, resource.birthDate)))));
+        return (React.createElement("div", Object.assign({ 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, value),
+                    React.createElement(core$1.Text, { size: "xs", color: "dimmed" }, resource.birthDate)))));
     });
 
     function ReferenceInput(props) {
@@ -1697,9 +1722,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            targetTypes ? (React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "reference-input-resource-type-select", defaultValue: resourceType, onChange: (e) => setResourceType(e.currentTarget.value), data: targetTypes })) : (React__default["default"].createElement(core$1.TextInput, { "data-testid": "reference-input-resource-type-input", defaultValue: resourceType, onChange: (e) => setResourceType(e.currentTarget.value) })),
-            React__default["default"].createElement(ResourceInput, { resourceType: resourceType, name: props.name + '-id', placeholder: props.placeholder, defaultValue: value, onChange: (item) => {
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            targetTypes ? (React.createElement(core$1.NativeSelect, { "data-testid": "reference-input-resource-type-select", defaultValue: resourceType, onChange: (e) => setResourceType(e.currentTarget.value), data: targetTypes })) : (React.createElement(core$1.TextInput, { "data-testid": "reference-input-resource-type-input", defaultValue: resourceType, onChange: (e) => setResourceType(e.currentTarget.value) })),
+            React.createElement(ResourceInput, { resourceType: resourceType, name: props.name + '-id', placeholder: props.placeholder, defaultValue: value, onChange: (item) => {
                     setValueHelper(item ? core.createReference(item) : undefined);
                 } })));
     }
@@ -1725,36 +1750,36 @@
                 props.onChange(newValues);
             }
         }
-        return (React__default["default"].createElement("table", { style: { width: '100%', borderCollapse: 'collapse' } },
-            React__default["default"].createElement("colgroup", null,
-                React__default["default"].createElement("col", { width: "97%" }),
-                React__default["default"].createElement("col", { width: "3%" })),
-            React__default["default"].createElement("tbody", null,
-                values.map((v, index) => (React__default["default"].createElement("tr", { key: `${index}-${values.length}` },
-                    React__default["default"].createElement("td", null,
-                        React__default["default"].createElement(ResourcePropertyInput, { arrayElement: true, property: props.property, name: props.name + '.' + index, defaultValue: v, onChange: (newValue) => {
+        return (React.createElement("table", { style: { width: '100%', borderCollapse: 'collapse' } },
+            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(ResourcePropertyInput, { arrayElement: true, property: props.property, name: props.name + '.' + index, defaultValue: v, onChange: (newValue) => {
                                 const copy = [...valuesRef.current];
                                 copy[index] = newValue;
                                 setValuesWrapper(copy);
                             } })),
-                    React__default["default"].createElement("td", { style: { textAlign: 'right' } },
-                        React__default["default"].createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
+                    React.createElement("td", { style: { textAlign: 'right' } },
+                        React.createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
                                 killEvent(e);
                                 const copy = [...valuesRef.current];
                                 copy.splice(index, 1);
                                 setValuesWrapper(copy);
                             } },
-                            React__default["default"].createElement(icons.IconCircleMinus, null)))))),
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("td", null),
-                    React__default["default"].createElement("td", { style: { textAlign: 'right' } },
-                        React__default["default"].createElement(core$1.ActionIcon, { title: "Add", size: "sm", color: "green", onClick: (e) => {
+                            React.createElement(icons.IconCircleMinus, null)))))),
+                React.createElement("tr", null,
+                    React.createElement("td", null),
+                    React.createElement("td", { style: { textAlign: 'right' } },
+                        React.createElement(core$1.ActionIcon, { title: "Add", size: "sm", color: "green", onClick: (e) => {
                                 killEvent(e);
                                 const copy = [...valuesRef.current];
                                 copy.push(undefined);
                                 setValuesWrapper(copy);
                             } },
-                            React__default["default"].createElement(icons.IconCirclePlus, null)))))));
+                            React.createElement(icons.IconCirclePlus, null)))))));
     }
 
     const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
@@ -1763,11 +1788,11 @@
         const [open, setOpen] = React.useState(false);
         const valueRef = React.useRef();
         valueRef.current = value;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-                React__default["default"].createElement("span", null, core.formatTiming(valueRef.current) || 'No repeat'),
-                React__default["default"].createElement(core$1.Button, { onClick: () => setOpen(true) }, "Edit")),
-            React__default["default"].createElement(TimingEditorDialog, { visible: open, defaultValue: valueRef.current, onOk: (newValue) => {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+                React.createElement("span", null, core.formatTiming(valueRef.current) || 'No repeat'),
+                React.createElement(core$1.Button, { onClick: () => setOpen(true) }, "Edit")),
+            React.createElement(TimingEditorDialog, { visible: open, defaultValue: valueRef.current, onOk: (newValue) => {
                     if (props.onChange) {
                         props.onChange(newValue);
                     }
@@ -1816,24 +1841,24 @@
                 setRepeat(Object.assign(Object.assign({}, (_c = valueRef.current) === null || _c === void 0 ? void 0 : _c.repeat), { dayOfWeek: existing.filter((d) => d !== day) }));
             }
         }
-        return (React__default["default"].createElement(core$1.Modal, { title: "Timing", closeButtonLabel: "Close", opened: props.visible, onClose: () => props.onCancel() },
-            React__default["default"].createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
-                React__default["default"].createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
-                    React__default["default"].createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
-                React__default["default"].createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
-                    React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-                        React__default["default"].createElement(core$1.TextInput, { type: "number", step: 1, id: "timing-dialog-period", name: "timing-dialog-period", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (e) => setPeriod(parseInt(e.currentTarget.value)) }),
-                        React__default["default"].createElement(core$1.NativeSelect, { id: "timing-dialog-periodUnit", name: "timing-dialog-periodUnit", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (e) => setPeriodUnit(e.currentTarget.value), data: [
+        return (React.createElement(core$1.Modal, { title: "Timing", closeButtonLabel: "Close", opened: props.visible, onClose: () => props.onCancel() },
+            React.createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
+                React.createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
+                    React.createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
+                React.createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
+                    React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+                        React.createElement(core$1.TextInput, { type: "number", step: 1, id: "timing-dialog-period", name: "timing-dialog-period", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (e) => setPeriod(parseInt(e.currentTarget.value)) }),
+                        React.createElement(core$1.NativeSelect, { id: "timing-dialog-periodUnit", name: "timing-dialog-periodUnit", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (e) => setPeriodUnit(e.currentTarget.value), data: [
                                 { label: 'day', value: 'd' },
                                 { label: 'week', value: 'wk' },
                                 { label: 'month', value: 'mo' },
                                 { label: 'year', value: 'a' },
                             ] }))),
-                React__default["default"].createElement(FormSection, { title: "Repeat on" },
-                    React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true }, daysOfWeek.map((day) => (React__default["default"].createElement(React__default["default"].Fragment, { key: day },
-                        React__default["default"].createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
-                        React__default["default"].createElement(core$1.Checkbox, { id: 'timing-dialog-repeat-' + day, name: 'timing-dialog-repeat-' + day, onChange: (e) => setDayOfWeek(day, e.currentTarget.checked) }))))))),
-            React__default["default"].createElement(core$1.Button, { onClick: () => props.onOk(value) }, "OK")));
+                React.createElement(FormSection, { title: "Repeat on" },
+                    React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true }, daysOfWeek.map((day) => (React.createElement(React.Fragment, { key: day },
+                        React.createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
+                        React.createElement(core$1.Checkbox, { id: 'timing-dialog-repeat-' + day, name: 'timing-dialog-repeat-' + day, onChange: (e) => setDayOfWeek(day, e.currentTarget.checked) }))))))),
+            React.createElement(core$1.Button, { onClick: () => props.onOk(value) }, "OK")));
     }
 
     function ResourcePropertyInput(props) {
@@ -1844,16 +1869,16 @@
         const value = props.defaultValue;
         if (property.max === '*' && !props.arrayElement) {
             if (propertyType === 'Attachment') {
-                return React__default["default"].createElement(AttachmentArrayInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(AttachmentArrayInput, { name: name, defaultValue: value, onChange: props.onChange });
             }
-            return React__default["default"].createElement(ResourceArrayInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+            return React.createElement(ResourceArrayInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
         }
         const propertyTypes = property.type;
         if (propertyTypes.length > 1) {
-            return React__default["default"].createElement(ElementDefinitionInputSelector, Object.assign({ elementDefinitionTypes: propertyTypes }, props));
+            return React.createElement(ElementDefinitionInputSelector, Object.assign({ elementDefinitionTypes: propertyTypes }, props));
         }
         else {
-            return React__default["default"].createElement(ElementDefinitionTypeInput, Object.assign({ elementDefinitionType: propertyTypes[0] }, props));
+            return React.createElement(ElementDefinitionTypeInput, Object.assign({ elementDefinitionType: propertyTypes[0] }, props));
         }
     }
     function ElementDefinitionInputSelector(props) {
@@ -1866,14 +1891,14 @@
             initialPropertyType = propertyTypes[0];
         }
         const [selectedType, setSelectedType] = React.useState(initialPropertyType);
-        return (React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-            React__default["default"].createElement(core$1.NativeSelect, { style: { width: '200px' }, defaultValue: selectedType === null || selectedType === void 0 ? void 0 : selectedType.code, onChange: (e) => {
+        return (React.createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
+            React.createElement(core$1.NativeSelect, { style: { width: '200px' }, defaultValue: selectedType === null || selectedType === void 0 ? void 0 : selectedType.code, onChange: (e) => {
                     setSelectedType(propertyTypes.find((type) => type.code === e.currentTarget.value));
                 }, data: propertyTypes.map((type) => ({
                     value: type.code,
                     label: type.code,
                 })) }),
-            React__default["default"].createElement(ElementDefinitionTypeInput, Object.assign({}, props, { elementDefinitionType: selectedType, onChange: (newValue) => {
+            React.createElement(ElementDefinitionTypeInput, Object.assign({}, props, { elementDefinitionType: selectedType, onChange: (newValue) => {
                     if (props.onChange) {
                         props.onChange(newValue, props.name.replace('[x]', core.capitalize(selectedType.code)));
                     }
@@ -1894,39 +1919,39 @@
             case core.PropertyType.time:
             case core.PropertyType.uri:
             case core.PropertyType.url:
-                return (React__default["default"].createElement(core$1.TextInput, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
                     }, error: getErrorsForInput(props.outcome, name) }));
             case core.PropertyType.date:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "date", id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { type: "date", id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
                     }, error: getErrorsForInput(props.outcome, name) }));
             case core.PropertyType.dateTime:
             case core.PropertyType.instant:
-                return React__default["default"].createElement(DateTimeInput, { name: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome });
+                return React.createElement(DateTimeInput, { name: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome });
             case core.PropertyType.decimal:
             case core.PropertyType.integer:
             case core.PropertyType.positiveInt:
             case core.PropertyType.unsignedInt:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "number", step: propertyType === core.PropertyType.decimal ? 'any' : '1', id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.TextInput, { type: "number", step: propertyType === core.PropertyType.decimal ? 'any' : '1', id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.valueAsNumber);
                         }
                     } }));
             case core.PropertyType.code:
-                return React__default["default"].createElement(CodeInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(CodeInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.boolean:
-                return (React__default["default"].createElement(core$1.Checkbox, { id: name, name: name, "data-testid": name, defaultChecked: !!value, onChange: (e) => {
+                return (React.createElement(core$1.Checkbox, { id: name, name: name, "data-testid": name, defaultChecked: !!value, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.checked);
                         }
                     } }));
             case core.PropertyType.markdown:
-                return (React__default["default"].createElement(core$1.Textarea, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                return (React.createElement(core$1.Textarea, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
                         if (props.onChange) {
                             props.onChange(e.currentTarget.value);
                         }
@@ -1934,39 +1959,39 @@
             // 2.24.0.2 Complex Types
             // https://www.hl7.org/fhir/datatypes.html#complex
             case core.PropertyType.Address:
-                return React__default["default"].createElement(AddressInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(AddressInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Annotation:
-                return React__default["default"].createElement(AnnotationInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(AnnotationInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Attachment:
-                return React__default["default"].createElement(AttachmentInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(AttachmentInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.CodeableConcept:
-                return React__default["default"].createElement(CodeableConceptInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(CodeableConceptInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Coding:
-                return React__default["default"].createElement(CodingInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(CodingInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.ContactDetail:
-                return React__default["default"].createElement(ContactDetailInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(ContactDetailInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.ContactPoint:
-                return React__default["default"].createElement(ContactPointInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(ContactPointInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Extension:
-                return React__default["default"].createElement(ExtensionInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(ExtensionInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.HumanName:
-                return React__default["default"].createElement(HumanNameInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(HumanNameInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Identifier:
-                return React__default["default"].createElement(IdentifierInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(IdentifierInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Period:
-                return React__default["default"].createElement(PeriodInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(PeriodInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Quantity:
-                return React__default["default"].createElement(QuantityInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(QuantityInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Range:
-                return React__default["default"].createElement(RangeInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(RangeInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Ratio:
-                return React__default["default"].createElement(RatioInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(RatioInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Reference:
-                return (React__default["default"].createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
+                return (React.createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
             case core.PropertyType.Timing:
-                return React__default["default"].createElement(TimingInput, { name: name, defaultValue: value, onChange: props.onChange });
+                return React.createElement(TimingInput, { name: name, defaultValue: value, onChange: props.onChange });
             default:
-                return (React__default["default"].createElement(BackboneElementInput, { typeName: core.buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+                return (React.createElement(BackboneElementInput, { typeName: core.buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
         }
     }
     function getTargetTypes(property) {
@@ -1986,12 +2011,12 @@
         const typeName = props.typeName;
         const typeSchema = core.globalSchema.types[typeName];
         if (!typeSchema) {
-            return React__default["default"].createElement("div", null,
+            return React.createElement("div", null,
                 typeName,
                 "\u00A0not implemented");
         }
         const typedValue = { type: typeName, value };
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(typeSchema.properties).map((entry) => {
+        return (React.createElement(core$1.Stack, null, Object.entries(typeSchema.properties).map((entry) => {
             const key = entry[0];
             if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
                 return null;
@@ -2002,33 +2027,53 @@
             }
             const [propertyValue, propertyType] = getValueAndType(typedValue, key);
             if (property.type.length === 1 && property.type[0].code === 'boolean') {
-                return (React__default["default"].createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
-                    React__default["default"].createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
+                    React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
                             setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
                         } })));
             }
-            return (React__default["default"].createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
-                React__default["default"].createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
                         setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
                     } })));
         })));
     }
 
     function ResourceName(props) {
-        const resource = useResource(props.value);
+        const { value, link } = props, rest = __rest(props, ["value", "link"]);
+        const resource = useResource(value);
         if (!resource) {
             return null;
         }
         const text = core.getDisplayString(resource);
-        return props.link ? React__default["default"].createElement(MedplumLink, { to: resource }, text) : React__default["default"].createElement("span", null, text);
+        return link ? (React.createElement(MedplumLink, Object.assign({ to: resource }, rest), text)) : (React.createElement(core$1.Text, Object.assign({ component: "span" }, rest), text));
     }
 
     function ResourceBadge(props) {
-        return (React__default["default"].createElement("div", { className: "medplum-resource-badge" },
-            React__default["default"].createElement(ResourceAvatar, { size: 24, radius: 12, value: props.value, link: props.link }),
-            React__default["default"].createElement(ResourceName, { value: props.value, link: props.link })));
+        return (React.createElement(core$1.Group, { spacing: "xs" },
+            React.createElement(ResourceAvatar, { size: 24, radius: 12, value: props.value, link: props.link }),
+            React.createElement(ResourceName, { value: props.value, link: props.link })));
     }
 
+    const useStyles$a = core$1.createStyles((theme) => ({
+        table: {
+            border: `0.1px solid ${theme.colors.gray[5]}`,
+            borderCollapse: 'collapse',
+            '& td, & th': {
+                border: `0.1px solid ${theme.colors.gray[5]}`,
+                padding: 4,
+            },
+        },
+        criticalRow: {
+            background: theme.colorScheme === 'dark' ? theme.colors.red[7] : theme.colors.red[1],
+            border: `0.1px solid ${theme.colors.red[5]}`,
+            color: theme.colors.red[5],
+            fontWeight: 500,
+            '& td': {
+                border: `0.1px solid ${theme.colors.red[5]}`,
+            },
+        },
+    }));
     function DiagnosticReportDisplay(props) {
         var _a, _b;
         const diagnosticReport = useResource(props.value);
@@ -2048,69 +2093,68 @@
                 textContent += note.text + '\n\n';
             }
         }
-        return (React__default["default"].createElement("div", { className: "medplum-diagnostic-report" },
-            React__default["default"].createElement("h1", null, "Diagnostic Report"),
-            React__default["default"].createElement("div", { className: "medplum-diagnostic-report-header" },
-                diagnosticReport.subject && (React__default["default"].createElement("dl", null,
-                    React__default["default"].createElement("dt", null, "Subject"),
-                    React__default["default"].createElement("dd", null,
-                        React__default["default"].createElement(ResourceBadge, { value: diagnosticReport.subject, link: true })))),
+        return (React.createElement(core$1.Stack, null,
+            React.createElement(core$1.Title, null, "Diagnostic Report"),
+            React.createElement(core$1.Group, { mt: "md", spacing: 30 },
+                diagnosticReport.subject && (React.createElement("div", null,
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
+                    React.createElement(core$1.Text, null,
+                        React.createElement(ResourceBadge, { value: diagnosticReport.subject, link: true })))),
                 diagnosticReport.resultsInterpreter &&
-                    diagnosticReport.resultsInterpreter.map((interpreter) => (React__default["default"].createElement("dl", { key: interpreter.reference },
-                        React__default["default"].createElement("dt", null, "Interpreter"),
-                        React__default["default"].createElement("dd", null,
-                            React__default["default"].createElement(ResourceBadge, { value: interpreter, link: true }))))),
-                diagnosticReport.issued && (React__default["default"].createElement("dl", null,
-                    React__default["default"].createElement("dt", null, "Issued"),
-                    React__default["default"].createElement("dd", null, core.formatDateTime(diagnosticReport.issued)))),
-                diagnosticReport.status && (React__default["default"].createElement("dl", null,
-                    React__default["default"].createElement("dt", null, "Status"),
-                    React__default["default"].createElement("dd", null, core.capitalize(diagnosticReport.status))))),
-            diagnosticReport.result && React__default["default"].createElement(ObservationTable, { value: diagnosticReport.result }),
-            textContent && React__default["default"].createElement("pre", null, textContent.trim())));
+                    diagnosticReport.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
+                        React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
+                        React.createElement(core$1.Text, null,
+                            React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
+                diagnosticReport.issued && (React.createElement("div", null,
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
+                    React.createElement(core$1.Text, null, core.formatDateTime(diagnosticReport.issued)))),
+                diagnosticReport.status && (React.createElement("div", null,
+                    React.createElement(core$1.Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
+                    React.createElement(core$1.Text, null, core.capitalize(diagnosticReport.status))))),
+            diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result }),
+            textContent && React.createElement("pre", null, textContent.trim())));
     }
     function ObservationTable(props) {
         var _a;
-        return (React__default["default"].createElement(core$1.Table, { withBorder: true, withColumnBorders: true },
-            React__default["default"].createElement("thead", null,
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", null, "Test"),
-                    React__default["default"].createElement("th", null, "Value"),
-                    React__default["default"].createElement("th", null, "Reference Range"),
-                    React__default["default"].createElement("th", null, "Interpretation"))),
-            React__default["default"].createElement("tbody", null, (_a = props.value) === null || _a === void 0 ? void 0 : _a.map((observation, index) => (React__default["default"].createElement(ObservationRow, { key: 'obs-' + index, value: observation }))))));
+        const { classes } = useStyles$a();
+        return (React.createElement("table", { className: classes.table },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "Test"),
+                    React.createElement("th", null, "Value"),
+                    React.createElement("th", null, "Reference Range"),
+                    React.createElement("th", null, "Interpretation"))),
+            React.createElement("tbody", null, (_a = props.value) === null || _a === void 0 ? void 0 : _a.map((observation, index) => (React.createElement(ObservationRow, { key: 'obs-' + index, value: observation }))))));
     }
     function ObservationRow(props) {
+        const { classes, cx } = useStyles$a();
         const observation = useResource(props.value);
         if (!observation) {
             return null;
         }
-        let className = undefined;
-        if (isCritical(observation)) {
-            className = 'medplum-critical';
-        }
-        return (React__default["default"].createElement("tr", { className: className },
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(MedplumLink, { to: observation },
-                    React__default["default"].createElement(CodeableConceptDisplay, { value: observation.code }))),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(ObservationValueDisplay, { value: observation })),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(ReferenceRangeDisplay, { value: observation.referenceRange })),
-            React__default["default"].createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React__default["default"].createElement(CodeableConceptDisplay, { value: observation.interpretation[0] })))));
+        const critical = isCritical(observation);
+        return (React.createElement("tr", { className: cx({ [classes.criticalRow]: critical }) },
+            React.createElement("td", null,
+                React.createElement(MedplumLink, { to: observation },
+                    React.createElement(CodeableConceptDisplay, { value: observation.code }))),
+            React.createElement("td", null,
+                React.createElement(ObservationValueDisplay, { value: observation })),
+            React.createElement("td", null,
+                React.createElement(ReferenceRangeDisplay, { value: observation.referenceRange })),
+            React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] })))));
     }
     function ObservationValueDisplay(props) {
         var _a;
         const obs = props.value;
         if (obs === null || obs === void 0 ? void 0 : obs.valueQuantity) {
-            return React__default["default"].createElement(QuantityDisplay, { value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.valueQuantity });
+            return React.createElement(QuantityDisplay, { value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.valueQuantity });
         }
         if (obs === null || obs === void 0 ? void 0 : obs.valueString) {
-            return React__default["default"].createElement(React__default["default"].Fragment, null, obs.valueString);
+            return React.createElement(React.Fragment, null, obs.valueString);
         }
         if (obs && 'component' in obs && (obs === null || obs === void 0 ? void 0 : obs.component)) {
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, obs.component
-                .map((component, index) => (React__default["default"].createElement(ObservationValueDisplay, { key: `obs-${index}`, value: component })))
+            return (React.createElement(React.Fragment, null, obs.component
+                .map((component, index) => (React.createElement(ObservationValueDisplay, { key: `obs-${index}`, value: component })))
                 .reduce((prev, curr) => [prev, ' / ', curr])));
         }
         return null;
@@ -2121,9 +2165,9 @@
             return null;
         }
         if (range.text) {
-            return React__default["default"].createElement(React__default["default"].Fragment, null, range.text);
+            return React.createElement(React.Fragment, null, range.text);
         }
-        return React__default["default"].createElement(RangeDisplay, { value: range });
+        return React.createElement(RangeDisplay, { value: range });
     }
     /**
      * Returns true if the observation is critical.
@@ -2134,10 +2178,31 @@
     function isCritical(observation) {
         var _a, _b, _c, _d;
         const code = (_d = (_c = (_b = (_a = observation.interpretation) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code;
-        return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';
+        return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
+    const useStyles$9 = core$1.createStyles((theme) => ({
+        root: {
+            borderCollapse: 'collapse',
+            width: '100%',
+            '& tr': {
+                borderTop: `0.1px solid ${theme.colors.gray[3]}`,
+            },
+            '& th, & td': {
+                padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,
+                verticalAlign: 'top',
+            },
+        },
+        removed: {
+            color: theme.colors.red[7],
+            textDecoration: 'line-through',
+        },
+        added: {
+            color: theme.colors.green[7],
+        },
+    }));
     function ResourceDiffTable(props) {
+        const { classes } = useStyles$9();
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
@@ -2150,17 +2215,17 @@
         if (!typeSchema) {
             return null;
         }
-        return (React__default["default"].createElement("table", { className: "medplum-diff-table" },
-            React__default["default"].createElement("colgroup", null,
-                React__default["default"].createElement("col", { style: { width: '30%' } }),
-                React__default["default"].createElement("col", { style: { width: '35%' } }),
-                React__default["default"].createElement("col", { style: { width: '35%' } })),
-            React__default["default"].createElement("thead", null,
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", null, "Property"),
-                    React__default["default"].createElement("th", null, "Before"),
-                    React__default["default"].createElement("th", null, "After"))),
-            React__default["default"].createElement("tbody", null, Object.entries(typeSchema.properties).map((entry) => {
+        return (React.createElement("table", { className: classes.root },
+            React.createElement("colgroup", null,
+                React.createElement("col", { style: { width: '30%' } }),
+                React.createElement("col", { style: { width: '35%' } }),
+                React.createElement("col", { style: { width: '35%' } })),
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "Property"),
+                    React.createElement("th", null, "Before"),
+                    React.createElement("th", null, "After"))),
+            React.createElement("tbody", null, Object.entries(typeSchema.properties).map((entry) => {
                 const key = entry[0];
                 if (key === 'id' || key === 'meta') {
                     return null;
@@ -2174,12 +2239,12 @@
                 if (core.stringify(originalPropertyValue) === core.stringify(revisedPropertyValue)) {
                     return null;
                 }
-                return (React__default["default"].createElement("tr", { key: key },
-                    React__default["default"].createElement("td", null, core.getPropertyDisplayName(key)),
-                    React__default["default"].createElement("td", { className: "medplum-diff-removed" },
-                        React__default["default"].createElement(ResourcePropertyDisplay, { property: property, propertyType: originalPropertyType, value: originalPropertyValue, ignoreMissingValues: true })),
-                    React__default["default"].createElement("td", { className: "medplum-diff-added" },
-                        React__default["default"].createElement(ResourcePropertyDisplay, { property: property, propertyType: revisedPropertyType, value: revisedPropertyValue, ignoreMissingValues: true }))));
+                return (React.createElement("tr", { key: key },
+                    React.createElement("td", null, core.getPropertyDisplayName(key)),
+                    React.createElement("td", { className: classes.removed },
+                        React.createElement(ResourcePropertyDisplay, { property: property, propertyType: originalPropertyType, value: originalPropertyValue, ignoreMissingValues: true })),
+                    React.createElement("td", { className: classes.added },
+                        React.createElement(ResourcePropertyDisplay, { property: property, propertyType: revisedPropertyType, value: revisedPropertyValue, ignoreMissingValues: true }))));
             }))));
     }
     function isEmpty(value) {
@@ -2200,14 +2265,14 @@
         if (!schema || !value) {
             return null;
         }
-        return (React__default["default"].createElement(BackboneElementDisplay, { value: { type: value.resourceType, value }, ignoreMissingValues: props.ignoreMissingValues }));
+        return (React.createElement(BackboneElementDisplay, { value: { type: value.resourceType, value }, 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__default["default"].Component {
+    class ErrorBoundary extends React.Component {
         constructor(props) {
             super(props);
             this.state = {};
@@ -2220,39 +2285,36 @@
         }
         render() {
             if (this.state.error) {
-                return React__default["default"].createElement("h1", null, "Something went wrong.");
+                return (React.createElement(core$1.Alert, { icon: React.createElement(icons.IconAlertCircle, { size: 16 }), title: "Something went wrong", color: "red" }, core.normalizeErrorString(this.state.error)));
             }
             return this.props.children;
         }
     }
 
     function Timeline(props) {
-        return React__default["default"].createElement("main", { className: "medplum-document medplum-timeline" }, props.children);
+        return React.createElement(core$1.Container, null, props.children);
     }
     function TimelineItem(props) {
         var _a, _b, _c;
         const author = (_a = props.profile) !== null && _a !== void 0 ? _a : (_b = props.resource.meta) === null || _b === void 0 ? void 0 : _b.author;
-        return (React__default["default"].createElement("article", { className: props.className || 'medplum-timeline-item', "data-testid": "timeline-item" },
-            React__default["default"].createElement("div", { className: "medplum-timeline-item-header" },
-                React__default["default"].createElement("div", { className: "medplum-timeline-item-avatar" },
-                    React__default["default"].createElement(ResourceAvatar, { value: author, link: true, size: "md" })),
-                React__default["default"].createElement("div", { className: "medplum-timeline-item-title" },
-                    React__default["default"].createElement(ResourceName, { value: author, link: true }),
-                    React__default["default"].createElement("div", { className: "medplum-timeline-item-subtitle" },
-                        React__default["default"].createElement(MedplumLink, { to: props.resource }, core.formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
-                        React__default["default"].createElement("span", null, "\u00B7"),
-                        React__default["default"].createElement(MedplumLink, { to: props.resource }, props.resource.resourceType))),
-                props.popupMenuItems && (React__default["default"].createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
-                    React__default["default"].createElement(core$1.Menu.Target, null,
-                        React__default["default"].createElement(core$1.ActionIcon, { radius: "xl", "aria-label": `Actions for ${core.getReferenceString(props.resource)}` },
-                            React__default["default"].createElement(icons.IconDots, null))),
+        return (React.createElement(core$1.Paper, { "data-testid": "timeline-item", m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true, className: props.className },
+            React.createElement(core$1.Group, { position: "apart", spacing: 8 },
+                React.createElement(ResourceAvatar, { value: author, link: true, size: "md" }),
+                React.createElement("div", { style: { flex: 1 } },
+                    React.createElement(core$1.Text, { size: "sm" },
+                        React.createElement(ResourceName, { color: "dark", weight: 500, value: author, link: true })),
+                    React.createElement(core$1.Text, { size: "xs" },
+                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
+                        React.createElement(core$1.Text, { component: "span", color: "dimmed", mx: 8 }, "\u00B7"),
+                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, props.resource.resourceType))),
+                props.popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
+                    React.createElement(core$1.Menu.Target, null,
+                        React.createElement(core$1.ActionIcon, { radius: "xl", "aria-label": `Actions for ${core.getReferenceString(props.resource)}` },
+                            React.createElement(icons.IconDots, null))),
                     props.popupMenuItems))),
-            React__default["default"].createElement(ErrorBoundary, null,
-                props.padding && React__default["default"].createElement("div", { style: { padding: '2px 16px 16px 16px' } }, props.children),
-                !props.padding && React__default["default"].createElement(React__default["default"].Fragment, null, props.children)),
-            props.socialEnabled && (React__default["default"].createElement("div", { className: "medplum-timeline-item-footer" },
-                React__default["default"].createElement(core$1.Button, { variant: "subtle" }, "Like"),
-                React__default["default"].createElement(core$1.Button, { variant: "subtle" }, "Comment")))));
+            React.createElement(ErrorBoundary, null,
+                props.padding && React.createElement("div", { style: { padding: '2px 16px 16px 16px' } }, props.children),
+                !props.padding && React.createElement(React.Fragment, null, props.children))));
     }
 
     /**
@@ -2301,6 +2363,11 @@
         return new Date(dateTime).getTime();
     }
 
+    const useStyles$8 = core$1.createStyles((theme) => ({
+        pinnedComment: {
+            backgroundColor: theme.colors.blue[0],
+        },
+    }));
     function ResourceTimeline(props) {
         const navigate = reactRouterDom.useNavigate();
         const medplum = useMedplum();
@@ -2389,10 +2456,23 @@
             }
             medplum
                 .createResource(props.createMedia(resource, sender, attachment))
-                .then((result) => {
-                addResources([result]);
-            })
-                .catch(console.log);
+                .then((result) => addResources([result]))
+                .then(() => notifications.updateNotification({
+                id: 'upload-notification',
+                color: 'teal',
+                title: 'Upload complete',
+                message: '',
+                icon: React.createElement(icons.IconCheck, { size: 16 }),
+                autoClose: 2000,
+            }))
+                .catch((reason) => notifications.updateNotification({
+                id: 'upload-notification',
+                color: 'red',
+                title: 'Upload error',
+                message: core.normalizeErrorString(reason),
+                icon: React.createElement(icons.IconFileAlert, { size: 16 }),
+                autoClose: 2000,
+            }));
         }
         function setPriority(communication, priority) {
             return medplum.updateResource(Object.assign(Object.assign({}, communication), { priority }));
@@ -2416,70 +2496,90 @@
             var _a;
             navigate(`/${version.resourceType}/${version.id}/_history/${(_a = version.meta) === null || _a === void 0 ? void 0 : _a.versionId}`);
         }
+        function onUploadStart() {
+            notifications.showNotification({
+                id: 'upload-notification',
+                loading: true,
+                title: 'Initializing upload...',
+                message: 'Please wait...',
+                autoClose: false,
+                disallowClose: true,
+            });
+        }
+        function onUploadProgress(e) {
+            notifications.updateNotification({
+                id: 'upload-notification',
+                loading: true,
+                title: 'Uploading...',
+                message: getProgressMessage(e),
+                autoClose: false,
+                disallowClose: true,
+            });
+        }
         if (!resource || !history) {
-            return React__default["default"].createElement(core$1.Loader, null);
-        }
-        return (React__default["default"].createElement(Timeline, null,
-            props.createCommunication && (React__default["default"].createElement("article", { className: "medplum-timeline-item" },
-                React__default["default"].createElement("div", { className: "medplum-timeline-item-header" },
-                    React__default["default"].createElement(Form, { testid: "timeline-form", onSubmit: (formData) => {
-                            createComment(formData.text);
-                            const input = inputRef.current;
-                            if (input) {
-                                input.value = '';
-                                input.focus();
-                            }
-                        } },
-                        React__default["default"].createElement(core$1.Group, { spacing: "xs", noWrap: true, style: { width: '100%' } },
-                            React__default["default"].createElement(ResourceAvatar, { value: sender }),
-                            React__default["default"].createElement(core$1.TextInput, { name: "text", ref: inputRef, placeholder: "Add comment", style: { width: '100%', maxWidth: 300 } }),
-                            React__default["default"].createElement(core$1.ActionIcon, { type: "submit", radius: "xl", color: "blue", variant: "filled" },
-                                React__default["default"].createElement(icons.IconMessage, { size: 16 })),
-                            React__default["default"].createElement(AttachmentButton, { onUpload: createMedia }, (props) => (React__default["default"].createElement(core$1.ActionIcon, Object.assign({}, props, { radius: "xl", color: "blue", variant: "filled" }),
-                                React__default["default"].createElement(icons.IconCloudUpload, { size: 16 }))))))))),
+            return (React.createElement(core$1.Center, { style: { width: '100%', height: '100%' } },
+                React.createElement(core$1.Loader, null)));
+        }
+        return (React.createElement(Timeline, null,
+            props.createCommunication && (React.createElement(core$1.Paper, { m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true },
+                React.createElement(Form, { testid: "timeline-form", onSubmit: (formData) => {
+                        createComment(formData.text);
+                        const input = inputRef.current;
+                        if (input) {
+                            input.value = '';
+                            input.focus();
+                        }
+                    } },
+                    React.createElement(core$1.Group, { spacing: "xs", noWrap: true, style: { width: '100%' } },
+                        React.createElement(ResourceAvatar, { value: sender }),
+                        React.createElement(core$1.TextInput, { name: "text", ref: inputRef, placeholder: "Add comment", style: { width: '100%', maxWidth: 300 } }),
+                        React.createElement(core$1.ActionIcon, { type: "submit", radius: "xl", color: "blue", variant: "filled" },
+                            React.createElement(icons.IconMessage, { size: 16 })),
+                        React.createElement(AttachmentButton, { onUpload: createMedia, onUploadStart: onUploadStart, onUploadProgress: onUploadProgress }, (props) => (React.createElement(core$1.ActionIcon, Object.assign({}, props, { radius: "xl", color: "blue", variant: "filled" }),
+                            React.createElement(icons.IconCloudUpload, { size: 16 })))))))),
             items.map((item) => {
                 var _a;
                 if (item.resourceType === resource.resourceType && item.id === resource.id) {
-                    return (React__default["default"].createElement(HistoryTimelineItem, { key: (_a = item.meta) === null || _a === void 0 ? void 0 : _a.versionId, history: history, resource: item, onDetails: onVersionDetails }));
+                    return (React.createElement(HistoryTimelineItem, { key: (_a = item.meta) === null || _a === void 0 ? void 0 : _a.versionId, history: history, resource: item, onDetails: onVersionDetails }));
                 }
                 const key = `${item.resourceType}/${item.id}`;
                 switch (item.resourceType) {
                     case 'AuditEvent':
-                        return React__default["default"].createElement(AuditEventTimelineItem, { key: key, resource: item, onDetails: onDetails });
+                        return React.createElement(AuditEventTimelineItem, { key: key, resource: item, onDetails: onDetails });
                     case 'Communication':
-                        return (React__default["default"].createElement(CommunicationTimelineItem, { key: key, resource: item, onPin: item.priority !== 'stat' ? onPin : undefined, onUnpin: item.priority === 'stat' ? onUnpin : undefined, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
+                        return (React.createElement(CommunicationTimelineItem, { key: key, resource: item, onPin: item.priority !== 'stat' ? onPin : undefined, onUnpin: item.priority === 'stat' ? onUnpin : undefined, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
                     case 'DiagnosticReport':
-                        return (React__default["default"].createElement(DiagnosticReportTimelineItem, { key: key, resource: item, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
+                        return (React.createElement(DiagnosticReportTimelineItem, { key: key, resource: item, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
                     case 'Media':
-                        return (React__default["default"].createElement(MediaTimelineItem, { key: key, resource: item, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
+                        return (React.createElement(MediaTimelineItem, { key: key, resource: item, onDetails: onDetails, onEdit: onEdit, onDelete: onDelete }));
                     default:
-                        return (React__default["default"].createElement(TimelineItem, { key: key, resource: item, padding: true },
-                            React__default["default"].createElement(ResourceTable, { value: item, ignoreMissingValues: true })));
+                        return (React.createElement(TimelineItem, { key: key, resource: item, padding: true },
+                            React.createElement(ResourceTable, { value: item, ignoreMissingValues: true })));
                 }
             })));
     }
     function TimelineItemPopupMenu(props) {
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null,
-            React__default["default"].createElement(core$1.Menu.Label, null, "Resource"),
-            props.onPin && (React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconPin, { size: 14 }), onClick: () => props.onPin(props.resource), "aria-label": `Pin ${core.getReferenceString(props.resource)}` }, "Pin")),
-            props.onUnpin && (React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconPinnedOff, { size: 14 }), onClick: () => props.onUnpin(props.resource), "aria-label": `Unpin ${core.getReferenceString(props.resource)}` }, "Unpin")),
-            props.onDetails && (React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconListDetails, { size: 14 }), onClick: () => props.onDetails(props.resource), "aria-label": `Details ${core.getReferenceString(props.resource)}` }, "Details")),
-            props.onEdit && (React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEdit, { size: 14 }), onClick: () => props.onEdit(props.resource), "aria-label": `Edit ${core.getReferenceString(props.resource)}` }, "Edit")),
-            props.onDelete && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement(core$1.Menu.Divider, null),
-                React__default["default"].createElement(core$1.Menu.Label, null, "Danger zone"),
-                React__default["default"].createElement(core$1.Menu.Item, { color: "red", icon: React__default["default"].createElement(icons.IconTrash, { size: 14 }), onClick: () => props.onDelete(props.resource), "aria-label": `Delete ${core.getReferenceString(props.resource)}` }, "Delete")))));
+        return (React.createElement(core$1.Menu.Dropdown, null,
+            React.createElement(core$1.Menu.Label, null, "Resource"),
+            props.onPin && (React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconPin, { size: 14 }), onClick: () => props.onPin(props.resource), "aria-label": `Pin ${core.getReferenceString(props.resource)}` }, "Pin")),
+            props.onUnpin && (React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconPinnedOff, { size: 14 }), onClick: () => props.onUnpin(props.resource), "aria-label": `Unpin ${core.getReferenceString(props.resource)}` }, "Unpin")),
+            props.onDetails && (React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconListDetails, { size: 14 }), onClick: () => props.onDetails(props.resource), "aria-label": `Details ${core.getReferenceString(props.resource)}` }, "Details")),
+            props.onEdit && (React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEdit, { size: 14 }), onClick: () => props.onEdit(props.resource), "aria-label": `Edit ${core.getReferenceString(props.resource)}` }, "Edit")),
+            props.onDelete && (React.createElement(React.Fragment, null,
+                React.createElement(core$1.Menu.Divider, null),
+                React.createElement(core$1.Menu.Label, null, "Danger zone"),
+                React.createElement(core$1.Menu.Item, { color: "red", icon: React.createElement(icons.IconTrash, { size: 14 }), onClick: () => props.onDelete(props.resource), "aria-label": `Delete ${core.getReferenceString(props.resource)}` }, "Delete")))));
     }
     function HistoryTimelineItem(props) {
         const previous = getPrevious(props.history, props.resource);
         if (previous) {
-            return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-                React__default["default"].createElement(ResourceDiffTable, { original: previous, revised: props.resource })));
+            return (React.createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+                React.createElement(ResourceDiffTable, { original: previous, revised: props.resource })));
         }
         else {
-            return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-                React__default["default"].createElement("h3", null, "Created"),
-                React__default["default"].createElement(ResourceTable, { value: props.resource, ignoreMissingValues: true })));
+            return (React.createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+                React.createElement("h3", null, "Created"),
+                React.createElement(ResourceTable, { value: props.resource, ignoreMissingValues: true })));
         }
     }
     function getPrevious(history, version) {
@@ -2492,10 +2592,11 @@
     }
     function CommunicationTimelineItem(props) {
         var _a, _b;
+        const { classes } = useStyles$8();
         const routine = !props.resource.priority || props.resource.priority === 'routine';
-        const className = routine ? 'medplum-timeline-item' : 'medplum-timeline-item medplum-timeline-item-pinned';
-        return (React__default["default"].createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, padding: true, className: className, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-            React__default["default"].createElement("p", null, (_b = (_a = props.resource.payload) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.contentString)));
+        const className = routine ? undefined : classes.pinnedComment;
+        return (React.createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, padding: true, className: className, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+            React.createElement("p", null, (_b = (_a = props.resource.payload) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.contentString)));
     }
     function MediaTimelineItem(props) {
         var _a;
@@ -2504,21 +2605,35 @@
             !contentType.startsWith('image/') &&
             !contentType.startsWith('video/') &&
             contentType !== 'application/pdf';
-        return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: !!padding, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-            React__default["default"].createElement(AttachmentDisplay, { value: props.resource.content })));
+        return (React.createElement(TimelineItem, { resource: props.resource, padding: !!padding, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+            React.createElement(AttachmentDisplay, { value: props.resource.content })));
     }
     function AuditEventTimelineItem(props) {
-        return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-            React__default["default"].createElement(core$1.ScrollArea, null,
-                React__default["default"].createElement("pre", null, props.resource.outcomeDesc))));
+        return (React.createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+            React.createElement(core$1.ScrollArea, null,
+                React.createElement("pre", null, props.resource.outcomeDesc))));
     }
     function DiagnosticReportTimelineItem(props) {
-        return (React__default["default"].createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React__default["default"].createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
-            React__default["default"].createElement(DiagnosticReportDisplay, { value: props.resource })));
+        return (React.createElement(TimelineItem, { resource: props.resource, padding: true, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
+            React.createElement(DiagnosticReportDisplay, { value: props.resource })));
+    }
+    function getProgressMessage(e) {
+        if (e.lengthComputable) {
+            const percent = (100 * e.loaded) / e.total;
+            return `Uploaded: ${formatFileSize(e.loaded)} / ${formatFileSize(e.total)} ${percent.toFixed(2)}%`;
+        }
+        return `Uploaded: ${formatFileSize(e.loaded)}`;
+    }
+    function formatFileSize(bytes) {
+        if (bytes == 0) {
+            return '0.00 B';
+        }
+        const e = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
     }
 
     function DefaultResourceTimeline(props) {
-        return (React__default["default"].createElement(ResourceTimeline, { value: props.resource, buildSearchRequests: (resource) => ({
+        return (React.createElement(ResourceTimeline, { value: props.resource, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
                 type: 'batch',
                 entry: [
@@ -2539,7 +2654,7 @@
     }
 
     function EncounterTimeline(props) {
-        return (React__default["default"].createElement(ResourceTimeline, { value: props.encounter, buildSearchRequests: (resource) => ({
+        return (React.createElement(ResourceTimeline, { value: props.encounter, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
                 type: 'batch',
                 entry: [
@@ -2595,99 +2710,7 @@
        Received ${value.length} elements \
        [${JSON.stringify(value, null, 2)}]`);
         }
-        return React__default["default"].createElement(ResourcePropertyDisplay, { value: value[0] || '', propertyType: props.propertyType });
-    }
-
-    /**
-     * Returns the collection of field definitions for the search request.
-     * @param search The search request definition.
-     * @returns An array of field definitions.
-     */
-    function getFieldDefinitions(search) {
-        const resourceType = search.resourceType;
-        const fields = [];
-        for (const name of search.fields || ['id', '_lastUpdated']) {
-            fields.push(getFieldDefinition(resourceType, name));
-        }
-        return fields;
-    }
-    /**
-     * Return the field definition for a given field name.
-     * Field names can be either property names or search parameter codes.
-     * @param resourceType The resource type.
-     * @param name The search field name (either property name or search parameter code).
-     * @returns The field definition.
-     */
-    function getFieldDefinition(resourceType, name) {
-        var _a;
-        if (name === '_lastUpdated') {
-            return {
-                name: '_lastUpdated',
-                searchParams: [
-                    {
-                        resourceType: 'SearchParameter',
-                        base: ['Resource'],
-                        code: '_lastUpdated',
-                        name: '_lastUpdated',
-                        type: 'date',
-                        expression: 'Resource.meta.lastUpdated',
-                    },
-                ],
-            };
-        }
-        if (name === 'meta.versionId') {
-            return {
-                name: 'meta.versionId',
-                searchParams: [
-                    {
-                        resourceType: 'SearchParameter',
-                        base: ['Resource'],
-                        code: '_versionId',
-                        name: '_versionId',
-                        type: 'token',
-                        expression: 'Resource.meta.versionId',
-                    },
-                ],
-            };
-        }
-        const typeSchema = core.globalSchema.types[resourceType];
-        const exactElementDefinition = typeSchema.properties[name];
-        const exactSearchParam = (_a = typeSchema.searchParams) === null || _a === void 0 ? void 0 : _a[name.toLowerCase()];
-        // Best case: Exact match of element definition or search parameter.
-        // Examples: ServiceRequest.subject, Patient.name, Patient.birthDate
-        // In this case, we only show the one search parameter.
-        if (exactElementDefinition && exactSearchParam) {
-            return { name, elementDefinition: exactElementDefinition, searchParams: [exactSearchParam] };
-        }
-        // Next best case: Exact match of element definition
-        // Examples: Observation.value
-        // In this case, there could be zero or more search parameters that are a function of the element definition.
-        // So search for those search parameters.
-        if (exactElementDefinition) {
-            let searchParams = undefined;
-            if (typeSchema.searchParams) {
-                const path = `${resourceType}.${name.replaceAll('[x]', '')}`;
-                searchParams = Object.values(typeSchema.searchParams).filter((p) => { var _a; return (_a = p.expression) === null || _a === void 0 ? void 0 : _a.includes(path); });
-                if (searchParams.length === 0) {
-                    searchParams = undefined;
-                }
-            }
-            return { name, elementDefinition: exactElementDefinition, searchParams };
-        }
-        // Search parameter case: Exact match of search parameter
-        // Examples: Observation.value-quantity, Patient.email
-        // Here we have a search parameter, but no element definition.
-        // Observation.value-quantity is a search parameter for the Observation.value element.
-        // Patient.email is a search parameter for the Patient.telecom element.
-        // So we need to walk backwards to find the element definition.
-        if (exactSearchParam) {
-            const details = core.getSearchParameterDetails(resourceType, exactSearchParam);
-            return { name, elementDefinition: details.elementDefinition, searchParams: [exactSearchParam] };
-        }
-        // Worst case: no element definition and no search parameter.
-        // This is probably a malformed URL that includes an unknown field.
-        // We will render the column header, but all cells will be empty.
-        return { name };
+        return React.createElement(ResourcePropertyDisplay, { value: value[0] || '', propertyType: props.propertyType });
     }
 
     const searchParamToOperators = {
@@ -2927,26 +2950,6 @@
         const endTime = new Date();
         return addDateFilterBetween(definition, field, startTime, endTime);
     }
-    /**
-     * Adds a filter for a field equaling a specified date.
-     *
-     * @param {string} field The field key name.
-     * @param {Date} value The date.
-     */
-    function addDateEqualsFilter(definition, field, value) {
-        return addDateFilterBetween(definition, field, value, value);
-    }
-    /**
-     * Adds a filter for a date before a certain date/time.
-     *
-     * @param {string} field The field key name.
-     * @param {Operator} op The date/time operation.
-     * @param {Date} value The date.
-     */
-    function addDateFilter(definition, field, op, value) {
-        definition = clearFiltersOnField(definition, field);
-        return addDateFilterImpl(definition, field, op, value);
-    }
     /**
      * Adds a filter for a date between two dates (inclusive of both dates).
      *
@@ -2978,17 +2981,6 @@
     function addMissingFilter(definition, field, value = true) {
         return addFilter(definition, field, core.Operator.MISSING, value.toString());
     }
-    /**
-     * Returns true if the search has any filters on the specified field.
-     *
-     * @param {string} code The field key name.
-     */
-    function hasFilterOnField(definition, code) {
-        if (!definition.filters) {
-            return false;
-        }
-        return definition.filters.find((f) => f.code === code) !== undefined;
-    }
     /**
      * Sets the offset (starting at zero).
      *
@@ -3150,7 +3142,7 @@
         if (!value) {
             return null;
         }
-        return (React__default["default"].createElement(ResourcePropertyDisplay, { property: elementDefinition, propertyType: propertyType, value: value, maxWidth: 200, ignoreMissingValues: true, link: false }));
+        return (React.createElement(ResourcePropertyDisplay, { property: elementDefinition, propertyType: propertyType, value: value, maxWidth: 200, ignoreMissingValues: true, link: false }));
     }
     /**
      * Returns a fragment to be displayed in the search table for a search parameter.
@@ -3165,9 +3157,9 @@
             return null;
         }
         if (elementDefinition) {
-            return (React__default["default"].createElement(ResourcePropertyDisplay, { propertyType: value[0].type, value: value[0].value, maxWidth: 200, ignoreMissingValues: true, link: false }));
+            return (React.createElement(ResourcePropertyDisplay, { propertyType: value[0].type, value: value[0].value, maxWidth: 200, ignoreMissingValues: true, link: false }));
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, value.map((v, index) => (React__default["default"].createElement("span", { key: `${index}-${value.length}` }, typeof v === 'object' ? JSON.stringify(v) : v)))));
+        return (React.createElement(React.Fragment, null, value.map((v, index) => (React.createElement("span", { key: `${index}-${value.length}` }, typeof v === 'object' ? JSON.stringify(v) : v)))));
     }
 
     function SearchFieldEditor(props) {
@@ -3301,30 +3293,30 @@
         const available = getFieldsList(typeDef)
             .filter((field) => !(selected === null || selected === void 0 ? void 0 : selected.includes(field)))
             .sort();
-        return (React__default["default"].createElement(core$1.Modal, { title: "Fields", closeButtonLabel: "Close", opened: props.visible, onClose: props.onCancel },
-            React__default["default"].createElement("div", null,
-                React__default["default"].createElement("table", { style: { margin: 'auto' } },
-                    React__default["default"].createElement("thead", null,
-                        React__default["default"].createElement("tr", null,
-                            React__default["default"].createElement("th", { colSpan: 2, align: "center" }, "Available"),
-                            React__default["default"].createElement("th", { colSpan: 2, align: "center" }, "Selected"))),
-                    React__default["default"].createElement("tbody", null,
-                        React__default["default"].createElement("tr", null,
-                            React__default["default"].createElement("td", { colSpan: 2, align: "center" },
-                                React__default["default"].createElement("select", { ref: availableRef, size: 15, tabIndex: 1, style: { width: '200px' }, onKeyDown: (e) => handleAvailableKeyDown(e), onDoubleClick: () => handleAvailableDoubleClick(), "data-testid": "available" }, available.map((key) => (React__default["default"].createElement("option", { key: key, value: key }, buildFieldNameString(key)))))),
-                            React__default["default"].createElement("td", { colSpan: 2, align: "center" },
-                                React__default["default"].createElement("select", { ref: selectedRef, size: 15, tabIndex: 4, style: { width: '200px' }, onKeyDown: (e) => handleSelectedKeyDown(e), onDoubleClick: () => handleSelectedDoubleClick(), "data-testid": "selected" }, selected.map((key) => (React__default["default"].createElement("option", { key: key, value: key }, buildFieldNameString(key)))))))),
-                    React__default["default"].createElement("tfoot", null,
-                        React__default["default"].createElement("tr", null,
-                            React__default["default"].createElement("td", { align: "center" },
-                                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: onAddField }, "Add")),
-                            React__default["default"].createElement("td", { align: "center" },
-                                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: onRemoveField }, "Remove")),
-                            React__default["default"].createElement("td", { align: "center" },
-                                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: onMoveUp }, "Up")),
-                            React__default["default"].createElement("td", { align: "center" },
-                                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: onMoveDown }, "Down")))))),
-            React__default["default"].createElement(core$1.Button, { onClick: () => props.onOk(state.search) }, "OK")));
+        return (React.createElement(core$1.Modal, { title: "Fields", closeButtonLabel: "Close", opened: props.visible, onClose: props.onCancel },
+            React.createElement("div", null,
+                React.createElement("table", { style: { margin: 'auto' } },
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", { colSpan: 2, align: "center" }, "Available"),
+                            React.createElement("th", { colSpan: 2, align: "center" }, "Selected"))),
+                    React.createElement("tbody", null,
+                        React.createElement("tr", null,
+                            React.createElement("td", { colSpan: 2, align: "center" },
+                                React.createElement("select", { ref: availableRef, size: 15, tabIndex: 1, style: { width: '200px' }, onKeyDown: (e) => handleAvailableKeyDown(e), onDoubleClick: () => handleAvailableDoubleClick(), "data-testid": "available" }, available.map((key) => (React.createElement("option", { key: key, value: key }, buildFieldNameString(key)))))),
+                            React.createElement("td", { colSpan: 2, align: "center" },
+                                React.createElement("select", { ref: selectedRef, size: 15, tabIndex: 4, style: { width: '200px' }, onKeyDown: (e) => handleSelectedKeyDown(e), onDoubleClick: () => handleSelectedDoubleClick(), "data-testid": "selected" }, selected.map((key) => (React.createElement("option", { key: key, value: key }, buildFieldNameString(key)))))))),
+                    React.createElement("tfoot", null,
+                        React.createElement("tr", null,
+                            React.createElement("td", { align: "center" },
+                                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: onAddField }, "Add")),
+                            React.createElement("td", { align: "center" },
+                                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: onRemoveField }, "Remove")),
+                            React.createElement("td", { align: "center" },
+                                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: onMoveUp }, "Up")),
+                            React.createElement("td", { align: "center" },
+                                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: onMoveDown }, "Down")))))),
+            React.createElement(core$1.Button, { onClick: () => props.onOk(state.search) }, "OK")));
     }
     /**
      * Returns a list of fields/columns available for a type.
@@ -3361,14 +3353,14 @@
         const searchParam = (_b = (_a = core.globalSchema.types[resourceType]) === null || _a === void 0 ? void 0 : _a.searchParams) === null || _b === void 0 ? void 0 : _b[filter.code];
         if (searchParam) {
             if (searchParam.type === 'reference') {
-                return React__default["default"].createElement(ResourceName, { value: { reference: filter.value } });
+                return React.createElement(ResourceName, { value: { reference: filter.value } });
             }
             const searchParamDetails = core.getSearchParameterDetails(resourceType, searchParam);
             if (filter.code === '_lastUpdated' || searchParamDetails.type === core.SearchParameterType.DATETIME) {
-                return React__default["default"].createElement(React__default["default"].Fragment, null, core.formatDateTime(filter.value));
+                return React.createElement(React.Fragment, null, core.formatDateTime(filter.value));
             }
         }
-        return React__default["default"].createElement(React__default["default"].Fragment, null, filter.value);
+        return React.createElement(React.Fragment, null, filter.value);
     }
 
     function SearchFilterValueInput(props) {
@@ -3377,7 +3369,7 @@
         const name = 'filter-value';
         switch (details.type) {
             case core.SearchParameterType.REFERENCE:
-                return (React__default["default"].createElement(ReferenceInput, { name: name, defaultValue: { reference: props.defaultValue }, targetTypes: (_a = props.searchParam) === null || _a === void 0 ? void 0 : _a.target, onChange: (newReference) => {
+                return (React.createElement(ReferenceInput, { name: name, defaultValue: { reference: props.defaultValue }, targetTypes: (_a = props.searchParam) === null || _a === void 0 ? void 0 : _a.target, onChange: (newReference) => {
                         if (newReference) {
                             props.onChange(newReference.reference);
                         }
@@ -3386,15 +3378,15 @@
                         }
                     } }));
             case core.SearchParameterType.BOOLEAN:
-                return (React__default["default"].createElement(core$1.Checkbox, { name: name, "data-testid": name, defaultChecked: props.defaultValue === 'true', onChange: (e) => props.onChange(e.currentTarget.checked.toString()) }));
+                return (React.createElement(core$1.Checkbox, { name: name, "data-testid": name, defaultChecked: props.defaultValue === 'true', onChange: (e) => props.onChange(e.currentTarget.checked.toString()) }));
             case core.SearchParameterType.DATE:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "date", name: name, "data-testid": name, defaultValue: props.defaultValue, onChange: (e) => props.onChange(e.currentTarget.value) }));
+                return (React.createElement(core$1.TextInput, { type: "date", name: name, "data-testid": name, defaultValue: props.defaultValue, onChange: (e) => props.onChange(e.currentTarget.value) }));
             case core.SearchParameterType.DATETIME:
-                return React__default["default"].createElement(DateTimeInput, { name: name, defaultValue: props.defaultValue, onChange: props.onChange });
+                return React.createElement(DateTimeInput, { name: name, defaultValue: props.defaultValue, onChange: props.onChange });
             case core.SearchParameterType.NUMBER:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "number", name: name, "data-testid": name, defaultValue: props.defaultValue, onChange: (e) => props.onChange(e.currentTarget.value) }));
+                return (React.createElement(core$1.TextInput, { type: "number", name: name, "data-testid": name, defaultValue: props.defaultValue, onChange: (e) => props.onChange(e.currentTarget.value) }));
             case core.SearchParameterType.QUANTITY:
-                return (React__default["default"].createElement(QuantityInput, { name: name, defaultValue: tryParseQuantity(props.defaultValue), onChange: (newQuantity) => {
+                return (React.createElement(QuantityInput, { name: name, defaultValue: tryParseQuantity(props.defaultValue), onChange: (newQuantity) => {
                         if (newQuantity) {
                             props.onChange(`${newQuantity.value}`);
                         }
@@ -3403,7 +3395,7 @@
                         }
                     } }));
             default:
-                return (React__default["default"].createElement(core$1.TextInput, { name: name, "data-testid": name, defaultValue: props.defaultValue, autoFocus: props.autoFocus, onChange: (e) => props.onChange(e.currentTarget.value), placeholder: "Search value" }));
+                return (React.createElement(core$1.TextInput, { name: name, "data-testid": name, defaultValue: props.defaultValue, autoFocus: props.autoFocus, onChange: (e) => props.onChange(e.currentTarget.value), placeholder: "Search value" }));
         }
     }
     function tryParseQuantity(value) {
@@ -3437,24 +3429,24 @@
         const resourceType = props.search.resourceType;
         const searchParams = core.globalSchema.types[resourceType].searchParams;
         const filters = search.filters || [];
-        return (React__default["default"].createElement(core$1.Modal, { title: "Filters", closeButtonLabel: "Close", size: 900, opened: props.visible, onClose: props.onCancel },
-            React__default["default"].createElement("div", { className: "medplum-filter-editor" },
-                React__default["default"].createElement("table", { className: "medplum-filter-editor-table" },
-                    React__default["default"].createElement("colgroup", null,
-                        React__default["default"].createElement("col", { style: { width: 200 } }),
-                        React__default["default"].createElement("col", { style: { width: 200 } }),
-                        React__default["default"].createElement("col", { style: { width: 380 } }),
-                        React__default["default"].createElement("col", { style: { width: 120 } })),
-                    React__default["default"].createElement("thead", null,
-                        React__default["default"].createElement("tr", null,
-                            React__default["default"].createElement("th", null, "Field"),
-                            React__default["default"].createElement("th", null, "Operation"),
-                            React__default["default"].createElement("th", null, "Value"),
-                            React__default["default"].createElement("th", null, "Actions"))),
-                    React__default["default"].createElement("tbody", null,
+        return (React.createElement(core$1.Modal, { title: "Filters", closeButtonLabel: "Close", size: 900, opened: props.visible, onClose: props.onCancel },
+            React.createElement("div", null,
+                React.createElement("table", null,
+                    React.createElement("colgroup", null,
+                        React.createElement("col", { style: { width: 200 } }),
+                        React.createElement("col", { style: { width: 200 } }),
+                        React.createElement("col", { style: { width: 380 } }),
+                        React.createElement("col", { style: { width: 120 } })),
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", null, "Field"),
+                            React.createElement("th", null, "Operation"),
+                            React.createElement("th", null, "Value"),
+                            React.createElement("th", null, "Actions"))),
+                    React.createElement("tbody", null,
                         filters.map((filter, index) => {
                             if (index === editingIndex) {
-                                return (React__default["default"].createElement(FilterRowInput, { key: `filter-${index}-${filters.length}-input`, resourceType: resourceType, searchParams: searchParams, defaultValue: filter, okText: "Save", onOk: (newFilter) => {
+                                return (React.createElement(FilterRowInput, { key: `filter-${index}-${filters.length}-input`, resourceType: resourceType, searchParams: searchParams, defaultValue: filter, okText: "Save", onOk: (newFilter) => {
                                         const newFilters = [...filters];
                                         newFilters[index] = newFilter;
                                         setSearch(setFilters(searchRef.current, newFilters));
@@ -3462,23 +3454,23 @@
                                     }, onCancel: () => setEditingIndex(-1) }));
                             }
                             else {
-                                return (React__default["default"].createElement(FilterRowDisplay, { key: `filter-${index}-${filters.length}-display`, resourceType: resourceType, searchParams: searchParams, filter: filter, onEdit: () => setEditingIndex(index), onDelete: () => setSearch(deleteFilter(searchRef.current, index)) }));
+                                return (React.createElement(FilterRowDisplay, { key: `filter-${index}-${filters.length}-display`, resourceType: resourceType, searchParams: searchParams, filter: filter, onEdit: () => setEditingIndex(index), onDelete: () => setSearch(deleteFilter(searchRef.current, index)) }));
                             }
                         }),
-                        React__default["default"].createElement(FilterRowInput, { resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter })))),
-            React__default["default"].createElement(core$1.Group, { position: "right", mt: "xl" },
-                React__default["default"].createElement(core$1.Button, { onClick: () => props.onOk(searchRef.current) }, "OK"))));
+                        React.createElement(FilterRowInput, { resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter })))),
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                React.createElement(core$1.Button, { onClick: () => props.onOk(searchRef.current) }, "OK"))));
     }
     function FilterRowDisplay(props) {
         const { filter } = props;
-        return (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", null, buildFieldNameString(filter.code)),
-            React__default["default"].createElement("td", null, getOpString(filter.operator)),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(SearchFilterValueDisplay, { resourceType: props.resourceType, filter: filter })),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onEdit }, "Edit"),
-                React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onDelete }, "Delete"))));
+        return (React.createElement("tr", null,
+            React.createElement("td", null, buildFieldNameString(filter.code)),
+            React.createElement("td", null, getOpString(filter.operator)),
+            React.createElement("td", null,
+                React.createElement(SearchFilterValueDisplay, { resourceType: props.resourceType, filter: filter })),
+            React.createElement("td", null,
+                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onEdit }, "Edit"),
+                React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onDelete }, "Delete"))));
     }
     function FilterRowInput(props) {
         var _a;
@@ -3496,17 +3488,17 @@
         }
         const searchParam = props.searchParams[value.code];
         const operators = searchParam && getSearchOperators(searchParam);
-        return (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "filter-field", defaultValue: valueRef.current.code, onChange: (e) => setFilterCode(e.currentTarget.value), data: Object.keys(props.searchParams).map((param) => ({ value: param, label: buildFieldNameString(param) })) })),
-            React__default["default"].createElement("td", null, operators && (React__default["default"].createElement(core$1.NativeSelect, { "data-testid": "filter-operation", defaultValue: value.operator, onChange: (e) => setFilterOperator(e.currentTarget.value), data: ['', ...operators.map((op) => ({ value: op, label: getOpString(op) }))] }))),
-            React__default["default"].createElement("td", null, searchParam && value.operator && (React__default["default"].createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: searchParam, defaultValue: value.value, onChange: setFilterValue }))),
-            React__default["default"].createElement("td", null,
-                value.code && value.operator && value.value && (React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: () => {
+        return (React.createElement("tr", null,
+            React.createElement("td", null,
+                React.createElement(core$1.NativeSelect, { "data-testid": "filter-field", defaultValue: valueRef.current.code, onChange: (e) => setFilterCode(e.currentTarget.value), data: Object.keys(props.searchParams).map((param) => ({ value: param, label: buildFieldNameString(param) })) })),
+            React.createElement("td", null, operators && (React.createElement(core$1.NativeSelect, { "data-testid": "filter-operation", defaultValue: value.operator, onChange: (e) => setFilterOperator(e.currentTarget.value), data: ['', ...operators.map((op) => ({ value: op, label: getOpString(op) }))] }))),
+            React.createElement("td", null, searchParam && value.operator && (React.createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: searchParam, defaultValue: value.value, onChange: setFilterValue }))),
+            React.createElement("td", null,
+                value.code && value.operator && value.value && (React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: () => {
                         props.onOk(valueRef.current);
                         setValue({});
                     } }, props.okText)),
-                props.onCancel && (React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onCancel }, "Cancel")))));
+                props.onCancel && (React.createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onCancel }, "Cancel")))));
     }
 
     function SearchFilterValueDialog(props) {
@@ -3518,11 +3510,11 @@
         function onOk() {
             props.onOk(Object.assign(Object.assign({}, props.filter), { value }));
         }
-        return (React__default["default"].createElement(core$1.Modal, { title: props.title, size: "xl", opened: props.visible, onClose: props.onCancel },
-            React__default["default"].createElement("div", { style: { width: 500 } },
-                React__default["default"].createElement(Form, { onSubmit: onOk },
-                    React__default["default"].createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: props.searchParam, defaultValue: value, autoFocus: true, onChange: setValue }))),
-            React__default["default"].createElement(core$1.Button, { onClick: onOk }, "OK")));
+        return (React.createElement(core$1.Modal, { title: props.title, size: "xl", opened: props.visible, onClose: props.onCancel },
+            React.createElement("div", { style: { width: 500 } },
+                React.createElement(Form, { onSubmit: onOk },
+                    React.createElement(SearchFilterValueInput, { resourceType: props.resourceType, searchParam: props.searchParam, defaultValue: value, autoFocus: true, onChange: setValue }))),
+            React.createElement(core$1.Button, { onClick: onOk }, "OK")));
     }
 
     function SearchPopupMenu(props) {
@@ -3543,26 +3535,26 @@
         }
         // If there is only one search parameter, then show it directly
         if (props.searchParams.length === 1) {
-            return (React__default["default"].createElement(SearchParameterSubMenu, { search: props.search, searchParam: props.searchParams[0], onSort: onSort, onPrompt: onPrompt, onChange: onChange, onClear: onClear }));
+            return (React.createElement(SearchParameterSubMenu, { search: props.search, searchParam: props.searchParams[0], onSort: onSort, onPrompt: onPrompt, onChange: onChange, onClear: onClear }));
         }
         // Otherwise, show a menu, with each search parameter as a sub menu
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null, props.searchParams.map((searchParam) => (React__default["default"].createElement(core$1.Menu.Item, { key: searchParam.code }, buildFieldNameString(searchParam.code))))));
+        return (React.createElement(core$1.Menu.Dropdown, null, props.searchParams.map((searchParam) => (React.createElement(core$1.Menu.Item, { key: searchParam.code }, buildFieldNameString(searchParam.code))))));
     }
     function SearchParameterSubMenu(props) {
         switch (props.searchParam.type) {
             case 'date':
-                return React__default["default"].createElement(DateFilterSubMenu, Object.assign({}, props));
+                return React.createElement(DateFilterSubMenu, Object.assign({}, props));
             case 'number':
             case 'quantity':
-                return React__default["default"].createElement(NumericFilterSubMenu, Object.assign({}, props));
+                return React.createElement(NumericFilterSubMenu, Object.assign({}, props));
             case 'reference':
-                return React__default["default"].createElement(ReferenceFilterSubMenu, Object.assign({}, props));
+                return React.createElement(ReferenceFilterSubMenu, Object.assign({}, props));
             case 'string':
             case 'token':
             case 'uri':
-                return React__default["default"].createElement(TextFilterSubMenu, Object.assign({}, props));
+                return React.createElement(TextFilterSubMenu, Object.assign({}, props));
             default:
-                return React__default["default"].createElement(React__default["default"].Fragment, null,
+                return React.createElement(React.Fragment, null,
                     "Unknown search param type: ",
                     props.searchParam.type);
         }
@@ -3570,72 +3562,164 @@
     function DateFilterSubMenu(props) {
         const { searchParam } = props;
         const code = searchParam.code;
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null,
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort Oldest to Newest"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Newest to Oldest"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconMathLower, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.ENDS_BEFORE) }, "Before..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconMathGreater, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.STARTS_AFTER) }, "After..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconBracketsContain, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Between..."),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addTomorrowFilter(props.search, code)) }, "Tomorrow"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addTodayFilter(props.search, code)) }, "Today"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addYesterdayFilter(props.search, code)) }, "Yesterday"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addNextMonthFilter(props.search, code)) }, "Next Month"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addThisMonthFilter(props.search, code)) }, "This Month"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addLastMonthFilter(props.search, code)) }, "Last Month"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addYearToDateFilter(props.search, code)) }, "Year to date"),
-            React__default["default"].createElement(CommonMenuItems, Object.assign({}, props))));
+        return (React.createElement(core$1.Menu.Dropdown, null,
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort Oldest to Newest"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Newest to Oldest"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconMathLower, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.ENDS_BEFORE) }, "Before..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconMathGreater, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.STARTS_AFTER) }, "After..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconBracketsContain, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Between..."),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addTomorrowFilter(props.search, code)) }, "Tomorrow"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addTodayFilter(props.search, code)) }, "Today"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addYesterdayFilter(props.search, code)) }, "Yesterday"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addNextMonthFilter(props.search, code)) }, "Next Month"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addThisMonthFilter(props.search, code)) }, "This Month"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addLastMonthFilter(props.search, code)) }, "Last Month"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconCalendar, { size: 14 }), onClick: () => props.onChange(addYearToDateFilter(props.search, code)) }, "Year to date"),
+            React.createElement(CommonMenuItems, Object.assign({}, props))));
     }
     function NumericFilterSubMenu(props) {
         const { searchParam } = props;
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null,
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort Smallest to Largest"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Largest to Smallest"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconMathGreater, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN) }, "Greater than..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSettings, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN_OR_EQUALS) }, "Greater than or equal to..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconMathLower, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN) }, "Less than..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSettings, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN_OR_EQUALS) }, "Less than or equal to..."),
-            React__default["default"].createElement(CommonMenuItems, Object.assign({}, props))));
+        return (React.createElement(core$1.Menu.Dropdown, null,
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort Smallest to Largest"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Largest to Smallest"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconMathGreater, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN) }, "Greater than..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSettings, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN_OR_EQUALS) }, "Greater than or equal to..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconMathLower, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN) }, "Less than..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSettings, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN_OR_EQUALS) }, "Less than or equal to..."),
+            React.createElement(CommonMenuItems, Object.assign({}, props))));
     }
     function ReferenceFilterSubMenu(props) {
         const { searchParam } = props;
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null,
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
-            React__default["default"].createElement(CommonMenuItems, Object.assign({}, props))));
+        return (React.createElement(core$1.Menu.Dropdown, null,
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
+            React.createElement(CommonMenuItems, Object.assign({}, props))));
     }
     function TextFilterSubMenu(props) {
         const { searchParam } = props;
-        return (React__default["default"].createElement(core$1.Menu.Dropdown, null,
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort A to Z"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Z to A"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconBucket, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.CONTAINS) }, "Contains..."),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconBucketOff, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Does not contain..."),
-            React__default["default"].createElement(CommonMenuItems, Object.assign({}, props))));
+        return (React.createElement(core$1.Menu.Dropdown, null,
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortAscending, { size: 14 }), onClick: () => props.onSort(searchParam, false) }, "Sort A to Z"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconSortDescending, { size: 14 }), onClick: () => props.onSort(searchParam, true) }, "Sort Z to A"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqual, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconEqualNot, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconBucket, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.CONTAINS) }, "Contains..."),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconBucketOff, { size: 14 }), onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Does not contain..."),
+            React.createElement(CommonMenuItems, Object.assign({}, props))));
     }
     function CommonMenuItems(props) {
         const { searchParam } = props;
         const code = searchParam.code;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconBleach, { size: 14 }), onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconBleachOff, { size: 14 }), onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
-            React__default["default"].createElement(core$1.Menu.Divider, null),
-            React__default["default"].createElement(core$1.Menu.Item, { icon: React__default["default"].createElement(icons.IconX, { size: 14 }), onClick: () => props.onClear(searchParam) }, "Clear filters")));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconBleach, { size: 14 }), onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconBleachOff, { size: 14 }), onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
+            React.createElement(core$1.Menu.Divider, null),
+            React.createElement(core$1.Menu.Item, { icon: React.createElement(icons.IconX, { size: 14 }), onClick: () => props.onClear(searchParam) }, "Clear filters")));
+    }
+
+    /**
+     * Returns the collection of field definitions for the search request.
+     * @param search The search request definition.
+     * @returns An array of field definitions.
+     */
+    function getFieldDefinitions(search) {
+        const resourceType = search.resourceType;
+        const fields = [];
+        for (const name of search.fields || ['id', '_lastUpdated']) {
+            fields.push(getFieldDefinition(resourceType, name));
+        }
+        return fields;
+    }
+    /**
+     * Return the field definition for a given field name.
+     * Field names can be either property names or search parameter codes.
+     * @param resourceType The resource type.
+     * @param name The search field name (either property name or search parameter code).
+     * @returns The field definition.
+     */
+    function getFieldDefinition(resourceType, name) {
+        var _a;
+        if (name === '_lastUpdated') {
+            return {
+                name: '_lastUpdated',
+                searchParams: [
+                    {
+                        resourceType: 'SearchParameter',
+                        base: ['Resource'],
+                        code: '_lastUpdated',
+                        name: '_lastUpdated',
+                        type: 'date',
+                        expression: 'Resource.meta.lastUpdated',
+                    },
+                ],
+            };
+        }
+        if (name === 'meta.versionId') {
+            return {
+                name: 'meta.versionId',
+                searchParams: [
+                    {
+                        resourceType: 'SearchParameter',
+                        base: ['Resource'],
+                        code: '_versionId',
+                        name: '_versionId',
+                        type: 'token',
+                        expression: 'Resource.meta.versionId',
+                    },
+                ],
+            };
+        }
+        const typeSchema = core.globalSchema.types[resourceType];
+        const exactElementDefinition = typeSchema.properties[name];
+        const exactSearchParam = (_a = typeSchema.searchParams) === null || _a === void 0 ? void 0 : _a[name.toLowerCase()];
+        // Best case: Exact match of element definition or search parameter.
+        // Examples: ServiceRequest.subject, Patient.name, Patient.birthDate
+        // In this case, we only show the one search parameter.
+        if (exactElementDefinition && exactSearchParam) {
+            return { name, elementDefinition: exactElementDefinition, searchParams: [exactSearchParam] };
+        }
+        // Next best case: Exact match of element definition
+        // Examples: Observation.value
+        // In this case, there could be zero or more search parameters that are a function of the element definition.
+        // So search for those search parameters.
+        if (exactElementDefinition) {
+            let searchParams = undefined;
+            if (typeSchema.searchParams) {
+                const path = `${resourceType}.${name.replaceAll('[x]', '')}`;
+                searchParams = Object.values(typeSchema.searchParams).filter((p) => { var _a; return (_a = p.expression) === null || _a === void 0 ? void 0 : _a.includes(path); });
+                if (searchParams.length === 0) {
+                    searchParams = undefined;
+                }
+            }
+            return { name, elementDefinition: exactElementDefinition, searchParams };
+        }
+        // Search parameter case: Exact match of search parameter
+        // Examples: Observation.value-quantity, Patient.email
+        // Here we have a search parameter, but no element definition.
+        // Observation.value-quantity is a search parameter for the Observation.value element.
+        // Patient.email is a search parameter for the Patient.telecom element.
+        // So we need to walk backwards to find the element definition.
+        if (exactSearchParam) {
+            const details = core.getSearchParameterDetails(resourceType, exactSearchParam);
+            return { name, elementDefinition: details.elementDefinition, searchParams: [exactSearchParam] };
+        }
+        // Worst case: no element definition and no search parameter.
+        // This is probably a malformed URL that includes an unknown field.
+        // We will render the column header, but all cells will be empty.
+        return { name };
     }
 
     class SearchChangeEvent extends Event {
@@ -3657,7 +3741,21 @@
             this.browserEvent = browserEvent;
         }
     }
-    const useStyles = core$1.createStyles((theme) => ({
+    const useStyles$7 = core$1.createStyles((theme) => ({
+        root: {
+            maxWidth: '100%',
+            overflow: 'auto',
+            textAlign: 'left',
+            marginBottom: '20px',
+        },
+        table: {
+            cursor: 'pointer',
+        },
+        tr: {
+            '&:hover': {
+                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
+            },
+        },
         th: {
             padding: '0 !important',
         },
@@ -3680,8 +3778,8 @@
      * It does not include the field editor, filter editor, pagination buttons.
      */
     function SearchControl(props) {
-        var _a, _b;
-        const { classes } = useStyles();
+        var _a, _b, _c;
+        const { classes } = useStyles$7();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
@@ -3793,7 +3891,8 @@
         }, [medplum, props.search.resourceType]);
         const typeSchema = schemaLoaded && ((_a = core.globalSchema === null || core.globalSchema === void 0 ? void 0 : core.globalSchema.types) === null || _a === void 0 ? void 0 : _a[props.search.resourceType]);
         if (!typeSchema) {
-            return React__default["default"].createElement(core$1.Loader, null);
+            return (React.createElement(core$1.Center, { style: { width: '100%', height: '100%' } },
+                React.createElement(core$1.Loader, null)));
         }
         const checkboxColumn = props.checkboxesEnabled;
         const fields = getFieldDefinitions(search);
@@ -3805,51 +3904,52 @@
         const buttonColor = 'gray';
         const iconSize = 16;
         const isMobile = window.innerWidth < 768;
-        return (React__default["default"].createElement("div", { className: "medplum-search-control", "data-testid": "search-control" },
-            !props.hideToolbar && (React__default["default"].createElement(core$1.Group, { position: "apart", mb: "xl" },
-                React__default["default"].createElement(core$1.Group, { spacing: 2 },
-                    React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconFilter, { size: iconSize }), onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: true })) }, "Fields"),
-                    React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconColumns, { size: iconSize }), onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: true })) }, "Filters"),
-                    props.onNew && (React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconFilePlus, { size: iconSize }), onClick: props.onNew }, "New...")),
-                    !isMobile && props.onExport && (React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconTableExport, { size: iconSize }), onClick: props.onExport }, "Export...")),
-                    !isMobile && props.onDelete && (React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconTrash, { size: iconSize }), onClick: () => props.onDelete(Object.keys(state.selected)) }, "Delete...")),
-                    !isMobile && props.onBulk && (React__default["default"].createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React__default["default"].createElement(icons.IconBoxMultiple, { size: iconSize }), onClick: () => props.onBulk(Object.keys(state.selected)) }, "Bulk..."))),
-                lastResult && (React__default["default"].createElement(core$1.Group, { spacing: 2 },
-                    React__default["default"].createElement("span", { className: "medplum-search-summary" },
-                        getStart$1(search, lastResult.total),
-                        "-",
-                        getEnd$1(search, lastResult.total),
-                        " of",
-                        ' ', (_b = lastResult.total) === null || _b === void 0 ? void 0 :
-                        _b.toLocaleString()))))),
-            React__default["default"].createElement(core$1.Table, null,
-                React__default["default"].createElement("thead", null,
-                    React__default["default"].createElement("tr", null,
-                        checkboxColumn && (React__default["default"].createElement("th", { className: "medplum-search-icon-cell" },
-                            React__default["default"].createElement("input", { type: "checkbox", value: "checked", "aria-label": "all-checkbox", "data-testid": "all-checkbox", checked: isAllSelected(), onChange: (e) => handleAllCheckboxClick(e) }))),
-                        fields.map((field) => (React__default["default"].createElement("th", { key: field.name },
-                            React__default["default"].createElement(core$1.Menu, { shadow: "md", width: 240, position: "bottom-end" },
-                                React__default["default"].createElement(core$1.Menu.Target, null,
-                                    React__default["default"].createElement(core$1.UnstyledButton, { className: classes.control },
-                                        React__default["default"].createElement(core$1.Group, { position: "apart", noWrap: true },
-                                            React__default["default"].createElement(core$1.Text, { weight: 500, size: "sm" }, buildFieldNameString(field.name)),
-                                            React__default["default"].createElement(core$1.Center, { className: classes.icon },
-                                                React__default["default"].createElement(icons.IconAdjustmentsHorizontal, { size: 14, stroke: 1.5 }))))),
-                                React__default["default"].createElement(SearchPopupMenu, { search: props.search, searchParams: field.searchParams, onPrompt: (searchParam, filter) => {
+        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(icons.IconFilter, { size: iconSize }), onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: true })) }, "Fields"),
+                    React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(icons.IconColumns, { size: iconSize }), onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: true })) }, "Filters"),
+                    props.onNew && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(icons.IconFilePlus, { size: iconSize }), onClick: props.onNew }, "New...")),
+                    !isMobile && props.onExport && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(icons.IconTableExport, { size: iconSize }), onClick: props.onExport }, "Export...")),
+                    !isMobile && props.onDelete && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(icons.IconTrash, { size: iconSize }), onClick: () => props.onDelete(Object.keys(state.selected)) }, "Delete...")),
+                    !isMobile && props.onBulk && (React.createElement(core$1.Button, { compact: true, variant: buttonVariant, color: buttonColor, leftIcon: React.createElement(icons.IconBoxMultiple, { size: iconSize }), onClick: () => props.onBulk(Object.keys(state.selected)) }, "Bulk..."))),
+                lastResult && (React.createElement(core$1.Text, { size: "xs", color: "dimmed" },
+                    getStart$1(search, lastResult.total),
+                    "-",
+                    getEnd$1(search, lastResult.total),
+                    " of",
+                    ' ', (_b = lastResult.total) === null || _b === void 0 ? void 0 :
+                    _b.toLocaleString())))),
+            React.createElement(core$1.Table, { className: classes.table },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        checkboxColumn && (React.createElement("th", null,
+                            React.createElement("input", { type: "checkbox", value: "checked", "aria-label": "all-checkbox", "data-testid": "all-checkbox", checked: isAllSelected(), onChange: (e) => handleAllCheckboxClick(e) }))),
+                        fields.map((field) => (React.createElement("th", { key: field.name },
+                            React.createElement(core$1.Menu, { shadow: "md", width: 240, position: "bottom-end" },
+                                React.createElement(core$1.Menu.Target, null,
+                                    React.createElement(core$1.UnstyledButton, { className: classes.control },
+                                        React.createElement(core$1.Group, { position: "apart", noWrap: true },
+                                            React.createElement(core$1.Text, { weight: 500, size: "sm" }, buildFieldNameString(field.name)),
+                                            React.createElement(core$1.Center, { className: classes.icon },
+                                                React.createElement(icons.IconAdjustmentsHorizontal, { size: 14, stroke: 1.5 }))))),
+                                React.createElement(SearchPopupMenu, { search: props.search, searchParams: field.searchParams, onPrompt: (searchParam, filter) => {
                                         setState(Object.assign(Object.assign({}, stateRef.current), { filterDialogVisible: true, filterDialogSearchParam: searchParam, filterDialogFilter: filter }));
                                     }, onChange: (result) => {
                                         emitSearchChange(result);
                                     } })))))),
-                    !props.hideFilters && (React__default["default"].createElement("tr", null,
-                        checkboxColumn && React__default["default"].createElement("th", { className: "filters medplum-search-icon-cell" }),
-                        fields.map((field) => (React__default["default"].createElement("th", { key: field.name, className: "filters" }, field.searchParams && (React__default["default"].createElement(FilterDescription, { resourceType: resourceType, searchParams: field.searchParams, filters: props.search.filters })))))))),
-                React__default["default"].createElement("tbody", null, resources === null || resources === void 0 ? void 0 : resources.map((resource) => resource && (React__default["default"].createElement("tr", { key: resource.id, "data-testid": "search-control-row", onClick: (e) => handleRowClick(e, resource), onAuxClick: (e) => handleRowClick(e, resource) },
-                    checkboxColumn && (React__default["default"].createElement("td", { className: "medplum-search-icon-cell" },
-                        React__default["default"].createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
-                    fields.map((field) => (React__default["default"].createElement("td", { key: field.name }, renderValue(resource, field))))))))),
-            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React__default["default"].createElement("div", { "data-testid": "empty-search", className: "medplum-empty-search" }, "No results")),
-            (lastResult === null || lastResult === void 0 ? void 0 : lastResult.total) !== undefined && lastResult.total > 0 && (React__default["default"].createElement(core$1.Center, { m: "md", p: "md" },
-                React__default["default"].createElement(core$1.Pagination, { page: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getItemAriaLabel: (page) => {
+                    !props.hideFilters && (React.createElement("tr", null,
+                        checkboxColumn && React.createElement("th", null),
+                        fields.map((field) => (React.createElement("th", { key: field.name }, field.searchParams && (React.createElement(FilterDescription, { resourceType: resourceType, searchParams: field.searchParams, filters: props.search.filters })))))))),
+                React.createElement("tbody", null, resources === null || resources === void 0 ? void 0 : resources.map((resource) => resource && (React.createElement("tr", { key: resource.id, className: classes.tr, "data-testid": "search-control-row", onClick: (e) => handleRowClick(e, resource), onAuxClick: (e) => handleRowClick(e, resource) },
+                    checkboxColumn && (React.createElement("td", null,
+                        React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
+                    fields.map((field) => (React.createElement("td", { key: field.name }, renderValue(resource, field))))))))),
+            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React.createElement(core$1.Container, null,
+                React.createElement(core$1.Center, null,
+                    React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
+            (lastResult === null || lastResult === void 0 ? void 0 : lastResult.total) !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
+                React.createElement(core$1.Pagination, { page: getPage(search), total: getTotalPages(search, lastResult.total), onChange: (newPage) => emitSearchChange(setPage(search, newPage)), getItemAriaLabel: (page) => {
                         switch (page) {
                             case 'prev':
                                 return 'Previous page';
@@ -3859,38 +3959,38 @@
                                 return undefined;
                         }
                     } }))),
-            outcome && (React__default["default"].createElement("div", { "data-testid": "search-error", className: "medplum-empty-search" },
-                React__default["default"].createElement("pre", { style: { textAlign: 'left' } }, JSON.stringify(outcome, undefined, 2)))),
-            React__default["default"].createElement(SearchFieldEditor, { search: props.search, visible: stateRef.current.fieldEditorVisible, onOk: (result) => {
+            outcome && (React.createElement("div", { "data-testid": "search-error" },
+                React.createElement("pre", { style: { textAlign: 'left' } }, JSON.stringify(outcome, undefined, 2)))),
+            React.createElement(SearchFieldEditor, { search: props.search, visible: stateRef.current.fieldEditorVisible, onOk: (result) => {
                     emitSearchChange(result);
                     setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: false }));
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: false }));
                 } }),
-            React__default["default"].createElement(SearchFilterEditor, { search: props.search, visible: stateRef.current.filterEditorVisible, onOk: (result) => {
+            React.createElement(SearchFilterEditor, { search: props.search, visible: stateRef.current.filterEditorVisible, onOk: (result) => {
                     emitSearchChange(result);
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: false }));
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: false }));
                 } }),
-            React__default["default"].createElement(SearchFilterValueDialog, { visible: stateRef.current.filterDialogVisible, title: 'Input', resourceType: resourceType, searchParam: state.filterDialogSearchParam, filter: state.filterDialogFilter, defaultValue: '', onOk: (filter) => {
+            React.createElement(SearchFilterValueDialog, { key: (_c = state.filterDialogSearchParam) === null || _c === void 0 ? void 0 : _c.code, visible: stateRef.current.filterDialogVisible, title: 'Input', resourceType: resourceType, searchParam: state.filterDialogSearchParam, filter: state.filterDialogFilter, defaultValue: '', onOk: (filter) => {
                     emitSearchChange(addFilter(props.search, filter.code, filter.operator, filter.value));
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterDialogVisible: false }));
                 }, onCancel: () => {
                     setState(Object.assign(Object.assign({}, stateRef.current), { filterDialogVisible: false }));
                 } })));
     }
-    const MemoizedSearchControl = React__default["default"].memo(SearchControl);
+    const MemoizedSearchControl = React.memo(SearchControl);
     function FilterDescription(props) {
         var _a;
         const filters = ((_a = props.filters) !== null && _a !== void 0 ? _a : []).filter((f) => props.searchParams.find((p) => p.code === f.code));
         if (filters.length === 0) {
-            return React__default["default"].createElement("span", null, "no filters");
+            return React.createElement("span", null, "no filters");
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, filters.map((filter, index) => (React__default["default"].createElement("div", { key: `filter-${index}-${filters.length}` },
+        return (React.createElement(React.Fragment, null, filters.map((filter, index) => (React.createElement("div", { key: `filter-${index}-${filters.length}` },
             getOpString(filter.operator),
             "\u00A0",
-            React__default["default"].createElement(SearchFilterValueDisplay, { resourceType: props.resourceType, filter: filter }))))));
+            React.createElement(SearchFilterValueDisplay, { resourceType: props.resourceType, filter: filter }))))));
     }
     function getPage(search) {
         return Math.floor((search.offset || 0) / (search.count || core.DEFAULT_SEARCH_COUNT)) + 1;
@@ -3994,29 +4094,29 @@
         }, [medplum, props.resourceType]);
         const typeSchema = (_a = schema === null || schema === void 0 ? void 0 : schema.types) === null || _a === void 0 ? void 0 : _a[props.resourceType];
         if (!typeSchema) {
-            return React__default["default"].createElement(core$1.Loader, null);
+            return React.createElement(core$1.Loader, null);
         }
         const checkboxColumn = props.checkboxesEnabled;
-        return (React__default["default"].createElement("div", { className: "medplum-search-control", onContextMenu: (e) => killEvent(e), "data-testid": "search-control" },
-            React__default["default"].createElement(core$1.Table, null,
-                React__default["default"].createElement("thead", null,
-                    React__default["default"].createElement("tr", null,
-                        checkboxColumn && (React__default["default"].createElement("th", { className: "medplum-search-icon-cell" },
-                            React__default["default"].createElement("input", { type: "checkbox", value: "checked", "aria-label": "all-checkbox", "data-testid": "all-checkbox", checked: isAllSelected(), onChange: (e) => handleAllCheckboxClick(e) }))),
-                        fields.map((field) => (React__default["default"].createElement("th", { key: field.name }, field.name))))),
-                React__default["default"].createElement("tbody", null, (_c = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.ResourceList) === null || _c === void 0 ? void 0 : _c.map((resource) => resource && (React__default["default"].createElement("tr", { key: resource.id, "data-testid": "search-control-row", onClick: (e) => handleRowClick(e, resource), onAuxClick: (e) => handleRowClick(e, resource) },
-                    checkboxColumn && (React__default["default"].createElement("td", { className: "medplum-search-icon-cell" },
-                        React__default["default"].createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
+        return (React.createElement("div", { onContextMenu: (e) => killEvent(e), "data-testid": "search-control" },
+            React.createElement(core$1.Table, null,
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        checkboxColumn && (React.createElement("th", null,
+                            React.createElement("input", { type: "checkbox", value: "checked", "aria-label": "all-checkbox", "data-testid": "all-checkbox", checked: isAllSelected(), onChange: (e) => handleAllCheckboxClick(e) }))),
+                        fields.map((field) => (React.createElement("th", { key: field.name }, field.name))))),
+                React.createElement("tbody", null, (_c = (_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.ResourceList) === null || _c === void 0 ? void 0 : _c.map((resource) => resource && (React.createElement("tr", { key: resource.id, "data-testid": "search-control-row", onClick: (e) => handleRowClick(e, resource), onAuxClick: (e) => handleRowClick(e, resource) },
+                    checkboxColumn && (React.createElement("td", null,
+                        React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
                     fields.map((field) => {
-                        return (React__default["default"].createElement("td", { key: field.name },
-                            React__default["default"].createElement(FhirPathDisplay, { propertyType: field.propertyType, path: field.fhirPath, resource: resource })));
+                        return (React.createElement("td", { key: field.name },
+                            React.createElement(FhirPathDisplay, { propertyType: field.propertyType, path: field.fhirPath, resource: resource })));
                     })))))),
-            ((_e = (_d = response === null || response === void 0 ? void 0 : response.data) === null || _d === void 0 ? void 0 : _d.ResourceList) === null || _e === void 0 ? void 0 : _e.length) === 0 && (React__default["default"].createElement("div", { "data-testid": "empty-search", className: "medplum-empty-search" }, "No results")),
-            outcome && (React__default["default"].createElement("div", { "data-testid": "search-error", className: "medplum-empty-search" },
-                React__default["default"].createElement("pre", { style: { textAlign: 'left' } }, JSON.stringify(outcome, undefined, 2)))),
-            props.onBulk && (React__default["default"].createElement(core$1.Button, { onClick: () => props.onBulk(Object.keys(selectedRef.current)) }, "Bulk..."))));
+            ((_e = (_d = response === null || response === void 0 ? void 0 : response.data) === null || _d === void 0 ? void 0 : _d.ResourceList) === null || _e === void 0 ? void 0 : _e.length) === 0 && React.createElement("div", { "data-testid": "empty-search" }, "No results"),
+            outcome && (React.createElement("div", { "data-testid": "search-error" },
+                React.createElement("pre", { style: { textAlign: 'left' } }, JSON.stringify(outcome, undefined, 2)))),
+            props.onBulk && (React.createElement(core$1.Button, { onClick: () => props.onBulk(Object.keys(selectedRef.current)) }, "Bulk..."))));
     }
-    const MemoizedFhirPathTable = React__default["default"].memo(FhirPathTable);
+    const MemoizedFhirPathTable = React.memo(FhirPathTable);
 
     const searches = [
         '$/_history',
@@ -4028,7 +4128,7 @@
         'ServiceRequest?subject=$',
     ];
     function PatientTimeline(props) {
-        return (React__default["default"].createElement(ResourceTimeline, { value: props.patient, buildSearchRequests: (resource) => ({
+        return (React.createElement(ResourceTimeline, { value: props.patient, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
                 type: 'batch',
                 entry: searches.map((search) => ({
@@ -4054,6 +4154,32 @@
             }) }));
     }
 
+    const useStyles$6 = core$1.createStyles((theme) => ({
+        section: {
+            position: 'relative',
+            margin: '4px 4px 8px 0',
+            padding: '6px 12px 16px 6px',
+            border: `1.5px solid ${theme.colors.gray[1]}`,
+            borderRadius: theme.radius.sm,
+            transition: 'all 0.1s',
+        },
+        hovering: {
+            border: `1.5px solid ${theme.colors.blue[5]}`,
+        },
+        editing: {
+            border: `1.5px solid ${theme.colors.gray[1]}`,
+            borderLeft: `4px solid ${theme.colors.blue[5]}`,
+        },
+        bottomActions: {
+            position: 'absolute',
+            right: 4,
+            bottom: 0,
+            fontSize: theme.fontSizes.xs,
+            '& a': {
+                marginLeft: 8,
+            },
+        },
+    }));
     function PlanDefinitionBuilder(props) {
         const medplum = useMedplum();
         const defaultValue = useResource(props.value);
@@ -4087,13 +4213,14 @@
         function changeProperty(property, newValue) {
             setValue(Object.assign(Object.assign({}, valueRef.current), { [property]: newValue }));
         }
-        return (React__default["default"].createElement("div", { className: "medplum-questionnaire-builder" },
-            React__default["default"].createElement(Form, { testid: "questionnaire-form", onSubmit: () => props.onSubmit(value) },
-                React__default["default"].createElement(core$1.TextInput, { label: "Plan Title", defaultValue: value.title, onChange: (e) => changeProperty('title', e.currentTarget.value) }),
-                React__default["default"].createElement(ActionArrayBuilder, { actions: value.action || [], selectedKey: selectedKey, setSelectedKey: setSelectedKey, hoverKey: hoverKey, setHoverKey: setHoverKey, onChange: (x) => changeProperty('action', x) }),
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Save"))));
+        return (React.createElement("div", null,
+            React.createElement(Form, { testid: "questionnaire-form", onSubmit: () => props.onSubmit(value) },
+                React.createElement(core$1.TextInput, { label: "Plan Title", defaultValue: value.title, onChange: (e) => changeProperty('title', e.currentTarget.value) }),
+                React.createElement(ActionArrayBuilder, { actions: value.action || [], selectedKey: selectedKey, setSelectedKey: setSelectedKey, hoverKey: hoverKey, setHoverKey: setHoverKey, onChange: (x) => changeProperty('action', x) }),
+                React.createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
+        const { classes } = useStyles$6();
         const actionsRef = React.useRef();
         actionsRef.current = props.actions;
         function changeAction(changedAction) {
@@ -4106,16 +4233,17 @@
         function removeAction(removedAction) {
             props.onChange(actionsRef.current.filter((i) => i !== removedAction));
         }
-        return (React__default["default"].createElement("div", { className: "section" },
-            props.actions.map((action) => (React__default["default"].createElement("div", { key: action.id },
-                React__default["default"].createElement(ActionBuilder, { action: action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeAction, onRemove: () => removeAction(action) })))),
-            React__default["default"].createElement("div", { className: "bottom-actions" },
-                React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+        return (React.createElement("div", { className: classes.section },
+            props.actions.map((action) => (React.createElement("div", { key: action.id },
+                React.createElement(ActionBuilder, { action: action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeAction, onRemove: () => removeAction(action) })))),
+            React.createElement("div", { className: classes.bottomActions },
+                React.createElement("a", { href: "#", onClick: (e) => {
                         killEvent(e);
                         addAction({ id: generateId$1() });
                     } }, "Add action"))));
     }
     function ActionBuilder(props) {
+        const { classes, cx } = useStyles$6();
         const { action } = props;
         const actionType = getInitialActionType(action);
         const editing = props.selectedKey === props.action.id;
@@ -4128,11 +4256,14 @@
             killEvent(e);
             props.setHoverKey(props.action.id);
         }
-        const className = editing ? 'section editing' : hovering ? 'section hovering' : 'section';
-        return (React__default["default"].createElement("div", { "data-testid": action.id, className: className, onClick: onClick, onMouseOver: onHover },
-            editing ? (React__default["default"].createElement(ActionEditor, { action: action, actionType: actionType, onChange: props.onChange, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onRemove: props.onRemove })) : (React__default["default"].createElement(ActionDisplay, { action: action, actionType: actionType })),
-            React__default["default"].createElement("div", { className: "bottom-actions" },
-                React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+        const className = cx(classes.section, {
+            [classes.editing]: editing,
+            [classes.hovering]: hovering && !editing,
+        });
+        return (React.createElement("div", { "data-testid": action.id, className: className, onClick: onClick, onMouseOver: onHover },
+            editing ? (React.createElement(ActionEditor, { action: action, actionType: actionType, onChange: props.onChange, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onRemove: props.onRemove })) : (React.createElement(ActionDisplay, { action: action, actionType: actionType })),
+            React.createElement("div", { className: classes.bottomActions },
+                React.createElement("a", { href: "#", onClick: (e) => {
                         e.preventDefault();
                         props.onRemove();
                     } }, "Remove"))));
@@ -4146,15 +4277,15 @@
     function ActionDisplay(props) {
         const { action, actionType } = props;
         const [propertyValue, propertyType] = getActionTiming(action);
-        return (React__default["default"].createElement("div", null,
-            React__default["default"].createElement("div", null,
+        return (React.createElement("div", null,
+            React.createElement("div", null,
                 action.title || 'Untitled',
                 " ",
                 actionType && `(${actionType})`),
-            action.definitionCanonical && (React__default["default"].createElement("div", null,
-                React__default["default"].createElement(ReferenceDisplay, { value: { reference: action.definitionCanonical } }))),
-            propertyValue && (React__default["default"].createElement("div", null,
-                React__default["default"].createElement(ResourcePropertyDisplay, { property: timingProperty, propertyType: propertyType, value: propertyValue })))));
+            action.definitionCanonical && (React.createElement("div", null,
+                React.createElement(ReferenceDisplay, { value: { reference: action.definitionCanonical } }))),
+            propertyValue && (React.createElement("div", null,
+                React.createElement(ResourcePropertyDisplay, { property: timingProperty, propertyType: propertyType, value: propertyValue })))));
     }
     function ActionEditor(props) {
         const { action } = props;
@@ -4162,35 +4293,34 @@
         function changeProperty(property, value) {
             props.onChange(Object.assign(Object.assign({}, action), { [property]: value }));
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(core$1.TextInput, { name: `actionTitle-${action.id}`, label: "Title", defaultValue: action.title, onChange: (e) => changeProperty('title', e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.TextInput, { name: `actionDescription-${action.id}`, label: "Description", defaultValue: action.description, onChange: (e) => changeProperty('description', e.currentTarget.value) }),
-            React__default["default"].createElement(core$1.NativeSelect, { label: "Type of Action", description: "The type of the action to be performed.", name: `actionType-${action.id}`, defaultValue: actionType, onChange: (e) => setActionType(e.currentTarget.value), data: ['', 'appointment', 'lab', 'questionnaire', 'task'] }),
-            action.action && action.action.length > 0 && (React__default["default"].createElement(ActionArrayBuilder, { actions: action.action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: (x) => changeProperty('action', x) })),
+        return (React.createElement(core$1.Stack, { spacing: "xl" },
+            React.createElement(core$1.TextInput, { name: `actionTitle-${action.id}`, label: "Title", defaultValue: action.title, onChange: (e) => changeProperty('title', e.currentTarget.value) }),
+            React.createElement(core$1.TextInput, { name: `actionDescription-${action.id}`, label: "Description", defaultValue: action.description, onChange: (e) => changeProperty('description', e.currentTarget.value) }),
+            React.createElement(core$1.NativeSelect, { label: "Type of Action", description: "The type of the action to be performed.", name: `actionType-${action.id}`, defaultValue: actionType, onChange: (e) => setActionType(e.currentTarget.value), data: ['', 'appointment', 'lab', 'questionnaire', 'task'] }),
+            action.action && action.action.length > 0 && (React.createElement(ActionArrayBuilder, { actions: action.action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: (x) => changeProperty('action', x) })),
             (() => {
                 switch (actionType) {
                     case 'appointment':
-                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Appointment", description: "The subject must schedule an appointment from the schedule.", resourceType: "Schedule", action: action, onChange: props.onChange }));
+                        return (React.createElement(ActionResourceTypeBuilder, { title: "Appointment", description: "The subject must schedule an appointment from the schedule.", resourceType: "Schedule", action: action, onChange: props.onChange }));
                     case 'lab':
-                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Lab", description: "The subject must complete the following lab panel.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
+                        return (React.createElement(ActionResourceTypeBuilder, { title: "Lab", description: "The subject must complete the following lab panel.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
                     case 'questionnaire':
-                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Questionnaire", description: "The subject must complete the selected questionnaire.", resourceType: "Questionnaire", action: action, onChange: props.onChange }));
+                        return (React.createElement(ActionResourceTypeBuilder, { title: "Questionnaire", description: "The subject must complete the selected questionnaire.", resourceType: "Questionnaire", action: action, onChange: props.onChange }));
                     case 'task':
-                        return (React__default["default"].createElement(ActionResourceTypeBuilder, { title: "Task", description: "The subject must complete the following task.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
+                        return (React.createElement(ActionResourceTypeBuilder, { title: "Task", description: "The subject must complete the following task.", resourceType: "ActivityDefinition", action: action, onChange: props.onChange }));
                     default:
                         return null;
                 }
             })(),
-            React__default["default"].createElement("p", null, "Timing"),
-            React__default["default"].createElement("p", null, "When the action should take place."),
-            React__default["default"].createElement(ActionTimingInput, { name: 'timing-' + action.id, action: action, onChange: props.onChange })));
+            React.createElement(FormSection, { title: "Timing", description: "When the action should take place." },
+                React.createElement(ActionTimingInput, { name: 'timing-' + action.id, action: action, onChange: props.onChange }))));
     }
     function ActionResourceTypeBuilder(props) {
         const { id, definitionCanonical } = props.action;
         const reference = (definitionCanonical === null || definitionCanonical === void 0 ? void 0 : definitionCanonical.startsWith(props.resourceType + '/'))
             ? { reference: definitionCanonical }
             : undefined;
-        return (React__default["default"].createElement(ResourceInput, { name: id, resourceType: props.resourceType, defaultValue: reference, loadOnFocus: true, onChange: (newValue) => {
+        return (React.createElement(ResourceInput, { name: id, resourceType: props.resourceType, defaultValue: reference, loadOnFocus: true, onChange: (newValue) => {
                 if (newValue) {
                     props.onChange(Object.assign(Object.assign({}, props.action), { definitionCanonical: core.getReferenceString(newValue) }));
                 }
@@ -4203,7 +4333,7 @@
         const value = props.action;
         const key = 'timing';
         const [propertyValue, propertyType] = getActionTiming(value);
-        return (React__default["default"].createElement(ResourcePropertyInput, { property: timingProperty, name: "timing[x]", defaultValue: propertyValue, defaultPropertyType: propertyType, onChange: (newValue, propName) => {
+        return (React.createElement(ResourcePropertyInput, { property: timingProperty, name: "timing[x]", defaultValue: propertyValue, defaultPropertyType: propertyType, onChange: (newValue, propName) => {
                 props.onChange(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, timingProperty, newValue));
             } }));
     }
@@ -4305,14 +4435,15 @@
         if (!schema || !questionnaire) {
             return null;
         }
-        return (React__default["default"].createElement(Form, { testid: "questionnaire-form", onSubmit: () => {
+        return (React.createElement(Form, { testid: "questionnaire-form", onSubmit: () => {
                 if (props.onSubmit && response) {
                     props.onSubmit(Object.assign(Object.assign({}, response), { questionnaire: core.getReferenceString(questionnaire), subject: props.subject, source: core.createReference(source), authored: new Date().toISOString() }));
                 }
             } },
-            questionnaire.title && React__default["default"].createElement("h1", null, questionnaire.title),
-            questionnaire.item && (React__default["default"].createElement(QuestionnaireFormItemArray, { items: questionnaire.item, answers: answers, onChange: setItems })),
-            React__default["default"].createElement(core$1.Button, { type: "submit" }, props.submitButtonText || 'OK')));
+            questionnaire.title && React.createElement(core$1.Title, null, questionnaire.title),
+            questionnaire.item && (React.createElement(QuestionnaireFormItemArray, { items: questionnaire.item, answers: answers, onChange: setItems })),
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                React.createElement(core$1.Button, { type: "submit" }, props.submitButtonText || 'OK'))));
     }
     function QuestionnaireFormItemArray(props) {
         const [responseItems, setResponseItems] = React.useState(buildInitialResponseItems(props.items));
@@ -4322,27 +4453,27 @@
             setResponseItems(newResponseItems);
             props.onChange(newResponseItems);
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, props.items.map((item, index) => {
+        return (React.createElement(core$1.Stack, null, props.items.map((item, index) => {
             if (!isQuestionEnabled(item, props.answers)) {
                 return null;
             }
             if (item.type === exports.QuestionnaireItemType.display) {
-                return React__default["default"].createElement("p", { key: item.linkId }, item.text);
+                return React.createElement("p", { key: item.linkId }, item.text);
             }
             if (item.type === exports.QuestionnaireItemType.group) {
-                return (React__default["default"].createElement(QuestionnaireFormItem, { key: item.linkId, item: item, answers: props.answers, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) }));
+                return (React.createElement(QuestionnaireFormItem, { key: item.linkId, item: item, answers: props.answers, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) }));
             }
             if (item.type === exports.QuestionnaireItemType.boolean) {
                 const initial = item.initial && item.initial.length > 0 ? item.initial[0] : undefined;
-                return (React__default["default"].createElement(CheckboxFormSection, { key: item.linkId, title: item.text, htmlFor: item.linkId },
-                    React__default["default"].createElement(core$1.Checkbox, { id: item.linkId, name: item.linkId, defaultChecked: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (e) => setResponseItem(index, {
+                return (React.createElement(CheckboxFormSection, { key: item.linkId, title: item.text, htmlFor: item.linkId },
+                    React.createElement(core$1.Checkbox, { id: item.linkId, name: item.linkId, defaultChecked: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (e) => setResponseItem(index, {
                             linkId: item.linkId,
                             text: item.text,
                             answer: [{ valueBoolean: e.currentTarget.checked }],
                         }) })));
             }
-            return (React__default["default"].createElement(FormSection, { key: item.linkId, htmlFor: item.linkId, title: item.text || '' },
-                React__default["default"].createElement(QuestionnaireFormItem, { item: item, answers: props.answers, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) })));
+            return (React.createElement(FormSection, { key: item.linkId, htmlFor: item.linkId, title: item.text || '' },
+                React.createElement(QuestionnaireFormItem, { item: item, answers: props.answers, onChange: (newResponseItem) => setResponseItem(index, newResponseItem) })));
         })));
     }
     function QuestionnaireFormItem(props) {
@@ -4372,39 +4503,39 @@
         }
         switch (type) {
             case exports.QuestionnaireItemType.group:
-                return (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("h3", null, item.text),
-                    item.item && (React__default["default"].createElement(QuestionnaireFormItemArray, { items: item.item, answers: props.answers, onChange: onChangeItem }))));
+                return (React.createElement("div", null,
+                    React.createElement("h3", null, item.text),
+                    item.item && (React.createElement(QuestionnaireFormItemArray, { items: item.item, answers: props.answers, onChange: onChangeItem }))));
             case exports.QuestionnaireItemType.boolean:
-                return (React__default["default"].createElement(core$1.Checkbox, { id: name, name: name, defaultChecked: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (e) => onChangeAnswer({ valueBoolean: e.currentTarget.checked }) }));
+                return (React.createElement(core$1.Checkbox, { id: name, name: name, defaultChecked: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (e) => onChangeAnswer({ valueBoolean: e.currentTarget.checked }) }));
             case exports.QuestionnaireItemType.decimal:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "number", step: "any", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDecimal, onChange: (e) => onChangeAnswer({ valueDecimal: e.currentTarget.valueAsNumber }) }));
+                return (React.createElement(core$1.TextInput, { type: "number", step: "any", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDecimal, onChange: (e) => onChangeAnswer({ valueDecimal: e.currentTarget.valueAsNumber }) }));
             case exports.QuestionnaireItemType.integer:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "number", step: 1, id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueInteger, onChange: (e) => onChangeAnswer({ valueInteger: e.currentTarget.valueAsNumber }) }));
+                return (React.createElement(core$1.TextInput, { type: "number", step: 1, id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueInteger, onChange: (e) => onChangeAnswer({ valueInteger: e.currentTarget.valueAsNumber }) }));
             case exports.QuestionnaireItemType.date:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "date", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDate, onChange: (e) => onChangeAnswer({ valueDate: e.currentTarget.value }) }));
+                return (React.createElement(core$1.TextInput, { type: "date", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDate, onChange: (e) => onChangeAnswer({ valueDate: e.currentTarget.value }) }));
             case exports.QuestionnaireItemType.dateTime:
-                return (React__default["default"].createElement(DateTimeInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDateTime, onChange: (newValue) => onChangeAnswer({ valueDateTime: newValue }) }));
+                return (React.createElement(DateTimeInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDateTime, onChange: (newValue) => onChangeAnswer({ valueDateTime: newValue }) }));
             case exports.QuestionnaireItemType.time:
-                return (React__default["default"].createElement(core$1.TextInput, { type: "time", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueTime, onChange: (e) => onChangeAnswer({ valueTime: e.currentTarget.value }) }));
+                return (React.createElement(core$1.TextInput, { type: "time", id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueTime, onChange: (e) => onChangeAnswer({ valueTime: e.currentTarget.value }) }));
             case exports.QuestionnaireItemType.string:
             case exports.QuestionnaireItemType.url:
-                return (React__default["default"].createElement(core$1.TextInput, { id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (e) => onChangeAnswer({ valueString: e.currentTarget.value }) }));
+                return (React.createElement(core$1.TextInput, { id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (e) => onChangeAnswer({ valueString: e.currentTarget.value }) }));
             case exports.QuestionnaireItemType.text:
-                return (React__default["default"].createElement(core$1.Textarea, { id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (e) => onChangeAnswer({ valueString: e.currentTarget.value }) }));
+                return (React.createElement(core$1.Textarea, { id: name, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (e) => onChangeAnswer({ valueString: e.currentTarget.value }) }));
             case exports.QuestionnaireItemType.attachment:
-                return (React__default["default"].createElement(AttachmentInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueAttachment, onChange: (newValue) => onChangeAnswer({ valueAttachment: newValue }) }));
+                return (React.createElement(AttachmentInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueAttachment, onChange: (newValue) => onChangeAnswer({ valueAttachment: newValue }) }));
             case exports.QuestionnaireItemType.reference:
-                return (React__default["default"].createElement(ReferenceInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueReference, onChange: (newValue) => onChangeAnswer({ valueReference: newValue }) }));
+                return (React.createElement(ReferenceInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueReference, onChange: (newValue) => onChangeAnswer({ valueReference: newValue }) }));
             case exports.QuestionnaireItemType.quantity:
-                return (React__default["default"].createElement(QuantityInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueQuantity, onChange: (newValue) => onChangeAnswer({ valueQuantity: newValue }) }));
+                return (React.createElement(QuantityInput, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueQuantity, onChange: (newValue) => onChangeAnswer({ valueQuantity: newValue }) }));
             case exports.QuestionnaireItemType.choice:
             case exports.QuestionnaireItemType.openChoice:
                 if (isDropDownChoice(item)) {
-                    return (React__default["default"].createElement(QuestionnaireChoiceDropDownInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+                    return (React.createElement(QuestionnaireChoiceDropDownInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
                 }
                 else {
-                    return (React__default["default"].createElement(QuestionnaireChoiceRadioInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
+                    return (React.createElement(QuestionnaireChoiceRadioInput, { name: name, item: item, initial: initial, onChangeAnswer: onChangeAnswer }));
                 }
         }
         return null;
@@ -4419,7 +4550,7 @@
                 data.push(typedValueToString(optionValue));
             }
         }
-        return (React__default["default"].createElement(core$1.NativeSelect, { id: name, name: name, className: "medplum-select", onChange: (e) => {
+        return (React.createElement(core$1.NativeSelect, { id: name, name: name, onChange: (e) => {
                 const index = e.currentTarget.selectedIndex;
                 if (index === 0) {
                     props.onChangeAnswer({});
@@ -4447,18 +4578,27 @@
         const { name, item, initial, onChangeAnswer } = props;
         const valueElementDefinition = core.globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
         const initialValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, item.answerOption &&
-            item.answerOption.map((option, index) => {
+        const options = [];
+        let defaultValue = undefined;
+        if (item.answerOption) {
+            for (let i = 0; i < item.answerOption.length; i++) {
+                const option = item.answerOption[i];
+                const optionName = `${name}-option-${i}`;
                 const optionValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                const propertyName = 'value' + core.capitalize(optionValue.type);
-                const optionName = `${name}-option-${index}`;
-                return (React__default["default"].createElement("div", { key: optionName, className: "medplum-questionnaire-option-row" },
-                    React__default["default"].createElement("div", { className: "medplum-questionnaire-option-checkbox" },
-                        React__default["default"].createElement("input", { type: "radio", id: optionName, name: name, value: optionValue.value, defaultChecked: initialValue && core.stringify(optionValue) === core.stringify(initialValue), onChange: () => onChangeAnswer({ [propertyName]: optionValue.value }) })),
-                    React__default["default"].createElement("div", null,
-                        React__default["default"].createElement("label", { htmlFor: optionName },
-                            React__default["default"].createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })))));
-            })));
+                if (initialValue && core.stringify(optionValue) === core.stringify(initialValue)) {
+                    defaultValue = optionName;
+                }
+                options.push([optionName, optionValue]);
+            }
+        }
+        return (React.createElement(core$1.Radio.Group, { name: name, orientation: "vertical", defaultValue: defaultValue, onChange: (newValue) => {
+                const option = options.find((option) => option[0] === newValue);
+                if (option) {
+                    const optionValue = option[1];
+                    const propertyName = 'value' + core.capitalize(optionValue.type);
+                    onChangeAnswer({ [propertyName]: optionValue.value });
+                }
+            } }, options.map(([optionName, optionValue]) => (React.createElement(core$1.Radio, { key: optionName, id: optionName, value: optionName, label: React.createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value }) })))));
     }
     function buildInitialResponse(questionnaire) {
         const response = {
@@ -4524,6 +4664,50 @@
         }
     }
 
+    const useStyles$5 = core$1.createStyles((theme) => ({
+        section: {
+            position: 'relative',
+            margin: '4px 4px 8px 0',
+            padding: '6px 12px 16px 6px',
+            border: `1.5px solid ${theme.colors.gray[1]}`,
+            borderRadius: theme.radius.sm,
+            transition: 'all 0.1s',
+        },
+        hovering: {
+            border: `1.5px solid ${theme.colors.blue[5]}`,
+        },
+        editing: {
+            border: `1.5px solid ${theme.colors.gray[1]}`,
+            borderLeft: `4px solid ${theme.colors.blue[5]}`,
+        },
+        questionBody: {
+            maxWidth: 600,
+        },
+        topActions: {
+            position: 'absolute',
+            right: 4,
+            top: 1,
+            padding: 4,
+            color: theme.colors.gray[5],
+            fontSize: theme.fontSizes.xs,
+        },
+        bottomActions: {
+            position: 'absolute',
+            right: 4,
+            bottom: 0,
+            fontSize: theme.fontSizes.xs,
+            '& a': {
+                marginLeft: 8,
+            },
+        },
+        linkIdInput: {
+            width: 100,
+            marginBottom: 4,
+        },
+        typeSelect: {
+            width: 100,
+        },
+    }));
     function QuestionnaireBuilder(props) {
         const medplum = useMedplum();
         const defaultValue = useResource(props.questionnaire);
@@ -4552,13 +4736,14 @@
         if (!schema || !value) {
             return null;
         }
-        return (React__default["default"].createElement("div", { className: "medplum-questionnaire-builder" },
-            React__default["default"].createElement(Form, { testid: "questionnaire-form", onSubmit: () => props.onSubmit(value) },
-                React__default["default"].createElement(ItemBuilder, { item: value, selectedKey: selectedKey, setSelectedKey: setSelectedKey, hoverKey: hoverKey, setHoverKey: setHoverKey, onChange: setValue }),
-                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Save"))));
+        return (React.createElement("div", null,
+            React.createElement(Form, { testid: "questionnaire-form", onSubmit: () => props.onSubmit(value) },
+                React.createElement(ItemBuilder, { item: value, selectedKey: selectedKey, setSelectedKey: setSelectedKey, hoverKey: hoverKey, setHoverKey: setHoverKey, onChange: setValue }),
+                React.createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ItemBuilder(props) {
         var _a;
+        const { classes, cx } = useStyles$5();
         const resource = props.item;
         const item = props.item;
         const isResource = 'resourceType' in props.item;
@@ -4592,41 +4777,43 @@
         function changeProperty(property, value) {
             props.onChange(Object.assign(Object.assign({}, itemRef.current), { [property]: value }));
         }
-        const className = editing ? 'section editing' : hovering ? 'section hovering' : 'section';
-        return (React__default["default"].createElement("div", { "data-testid": item.linkId, className: className, onClick: onClick, onMouseOver: onHover },
-            editing ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-                isResource && (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(core$1.TextInput, { defaultValue: resource.title, onChange: (e) => changeProperty('title', e.currentTarget.value) }))),
-                !isContainer && (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(core$1.NativeSelect, { defaultValue: item.type, onChange: (e) => changeProperty('type', e.currentTarget.value), data: [
-                            { value: 'display', label: 'Display' },
-                            { value: 'boolean', label: 'Boolean' },
-                            { value: 'decimal', label: 'Decimal' },
-                            { value: 'integer', label: 'Integer' },
-                            { value: 'date', label: 'Date' },
-                            { value: 'dateTime', label: 'Date/Time' },
-                            { value: 'time', label: 'Time' },
-                            { value: 'string', label: 'String' },
-                            { value: 'text', label: 'Text' },
-                            { value: 'url', label: 'URL' },
-                            { value: 'choice', label: 'Choice' },
-                            { value: 'open-choice', label: 'Open Choice' },
-                            { value: 'attachment', label: 'Attachment' },
-                            { value: 'reference', label: 'Reference' },
-                            { value: 'quantity', label: 'Quantity' },
-                        ] }))),
-                !isResource && (React__default["default"].createElement(core$1.Textarea, { style: { width: '95%', height: '100px', minHeight: '100px', margin: '8px 4px 4px 4px' }, defaultValue: item.text, onChange: (e) => changeProperty('text', e.currentTarget.value) })),
-                isChoiceQuestion(item) && (React__default["default"].createElement(AnswerBuilder, { options: item.answerOption, onChange: (newOptions) => changeProperty('answerOption', newOptions) })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                resource.title && React__default["default"].createElement("h1", null, resource.title),
-                item.text && React__default["default"].createElement("p", null, item.text),
-                !isContainer && React__default["default"].createElement(QuestionnaireFormItem, { item: item, answers: {}, onChange: () => undefined }))),
+        const className = cx(classes.section, {
+            [classes.editing]: editing,
+            [classes.hovering]: hovering && !editing,
+        });
+        return (React.createElement("div", { "data-testid": item.linkId, className: className, onClick: onClick, onMouseOver: onHover },
+            React.createElement("div", { className: classes.questionBody }, editing ? (React.createElement(React.Fragment, null,
+                isResource && (React.createElement(core$1.TextInput, { size: "xl", defaultValue: resource.title, onChange: (e) => changeProperty('title', e.currentTarget.value) })),
+                !isResource && (React.createElement(core$1.Textarea, { autosize: true, minRows: 2, defaultValue: item.text, onChange: (e) => changeProperty('text', e.currentTarget.value) })),
+                isChoiceQuestion(item) && (React.createElement(AnswerBuilder, { options: item.answerOption, onChange: (newOptions) => changeProperty('answerOption', newOptions) })))) : (React.createElement(React.Fragment, null,
+                resource.title && React.createElement(core$1.Title, null, resource.title),
+                item.text && React.createElement("div", null, item.text),
+                !isContainer && React.createElement(QuestionnaireFormItem, { item: item, answers: {}, onChange: () => undefined })))),
             item.item &&
-                item.item.map((i) => (React__default["default"].createElement("div", { key: i.id },
-                    React__default["default"].createElement(ItemBuilder, { item: i, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeItem, onRemove: () => removeItem(i) })))),
-            !isContainer && (React__default["default"].createElement("div", { className: "top-actions" }, editing ? (React__default["default"].createElement(core$1.TextInput, { defaultValue: item.linkId, onChange: (e) => changeProperty('linkId', e.currentTarget.value) })) : (React__default["default"].createElement("div", null, linkId)))),
-            React__default["default"].createElement("div", { className: "bottom-actions" },
-                isContainer && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                item.item.map((i) => (React.createElement("div", { key: i.id },
+                    React.createElement(ItemBuilder, { item: i, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeItem, onRemove: () => removeItem(i) })))),
+            !isContainer && (React.createElement("div", { className: classes.topActions }, editing ? (React.createElement(React.Fragment, null,
+                React.createElement(core$1.TextInput, { size: "xs", className: classes.linkIdInput, defaultValue: item.linkId, onChange: (e) => changeProperty('linkId', e.currentTarget.value) }),
+                !isContainer && (React.createElement(core$1.NativeSelect, { size: "xs", className: classes.typeSelect, defaultValue: item.type, onChange: (e) => changeProperty('type', e.currentTarget.value), data: [
+                        { value: 'display', label: 'Display' },
+                        { value: 'boolean', label: 'Boolean' },
+                        { value: 'decimal', label: 'Decimal' },
+                        { value: 'integer', label: 'Integer' },
+                        { value: 'date', label: 'Date' },
+                        { value: 'dateTime', label: 'Date/Time' },
+                        { value: 'time', label: 'Time' },
+                        { value: 'string', label: 'String' },
+                        { value: 'text', label: 'Text' },
+                        { value: 'url', label: 'URL' },
+                        { value: 'choice', label: 'Choice' },
+                        { value: 'open-choice', label: 'Open Choice' },
+                        { value: 'attachment', label: 'Attachment' },
+                        { value: 'reference', label: 'Reference' },
+                        { value: 'quantity', label: 'Quantity' },
+                    ] })))) : (React.createElement("div", null, linkId)))),
+            React.createElement("div", { className: classes.bottomActions },
+                isContainer && (React.createElement(React.Fragment, null,
+                    React.createElement("a", { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4635,7 +4822,7 @@
                                 text: 'Question',
                             });
                         } }, "Add item"),
-                    React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement("a", { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4644,7 +4831,7 @@
                                 text: 'Group',
                             });
                         } }, "Add group"))),
-                !isResource && (React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                editing && !isResource && (React.createElement("a", { href: "#", onClick: (e) => {
                         e.preventDefault();
                         if (props.onRemove) {
                             props.onRemove();
@@ -4655,30 +4842,30 @@
         var _a;
         const property = core.globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
         const options = (_a = props.options) !== null && _a !== void 0 ? _a : [];
-        return (React__default["default"].createElement("div", null,
+        return (React.createElement("div", null,
             options.map((option) => {
                 const [propertyValue, propertyType] = getValueAndType({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                return (React__default["default"].createElement("div", { key: option.id, style: {
+                return (React.createElement("div", { key: option.id, style: {
                         display: 'flex',
                         flexDirection: 'row',
                         justifyContent: 'space-between',
                         alignItems: 'center',
                         width: '80%',
                     } },
-                    React__default["default"].createElement("div", null,
-                        React__default["default"].createElement(ResourcePropertyInput, { key: option.id, name: "value[x]", property: property, defaultPropertyType: propertyType, defaultValue: propertyValue, onChange: (newValue, propName) => {
+                    React.createElement("div", null,
+                        React.createElement(ResourcePropertyInput, { key: option.id, name: "value[x]", property: property, defaultPropertyType: propertyType, defaultValue: propertyValue, onChange: (newValue, propName) => {
                                 const newOptions = [...options];
                                 const index = newOptions.findIndex((o) => o.id === option.id);
                                 newOptions[index] = { id: option.id, [propName]: newValue };
                                 props.onChange(newOptions);
                             } })),
-                    React__default["default"].createElement("div", null,
-                        React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement("div", null,
+                        React.createElement("a", { href: "#", onClick: (e) => {
                                 killEvent(e);
                                 props.onChange(options.filter((o) => o.id !== option.id));
                             } }, "Remove"))));
             }),
-            React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+            React.createElement("a", { href: "#", onClick: (e) => {
                     killEvent(e);
                     props.onChange([
                         ...options,
@@ -4733,6 +4920,265 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
+    const useStyles$4 = core$1.createStyles((theme) => ({
+        section: {
+            position: 'relative',
+            margin: '4px 4px 8px 0',
+            padding: '6px 12px 16px 6px',
+            border: `1.5px solid ${theme.colors.gray[3]}`,
+            borderRadius: theme.radius.sm,
+            transition: 'all 0.1s',
+        },
+    }));
+    // Properties of qualified intervals used for grouping
+    const intervalFilters = ['gender', 'age', 'gestationalAge', 'context', 'appliesTo'];
+    const defaultProps = {
+        definition: { resourceType: 'ObservationDefinition' },
+        onSubmit: () => {
+            return;
+        },
+    };
+    function ReferenceRangeEditor(props) {
+        props = Object.assign(defaultProps, props);
+        const defaultDefinition = props.definition;
+        const [intervalGroups, setIntervalGroups] = React.useState([]);
+        const [groupId, setGroupId] = React.useState(1);
+        const [intervalId, setIntervalId] = React.useState(1);
+        React.useEffect(() => {
+            const definition = ensureQualifiedIntervalKeys(defaultDefinition, setIntervalId);
+            setIntervalGroups(groupQualifiedIntervals(definition.qualifiedInterval || [], setGroupId));
+        }, [defaultDefinition]);
+        return (React.createElement(Form, { testid: "reference-range-editor", onSubmit: submitDefinition },
+            React.createElement(core$1.Stack, null, intervalGroups.map((intervalGroup) => {
+                var _a;
+                return (React.createElement(ReferenceRangeGroupEditor, { unit: getUnitString((_a = defaultDefinition.quantitativeDetails) === null || _a === void 0 ? void 0 : _a.unit), onChange: changeInterval, onAdd: addInterval, onRemove: removeInterval, onRemoveGroup: removeGroup, key: `group-${intervalGroup.id}`, intervalGroup: intervalGroup }));
+            })),
+            React.createElement(core$1.ActionIcon, { title: "Add Group", size: "sm", onClick: (e) => {
+                    killEvent(e);
+                    addGroup({ id: `group-id-${groupId}`, filters: {}, intervals: [] });
+                    setGroupId((id) => id + 1);
+                } },
+                React.createElement(icons.IconCirclePlus, null)),
+            React.createElement(core$1.Group, { position: "right" },
+                React.createElement(core$1.Button, { type: "submit" }, "Save"))));
+        /**
+         * Submit qualified intervals
+         */
+        function submitDefinition() {
+            const qualifiedInterval = intervalGroups
+                .flatMap((group) => group.intervals)
+                .filter((interval) => !isEmptyInterval(interval));
+            props.onSubmit(Object.assign(Object.assign({}, defaultDefinition), { qualifiedInterval }));
+        }
+        /**
+         * Add Remove Interval Groups
+         */
+        function addGroup(addedGroup) {
+            setIntervalGroups((currentGroups) => [...currentGroups, addedGroup]);
+        }
+        function removeGroup(removedGroup) {
+            setIntervalGroups((currentGroups) => currentGroups.filter((group) => group.id !== removedGroup.id));
+        }
+        /**
+         * Add/Remove/Update specific Qualified Intervals
+         */
+        function changeInterval(groupId, changedInterval) {
+            setIntervalGroups((groups) => {
+                var _a, _b;
+                groups = [...groups];
+                const currentGroup = groups.find((g) => g.id === groupId);
+                const index = (_a = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.intervals) === null || _a === void 0 ? void 0 : _a.findIndex((interval) => interval.id === changedInterval.id);
+                if (index !== undefined && ((_b = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.intervals) === null || _b === void 0 ? void 0 : _b[index])) {
+                    currentGroup.intervals[index] = changedInterval;
+                }
+                return groups;
+            });
+        }
+        function addInterval(groupId, addedInterval) {
+            if (addedInterval.id === undefined) {
+                addedInterval.id = `id-${intervalId}`;
+                setIntervalId((id) => id + 1);
+            }
+            setIntervalGroups((groups) => {
+                groups = [...groups];
+                const currentGroupIndex = groups.findIndex((g) => g.id === groupId);
+                if (currentGroupIndex != -1) {
+                    const currentGroup = Object.assign({}, groups[currentGroupIndex]);
+                    currentGroup.intervals = [...currentGroup.intervals, addedInterval];
+                    groups[currentGroupIndex] = currentGroup;
+                }
+                return groups;
+            });
+        }
+        function removeInterval(groupId, removedInterval) {
+            setIntervalGroups((groups) => {
+                groups = [...groups];
+                const currentGroup = groups.find((g) => g.id === groupId);
+                if (currentGroup) {
+                    currentGroup.intervals = currentGroup.intervals.filter((interval) => interval.id !== removedInterval.id);
+                }
+                return groups;
+            });
+        }
+    }
+    function ReferenceRangeGroupEditor(props) {
+        const { intervalGroup, unit } = props;
+        const { classes } = useStyles$4();
+        return (React.createElement(core$1.Container, { "data-testid": intervalGroup.id, className: classes.section },
+            React.createElement(core$1.Stack, { spacing: 'lg' },
+                React.createElement(core$1.Group, { position: "right" },
+                    React.createElement(core$1.ActionIcon, { title: "Remove Group", "data-testid": `remove-group-button-${intervalGroup.id}`, key: `remove-group-button-${intervalGroup.id}`, size: "sm", onClick: (e) => {
+                            killEvent(e);
+                            props.onRemoveGroup(intervalGroup);
+                        } },
+                        React.createElement(icons.IconCircleMinus, null))),
+                React.createElement(ReferenceRangeGroupFilters, { intervalGroup: intervalGroup, onChange: props.onChange }),
+                React.createElement(core$1.Divider, null),
+                intervalGroup.intervals.map((interval) => (React.createElement(core$1.Stack, { key: `interval-${interval.id}`, spacing: 'xs' },
+                    React.createElement(core$1.Group, null,
+                        React.createElement(core$1.TextInput, { key: `condition-${interval.id}`, "data-testid": `condition-${interval.id}`, defaultValue: interval.condition, label: 'Condition: ', size: 'sm', onChange: (e) => {
+                                killEvent(e);
+                                props.onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { condition: e.currentTarget.value.trim() }));
+                            } }),
+                        React.createElement(core$1.ActionIcon, { title: "Remove Interval", size: "sm", key: `remove-interval-${interval.id}`, "data-testid": `remove-interval-${interval.id}`, onClick: (e) => {
+                                killEvent(e);
+                                props.onRemove(intervalGroup.id, interval);
+                            } },
+                            React.createElement(icons.IconCircleMinus, null))),
+                    React.createElement(RangeInput, { onChange: (range) => {
+                            props.onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { range }));
+                        }, key: `range-${interval.id}`, name: `range-${interval.id}`, defaultValue: interval.range })))),
+                React.createElement(core$1.ActionIcon, { title: "Add Interval", size: "sm", onClick: (e) => {
+                        killEvent(e);
+                        props.onAdd(intervalGroup.id, {
+                            range: {
+                                low: { unit },
+                                high: { unit },
+                            },
+                        });
+                    } },
+                    React.createElement(icons.IconCirclePlus, null)))));
+    }
+    /**
+     * Render the "filters" section of the IntervalGroup. Also populates some initial
+     */
+    function ReferenceRangeGroupFilters(props) {
+        var _a, _b;
+        const { intervalGroup, onChange } = props;
+        // Pre-populate the units of the age filter
+        if (!intervalGroup.filters.age) {
+            intervalGroup.filters.age = {};
+        }
+        for (const key of ['low', 'high']) {
+            if (!((_a = intervalGroup.filters.age[key]) === null || _a === void 0 ? void 0 : _a.unit)) {
+                intervalGroup.filters.age[key] = Object.assign(Object.assign({}, intervalGroup.filters.age[key]), { unit: 'years', system: 'http://unitsofmeasure.org' });
+            }
+        }
+        return (React.createElement(core$1.Stack, { style: { maxWidth: '50%' } },
+            React.createElement(core$1.Group, null,
+                React.createElement(core$1.NativeSelect, { data: ['', 'male', 'female'], label: "Gender:", defaultValue: intervalGroup.filters.gender || '', onChange: (e) => {
+                        var _a;
+                        for (const interval of intervalGroup.intervals) {
+                            let newGender = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+                            if (newGender === '') {
+                                newGender = undefined;
+                            }
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { gender: newGender }));
+                        }
+                    } })),
+            React.createElement(core$1.Group, { spacing: 'xs' },
+                React.createElement(core$1.Text, { component: "label", htmlFor: `div-age-${intervalGroup.id}` }, "Age:"),
+                React.createElement("div", { id: `div-age-${intervalGroup.id}` },
+                    React.createElement(RangeInput, { key: `age-${intervalGroup.id}`, name: `age-${intervalGroup.id}`, defaultValue: intervalGroup.filters['age'], onChange: (ageRange) => {
+                            for (const interval of intervalGroup.intervals) {
+                                onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { age: ageRange }));
+                            }
+                        } }))),
+            React.createElement(core$1.NativeSelect, { data: ['', 'pre-puberty', 'follicular', 'midcycle', 'luteal', 'postmenopausal'], label: "Endocrine:", defaultValue: ((_b = intervalGroup.filters.context) === null || _b === void 0 ? void 0 : _b.text) || '', onChange: (e) => {
+                    var _a;
+                    for (const interval of intervalGroup.intervals) {
+                        let newEndocrine = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
+                        if (newEndocrine === '') {
+                            newEndocrine = undefined;
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { context: undefined }));
+                        }
+                        else {
+                            onChange(intervalGroup.id, Object.assign(Object.assign({}, interval), { context: {
+                                    text: newEndocrine,
+                                    coding: [
+                                        { code: newEndocrine, system: 'http://terminology.hl7.org/CodeSystem/referencerange-meaning' },
+                                    ],
+                                } }));
+                        }
+                    }
+                } })));
+    }
+    /**
+     * Helper function that assigns ids to each qualifiedInterval of an ObservationDefinition
+     * @param definition An ObservationDefinition
+     * @param setIntervalId React setState function for the intervalId
+     * @returns
+     */
+    function ensureQualifiedIntervalKeys(definition, setIntervalId) {
+        const intervals = definition.qualifiedInterval || [];
+        // Set the nextId to the max of any existing numeric id
+        let nextId = Math.max(...intervals.map((interval) => {
+            var _a;
+            const existingNum = parseInt(((_a = interval.id) === null || _a === void 0 ? void 0 : _a.substring(3)) || '');
+            return !isNaN(existingNum) ? existingNum : Number.NEGATIVE_INFINITY;
+        })) + 1;
+        if (!Number.isFinite(nextId)) {
+            nextId = 1;
+        }
+        // If an interval doesn't have an id, set it to the nextId
+        definition = Object.assign(Object.assign({}, definition), { qualifiedInterval: intervals.map((interval) => (Object.assign(Object.assign({}, interval), { id: interval.id || `id-${nextId++}` }))) });
+        setIntervalId(nextId);
+        return definition;
+    }
+    /**
+     * Group all ObservationDefinitionQualifiedIntervals based on the values of their "filter" properties,
+     * so that similar ranges can be grouped together
+     */
+    function groupQualifiedIntervals(intervals, setGroupId) {
+        let groupId = 1;
+        const groups = {};
+        for (const interval of intervals) {
+            const groupKey = generateGroupKey(interval);
+            if (!(groupKey in groups)) {
+                groups[groupKey] = {
+                    id: `group-id-${groupId++}`,
+                    filters: Object.fromEntries(intervalFilters.map((f) => [f, interval[f]])),
+                    intervals: [],
+                };
+            }
+            groups[groupKey].intervals.push(interval);
+        }
+        setGroupId(groupId);
+        return Object.values(groups);
+    }
+    /**
+     * Generates a unique string for each set of filter values, so that similarly filtered intervals can be grouped together
+     * @return A "group key" that corresponds to the value of the interval filter properties.
+     */
+    function generateGroupKey(interval) {
+        var _a, _b;
+        const results = [
+            `gender=${interval.gender}`,
+            `age=${core.formatRange(interval.age)}`,
+            `gestationalAge=${core.formatRange(interval.gestationalAge)}`,
+            `context=${(_a = interval.context) === null || _a === void 0 ? void 0 : _a.text}`,
+            `appliesTo=${(_b = interval.appliesTo) === null || _b === void 0 ? void 0 : _b.map((c) => c.text).join('+')}`,
+        ];
+        return results.join(':');
+    }
+    function getUnitString(unit) {
+        return unit && (core.getCodeBySystem(unit, 'http://unitsofmeasure.org') || unit.text);
+    }
+    function isEmptyInterval(interval) {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = interval.range) === null || _a === void 0 ? void 0 : _a.low) === null || _b === void 0 ? void 0 : _b.value) === undefined && ((_d = (_c = interval.range) === null || _c === void 0 ? void 0 : _c.high) === null || _d === void 0 ? void 0 : _d.value) === undefined;
+    }
+
     /*
      * Request status: https://hl7.org/fhir/valueset-request-status.html
      * draft, active, on-hold, revoked, completed, entered-in-error, unknown
@@ -4787,7 +5233,7 @@
         stat: 'red',
     };
     function StatusBadge(props) {
-        return React__default["default"].createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
+        return React.createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
     }
 
     function RequestGroupDisplay(props) {
@@ -4805,27 +5251,27 @@
         if (!requestGroup || !responseBundle) {
             return null;
         }
-        return (React__default["default"].createElement("div", { className: "medplum-request-group" }, (_a = requestGroup.action) === null || _a === void 0 ? void 0 : _a.map((action, index) => {
+        return (React.createElement(core$1.Grid, null, (_a = requestGroup.action) === null || _a === void 0 ? void 0 : _a.map((action, index) => {
             var _a, _b, _c, _d, _e, _f;
             const task = action.resource && findBundleEntry(action.resource);
             const taskInput = (_b = (_a = task === null || task === void 0 ? void 0 : task.input) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.valueReference;
             const taskOutput = (_d = (_c = task === null || task === void 0 ? void 0 : task.output) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.valueReference;
-            return (React__default["default"].createElement("div", { className: "medplum-request-group-task", key: `action-${index}` },
-                React__default["default"].createElement("div", { className: "medplum-request-group-task-checkmark" }, (task === null || task === void 0 ? void 0 : task.status) === 'completed' ? '🗹' : '☐'),
-                React__default["default"].createElement("div", { className: "medplum-request-group-task-details" },
-                    React__default["default"].createElement("div", { className: "medplum-request-group-task-title" }, action.title),
-                    action.description && React__default["default"].createElement("div", null, action.description),
-                    React__default["default"].createElement("div", null,
+            return (React.createElement(React.Fragment, { key: `action-${index}` },
+                React.createElement(core$1.Grid.Col, { span: 1, p: "md" }, (task === null || task === void 0 ? void 0 : task.status) === 'completed' ? React.createElement(icons.IconCheckbox, null) : React.createElement(icons.IconSquare, { color: "gray" })),
+                React.createElement(core$1.Grid.Col, { span: 9, p: "xs" },
+                    React.createElement(core$1.Text, { weight: 500 }, action.title),
+                    action.description && React.createElement("div", null, action.description),
+                    React.createElement("div", null,
                         "Last edited by\u00A0",
-                        React__default["default"].createElement(ResourceName, { value: (_e = task === null || task === void 0 ? void 0 : task.meta) === null || _e === void 0 ? void 0 : _e.author }),
+                        React.createElement(ResourceName, { value: (_e = task === null || task === void 0 ? void 0 : task.meta) === null || _e === void 0 ? void 0 : _e.author }),
                         "\u00A0on\u00A0",
                         core.formatDateTime((_f = task === null || task === void 0 ? void 0 : task.meta) === null || _f === void 0 ? void 0 : _f.lastUpdated)),
-                    React__default["default"].createElement("div", null,
+                    React.createElement("div", null,
                         "Status: ",
-                        React__default["default"].createElement(StatusBadge, { status: (task === null || task === void 0 ? void 0 : task.status) || 'unknown' }))),
-                React__default["default"].createElement("div", { className: "medplum-request-group-task-actions" },
-                    taskInput && !taskOutput && React__default["default"].createElement(core$1.Button, { onClick: () => props.onStart(task, taskInput) }, "Start"),
-                    taskInput && taskOutput && (React__default["default"].createElement(core$1.Button, { onClick: () => props.onEdit(task, taskInput, taskOutput) }, "Edit")))));
+                        React.createElement(StatusBadge, { status: (task === null || task === void 0 ? void 0 : task.status) || 'unknown' }))),
+                React.createElement(core$1.Grid.Col, { span: 2, p: "md" },
+                    taskInput && !taskOutput && React.createElement(core$1.Button, { onClick: () => props.onStart(task, taskInput) }, "Start"),
+                    taskInput && taskOutput && (React.createElement(core$1.Button, { onClick: () => props.onEdit(task, taskInput, taskOutput) }, "Edit")))));
         })));
         function buildBatchRequest(request) {
             var _a;
@@ -5039,8 +5485,56 @@
         }
     }
 
+    const useStyles$3 = core$1.createStyles((theme) => ({
+        container: {
+            overflowX: 'auto',
+        },
+        root: {
+            border: `0.1px solid ${theme.colors.gray[3]}`,
+            borderCollapse: 'collapse',
+            borderRadius: theme.radius.sm,
+            borderSpacing: 0,
+            fontSize: theme.fontSizes.xs,
+            width: '100%',
+            '& td': {
+                padding: '2px 4px 0 4px',
+                verticalAlign: 'top',
+                whiteSpace: 'nowrap',
+            },
+        },
+        startRow: {
+            borderTop: `0.1px solid ${theme.colors.gray[3]}`,
+        },
+        normalRow: {
+            borderTop: 0,
+        },
+        author: {
+            lineHeight: '10px',
+        },
+        dateTime: {
+            borderRight: `0.1px solid ${theme.colors.gray[3]}`,
+            lineHeight: '20px',
+        },
+        lineNumber: {
+            backgroundColor: theme.colors.gray[1],
+            border: 0,
+            color: theme.colors.gray[5],
+            fontFamily: theme.fontFamilyMonospace,
+            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+            textAlign: 'right',
+        },
+        line: {
+            fontFamily: theme.fontFamilyMonospace,
+            fontSize: theme.fontSizes.sm,
+            padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+        },
+        pre: {
+            margin: 0,
+        },
+    }));
     function ResourceBlame(props) {
         var _a, _b;
+        const { classes } = useStyles$3();
         const medplum = useMedplum();
         const [value, setValue] = React.useState(props.history);
         React.useEffect(() => {
@@ -5049,20 +5543,21 @@
             }
         }, [medplum, props.history, props.resourceType, props.id]);
         if (!value) {
-            return React__default["default"].createElement("div", null, "Loading...");
+            return React.createElement("div", null, "Loading...");
         }
         const resource = (_b = (_a = value.entry) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.resource;
         const table = blame(value);
-        return (React__default["default"].createElement("div", { className: "medplum-blame-container" },
-            React__default["default"].createElement("table", { className: "medplum-blame" },
-                React__default["default"].createElement("tbody", null, table.map((row, index) => (React__default["default"].createElement("tr", { key: 'row-' + index, className: row.span > 0 ? 'start-row' : 'normal-row' },
-                    row.span > 0 && (React__default["default"].createElement("td", { className: "details", rowSpan: row.span },
-                        React__default["default"].createElement(core$1.Group, { spacing: "xs", grow: true, noWrap: true },
-                            React__default["default"].createElement(ResourceBadge, { value: row.meta.author, link: true }),
-                            React__default["default"].createElement(MedplumLink, { to: getVersionUrl$1(resource, row.meta.versionId) }, getTimeString(row.meta.lastUpdated))))),
-                    React__default["default"].createElement("td", { className: "line-number" }, index + 1),
-                    React__default["default"].createElement("td", { className: "line" },
-                        React__default["default"].createElement("pre", { className: "line-pre" }, row.value)))))))));
+        return (React.createElement("div", { className: classes.container },
+            React.createElement("table", { className: classes.root },
+                React.createElement("tbody", null, table.map((row, index) => (React.createElement("tr", { key: 'row-' + index, className: row.span > 0 ? classes.startRow : classes.normalRow },
+                    row.span > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { className: classes.author, rowSpan: row.span },
+                            React.createElement(ResourceBadge, { value: row.meta.author, link: true })),
+                        React.createElement("td", { className: classes.dateTime, rowSpan: row.span },
+                            React.createElement(MedplumLink, { to: getVersionUrl$1(resource, row.meta.versionId) }, getTimeString(row.meta.lastUpdated))))),
+                    React.createElement("td", { className: classes.lineNumber }, index + 1),
+                    React.createElement("td", { className: classes.line },
+                        React.createElement("pre", { className: classes.pre }, row.value)))))))));
     }
     function getVersionUrl$1(resource, versionId) {
         return `/${resource.resourceType}/${resource.id}/_history/${versionId}`;
@@ -5095,6 +5590,15 @@
         return `${count} ${count === 1 ? noun : noun + 's'} ago`;
     }
 
+    const useStyles$2 = core$1.createStyles((theme) => ({
+        removed: {
+            color: theme.colors.red[7],
+            textDecoration: 'line-through',
+        },
+        added: {
+            color: theme.colors.green[7],
+        },
+    }));
     function ResourceDiff(props) {
         let originalResource = props.original;
         let revisedResource = props.revised;
@@ -5105,16 +5609,17 @@
         const original = core.stringify(originalResource, true).match(/[^\r\n]+/g);
         const revised = core.stringify(revisedResource, true).match(/[^\r\n]+/g);
         const deltas = diff(original, revised);
-        return (React__default["default"].createElement("pre", { style: { color: 'gray' } }, deltas.map((delta, index) => (React__default["default"].createElement(ChangeDiff, { key: 'delta' + index, delta: delta })))));
+        return (React.createElement("pre", { style: { color: 'gray' } }, deltas.map((delta, index) => (React.createElement(ChangeDiff, { key: 'delta' + index, delta: delta })))));
     }
     function ChangeDiff(props) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        const { classes } = useStyles$2();
+        return (React.createElement(React.Fragment, null,
             "...",
-            React__default["default"].createElement("br", null),
-            props.delta.original.lines.length > 0 && (React__default["default"].createElement("div", { className: "medplum-diff-removed" }, props.delta.original.lines.join('\n'))),
-            props.delta.revised.lines.length > 0 && (React__default["default"].createElement("div", { className: "medplum-diff-added" }, props.delta.revised.lines.join('\n'))),
+            React.createElement("br", null),
+            props.delta.original.lines.length > 0 && (React.createElement("div", { className: classes.removed }, props.delta.original.lines.join('\n'))),
+            props.delta.revised.lines.length > 0 && (React.createElement("div", { className: classes.added }, props.delta.revised.lines.join('\n'))),
             "...",
-            React__default["default"].createElement("br", null)));
+            React.createElement("br", null)));
     }
 
     function ResourceHistoryTable(props) {
@@ -5130,30 +5635,30 @@
             }
         }, [medplum, props.history, props.resourceType, props.id]);
         if (!value) {
-            return React__default["default"].createElement("div", null, "Loading...");
+            return React.createElement("div", null, "Loading...");
         }
-        return (React__default["default"].createElement(core$1.Table, { withBorder: true, withColumnBorders: true },
-            React__default["default"].createElement("thead", null,
-                React__default["default"].createElement("tr", null,
-                    React__default["default"].createElement("th", null, "Author"),
-                    React__default["default"].createElement("th", null, "Date"),
-                    React__default["default"].createElement("th", null, "Version"))),
-            React__default["default"].createElement("tbody", null, (_a = value.entry) === null || _a === void 0 ? void 0 : _a.map((entry, index) => (React__default["default"].createElement(HistoryRow, { key: 'entry-' + index, entry: entry }))))));
+        return (React.createElement(core$1.Table, { withBorder: true, withColumnBorders: true },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "Author"),
+                    React.createElement("th", null, "Date"),
+                    React.createElement("th", null, "Version"))),
+            React.createElement("tbody", null, (_a = value.entry) === null || _a === void 0 ? void 0 : _a.map((entry, index) => (React.createElement(HistoryRow, { key: 'entry-' + index, entry: entry }))))));
     }
     function HistoryRow(props) {
         var _a, _b, _c;
         const { response, resource } = props.entry;
         if (resource) {
-            return (React__default["default"].createElement("tr", null,
-                React__default["default"].createElement("td", null,
-                    React__default["default"].createElement(ResourceBadge, { value: (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.author, link: true })),
-                React__default["default"].createElement("td", null, core.formatDateTime((_b = resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
-                React__default["default"].createElement("td", null,
-                    React__default["default"].createElement(MedplumLink, { to: getVersionUrl(resource) }, (_c = resource.meta) === null || _c === void 0 ? void 0 : _c.versionId))));
+            return (React.createElement("tr", null,
+                React.createElement("td", null,
+                    React.createElement(ResourceBadge, { value: (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.author, link: true })),
+                React.createElement("td", null, core.formatDateTime((_b = resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
+                React.createElement("td", null,
+                    React.createElement(MedplumLink, { to: getVersionUrl(resource) }, (_c = resource.meta) === null || _c === void 0 ? void 0 : _c.versionId))));
         }
         else {
-            return (React__default["default"].createElement("tr", null,
-                React__default["default"].createElement("td", { colSpan: 3 }, core.normalizeErrorString(response === null || response === void 0 ? void 0 : response.outcome))));
+            return (React.createElement("tr", null,
+                React.createElement("td", { colSpan: 3 }, core.normalizeErrorString(response === null || response === void 0 ? void 0 : response.outcome))));
         }
     }
     function getVersionUrl(resource) {
@@ -5161,6 +5666,42 @@
         return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
     }
 
+    const useStyles$1 = core$1.createStyles((theme) => ({
+        table: {
+            width: 350,
+            '& th': {
+                fontWeight: 'normal',
+                fontSize: 11,
+                padding: 8,
+                textAlign: 'center',
+            },
+            '& td': {
+                padding: '2px 4px',
+            },
+            '& td button': {
+                width: 44,
+                height: 44,
+                color: theme.colors[theme.primaryColor][5],
+                fontSize: 16,
+                fontWeight: 500,
+                textAlign: 'center',
+                padding: 0,
+                backgroundColor: theme.colors[theme.primaryColor][0],
+                border: 0,
+                borderRadius: '50%',
+                cursor: 'pointer',
+            },
+            '& td button:hover': {
+                backgroundColor: theme.colors[theme.primaryColor][1],
+            },
+            '& td button:disabled': {
+                backgroundColor: 'transparent',
+                cursor: 'default',
+                color: theme.colors.gray[4],
+                fontWeight: 'normal',
+            },
+        },
+    }));
     /**
      * Returns a month display string (e.g. "January 2020").
      * @param date Any date within the month.
@@ -5170,6 +5711,7 @@
         return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
     }
     function CalendarInput(props) {
+        const { classes } = useStyles$1();
         const { onChangeMonth, onClick } = props;
         const [month, setMonth] = React.useState(getStartMonth);
         function moveMonth(delta) {
@@ -5181,23 +5723,23 @@
             });
         }
         const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
-        return (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
-                React__default["default"].createElement("p", { style: { flex: 1 } }, getMonthString(month)),
-                React__default["default"].createElement(core$1.Group, { position: "right", spacing: "xs" },
-                    React__default["default"].createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
-                    React__default["default"].createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
-            React__default["default"].createElement("table", { className: "medplum-calendar-table" },
-                React__default["default"].createElement("thead", null,
-                    React__default["default"].createElement("tr", null,
-                        React__default["default"].createElement("th", null, "SUN"),
-                        React__default["default"].createElement("th", null, "MON"),
-                        React__default["default"].createElement("th", null, "TUE"),
-                        React__default["default"].createElement("th", null, "WED"),
-                        React__default["default"].createElement("th", null, "THU"),
-                        React__default["default"].createElement("th", null, "FRI"),
-                        React__default["default"].createElement("th", null, "SAT"))),
-                React__default["default"].createElement("tbody", null, grid.map((week, weekIndex) => (React__default["default"].createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React__default["default"].createElement("td", { key: 'day-' + dayIndex }, day && (React__default["default"].createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
+        return (React.createElement("div", null,
+            React.createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
+                React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+                React.createElement(core$1.Group, { position: "right", spacing: "xs" },
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
+            React.createElement("table", { className: classes.table },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, "SUN"),
+                        React.createElement("th", null, "MON"),
+                        React.createElement("th", null, "TUE"),
+                        React.createElement("th", null, "WED"),
+                        React.createElement("th", null, "THU"),
+                        React.createElement("th", null, "FRI"),
+                        React.createElement("th", null, "SAT"))),
+                React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
     }
     function getStartMonth() {
         const result = new Date();
@@ -5252,8 +5794,24 @@
         return false;
     }
 
+    const useStyles = core$1.createStyles((theme) => ({
+        container: {
+            display: 'flex',
+            minHeight: 400,
+        },
+        info: {
+            minWidth: 300,
+            padding: 20,
+            borderRight: `1px solid ${theme.colors.gray[3]}`,
+        },
+        selection: {
+            minWidth: 300,
+            padding: 20,
+        },
+    }));
     function Scheduler(props) {
         var _a;
+        const { classes } = useStyles();
         const medplum = useMedplum();
         const schedule = useResource(props.schedule);
         const questionnaire = useResource(props.questionnaire);
@@ -5285,30 +5843,30 @@
             return null;
         }
         const actor = (_a = schedule.actor) === null || _a === void 0 ? void 0 : _a[0];
-        return (React__default["default"].createElement("div", { className: "medplum-calendar-container", "data-testid": "scheduler" },
-            React__default["default"].createElement("div", { className: "medplum-calendar-info-pane" },
-                actor && React__default["default"].createElement(ResourceAvatar, { value: actor, size: "xl" }),
-                actor && (React__default["default"].createElement(core$1.Text, { size: "xl", weight: 500 },
-                    React__default["default"].createElement(ResourceName, { value: actor }))),
-                React__default["default"].createElement("p", null, "1 hour"),
-                date && React__default["default"].createElement("p", null, date.toLocaleDateString()),
-                slot && React__default["default"].createElement("p", null, formatTime(new Date(slot.start)))),
-            React__default["default"].createElement("div", { className: "medplum-calendar-selection-pane" },
-                !date && (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("h3", null, "Select date"),
-                    React__default["default"].createElement(CalendarInput, { slots: slots, onChangeMonth: setMonth, onClick: setDate }))),
-                date && !slot && (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("h3", null, "Select time"),
-                    React__default["default"].createElement(core$1.Stack, null, slots.map((s) => {
+        return (React.createElement("div", { className: classes.container, "data-testid": "scheduler" },
+            React.createElement("div", { className: classes.info },
+                actor && React.createElement(ResourceAvatar, { value: actor, size: "xl" }),
+                actor && (React.createElement(core$1.Text, { size: "xl", weight: 500 },
+                    React.createElement(ResourceName, { value: actor }))),
+                React.createElement("p", null, "1 hour"),
+                date && React.createElement("p", null, date.toLocaleDateString()),
+                slot && React.createElement("p", null, formatTime(new Date(slot.start)))),
+            React.createElement("div", { className: classes.selection },
+                !date && (React.createElement("div", null,
+                    React.createElement("h3", null, "Select date"),
+                    React.createElement(CalendarInput, { slots: slots, onChangeMonth: setMonth, onClick: setDate }))),
+                date && !slot && (React.createElement("div", null,
+                    React.createElement("h3", null, "Select time"),
+                    React.createElement(core$1.Stack, null, slots.map((s) => {
                         const slotStart = new Date(s.start);
                         return (slotStart.getTime() > date.getTime() &&
-                            slotStart.getTime() < date.getTime() + 24 * 3600 * 1000 && (React__default["default"].createElement("div", { key: s.id },
-                            React__default["default"].createElement(core$1.Button, { variant: "outline", style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
+                            slotStart.getTime() < date.getTime() + 24 * 3600 * 1000 && (React.createElement("div", { key: s.id },
+                            React.createElement(core$1.Button, { variant: "outline", style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
                     })))),
-                date && slot && !response && (React__default["default"].createElement(QuestionnaireForm, { questionnaire: questionnaire, submitButtonText: 'Next', onSubmit: setResponse })),
-                date && slot && response && (React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("h3", null, "You're all set!"),
-                    React__default["default"].createElement("p", null, "Check your email for a calendar invite."))))));
+                date && slot && !response && (React.createElement(QuestionnaireForm, { questionnaire: questionnaire, submitButtonText: 'Next', onSubmit: setResponse })),
+                date && slot && response && (React.createElement("div", null,
+                    React.createElement("h3", null, "You're all set!"),
+                    React.createElement("p", null, "Check your email for a calendar invite."))))));
     }
     function getStart(month) {
         return formatSlotInstant(month.getTime());
@@ -5324,7 +5882,7 @@
     }
 
     function ServiceRequestTimeline(props) {
-        return (React__default["default"].createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
+        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
                 type: 'batch',
                 entry: [
@@ -5417,6 +5975,8 @@
     exports.RangeDisplay = RangeDisplay;
     exports.RangeInput = RangeInput;
     exports.ReferenceInput = ReferenceInput;
+    exports.ReferenceRangeEditor = ReferenceRangeEditor;
+    exports.ReferenceRangeGroupEditor = ReferenceRangeGroupEditor;
     exports.RegisterForm = RegisterForm;
     exports.RequestGroupDisplay = RequestGroupDisplay;
     exports.ResourceArrayDisplay = ResourceArrayDisplay;
@@ -5445,8 +6005,6 @@
     exports.StatusBadge = StatusBadge;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
-    exports.addDateEqualsFilter = addDateEqualsFilter;
-    exports.addDateFilter = addDateFilter;
     exports.addDateFilterBetween = addDateFilterBetween;
     exports.addField = addField;
     exports.addFilter = addFilter;
@@ -5465,7 +6023,6 @@
     exports.convertLocalToIso = convertLocalToIso;
     exports.createScriptTag = createScriptTag;
     exports.deleteFilter = deleteFilter;
-    exports.formatRangeString = formatRangeString;
     exports.getErrorsForInput = getErrorsForInput;
     exports.getIssuesForExpression = getIssuesForExpression;
     exports.getOpString = getOpString;
@@ -5474,7 +6031,6 @@
     exports.getSortField = getSortField;
     exports.getTimeString = getTimeString;
     exports.getValueAndType = getValueAndType;
-    exports.hasFilterOnField = hasFilterOnField;
     exports.initRecaptcha = initRecaptcha;
     exports.isChoiceQuestion = isChoiceQuestion;
     exports.isQuestionEnabled = isQuestionEnabled;
@@ -5493,7 +6049,5 @@
     exports.useMedplumProfile = useMedplumProfile;
     exports.useResource = useResource;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.js.map