@medplum/react 0.10.2 → 1.0.0

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,10 +616,10 @@
                 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) {
@@ -631,11 +634,12 @@
                 }
             });
         }
-        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,
+                    resourceType: props.resourceType,
                     scope: props.scope,
                     nonce: props.nonce,
                     codeChallenge: props.codeChallenge,
@@ -647,18 +651,19 @@
                     .then(props.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' } }, 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) => {
+            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,
+                                resourceType: props.resourceType,
                                 scope: props.scope,
                                 nonce: props.nonce,
                                 codeChallenge: props.codeChallenge,
@@ -669,26 +674,26 @@
                                 .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 },
+                props.onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onForgotPassword, size: "xs" }, "Forgot password")),
+                props.onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onRegister, size: "xs" }, "Register")),
+                React.createElement(core$1.Checkbox, { 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,11 +702,11 @@
                             .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)))));
             })));
     }
 
@@ -732,28 +737,27 @@
                 }
             }
         }
-        return (React__default["default"].createElement(Document, { width: 450 }, (() => {
+        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, { projectId: props.projectId, clientId: props.clientId, resourceType: props.resourceType, 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));
             }
             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 {
-                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 +771,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 +846,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, null,
+                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 +880,34 @@
         return obj;
     }
 
+    const useStyles$a = 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$a();
+        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,7 +919,7 @@
         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");
         }
@@ -910,9 +927,9 @@
             // 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 +940,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 +956,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 +988,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 +997,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,19 +1008,19 @@
         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));
+        return React.createElement(React.Fragment, null, formatQuantityString(props.value));
     }
     function formatQuantityString(quantity) {
         if (!quantity) {
@@ -1027,7 +1044,7 @@
     }
 
     function RangeDisplay(props) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, formatRangeString(props.value));
+        return React.createElement(React.Fragment, null, formatRangeString(props.value));
     }
     function formatRangeString(range) {
         if (!range || (!range.low && !range.high)) {
@@ -1047,27 +1064,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 +1122,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 +1134,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 +1143,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 +1159,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 +1243,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) {
@@ -1274,7 +1292,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 +1313,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 +1345,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 +1363,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 +1414,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 +1445,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 +1459,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 +1514,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 +1547,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 +1563,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 +1576,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 +1590,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, 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", 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 +1616,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 +1635,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 +1650,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 +1686,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 +1709,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 +1736,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 +1764,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 +1802,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 +1855,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 +1883,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 +1905,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 +1933,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 +1973,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 +2025,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 +2041,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$9 = 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 +2107,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$9();
+        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$9();
         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 +2179,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.
@@ -2137,7 +2195,28 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';
     }
 
+    const useStyles$8 = 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$8();
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
@@ -2150,17 +2229,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 +2253,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 +2279,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 +2299,36 @@
         }
         render() {
             if (this.state.error) {
-                return React__default["default"].createElement("h1", null, "Something went wrong.");
+                return React.createElement(core$1.Title, null, "Something went wrong.");
             }
             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 +2377,11 @@
         return new Date(dateTime).getTime();
     }
 
+    const useStyles$7 = core$1.createStyles((theme) => ({
+        pinnedComment: {
+            backgroundColor: theme.colors.blue[0],
+        },
+    }));
     function ResourceTimeline(props) {
         const navigate = reactRouterDom.useNavigate();
         const medplum = useMedplum();
@@ -2389,10 +2470,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 +2510,89 @@
             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.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 +2605,11 @@
     }
     function CommunicationTimelineItem(props) {
         var _a, _b;
+        const { classes } = useStyles$7();
         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 +2618,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 +2667,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,7 +2723,7 @@
        Received ${value.length} elements \
        [${JSON.stringify(value, null, 2)}]`);
         }
-        return React__default["default"].createElement(ResourcePropertyDisplay, { value: value[0] || '', propertyType: props.propertyType });
+        return React.createElement(ResourcePropertyDisplay, { value: value[0] || '', propertyType: props.propertyType });
     }
 
     /**
@@ -3150,7 +3278,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 +3293,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 +3429,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 +3489,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 +3505,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 +3514,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 +3531,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 +3565,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 +3590,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 +3624,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 +3646,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 +3671,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 +3698,72 @@
     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")));
     }
 
     class SearchChangeEvent extends Event {
@@ -3657,7 +3785,21 @@
             this.browserEvent = browserEvent;
         }
     }
-    const useStyles = core$1.createStyles((theme) => ({
+    const useStyles$6 = 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',
         },
@@ -3681,7 +3823,7 @@
      */
     function SearchControl(props) {
         var _a, _b;
-        const { classes } = useStyles();
+        const { classes } = useStyles$6();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
@@ -3793,7 +3935,7 @@
         }, [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.Loader, null);
         }
         const checkboxColumn = props.checkboxesEnabled;
         const fields = getFieldDefinitions(search);
@@ -3805,51 +3947,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 +4002,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, { 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 +4137,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 +4171,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 +4197,32 @@
             }) }));
     }
 
+    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]}`,
+        },
+        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 +4256,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$5();
         const actionsRef = React.useRef();
         actionsRef.current = props.actions;
         function changeAction(changedAction) {
@@ -4106,16 +4276,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$5();
         const { action } = props;
         const actionType = getInitialActionType(action);
         const editing = props.selectedKey === props.action.id;
@@ -4128,11 +4299,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 +4320,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 +4336,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 +4376,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 +4478,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 +4496,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 +4546,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 +4593,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 +4621,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 +4707,50 @@
         }
     }
 
+    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[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 +4779,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$4();
         const resource = props.item;
         const item = props.item;
         const isResource = 'resourceType' in props.item;
@@ -4592,41 +4820,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 +4865,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 +4874,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 +4885,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,
@@ -4787,7 +5017,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 +5035,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 +5269,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 +5327,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 +5374,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 +5393,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 +5419,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 +5450,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 +5495,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 +5507,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 +5578,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 +5627,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 +5666,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: [
@@ -5493,7 +5835,5 @@
     exports.useMedplumProfile = useMedplumProfile;
     exports.useResource = useResource;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.js.map