@medplum/react 0.9.38 → 0.10.1

package/dist/cjs/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@medplum/core'), require('react'), require('react-router-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@medplum/core', 'react', '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.ReactRouterDOM));
-})(this, (function (exports, core, React, reactRouterDom) { 'use strict';
+    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 }; }
 
@@ -16,65 +16,6 @@
         return React__default["default"].createElement(React__default["default"].Fragment, null, core.formatAddress(address));
     }
 
-    function getIssuesForExpression(outcome, expression) {
-        var _a;
-        return (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a.filter((issue) => { var _a; return isExpressionMatch((_a = issue.expression) === null || _a === void 0 ? void 0 : _a[0], expression); });
-    }
-    function isExpressionMatch(expr1, expr2) {
-        // Expression can be either "fieldName" or "resourceType.fieldName"
-        if (expr1 === expr2) {
-            return true;
-        }
-        if (!expr1 || !expr2) {
-            return false;
-        }
-        const dot1 = expr1.indexOf('.');
-        if (dot1 >= 0 && expr1.substring(dot1 + 1) === expr2) {
-            return true;
-        }
-        const dot2 = expr2.indexOf('.');
-        if (dot2 >= 0 && expr2.substring(dot2 + 1) === expr1) {
-            return true;
-        }
-        return false;
-    }
-
-    function Input(props) {
-        const className = 'medplum-input';
-        const issues = getIssuesForExpression(props.outcome, props.name);
-        const invalid = issues && issues.length > 0;
-        return (React__default["default"].createElement("input", { id: props.name, name: props.name, type: getInputType(props.type), size: props.size, step: props.step, className: className, style: props.style, defaultValue: props.defaultValue || '', required: props.required, autoCapitalize: props.autoCapitalize, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
-                if (props.onChange) {
-                    props.onChange(e.currentTarget.value);
-                }
-            } }));
-    }
-    /**
-     * Returns the input type for the requested type.
-     * JSDOM does not support many of the valid <input> type attributes.
-     * For example, it won't fire change events for <input type="datetime-local">.
-     * @param requestedType The optional type as requested by the parent component.
-     */
-    function getInputType(requestedType) {
-        const result = requestedType || 'text';
-        return result;
-    }
-
-    function InputRow(props) {
-        return (React__default["default"].createElement("div", { className: "medplum-input-row", style: { justifyContent: props.justifyContent } }, props.children));
-    }
-
-    function Select(props) {
-        const className = 'medplum-select';
-        const issues = getIssuesForExpression(props.outcome, props.name);
-        const invalid = issues && issues.length > 0;
-        return (React__default["default"].createElement("select", { id: props.name, name: props.name, className: className, defaultValue: props.defaultValue || '', required: props.required, autoFocus: props.autoFocus, ref: props.inputRef, style: props.style, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', "data-testid": props.testid, onChange: (e) => {
-                if (props.onChange) {
-                    props.onChange(e.currentTarget.value);
-                }
-            } }, props.children));
-    }
-
     function getLine(address, index) {
         return address && address.line && address.line.length > index ? address.line[index] : '';
     }
@@ -117,24 +58,14 @@
         function setPostalCode(postalCode) {
             setValueWrapper(Object.assign(Object.assign({}, valueRef.current), { postalCode }));
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Select, { testid: "address-use", defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: setUse },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "home"),
-                React__default["default"].createElement("option", null, "mobile"),
-                React__default["default"].createElement("option", null, "old"),
-                React__default["default"].createElement("option", null, "temp"),
-                React__default["default"].createElement("option", null, "work")),
-            React__default["default"].createElement(Select, { testid: "address-type", defaultValue: value === null || value === void 0 ? void 0 : value.type, onChange: setType },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "postal"),
-                React__default["default"].createElement("option", null, "physical"),
-                React__default["default"].createElement("option", null, "both")),
-            React__default["default"].createElement(Input, { placeholder: "Line 1", defaultValue: getLine(value, 0), onChange: setLine1 }),
-            React__default["default"].createElement(Input, { placeholder: "Line 2", defaultValue: getLine(value, 1), onChange: setLine2 }),
-            React__default["default"].createElement(Input, { placeholder: "City", defaultValue: value.city, onChange: setCity }),
-            React__default["default"].createElement(Input, { placeholder: "State", defaultValue: value.state, onChange: setState }),
-            React__default["default"].createElement(Input, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: setPostalCode })));
+        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) })));
     }
 
     function AttachmentDisplay(props) {
@@ -159,15 +90,6 @@
                 React__default["default"].createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
     }
 
-    function Button(props) {
-        const className = 'medplum-button' +
-            (props.primary || props.type === 'submit' ? ' medplum-button-primary' : '') +
-            (props.danger ? ' medplum-button-danger' : '') +
-            (props.borderless ? ' medplum-button-borderless' : '') +
-            (props.size ? ' medplum-button-' + props.size : '');
-        return (React__default["default"].createElement("button", { type: props.type || 'button', className: className, style: props.style, onClick: props.onClick, "aria-label": props.label, "data-testid": props.testid }, props.children));
-    }
-
     const reactContext = React.createContext(undefined);
     /**
      * The MedplumProvider component provides Medplum context state.
@@ -246,9 +168,14 @@
         return el instanceof HTMLInputElement && el.type === 'checkbox';
     }
 
-    function UploadButton(props) {
+    function AttachmentButton(props) {
         const medplum = useMedplum();
         const fileInputRef = React.useRef(null);
+        function onClick(e) {
+            var _a;
+            killEvent(e);
+            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
         function onFileChange(e) {
             killEvent(e);
             const files = e.target.files;
@@ -287,11 +214,7 @@
         }
         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) }),
-            React__default["default"].createElement(Button, { testid: "upload-button", onClick: (e) => {
-                    var _a;
-                    killEvent(e);
-                    (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                } }, props.children || 'Upload...')));
+            props.children({ onClick })));
     }
 
     function AttachmentArrayInput(props) {
@@ -307,25 +230,27 @@
         }
         return (React__default["default"].createElement("table", { style: { width: '100%' } },
             React__default["default"].createElement("colgroup", null,
-                React__default["default"].createElement("col", { width: "90%" }),
-                React__default["default"].createElement("col", { width: "10%" })),
+                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(Button, { onClick: (e) => {
+                        React__default["default"].createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
                                 killEvent(e);
                                 const copy = values.slice();
                                 copy.splice(index, 1);
                                 setValuesWrapper(copy);
-                            } }, "Remove"))))),
+                            } },
+                            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(UploadButton, { onUpload: (attachment) => {
+                        React__default["default"].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 })))))))));
     }
 
     function AttachmentInput(props) {
@@ -339,12 +264,12 @@
         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(Button, { onClick: (e) => {
+                React__default["default"].createElement(core$1.Button, { onClick: (e) => {
                         killEvent(e);
                         setValueWrapper(undefined);
                     } }, "Remove")));
         }
-        return React__default["default"].createElement(UploadButton, { onUpload: setValueWrapper });
+        return (React__default["default"].createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React__default["default"].createElement(core$1.Button, Object.assign({}, props), "Upload...")));
     }
 
     function Document(props) {
@@ -367,6 +292,18 @@
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
 
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     function __awaiter(thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
@@ -434,27 +371,41 @@
             } }, props.children));
     }
 
-    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));
-            })))));
-    }
-
     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 || '#654b87', 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 || '#463068', 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 || '#70d65b', 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 || '#58b741', d: "M252 48A421 421 0 0057 270l-27-7A176 176 0 01251 43l1 5z" })));
+            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" })));
+    }
+
+    function getErrorsForInput(outcome, expression) {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a.filter((issue) => { var _a; return isExpressionMatch((_a = issue.expression) === null || _a === void 0 ? void 0 : _a[0], expression); })) === null || _b === void 0 ? void 0 : _b.map((issue) => { var _a; return (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text; })) === null || _c === void 0 ? void 0 : _c.join('\n');
+    }
+    function getIssuesForExpression(outcome, expression) {
+        var _a;
+        return (_a = outcome === null || outcome === void 0 ? void 0 : outcome.issue) === null || _a === void 0 ? void 0 : _a.filter((issue) => { var _a; return isExpressionMatch((_a = issue.expression) === null || _a === void 0 ? void 0 : _a[0], expression); });
+    }
+    function isExpressionMatch(expr1, expr2) {
+        // Expression can be either "fieldName" or "resourceType.fieldName"
+        if (expr1 === expr2) {
+            return true;
+        }
+        if (!expr1 || !expr2) {
+            return false;
+        }
+        const dot1 = expr1.indexOf('.');
+        if (dot1 >= 0 && expr1.substring(dot1 + 1) === expr2) {
+            return true;
+        }
+        const dot2 = expr2.indexOf('.');
+        if (dot2 >= 0 && expr2.substring(dot2 + 1) === expr1) {
+            return true;
+        }
+        return false;
     }
 
     function NewProjectForm(props) {
@@ -474,18 +425,16 @@
             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(FormSection, { title: "Project Name", htmlFor: "projectName", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "projectName", type: "text", testid: "projectName", placeholder: "My Project", required: true, outcome: outcome })),
-            React__default["default"].createElement("p", { style: { fontSize: '12px', color: '#888' } },
-                "By clicking submit you agree to the Medplum ",
-                React__default["default"].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__default["default"].createElement("div", { className: "medplum-signin-buttons" },
-                React__default["default"].createElement("div", null),
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(Button, { type: "submit", testid: "submit" }, "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" },
+                    "By clicking submit you agree to the Medplum ",
+                    React__default["default"].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__default["default"].createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
+                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Create project"))));
     }
 
     /**
@@ -602,7 +551,7 @@
                 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));
             }))),
             googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
+                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* () {
                             try {
                                 props.handleAuthResponse(yield medplum.startGoogleLogin({
@@ -615,34 +564,28 @@
                                 setOutcome(err);
                             }
                         }) })),
-                React__default["default"].createElement("div", { className: "medplum-signin-separator" }, "or"))),
-            React__default["default"].createElement(FormSection, { title: "First Name", htmlFor: "firstName", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "firstName", type: "text", testid: "firstName", placeholder: "First name", required: true, autoFocus: true, outcome: outcome })),
-            React__default["default"].createElement(FormSection, { title: "Last Name", htmlFor: "lastName", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "lastName", type: "text", testid: "lastName", placeholder: "Last name", required: true, outcome: outcome })),
-            React__default["default"].createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "email", type: "email", testid: "email", placeholder: "name@domain.com", required: true, outcome: outcome })),
-            React__default["default"].createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
-            React__default["default"].createElement("p", { style: { fontSize: '12px', color: '#888' } },
-                "By clicking submit you agree to the Medplum ",
-                React__default["default"].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__default["default"].createElement("p", { style: { fontSize: '12px', color: '#888' } },
-                "This site is protected by reCAPTCHA and the Google",
-                ' ',
-                React__default["default"].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"),
-                " apply."),
-            React__default["default"].createElement("div", { className: "medplum-signin-buttons" },
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
-                    React__default["default"].createElement("label", { htmlFor: "remember" }, "Remember me")),
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(Button, { type: "submit", testid: "submit" }, "Create account")))));
+                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" },
+                    "By clicking submit you agree to the Medplum ",
+                    React__default["default"].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__default["default"].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"),
+                    ' and ',
+                    React__default["default"].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"))));
     }
 
     function RegisterForm(props) {
@@ -676,49 +619,6 @@
             login && type === 'project' && React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse })));
     }
 
-    function MedplumLink(props) {
-        const navigate = reactRouterDom.useNavigate();
-        let href = getHref(props.to);
-        if (props.suffix) {
-            href += '/' + props.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) => {
-                killEvent(e);
-                if (props.onClick) {
-                    props.onClick();
-                }
-                else if (props.to) {
-                    navigate(href);
-                }
-            } }, props.children));
-    }
-    function getHref(to) {
-        if (to) {
-            if (typeof to === 'string') {
-                return getStringHref(to);
-            }
-            else if ('resourceType' in to) {
-                return getResourceHref(to);
-            }
-            else if ('reference' in to) {
-                return getReferenceHref(to);
-            }
-        }
-        return '#';
-    }
-    function getStringHref(to) {
-        if (to.startsWith('http://') || to.startsWith('https://') || to.startsWith('/')) {
-            return to;
-        }
-        return '/' + to;
-    }
-    function getResourceHref(to) {
-        return `/${to.resourceType}/${to.id}`;
-    }
-    function getReferenceHref(to) {
-        return `/${to.reference}`;
-    }
-
     function AuthenticationForm(props) {
         const medplum = useMedplum();
         const googleClientId = getGoogleClientId(props.googleClientId);
@@ -753,7 +653,7 @@
                 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));
             }))),
             googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
+                React__default["default"].createElement(core$1.Group, { position: "center", p: "xl", style: { height: 70 } },
                     React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
                             startPkce()
                                 .then(() => medplum.startGoogleLogin({
@@ -769,108 +669,26 @@
                                 .then(props.handleAuthResponse)
                                 .catch(setOutcome);
                         } })),
-                React__default["default"].createElement("div", { className: "medplum-signin-separator" }, "or"))),
-            React__default["default"].createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "email", type: "email", testid: "email", required: true, autoFocus: true, outcome: outcome })),
-            React__default["default"].createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
-                React__default["default"].createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
-            React__default["default"].createElement("div", { className: "medplum-signin-buttons" },
-                (props.onForgotPassword || props.onRegister) && (React__default["default"].createElement("div", null,
-                    props.onForgotPassword && (React__default["default"].createElement(MedplumLink, { testid: "forgotpassword", onClick: props.onForgotPassword }, "Forgot password")),
-                    props.onRegister && (React__default["default"].createElement(MedplumLink, { testid: "register", onClick: props.onRegister }, "Register")))),
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
-                    React__default["default"].createElement("label", { htmlFor: "remember" }, "Remember me")),
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(Button, { type: "submit", testid: "submit" }, "Sign in")))));
-    }
-
-    const system = {
-        resourceType: 'Device',
-        id: 'system',
-        deviceName: [
-            {
-                name: 'System',
-            },
-        ],
-    };
-    /**
-     * React Hook to use a FHIR reference.
-     * Handles the complexity of resolving references and caching resources.
-     * @param value The resource or reference to resource.
-     * @returns The resolved resource.
-     */
-    function useResource(value) {
-        const medplum = useMedplum();
-        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
-        React.useEffect(() => {
-            let subscribed = true;
-            if (!resource && value && 'reference' in value && value.reference) {
-                medplum
-                    .readReference(value)
-                    .then((r) => {
-                    if (subscribed) {
-                        setResource(r);
-                    }
-                })
-                    .catch(() => setResource(undefined));
-            }
-            return (() => (subscribed = false));
-        }, [medplum, resource, value]);
-        return resource;
-    }
-    /**
-     * Returns the initial resource value based on the input value.
-     * If the input value is a resource, returns the resource.
-     * If the input value is a reference to system, returns the system resource.
-     * If the input value is a reference to a resource available in the cache, returns the resource.
-     * Otherwise, returns undefined.
-     * @param medplum The medplum client.
-     * @param value The resource or reference to resource.
-     * @returns An initial resource if available; undefined otherwise.
-     */
-    function getInitialResource(medplum, value) {
-        if (!value) {
-            return undefined;
-        }
-        if ('resourceType' in value) {
-            return value;
-        }
-        if ('reference' in value) {
-            if (value.reference === 'system') {
-                return system;
-            }
-            return medplum.getCachedReference(value);
-        }
-        return undefined;
-    }
-
-    function Avatar(props) {
-        var _a, _b;
-        const resource = useResource(props.value);
-        const className = props.size ? 'medplum-avatar ' + props.size : 'medplum-avatar';
-        const text = resource ? core.getDisplayString(resource) : (_a = props.alt) !== null && _a !== void 0 ? _a : '';
-        const initials = text && getInitials(text);
-        const imageUrl = (_b = (resource && core.getImageSrc(resource))) !== null && _b !== void 0 ? _b : props.src;
-        const innerContent = imageUrl ? React__default["default"].createElement("img", { src: imageUrl, alt: text }) : initials;
-        return (React__default["default"].createElement("div", { className: className, style: { backgroundColor: props.color }, "data-testid": "avatar" }, props.link && resource ? React__default["default"].createElement(MedplumLink, { to: resource }, innerContent) : innerContent));
-    }
-    function getInitials(text) {
-        return text
-            .split(' ')
-            .map((n) => n[0])
-            .join('');
+                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"))));
     }
 
     function ChooseProfileForm(props) {
         const medplum = useMedplum();
-        return (React__default["default"].createElement("div", null,
+        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("h1", null, "Choose profile")),
+                React__default["default"].createElement(core$1.Text, { size: "lg", weight: 500 }, "Choose profile")),
             props.memberships.map((membership) => {
-                var _a, _b, _c;
-                return (React__default["default"].createElement("div", { className: "medplum-nav-menu-profile", key: membership.id, onClick: () => {
+                var _a, _b;
+                return (React__default["default"].createElement(core$1.UnstyledButton, { key: membership.id, onClick: () => {
                         medplum
                             .post('auth/profile', {
                             login: props.login,
@@ -879,11 +697,11 @@
                             .then(props.handleAuthResponse)
                             .catch(console.log);
                     } },
-                    React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-icon" },
-                        React__default["default"].createElement(Avatar, { alt: (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display })),
-                    React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-label" }, (_b = membership.profile) === null || _b === void 0 ? void 0 :
-                        _b.display,
-                        React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-help-text" }, (_c = membership.project) === null || _c === void 0 ? void 0 : _c.display))));
+                    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)))));
             })));
     }
 
@@ -930,282 +748,6 @@
         })()));
     }
 
-    function Autocomplete(props) {
-        var _a, _b;
-        const inputRef = React.useRef(null);
-        const [focused, setFocused] = React.useState(false);
-        const [lastValue, setLastValue] = React.useState(undefined);
-        const [timer, setTimer] = React.useState();
-        const [dropDownVisible, setDropDownVisible] = React.useState(false);
-        const [values, setValues] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
-        const [options, setOptions] = React.useState([]);
-        const [selectedIndex, setSelectedIndex] = React.useState(-1);
-        const [abortController, setAbortController] = React.useState();
-        const [autoSubmit, setAutoSubmit] = React.useState();
-        const lastValueRef = React.useRef();
-        lastValueRef.current = lastValue;
-        const timerRef = React.useRef();
-        timerRef.current = timer;
-        const abortControllerRef = React.useRef();
-        abortControllerRef.current = abortController;
-        const autoSubmitRef = React.useRef();
-        autoSubmitRef.current = autoSubmit;
-        React.useEffect(() => {
-            return () => {
-                if (abortControllerRef.current) {
-                    abortControllerRef.current.abort();
-                }
-            };
-        }, []);
-        React.useEffect(() => {
-            var _a;
-            setValues((_a = props.defaultValue) !== null && _a !== void 0 ? _a : []);
-        }, [props.defaultValue]);
-        function setValuesWrapper(newValues) {
-            setValues(newValues);
-            if (props.onChange) {
-                props.onChange(newValues);
-            }
-        }
-        /**
-         * Adds an option to the list of selected options.
-         * @param option The option.
-         */
-        function addOption(option) {
-            const inputElement = inputRef.current;
-            inputElement.value = '';
-            const newValues = props.multiple ? [...values, option] : [option];
-            setFocused(true);
-            setDropDownVisible(false);
-            setLastValue('');
-            setOptions([]);
-            setSelectedIndex(-1);
-            setValuesWrapper(newValues);
-        }
-        function handleClick() {
-            var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        function handleFocus() {
-            setFocused(true);
-            if (props.loadOnFocus) {
-                handleInput();
-            }
-        }
-        function handleBlur() {
-            tryAddOption();
-            setFocused(false);
-            dismissOnDelay();
-        }
-        /**
-         * Handles an input event.
-         * Clears existing timers.
-         * Schedules a timer to execute the search after a short delay.
-         */
-        function handleInput() {
-            if (abortControllerRef.current) {
-                abortControllerRef.current.abort();
-                setAbortController(undefined);
-            }
-            if (timerRef.current !== undefined) {
-                window.clearTimeout(timerRef.current);
-            }
-            const newTimer = window.setTimeout(() => handleTimer(), 100);
-            setTimer(newTimer);
-        }
-        function handleKeyDown(e) {
-            switch (e.key) {
-                case 'Enter':
-                case 'Tab':
-                    handleSelectKey(e);
-                    break;
-                case 'ArrowUp':
-                    moveSelection(-1);
-                    killEvent(e);
-                    break;
-                case 'ArrowDown':
-                    moveSelection(1);
-                    killEvent(e);
-                    break;
-                case 'Backspace':
-                    handleBackspaceKey(e);
-                    break;
-                case ',':
-                case ';':
-                    handleSeparatorKey(e);
-            }
-        }
-        /**
-         * Handles the "enter" or "tab" keys.  The enter key logic is:
-         * Try to add an option with tryAddOption.  On success, cancel event.
-         * Otherwise, let the browser handle the enter key normally.
-         *
-         * @param e The key down event.
-         */
-        function handleSelectKey(e) {
-            var _a;
-            if (!timerRef.current && !abortControllerRef.current && tryAddOption()) {
-                killEvent(e);
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                // The user pressed enter, but we don't have results yet.
-                // We need to wait for the results to come in.
-                setAutoSubmit(true);
-            }
-        }
-        /**
-         * Handles the "backspace" key.  The backspace key logic is:
-         * If the input is empty and there is at least one item, delete the last item.
-         * Otherwise, let the browser handle the backspace key normally.
-         *
-         * @param e The key down event.
-         */
-        function handleBackspaceKey(e) {
-            var _a;
-            if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
-                // If there is still text in the input,
-                // then handle backspace as normal.
-                return;
-            }
-            if (values.length > 0) {
-                // If there are selected items,
-                // then delete the last item.
-                killEvent(e);
-                setValuesWrapper(values.slice(0, values.length - 1));
-            }
-        }
-        /**
-         * Handles a "separator" key (comma, semicolon, others?).
-         *
-         * The separator key logic is:
-         * If the drop down is visible and something is selected, choose that.
-         * If the drop down is visible but nothing is selected, choose the first.
-         * If there is content in the input, use that as a "gray" option.
-         * Otherwise, ignore.
-         *
-         * @param e The key down event.
-         */
-        function handleSeparatorKey(e) {
-            var _a;
-            tryAddOption();
-            killEvent(e);
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        /**
-         * Tries to capture the existing input as an option.
-         *
-         * @return True if captured an option; false otherwise.
-         */
-        function tryAddOption() {
-            var _a;
-            let option;
-            if (selectedIndex >= 0 && selectedIndex < options.length) {
-                // Currently highlighted row
-                option = options[selectedIndex];
-            }
-            else if (selectedIndex === -1 && options.length > 0) {
-                // Default to first row
-                option = options[0];
-            }
-            else if (props.buildUnstructured && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
-                // Build semi-structured item
-                option = props.buildUnstructured(inputRef.current.value);
-            }
-            if (!option) {
-                return false;
-            }
-            addOption(option);
-            return true;
-        }
-        /**
-         * Handles a timer tick event.
-         * If the contents of the input have changed, sends xhr to the server
-         * for updated contents.
-         */
-        function handleTimer() {
-            var _a, _b;
-            setTimer(undefined);
-            const value = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-            if (value === lastValueRef.current) {
-                // Nothing has changed, move on
-                return;
-            }
-            setLastValue(value);
-            const newAbortController = new AbortController();
-            setAbortController(newAbortController);
-            props
-                .loadOptions(value, newAbortController.signal)
-                .then((newOptions) => {
-                if (!newAbortController.signal.aborted) {
-                    setDropDownVisible(newOptions.length > 0);
-                    setOptions(newOptions);
-                    setAbortController(undefined);
-                    if (autoSubmitRef.current) {
-                        addOption(newOptions[0]);
-                        setAutoSubmit(false);
-                    }
-                }
-            })
-                .catch(console.log);
-        }
-        /**
-         * Moves the selected row.
-         * @param delta The amount to move the selection, up is negative.
-         */
-        function moveSelection(delta) {
-            let index = selectedIndex + delta;
-            if (index < 0) {
-                index = 0;
-            }
-            else if (index >= options.length) {
-                index = options.length - 1;
-            }
-            setSelectedIndex(index);
-        }
-        /**
-         * Handles a hover event.
-         * @param _e The mouse event.
-         * @param index The drop down option index.
-         */
-        function handleDropDownHover(_e, index) {
-            setSelectedIndex(index);
-        }
-        /**
-         * Handles a click event.
-         * @param e The mouse event.
-         * @param option The drop down option.
-         */
-        function handleDropDownClick(e, option) {
-            killEvent(e);
-            addOption(option);
-        }
-        /**
-         * Dismisses the drop down menu after a slight delay.
-         */
-        function dismissOnDelay() {
-            window.setTimeout(() => {
-                setDropDownVisible(false);
-            }, 200);
-        }
-        const baseClassName = (_b = props.className) !== null && _b !== void 0 ? _b : 'medplum-autocomplete-container';
-        return (React__default["default"].createElement("div", { "data-testid": "autocomplete", className: baseClassName + (focused ? ' focused' : ''), onClick: () => handleClick() },
-            React__default["default"].createElement("ul", { onClick: () => handleClick() },
-                values.map((value) => (React__default["default"].createElement("li", { key: props.getId(value), "data-testid": "selected", className: "medplum-autocomplete-item choice" }, props.getDisplay(value)))),
-                React__default["default"].createElement("li", { className: "medplum-autocomplete-item" },
-                    React__default["default"].createElement("input", { type: "text", autoFocus: props.autofocus, placeholder: values.length === 0 ? props.placeholder : undefined, autoComplete: "off", autoCapitalize: "off", spellCheck: "true", onFocus: () => handleFocus(), onBlur: () => handleBlur(), onChange: () => handleInput(), onInput: () => handleInput(), onKeyDown: (e) => handleKeyDown(e), ref: inputRef, "data-testid": "input-element" }))),
-            dropDownVisible && (React__default["default"].createElement("div", { className: "medplum-autocomplete", "data-testid": "dropdown" },
-                options.map((option, index) => (React__default["default"].createElement("div", { key: props.getId(option), className: index === selectedIndex
-                        ? 'medplum-autocomplete-row medplum-autocomplete-active'
-                        : 'medplum-autocomplete-row', onMouseOver: (e) => handleDropDownHover(e, index), onClick: (e) => handleDropDownClick(e, option) },
-                    props.getIcon && React__default["default"].createElement("div", { className: "medplum-autocomplete-icon" }, props.getIcon(option)),
-                    React__default["default"].createElement("div", { className: "medplum-autocomplete-label" },
-                        props.getDisplay(option),
-                        props.getHelpText && React__default["default"].createElement("div", { className: "medplum-autocomplete-help-text" }, props.getHelpText(option)))))),
-                props.onCreateNew && (React__default["default"].createElement("div", { className: "medplum-autocomplete-row", onClick: props.onCreateNew },
-                    React__default["default"].createElement("div", { className: "medplum-autocomplete-label" }, "Create new...")))))));
-    }
-
     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),
@@ -1224,6 +766,79 @@
         'modifierExtension',
     ];
 
+    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));
+            })))));
+    }
+
+    const system = {
+        resourceType: 'Device',
+        id: 'system',
+        deviceName: [
+            {
+                name: 'System',
+            },
+        ],
+    };
+    /**
+     * React Hook to use a FHIR reference.
+     * Handles the complexity of resolving references and caching resources.
+     * @param value The resource or reference to resource.
+     * @returns The resolved resource.
+     */
+    function useResource(value) {
+        const medplum = useMedplum();
+        const [resource, setResource] = React.useState(getInitialResource(medplum, value));
+        React.useEffect(() => {
+            let subscribed = true;
+            if (!resource && value && 'reference' in value && value.reference) {
+                medplum
+                    .readReference(value)
+                    .then((r) => {
+                    if (subscribed) {
+                        setResource(r);
+                    }
+                })
+                    .catch(() => setResource(undefined));
+            }
+            return (() => (subscribed = false));
+        }, [medplum, resource, value]);
+        return resource;
+    }
+    /**
+     * Returns the initial resource value based on the input value.
+     * If the input value is a resource, returns the resource.
+     * If the input value is a reference to system, returns the system resource.
+     * If the input value is a reference to a resource available in the cache, returns the resource.
+     * Otherwise, returns undefined.
+     * @param medplum The medplum client.
+     * @param value The resource or reference to resource.
+     * @returns An initial resource if available; undefined otherwise.
+     */
+    function getInitialResource(medplum, value) {
+        if (!value) {
+            return undefined;
+        }
+        if ('resourceType' in value) {
+            return value;
+        }
+        if ('reference' in value) {
+            if (value.reference === 'system') {
+                return system;
+            }
+            return medplum.getCachedReference(value);
+        }
+        return undefined;
+    }
+
     function ResourceForm(props) {
         const medplum = useMedplum();
         const defaultValue = useResource(props.defaultValue);
@@ -1244,15 +859,16 @@
                     props.onSubmit(value);
                 }
             } },
-            React__default["default"].createElement(FormSection, { title: "Resource Type" },
-                React__default["default"].createElement(Input, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
-            React__default["default"].createElement(FormSection, { title: "ID" },
-                React__default["default"].createElement(Input, { name: "id", defaultValue: value.id, disabled: true })),
+            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(Button, { type: "submit", size: "large" }, "OK"),
-            props.onDelete && (React__default["default"].createElement(Button, { type: "button", size: "large", onClick: () => {
-                    props.onDelete(value);
-                } }, "Delete"))));
+            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: () => {
+                        props.onDelete(value);
+                    } }, "Delete")))));
     }
     function setPropertyValue(obj, key, propName, elementDefinition, value) {
         const types = elementDefinition.type;
@@ -1437,6 +1053,49 @@
             React__default["default"].createElement(QuantityDisplay, { value: value.denominator })));
     }
 
+    function MedplumLink(props) {
+        const navigate = reactRouterDom.useNavigate();
+        let href = getHref(props.to);
+        if (props.suffix) {
+            href += '/' + props.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) => {
+                killEvent(e);
+                if (props.onClick) {
+                    props.onClick();
+                }
+                else if (props.to) {
+                    navigate(href);
+                }
+            } }, props.children));
+    }
+    function getHref(to) {
+        if (to) {
+            if (typeof to === 'string') {
+                return getStringHref(to);
+            }
+            else if ('resourceType' in to) {
+                return getResourceHref(to);
+            }
+            else if ('reference' in to) {
+                return getReferenceHref(to);
+            }
+        }
+        return '#';
+    }
+    function getStringHref(to) {
+        if (to.startsWith('http://') || to.startsWith('https://') || to.startsWith('/')) {
+            return to;
+        }
+        return '/' + to;
+    }
+    function getResourceHref(to) {
+        return `/${to.resourceType}/${to.id}`;
+    }
+    function getReferenceHref(to) {
+        return `/${to.reference}`;
+    }
+
     function ReferenceDisplay(props) {
         if (!props.value) {
             return null;
@@ -1566,35 +1225,85 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(Input, { name: props.name, type: "text", placeholder: "Annotation text", defaultValue: value.text, onChange: setText }));
+        return (React__default["default"].createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
     }
 
-    function Checkbox(props) {
-        const className = 'medplum-checkbox';
-        return (React__default["default"].createElement("input", { id: props.name, name: props.name, className: className, type: "checkbox", value: "true", defaultChecked: !!props.defaultValue, required: props.required, ref: props.inputRef, "data-testid": props.testid, disabled: props.disabled, onChange: (e) => {
-                if (props.onChange) {
-                    props.onChange(e.currentTarget.checked);
+    function valueSetElementToAutocompleteItem(element) {
+        return {
+            value: element.code,
+            label: getDisplay(element),
+            element,
+        };
+    }
+    function ValueSetAutocomplete(props) {
+        const medplum = useMedplum();
+        const { property, defaultValue } = props;
+        const [textValues, setTextValues] = React.useState(defaultValue ? [defaultValue.code] : []);
+        const [data, setData] = React.useState(defaultValue ? [valueSetElementToAutocompleteItem(defaultValue)] : []);
+        const dataRef = React.useRef();
+        dataRef.current = data;
+        const loadValues = React.useCallback((input) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const system = (_a = property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
+            const valueSet = yield medplum.searchValueSet(system, input);
+            const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
+            const newData = [...dataRef.current];
+            for (const valueSetElement of valueSetElements) {
+                if (!newData.some((item) => item.value === valueSetElement.code)) {
+                    newData.push(valueSetElementToAutocompleteItem(valueSetElement));
                 }
-            } }));
+            }
+            setData(newData);
+        }), [medplum, property, dataRef]);
+        function handleChange(values) {
+            setTextValues(values);
+            const textValue = values[0];
+            let currentItem = undefined;
+            if (textValue) {
+                currentItem = dataRef.current.find((item) => item.value === values[0]);
+                if (!currentItem) {
+                    const newElement = { code: textValue, display: textValue };
+                    currentItem = valueSetElementToAutocompleteItem(newElement);
+                    setData([...dataRef.current, currentItem]);
+                }
+            }
+            if (props.onChange) {
+                props.onChange(currentItem === null || currentItem === void 0 ? void 0 : currentItem.element);
+            }
+        }
+        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) => {
+                var _a, _b;
+                return !!(textValues.length === 0 &&
+                    !selected &&
+                    (((_a = item.element.display) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value.toLowerCase().trim())) ||
+                        ((_b = item.element.code) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(value.toLowerCase().trim()))));
+            }, onChange: handleChange, getCreateLabel: (query) => `+ Create ${query}`, onCreate: (query) => valueSetElementToAutocompleteItem({ code: query, display: query }) }));
+    }
+    function getDisplay(item) {
+        return item.display || item.code || '';
     }
 
     function CodeableConceptInput(props) {
-        const medplum = useMedplum();
-        let defaultValue = undefined;
-        if (props.defaultValue) {
-            defaultValue = [props.defaultValue];
+        const [value, setValue] = React.useState(props.defaultValue);
+        function handleChange(newValue) {
+            const newConcept = newValue && valueSetElementToCodeableConcept(newValue);
+            setValue(newConcept);
+            if (props.onChange) {
+                props.onChange(newConcept);
+            }
         }
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => {
-                var _a;
-                const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-                return medplum.searchValueSet(system, input).then((valueSet) => {
-                    return valueSet.expansion.contains.map(valueSetElementToCodeableConcept);
-                });
-            }, buildUnstructured: buildUnstructured, getId: getId, getDisplay: getDisplay, name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
-                if (props.onChange) {
-                    props.onChange(values[0]);
-                }
-            } }));
+        return (React__default["default"].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;
+        return {
+            system: (_b = (_a = concept.coding) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.system,
+            code: (_d = (_c = concept.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code,
+            display: (_f = (_e = concept.coding) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.display,
+        };
     }
     function valueSetElementToCodeableConcept(element) {
         return {
@@ -1608,64 +1317,49 @@
             ],
         };
     }
-    function buildUnstructured(str) {
-        return { text: str };
-    }
-    function getId(concept) {
-        if (concept.coding && concept.coding.length > 0) {
-            return concept.coding[0].code;
+
+    function CodeInput(props) {
+        const [value, setValue] = React.useState(props.defaultValue);
+        function handleChange(newValue) {
+            const newCode = valueSetElementToCode(newValue);
+            setValue(newCode);
+            if (props.onChange) {
+                props.onChange(newCode);
+            }
         }
-        return core.stringify(concept);
+        return (React__default["default"].createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: codeToValueSetElement(value), onChange: handleChange }));
     }
-    function getDisplay(concept) {
-        var _a, _b, _c, _d, _e, _f;
-        const text = (_f = (_c = (_b = (_a = concept.coding) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.display) !== null && _c !== void 0 ? _c : (_e = (_d = concept.coding) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.code) !== null && _f !== void 0 ? _f : concept.text;
-        return React__default["default"].createElement(React__default["default"].Fragment, null, text);
+    function codeToValueSetElement(code) {
+        return code ? { code } : undefined;
     }
-
-    const cachedDisplayValues = {};
-    function CodeInput(props) {
-        const medplum = useMedplum();
-        let defaultValue = undefined;
-        if (props.defaultValue) {
-            defaultValue = [props.defaultValue];
-        }
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => {
-                var _a;
-                const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-                return medplum.searchValueSet(system, input).then((valueSet) => {
-                    const contains = valueSet.expansion.contains;
-                    contains.forEach((e) => (cachedDisplayValues[e.code] = e.display));
-                    return contains.map((e) => e.code);
-                });
-            }, buildUnstructured: (str) => str, getId: (item) => item, getDisplay: (item) => React__default["default"].createElement(React__default["default"].Fragment, null, cachedDisplayValues[item] || item), name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
-                if (props.onChange) {
-                    props.onChange(values[0]);
-                }
-            } }));
+    function valueSetElementToCode(element) {
+        return element === null || element === void 0 ? void 0 : element.code;
     }
 
     function CodingInput(props) {
-        const medplum = useMedplum();
-        let defaultValue = undefined;
-        if (props.defaultValue) {
-            defaultValue = [props.defaultValue];
+        const [value, setValue] = React.useState(props.defaultValue);
+        function handleChange(newValue) {
+            const newConcept = newValue && valueSetElementToCoding(newValue);
+            setValue(newConcept);
+            if (props.onChange) {
+                props.onChange(newConcept);
+            }
         }
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => {
-                var _a;
-                const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
-                return medplum.searchValueSet(system, input).then((valueSet) => {
-                    return valueSet.expansion.contains.map((e) => ({
-                        system: e.system,
-                        code: e.code,
-                        display: e.display,
-                    }));
-                });
-            }, buildUnstructured: (str) => ({ code: str }), getId: (item) => item.code, getDisplay: (item) => React__default["default"].createElement(CodingDisplay, { value: item }), name: props.name, defaultValue: defaultValue, loadOnFocus: true, onChange: (values) => {
-                if (props.onChange) {
-                    props.onChange(values[0]);
-                }
-            } }));
+        return (React__default["default"].createElement(ValueSetAutocomplete, { property: props.property, name: props.name, placeholder: props.placeholder, defaultValue: value && codingToValueSetElement(value), onChange: handleChange }));
+    }
+    function codingToValueSetElement(coding) {
+        return {
+            system: coding.system,
+            code: coding.code,
+            display: coding.display,
+        };
+    }
+    function valueSetElementToCoding(element) {
+        return {
+            system: element.system,
+            code: element.code,
+            display: element.display,
+        };
     }
 
     function ContactPointInput(props) {
@@ -1702,24 +1396,10 @@
             }
             setContactPointWrapper(newValue);
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Select, { defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.system, onChange: setSystem, testid: "system" },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "email"),
-                React__default["default"].createElement("option", null, "fax"),
-                React__default["default"].createElement("option", null, "pager"),
-                React__default["default"].createElement("option", null, "phone"),
-                React__default["default"].createElement("option", null, "other"),
-                React__default["default"].createElement("option", null, "sms"),
-                React__default["default"].createElement("option", null, "url")),
-            React__default["default"].createElement(Select, { defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.use, onChange: setUse, testid: "use" },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "home"),
-                React__default["default"].createElement("option", null, "mobile"),
-                React__default["default"].createElement("option", null, "old"),
-                React__default["default"].createElement("option", null, "temp"),
-                React__default["default"].createElement("option", null, "work")),
-            React__default["default"].createElement(Input, { placeholder: "Value", defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.value, onChange: setValue })));
+        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) })));
     }
 
     function ContactDetailInput(props) {
@@ -1747,8 +1427,8 @@
             }
             setContactDetailWrapper(newValue);
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Input, { name: props.name + '-name', placeholder: "Name", style: { width: 180 }, defaultValue: contactPoint === null || contactPoint === void 0 ? void 0 : contactPoint.name, onChange: setName }),
+        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 })));
     }
 
@@ -1761,11 +1441,12 @@
      * @returns The JSX element to render.
      */
     function DateTimeInput(props) {
-        return (React__default["default"].createElement(Input, Object.assign({}, props, { type: "datetime-local", defaultValue: convertIsoToLocal(props.defaultValue), onChange: (newValue) => {
+        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) => {
                 if (props.onChange) {
+                    const newValue = e.currentTarget.value;
                     props.onChange(convertLocalToIso(newValue));
                 }
-            } })));
+            } }));
     }
     /**
      * Converts an ISO-8601 date/time string to a local date/time string.
@@ -1805,20 +1486,17 @@
         }
         return date.toISOString();
     }
-
-    function TextArea(props) {
-        const className = 'medplum-textarea' + (props.monospace ? ' monospace' : '');
-        const issues = getIssuesForExpression(props.outcome, props.name);
-        const invalid = issues && issues.length > 0;
-        return (React__default["default"].createElement("textarea", { id: props.name, name: props.name, className: className, defaultValue: props.defaultValue || '', required: props.required, autoComplete: props.autoComplete, autoFocus: props.autoFocus, ref: props.inputRef, "aria-invalid": invalid, "aria-describedby": invalid ? props.name + '-errors' : '', placeholder: props.placeholder, "data-testid": props.testid, style: props.style, onChange: (e) => {
-                if (props.onChange) {
-                    props.onChange(e.currentTarget.value);
-                }
-            } }));
+    /**
+     * Returns the input type for the requested type.
+     * JSDOM does not support many of the valid <input> type attributes.
+     * For example, it won't fire change events for <input type="datetime-local">.
+     */
+    function getInputType() {
+        return 'datetime-local';
     }
 
     function ExtensionInput(props) {
-        return (React__default["default"].createElement(TextArea, { testid: "extension-input", name: props.name, defaultValue: core.stringify(props.defaultValue), monospace: true, onChange: (newValue) => {
+        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) => {
                 if (props.onChange) {
                     props.onChange(JSON.parse(newValue));
                 }
@@ -1851,20 +1529,12 @@
         function setSuffix(suffix) {
             setValueWrapper(Object.assign(Object.assign({}, valueRef.current), { suffix: suffix ? suffix.split(' ') : undefined }));
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Select, { defaultValue: value === null || value === void 0 ? void 0 : value.use, onChange: setUse, testid: "use" },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "usual"),
-                React__default["default"].createElement("option", null, "official"),
-                React__default["default"].createElement("option", null, "temp"),
-                React__default["default"].createElement("option", null, "nickname"),
-                React__default["default"].createElement("option", null, "anonymous"),
-                React__default["default"].createElement("option", null, "old"),
-                React__default["default"].createElement("option", null, "maiden")),
-            React__default["default"].createElement(Input, { placeholder: "Prefix", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.prefix) === null || _a === void 0 ? void 0 : _a.join(' '), onChange: setPrefix }),
-            React__default["default"].createElement(Input, { placeholder: "Given", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.given) === null || _b === void 0 ? void 0 : _b.join(' '), onChange: setGiven }),
-            React__default["default"].createElement(Input, { placeholder: "Family", defaultValue: value === null || value === void 0 ? void 0 : value.family, onChange: setFamily }),
-            React__default["default"].createElement(Input, { placeholder: "Suffix", defaultValue: (_c = value === null || value === void 0 ? void 0 : value.suffix) === null || _c === void 0 ? void 0 : _c.join(' '), onChange: setSuffix })));
+        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) })));
     }
 
     function IdentifierInput(props) {
@@ -1875,9 +1545,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Input, { placeholder: "System", defaultValue: value === null || value === void 0 ? void 0 : value.system, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { system: newValue })) }),
-            React__default["default"].createElement(Input, { placeholder: "Value", defaultValue: value === null || value === void 0 ? void 0 : value.value, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { value: 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 })) })));
     }
 
     function PeriodInput(props) {
@@ -1888,9 +1558,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Input, { type: "datetime-local", 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(Input, { type: "datetime-local", placeholder: "End", defaultValue: value === null || value === void 0 ? void 0 : value.end, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { end: 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 })) })));
     }
 
     function QuantityInput(props) {
@@ -1902,15 +1572,10 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Select, { style: { width: 80 }, testid: props.name + '-comparator', defaultValue: value === null || value === void 0 ? void 0 : value.comparator, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { comparator: newValue })) },
-                React__default["default"].createElement("option", null),
-                React__default["default"].createElement("option", null, "<"),
-                React__default["default"].createElement("option", null, "<="),
-                React__default["default"].createElement("option", null, ">="),
-                React__default["default"].createElement("option", null, ">")),
-            React__default["default"].createElement(Input, { name: 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: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { value: tryParseNumber(newValue) })) }),
-            React__default["default"].createElement(Input, { placeholder: "Unit", defaultValue: value === null || value === void 0 ? void 0 : value.unit, onChange: (newValue) => setValueWrapper(Object.assign(Object.assign({}, value), { unit: 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 })) })));
     }
     function tryParseNumber(str) {
         if (!str) {
@@ -1933,7 +1598,7 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
+        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 })) })));
     }
@@ -1952,50 +1617,65 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
+        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 })) })));
     }
 
-    function ResourceName(props) {
+    function ResourceAvatar(props) {
+        var _a, _b, _c;
         const resource = useResource(props.value);
-        if (!resource) {
-            return null;
+        const text = resource ? core.getDisplayString(resource) : (_a = props.alt) !== null && _a !== void 0 ? _a : '';
+        const imageUrl = (_b = (resource && core.getImageSrc(resource))) !== null && _b !== void 0 ? _b : props.src;
+        const radius = (_c = props.radius) !== null && _c !== void 0 ? _c : 'xl';
+        const avatarProps = Object.assign({}, props);
+        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))));
         }
-        const text = core.getDisplayString(resource);
-        return props.link ? React__default["default"].createElement(MedplumLink, { to: resource }, text) : React__default["default"].createElement("span", null, text);
+        return React__default["default"].createElement(core$1.Avatar, Object.assign({ src: imageUrl, alt: text, radius: radius }, avatarProps));
     }
 
     function ResourceInput(props) {
         const medplum = useMedplum();
-        const defaultResource = useResource(props.defaultValue);
-        const [value, setValue] = React.useState();
-        const resourceTypeRef = React.useRef(props.resourceType);
-        resourceTypeRef.current = props.resourceType;
-        React.useEffect(() => {
-            setValue(defaultResource);
-        }, [defaultResource]);
-        function setValueWrapper(newValue) {
-            setValue(newValue);
+        const defaultValue = useResource(props.defaultValue);
+        const [value, setValue] = React.useState(defaultValue ? core.getDisplayString(defaultValue) : '');
+        const [loading, setLoading] = React.useState(false);
+        const [data, setData] = React.useState([]);
+        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');
+                setData(resources.map((resource) => ({ value: core.getDisplayString(resource), resource })));
+                setLoading(false);
+            });
+        }
+        function handleChange(val) {
+            return __awaiter(this, void 0, void 0, function* () {
+                setValue(val);
+                return loadValues(val);
+            });
+        }
+        function handleSelect(item) {
+            setValue(item.value);
+            setData([]);
             if (props.onChange) {
-                props.onChange(newValue);
+                props.onChange(item.resource);
             }
         }
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input) => __awaiter(this, void 0, void 0, function* () {
-                return medplum
-                    .search(resourceTypeRef.current, 'name=' + encodeURIComponent(input) + '&_count=10')
-                    .then((bundle) => bundle.entry.map((entry) => entry.resource));
-            }), getId: (item) => {
-                return item.id;
-            }, getIcon: (item) => React__default["default"].createElement(Avatar, { value: item }), getDisplay: (item) => React__default["default"].createElement(ResourceName, { value: item }), getHelpText: (item) => {
-                if (item.resourceType === 'Patient' && item.birthDate) {
-                    return 'DoB: ' + item.birthDate;
-                }
-                return undefined;
-            }, name: props.name, defaultValue: value ? [value] : undefined, className: props.className, placeholder: props.placeholder, loadOnFocus: props.loadOnFocus, onChange: (items) => {
-                setValueWrapper(items.length > 0 ? items[0] : undefined);
-            } }));
+        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 }));
     }
+    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)))));
+    });
 
     function ReferenceInput(props) {
         const targetTypes = props.targetTypes;
@@ -2012,9 +1692,9 @@
                 props.onChange(newValue);
             }
         }
-        return (React__default["default"].createElement(InputRow, null,
-            targetTypes ? (React__default["default"].createElement(Select, { testid: "reference-input-resource-type-select", defaultValue: resourceType, onChange: setResourceType }, targetTypes.map((targetType) => (React__default["default"].createElement("option", { key: targetType, value: targetType }, targetType))))) : (React__default["default"].createElement(Input, { testid: "reference-input-resource-type-input", defaultValue: resourceType, onChange: setResourceType })),
-            React__default["default"].createElement(ResourceInput, { resourceType: resourceType, name: props.name + '-id', defaultValue: value, onChange: (item) => {
+        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) => {
                     setValueHelper(item ? core.createReference(item) : undefined);
                 } })));
     }
@@ -2042,8 +1722,8 @@
         }
         return (React__default["default"].createElement("table", { style: { width: '100%', borderCollapse: 'collapse' } },
             React__default["default"].createElement("colgroup", null,
-                React__default["default"].createElement("col", { width: "90%" }),
-                React__default["default"].createElement("col", { width: "10%" })),
+                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,
@@ -2053,58 +1733,23 @@
                                 setValuesWrapper(copy);
                             } })),
                     React__default["default"].createElement("td", { style: { textAlign: 'right' } },
-                        React__default["default"].createElement(Button, { onClick: (e) => {
+                        React__default["default"].createElement(core$1.ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
                                 killEvent(e);
                                 const copy = [...valuesRef.current];
                                 copy.splice(index, 1);
                                 setValuesWrapper(copy);
-                            } }, "Remove"))))),
+                            } },
+                            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(Button, { onClick: (e) => {
+                        React__default["default"].createElement(core$1.ActionIcon, { title: "Add", size: "sm", color: "green", onClick: (e) => {
                                 killEvent(e);
                                 const copy = [...valuesRef.current];
                                 copy.push(undefined);
                                 setValuesWrapper(copy);
-                            } }, "Add"))))));
-    }
-
-    function Dialog(props) {
-        const [x, setX] = React.useState(100);
-        const [y, setY] = React.useState(100);
-        if (!props.visible) {
-            return null;
-        }
-        function handleMouseDown(downEvent) {
-            killEvent(downEvent);
-            const dragX = downEvent.clientX - x;
-            const dragY = downEvent.clientY - y;
-            function handleMouseMove(moveEvent) {
-                killEvent(moveEvent);
-                setX(moveEvent.clientX - dragX);
-                setY(moveEvent.clientY - dragY);
-            }
-            function handleMouseUp(upEvent) {
-                killEvent(upEvent);
-                document.removeEventListener('mouseup', handleMouseUp, true);
-                document.removeEventListener('mousemove', handleMouseMove, true);
-            }
-            document.addEventListener('mouseup', handleMouseUp, true);
-            document.addEventListener('mousemove', handleMouseMove, true);
-        }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: "modal-dialog-bg" }),
-            React__default["default"].createElement("div", { className: "modal-dialog", "data-testid": "dialog", tabIndex: 0, style: { left: x + 'px', top: y + 'px' } },
-                React__default["default"].createElement("div", { className: "modal-dialog-title", onMouseDown: (e) => handleMouseDown(e) },
-                    React__default["default"].createElement("span", { className: "modal-dialog-title-text" }, props.title),
-                    React__default["default"].createElement("span", { className: "modal-dialog-title-close", tabIndex: 0, onClick: props.onCancel },
-                        React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" },
-                            React__default["default"].createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))),
-                React__default["default"].createElement("div", { className: "modal-dialog-content" }, props.children),
-                React__default["default"].createElement("div", { className: "modal-dialog-buttons" },
-                    React__default["default"].createElement(Button, { testid: "dialog-ok", onClick: props.onOk }, "OK"),
-                    React__default["default"].createElement(Button, { testid: "dialog-cancel", onClick: props.onCancel }, "Cancel")))));
+                            } },
+                            React__default["default"].createElement(icons.IconCirclePlus, null)))))));
     }
 
     const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
@@ -2114,9 +1759,9 @@
         const valueRef = React.useRef();
         valueRef.current = value;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(InputRow, 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(Button, { onClick: () => setOpen(true) }, "Edit")),
+                React__default["default"].createElement(core$1.Button, { onClick: () => setOpen(true) }, "Edit")),
             React__default["default"].createElement(TimingEditorDialog, { visible: open, defaultValue: valueRef.current, onOk: (newValue) => {
                     if (props.onChange) {
                         props.onChange(newValue);
@@ -2166,22 +1811,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(Dialog, { title: "Timing", visible: props.visible, onOk: () => props.onOk(value), onCancel: () => props.onCancel() },
+        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(InputRow, null,
-                        React__default["default"].createElement(Input, { type: "number", step: 1, name: 'timing-dialog-period', defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (newValue) => setPeriod(parseInt(newValue)) }),
-                        React__default["default"].createElement(Select, { name: 'timing-dialog-periodUnit', defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (newValue) => setPeriodUnit(newValue) },
-                            React__default["default"].createElement("option", { value: "d" }, "day"),
-                            React__default["default"].createElement("option", { value: "wk" }, "week"),
-                            React__default["default"].createElement("option", { value: "mo" }, "month"),
-                            React__default["default"].createElement("option", { value: "a" }, "year")))),
+                    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: [
+                                { 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(InputRow, null, daysOfWeek.map((day) => (React__default["default"].createElement(React__default["default"].Fragment, { key: day },
+                    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(Checkbox, { name: 'timing-dialog-repeat-' + day, onChange: (newValue) => setDayOfWeek(day, newValue) })))))))));
+                        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")));
     }
 
     function ResourcePropertyInput(props) {
@@ -2214,10 +1861,13 @@
             initialPropertyType = propertyTypes[0];
         }
         const [selectedType, setSelectedType] = React.useState(initialPropertyType);
-        return (React__default["default"].createElement(InputRow, null,
-            React__default["default"].createElement(Select, { style: { width: '200px' }, defaultValue: selectedType === null || selectedType === void 0 ? void 0 : selectedType.code, onChange: (newValue) => {
-                    setSelectedType(propertyTypes.find((type) => type.code === newValue));
-                } }, propertyTypes.map((type) => (React__default["default"].createElement("option", { key: type.code, value: type.code }, type.code)))),
+        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) => {
+                    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) => {
                     if (props.onChange) {
                         props.onChange(newValue, props.name.replace('[x]', core.capitalize(selectedType.code)));
@@ -2239,31 +1889,43 @@
             case core.PropertyType.time:
             case core.PropertyType.uri:
             case core.PropertyType.url:
-                return (React__default["default"].createElement(Input, { type: "text", name: name, testid: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+                return (React__default["default"].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(Input, { type: "date", name: name, testid: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+                return (React__default["default"].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, { type: "datetime-local", name: name, testid: name, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
+                return React__default["default"].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(Input, { type: "number", step: propertyType === core.PropertyType.decimal ? 'any' : 1, name: name, testid: name, defaultValue: value, onChange: (newValue) => {
+                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) => {
                         if (props.onChange) {
-                            props.onChange(parseFloat(newValue));
+                            props.onChange(e.currentTarget.valueAsNumber);
                         }
-                    }, outcome: props.outcome }));
+                    } }));
             case core.PropertyType.code:
                 return React__default["default"].createElement(CodeInput, { property: property, name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.boolean:
-                return (React__default["default"].createElement(Checkbox, { name: name, testid: name, defaultValue: !!value, onChange: (newValue) => {
+                return (React__default["default"].createElement(core$1.Checkbox, { id: name, name: name, "data-testid": name, defaultChecked: !!value, onChange: (e) => {
                         if (props.onChange) {
-                            props.onChange(newValue);
+                            props.onChange(e.currentTarget.checked);
                         }
                     } }));
             case core.PropertyType.markdown:
-                return React__default["default"].createElement(TextArea, { name: name, testid: name, defaultValue: value, onChange: props.onChange });
+                return (React__default["default"].createElement(core$1.Textarea, { id: name, name: name, "data-testid": name, defaultValue: value, onChange: (e) => {
+                        if (props.onChange) {
+                            props.onChange(e.currentTarget.value);
+                        }
+                    } }));
             // 2.24.0.2 Complex Types
             // https://www.hl7.org/fhir/datatypes.html#complex
             case core.PropertyType.Address:
@@ -2347,10 +2009,18 @@
         })));
     }
 
+    function ResourceName(props) {
+        const resource = useResource(props.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);
+    }
+
     function ResourceBadge(props) {
-        var _a;
         return (React__default["default"].createElement("div", { className: "medplum-resource-badge" },
-            React__default["default"].createElement(Avatar, { size: (_a = props.size) !== null && _a !== void 0 ? _a : 'small', value: props.value, link: props.link }),
+            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 })));
     }
 
@@ -2396,7 +2066,7 @@
     }
     function ObservationTable(props) {
         var _a;
-        return (React__default["default"].createElement("table", { className: "medplum-table" },
+        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"),
@@ -2410,7 +2080,11 @@
         if (!observation) {
             return null;
         }
-        return (React__default["default"].createElement("tr", 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 }))),
@@ -2441,18 +2115,21 @@
         if (!range) {
             return null;
         }
+        if (range.text) {
+            return React__default["default"].createElement(React__default["default"].Fragment, null, range.text);
+        }
         return React__default["default"].createElement(RangeDisplay, { value: range });
     }
-
-    function Loading() {
-        return (React__default["default"].createElement("div", { role: "progressbar", "aria-busy": "true", className: "medplum-loading" },
-            React__default["default"].createElement("div", { className: "medplum-loading-container" },
-                React__default["default"].createElement("svg", { className: "medplum-loading-spinner", viewBox: "0 0 100 100" },
-                    React__default["default"].createElement("circle", { cx: "50", cy: "50", r: "40" })))));
-    }
-
-    function MenuItem(props) {
-        return (React__default["default"].createElement("div", { className: "medplum-menu-item", onClick: () => props.onClick(), "aria-label": props.label }, props.children));
+    /**
+     * Returns true if the observation is critical.
+     * See: https://www.hl7.org/fhir/valueset-observation-interpretation.html
+     * @param observation The FHIR observation.
+     * @returns True if the FHIR observation is a critical value.
+     */
+    function isCritical(observation) {
+        var _a, _b, _c, _d;
+        const code = (_d = (_c = (_b = (_a = observation.interpretation) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.coding) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.code;
+        return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';
     }
 
     function ResourceDiffTable(props) {
@@ -2521,14 +2198,6 @@
         return (React__default["default"].createElement(BackboneElementDisplay, { value: { type: value.resourceType, value }, ignoreMissingValues: props.ignoreMissingValues }));
     }
 
-    function Scrollable(props) {
-        const containerHeight = props.height || '100%';
-        const contentHeight = props.height ? props.height + 25 : '100%';
-        const className = 'medplum-scrollable-content' + (props.className ? ` ${props.className}` : '');
-        return (React__default["default"].createElement("div", { className: "medplum-scrollable-container", style: { height: containerHeight } },
-            React__default["default"].createElement("div", { className: className, role: props.role, style: { height: contentHeight } }, props.children)));
-    }
-
     /**
      * ErrorBoundary is a React component that handles errors in its child components.
      * See: https://reactjs.org/docs/error-boundaries.html
@@ -2552,112 +2221,33 @@
         }
     }
 
-    function Popup(props) {
-        const ref = React.useRef(null);
-        // Track browser URL location, and the location when the popup becomes visible
-        const location = reactRouterDom.useLocation();
-        const locationRef = React.useRef();
-        if (props.visible) {
-            if (locationRef.current === undefined) {
-                locationRef.current = location;
-            }
-        }
-        else {
-            locationRef.current = undefined;
-        }
-        const propsRef = React.useRef();
-        propsRef.current = props;
-        // Listen for clicks outside of the popup
-        // If the user clicks outside of the popup, close it
-        React.useEffect(() => {
-            function handleClick(e) {
-                var _a, _b;
-                if (((_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.visible) &&
-                    ((_b = propsRef.current) === null || _b === void 0 ? void 0 : _b.autoClose) &&
-                    (ref === null || ref === void 0 ? void 0 : ref.current) &&
-                    !ref.current.contains(e.target)) {
-                    killEvent(e);
-                    props.onClose();
-                }
-            }
-            function handleScroll(e) {
-                var _a;
-                if ((_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.visible) {
-                    killEvent(e);
-                }
-            }
-            document.addEventListener('click', handleClick, true);
-            window.addEventListener('wheel', handleScroll, { passive: false });
-            window.addEventListener('touchmove', handleScroll, true);
-            return () => {
-                document.removeEventListener('click', handleClick, true);
-                window.removeEventListener('wheel', handleScroll);
-                window.removeEventListener('touchmove', handleScroll, true);
-            };
-        }, [props]);
-        // Listen for changes in the location
-        // If the browser navigates to a new page, close the popup
-        React.useEffect(() => {
-            if (props.visible && location !== locationRef.current) {
-                props.onClose();
-            }
-        }, [location, props]);
-        const style = {
-            display: props.visible ? 'block' : 'none',
-        };
-        if (props.anchor) {
-            if (props.anchor.right + 250 < document.body.clientWidth) {
-                style.left = props.anchor.right + 'px';
-            }
-            else {
-                style.right = document.body.clientWidth - props.anchor.left + 'px';
-            }
-            if (props.anchor.top + 300 < document.body.clientHeight) {
-                style.top = props.anchor.top + 'px';
-            }
-            else {
-                style.bottom = document.body.clientHeight - props.anchor.top + 'px';
-            }
-        }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            props.modal && (React__default["default"].createElement("div", { className: props.visible ? 'medplum-backdrop active' : 'medplum-backdrop', onClick: props.onClose })),
-            React__default["default"].createElement("div", { ref: ref, className: 'medplum-popup ' + (props.visible ? props.activeClassName : props.inactiveClassName), style: style, "data-testid": "popup" }, props.children)));
-    }
-
     function Timeline(props) {
         return React__default["default"].createElement("main", { className: "medplum-document medplum-timeline" }, props.children);
     }
     function TimelineItem(props) {
         var _a, _b, _c;
-        const [popupAnchor, setPopupAnchor] = React.useState();
         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(Avatar, { value: author, link: true, size: "medium" })),
+                    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("div", { className: "medplum-timeline-item-actions" },
-                    React__default["default"].createElement("a", { href: "#", "aria-label": `Actions for ${core.getReferenceString(props.resource)}`, onClick: (e) => {
-                            killEvent(e);
-                            const el = e.currentTarget;
-                            const rect = el.getBoundingClientRect();
-                            setPopupAnchor(rect);
-                        } },
-                        React__default["default"].createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20" },
-                            React__default["default"].createElement("g", { transform: "translate(-446 -350)" },
-                                React__default["default"].createElement("path", { d: "M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0" }))))))),
+                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))),
+                    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(Button, { borderless: true }, "Like"),
-                React__default["default"].createElement(Button, { borderless: true }, "Comment"))),
-            props.popupMenuItems && (React__default["default"].createElement(Popup, { visible: !!popupAnchor, anchor: popupAnchor, autoClose: true, onClose: () => setPopupAnchor(undefined) }, props.popupMenuItems))));
+                React__default["default"].createElement(core$1.Button, { variant: "subtle" }, "Like"),
+                React__default["default"].createElement(core$1.Button, { variant: "subtle" }, "Comment")))));
     }
 
     /**
@@ -2822,7 +2412,7 @@
             navigate(`/${version.resourceType}/${version.id}/_history/${(_a = version.meta) === null || _a === void 0 ? void 0 : _a.versionId}`);
         }
         if (!resource || !history) {
-            return React__default["default"].createElement(Loading, null);
+            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" },
@@ -2835,9 +2425,13 @@
                                 input.focus();
                             }
                         } },
-                        React__default["default"].createElement(Input, { name: "text", testid: "timeline-input", inputRef: inputRef }),
-                        React__default["default"].createElement(Button, { type: "submit" }, "Comment"),
-                        React__default["default"].createElement(UploadButton, { onUpload: createMedia }))))),
+                        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 }))))))))),
             items.map((item) => {
                 var _a;
                 if (item.resourceType === resource.resourceType && item.id === resource.id) {
@@ -2860,12 +2454,16 @@
             })));
     }
     function TimelineItemPopupMenu(props) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            props.onPin && (React__default["default"].createElement(MenuItem, { onClick: () => props.onPin(props.resource), label: `Pin ${core.getReferenceString(props.resource)}` }, "Pin")),
-            props.onUnpin && (React__default["default"].createElement(MenuItem, { onClick: () => props.onUnpin(props.resource), label: `Unpin ${core.getReferenceString(props.resource)}` }, "Unpin")),
-            props.onDetails && (React__default["default"].createElement(MenuItem, { onClick: () => props.onDetails(props.resource), label: `Details ${core.getReferenceString(props.resource)}` }, "Details")),
-            props.onEdit && (React__default["default"].createElement(MenuItem, { onClick: () => props.onEdit(props.resource), label: `Edit ${core.getReferenceString(props.resource)}` }, "Edit")),
-            props.onDelete && (React__default["default"].createElement(MenuItem, { onClick: () => props.onDelete(props.resource), label: `Delete ${core.getReferenceString(props.resource)}` }, "Delete"))));
+        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")))));
     }
     function HistoryTimelineItem(props) {
         const previous = getPrevious(props.history, props.resource);
@@ -2906,7 +2504,7 @@
     }
     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(Scrollable, null,
+            React__default["default"].createElement(core$1.ScrollArea, null,
                 React__default["default"].createElement("pre", null, props.resource.outcomeDesc))));
     }
     function DiagnosticReportTimelineItem(props) {
@@ -2961,6 +2559,7 @@
                 ],
             }), createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
+                status: 'completed',
                 encounter: core.createReference(resource),
                 subject: resource.subject,
                 sender: core.createReference(sender),
@@ -2968,6 +2567,7 @@
                 payload: [{ contentString: text }],
             }), createMedia: (resource, operator, content) => ({
                 resourceType: 'Media',
+                status: 'completed',
                 encounter: core.createReference(resource),
                 subject: resource.subject,
                 operator: core.createReference(operator),
@@ -3396,17 +2996,16 @@
         return Object.assign(Object.assign({}, definition), { offset, name: undefined });
     }
     /**
-     * Moves the page forward or backward.
-     *
-     * @param {number} delta The delta to the page number.
-     * @return {boolean} True if the page actually moved; false otherwise.
+     * Creates a new search request with the search offset at the specified page.
+     * @param definition The search definition.
+     * @param page The new page number
+     * @return The new search definition.
      */
-    function movePage(definition, delta) {
-        var _a, _b;
-        const count = (_a = definition.count) !== null && _a !== void 0 ? _a : 20;
-        const currOffset = (_b = definition.offset) !== null && _b !== void 0 ? _b : 0;
-        const newOffset = currOffset + delta * count;
-        return setOffset(definition, Math.max(newOffset, 0));
+    function setPage(definition, page) {
+        var _a;
+        const count = (_a = definition.count) !== null && _a !== void 0 ? _a : core.DEFAULT_SEARCH_COUNT;
+        const newOffset = (page - 1) * count;
+        return setOffset(definition, newOffset);
     }
     /**
      * Sorts the search by the specified key, and optional direction.
@@ -3697,7 +3296,7 @@
         const available = getFieldsList(typeDef)
             .filter((field) => !(selected === null || selected === void 0 ? void 0 : selected.includes(field)))
             .sort();
-        return (React__default["default"].createElement(Dialog, { title: "Fields", visible: props.visible, onOk: () => props.onOk(state.search), onCancel: props.onCancel },
+        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,
@@ -3713,13 +3312,14 @@
                     React__default["default"].createElement("tfoot", null,
                         React__default["default"].createElement("tr", null,
                             React__default["default"].createElement("td", { align: "center" },
-                                React__default["default"].createElement(Button, { size: "small", onClick: onAddField }, "Add")),
+                                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(Button, { size: "small", onClick: onRemoveField }, "Remove")),
+                                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(Button, { size: "small", onClick: onMoveUp }, "Up")),
+                                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(Button, { size: "small", onClick: onMoveDown }, "Down"))))))));
+                                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")));
     }
     /**
      * Returns a list of fields/columns available for a type.
@@ -3781,13 +3381,13 @@
                         }
                     } }));
             case core.SearchParameterType.BOOLEAN:
-                return (React__default["default"].createElement(Checkbox, { name: name, testid: name, defaultValue: props.defaultValue === 'true', onChange: (newValue) => props.onChange(newValue.toString()) }));
+                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()) }));
             case core.SearchParameterType.DATE:
-                return React__default["default"].createElement(Input, { type: "date", testid: name, defaultValue: props.defaultValue, onChange: props.onChange });
+                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) }));
             case core.SearchParameterType.DATETIME:
-                return React__default["default"].createElement(DateTimeInput, { testid: name, defaultValue: props.defaultValue, onChange: props.onChange });
+                return React__default["default"].createElement(DateTimeInput, { name: name, defaultValue: props.defaultValue, onChange: props.onChange });
             case core.SearchParameterType.NUMBER:
-                return React__default["default"].createElement(Input, { type: "number", defaultValue: props.defaultValue, onChange: props.onChange });
+                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) }));
             case core.SearchParameterType.QUANTITY:
                 return (React__default["default"].createElement(QuantityInput, { name: name, defaultValue: tryParseQuantity(props.defaultValue), onChange: (newQuantity) => {
                         if (newQuantity) {
@@ -3798,7 +3398,7 @@
                         }
                     } }));
             default:
-                return (React__default["default"].createElement(Input, { testid: name, defaultValue: props.defaultValue, autoFocus: props.autoFocus, onChange: props.onChange }));
+                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" }));
         }
     }
     function tryParseQuantity(value) {
@@ -3832,7 +3432,7 @@
         const resourceType = props.search.resourceType;
         const searchParams = core.globalSchema.types[resourceType].searchParams;
         const filters = search.filters || [];
-        return (React__default["default"].createElement(Dialog, { title: "Filters", visible: props.visible, onOk: () => props.onOk(searchRef.current), onCancel: props.onCancel },
+        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,
@@ -3860,7 +3460,9 @@
                                 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)) }));
                             }
                         }),
-                        React__default["default"].createElement(FilterRowInput, { resourceType: resourceType, searchParams: searchParams, okText: "Add", onOk: onAddFilter }))))));
+                        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"))));
     }
     function FilterRowDisplay(props) {
         const { filter } = props;
@@ -3870,8 +3472,8 @@
             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(Button, { size: "small", onClick: props.onEdit }, "Edit"),
-                React__default["default"].createElement(Button, { size: "small", onClick: props.onDelete }, "Delete"))));
+                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"))));
     }
     function FilterRowInput(props) {
         var _a;
@@ -3891,19 +3493,15 @@
         const operators = searchParam && getSearchOperators(searchParam);
         return (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", null,
-                React__default["default"].createElement(Select, { testid: "filter-field", defaultValue: valueRef.current.code, onChange: setFilterCode },
-                    React__default["default"].createElement("option", { value: "" }),
-                    Object.keys(props.searchParams).map((param) => (React__default["default"].createElement("option", { key: param, value: param }, buildFieldNameString(param)))))),
-            React__default["default"].createElement("td", null, operators && (React__default["default"].createElement(Select, { testid: "filter-operation", defaultValue: value.operator, onChange: setFilterOperator },
-                React__default["default"].createElement("option", { value: "" }),
-                operators.map((operator) => (React__default["default"].createElement("option", { key: operator, value: operator }, getOpString(operator))))))),
+                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(Button, { size: "small", onClick: () => {
+                value.code && value.operator && value.value && (React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: () => {
                         props.onOk(valueRef.current);
                         setValue({});
                     } }, props.okText)),
-                props.onCancel && (React__default["default"].createElement(Button, { size: "small", onClick: props.onCancel }, "Cancel")))));
+                props.onCancel && (React__default["default"].createElement(core$1.Button, { compact: true, variant: "outline", onClick: props.onCancel }, "Cancel")))));
     }
 
     function SearchFilterValueDialog(props) {
@@ -3915,47 +3513,11 @@
         function onOk() {
             props.onOk(Object.assign(Object.assign({}, props.filter), { value }));
         }
-        return (React__default["default"].createElement(Dialog, { title: props.title, visible: props.visible, onOk: onOk, onCancel: props.onCancel },
+        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 })))));
-    }
-
-    function MenuSeparator() {
-        return React__default["default"].createElement("div", { className: "medplum-menu-separator" });
-    }
-
-    function SubMenu(props) {
-        const [hover, setHover] = React.useState(false);
-        const [visible, setVisible] = React.useState(false);
-        const [anchor, setAnchor] = React.useState(undefined);
-        const menuItemRef = React.useRef(null);
-        const hoverRef = React.useRef(false);
-        hoverRef.current = hover;
-        const visibleRef = React.useRef(false);
-        visibleRef.current = visible;
-        function show() {
-            const el = menuItemRef.current;
-            if (el) {
-                setAnchor(el.getBoundingClientRect());
-                setVisible(true);
-            }
-        }
-        React.useEffect(() => {
-            const timerId = window.setInterval(() => {
-                if (!visibleRef.current && hoverRef.current) {
-                    show();
-                }
-                else if (visibleRef.current && !hoverRef.current) {
-                    setVisible(false);
-                }
-            }, 150);
-            return () => window.clearInterval(timerId);
-        }, []);
-        return (React__default["default"].createElement("div", { ref: menuItemRef, className: "medplum-menu-item medplum-submenu-item", onClick: () => show(), onMouseOver: () => setHover(true), onMouseLeave: () => setHover(false) },
-            props.title,
-            React__default["default"].createElement("span", { className: "medplum-submenu-arrow" }, '\u25BA'),
-            React__default["default"].createElement(Popup, { visible: visible, anchor: anchor, autoClose: true, onClose: () => setVisible(false) }, props.children)));
+                    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")));
     }
 
     function SearchPopupMenu(props) {
@@ -3974,15 +3536,12 @@
         function onChange(definition) {
             props.onChange(definition);
         }
-        const anchor = { left: props.x, right: props.x, top: props.y, bottom: props.y };
         // If there is only one search parameter, then show it directly
         if (props.searchParams.length === 1) {
-            return (React__default["default"].createElement(Popup, { visible: props.visible, anchor: anchor, autoClose: true, onClose: props.onClose },
-                React__default["default"].createElement(SearchParameterSubMenu, { search: props.search, searchParam: props.searchParams[0], onSort: onSort, onPrompt: onPrompt, onChange: onChange, onClear: onClear })));
+            return (React__default["default"].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(Popup, { visible: props.visible, anchor: anchor, autoClose: true, onClose: props.onClose }, props.searchParams.map((searchParam) => (React__default["default"].createElement(SubMenu, { key: searchParam.code, title: buildFieldNameString(searchParam.code) },
-            React__default["default"].createElement(SearchParameterSubMenu, { search: props.search, searchParam: searchParam, onSort: onSort, onPrompt: onPrompt, onChange: onChange, onClear: onClear }))))));
+        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))))));
     }
     function SearchParameterSubMenu(props) {
         switch (props.searchParam.type) {
@@ -4006,85 +3565,72 @@
     function DateFilterSubMenu(props) {
         const { searchParam } = props;
         const code = searchParam.code;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, false) }, "Sort Oldest to Newest"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, true) }, "Sort Newest to Oldest"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.ENDS_BEFORE) }, "Before..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.STARTS_AFTER) }, "After..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Between..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addTomorrowFilter(props.search, code)) }, "Tomorrow"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addTodayFilter(props.search, code)) }, "Today"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addYesterdayFilter(props.search, code)) }, "Yesterday"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addNextMonthFilter(props.search, code)) }, "Next Month"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addThisMonthFilter(props.search, code)) }, "This Month"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addLastMonthFilter(props.search, code)) }, "Last Month"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addYearToDateFilter(props.search, code)) }, "Year to date"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onClear(searchParam) }, "Clear filters")));
+        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))));
     }
     function NumericFilterSubMenu(props) {
         const { searchParam } = props;
-        const code = searchParam.code;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, false) }, "Sort Smallest to Largest"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, true) }, "Sort Largest to Smallest"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.NOT_EQUALS) }, "Does not equal..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN) }, "Greater than..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.GREATER_THAN_OR_EQUALS) }, "Greater than or equal to..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN) }, "Less than..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.LESS_THAN_OR_EQUALS) }, "Less than or equal to..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onClear(searchParam) }, "Clear filters")));
+        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))));
     }
     function ReferenceFilterSubMenu(props) {
         const { searchParam } = props;
-        const code = searchParam.code;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onClear(searchParam) }, "Clear filters")));
+        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))));
     }
     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))));
+    }
+    function CommonMenuItems(props) {
         const { searchParam } = props;
         const code = searchParam.code;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, false) }, "Sort A to Z"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onSort(searchParam, true) }, "Sort Z to A"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Equals..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.NOT) }, "Does not equal..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.CONTAINS) }, "Contains..."),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onPrompt(searchParam, core.Operator.EQUALS) }, "Does not contain..."),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code)) }, "Missing"),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onChange(addMissingFilter(props.search, code, false)) }, "Not missing"),
-            React__default["default"].createElement(MenuSeparator, null),
-            React__default["default"].createElement(MenuItem, { onClick: () => props.onClear(searchParam) }, "Clear filters")));
-    }
-
-    function TitleBar(props) {
-        return React__default["default"].createElement("div", { className: "medplum-title-bar" }, props.children);
+            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")));
     }
 
     class SearchChangeEvent extends Event {
@@ -4106,23 +3652,37 @@
             this.browserEvent = browserEvent;
         }
     }
+    const useStyles = core$1.createStyles((theme) => ({
+        th: {
+            padding: '0 !important',
+        },
+        control: {
+            width: '100%',
+            padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+            '&:hover': {
+                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+            },
+        },
+        icon: {
+            width: 21,
+            height: 21,
+            borderRadius: 21,
+        },
+    }));
     /**
      * The SearchControl component represents the embeddable search table control.
      * It includes the table, rows, headers, sorting, etc.
      * It does not include the field editor, filter editor, pagination buttons.
      */
     function SearchControl(props) {
-        var _a, _b, _c, _d;
+        var _a, _b;
+        const { classes } = useStyles();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
         const { search, onLoad } = props;
         const [state, setState] = React.useState({
             selected: {},
-            popupVisible: false,
-            popupX: 0,
-            popupY: 0,
-            popupSearchParams: undefined,
             fieldEditorVisible: false,
             filterEditorVisible: false,
             filterDialogVisible: false,
@@ -4187,14 +3747,6 @@
             }
             return true;
         }
-        /**
-         * Handles a click on a column header cell.
-         * @param e The click event.
-         * @param key The field key.
-         */
-        function handleSortClick(e, searchParams) {
-            setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: true, popupX: e.clientX, popupY: e.clientY, popupSearchParams: searchParams }));
-        }
         /**
          * Emits a change event to the optional change listener.
          * @param newSearch The new search definition.
@@ -4215,6 +3767,10 @@
                 // Ignore clicks on checkboxes
                 return;
             }
+            if (e.button === 2) {
+                // Ignore right clicks
+                return;
+            }
             killEvent(e);
             if (e.button !== 1 && props.onClick) {
                 props.onClick(new SearchClickEvent(resource, e));
@@ -4232,7 +3788,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(Loading, null);
+            return React__default["default"].createElement(core$1.Loader, null);
         }
         const checkboxColumn = props.checkboxesEnabled;
         const fields = getFieldDefinitions(search);
@@ -4240,41 +3796,45 @@
         const lastResult = state.searchResponse;
         const entries = lastResult === null || lastResult === void 0 ? void 0 : lastResult.entry;
         const resources = entries === null || entries === void 0 ? void 0 : entries.map((e) => e.resource);
-        const savedSearches = (_c = (_b = props.userConfig) === null || _b === void 0 ? void 0 : _b.search) === null || _c === void 0 ? void 0 : _c.filter((s) => { var _a; return (_a = s.criteria) === null || _a === void 0 ? void 0 : _a.startsWith(resourceType); });
-        return (React__default["default"].createElement("div", { className: "medplum-search-control", onContextMenu: (e) => killEvent(e), "data-testid": "search-control" },
-            !props.hideToolbar && (React__default["default"].createElement(TitleBar, null,
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement("h1", null,
-                        React__default["default"].createElement("a", { href: `https://www.hl7.org/fhir/${resourceType.toLowerCase()}.html`, target: "_blank", rel: "noopener" }, resourceType)),
-                    savedSearches && (React__default["default"].createElement(Select, { testid: "saved-search-select", style: { width: 80 }, onChange: (newValue) => {
-                            emitSearchChange(core.parseSearchDefinition(newValue));
-                        } },
-                        React__default["default"].createElement("option", null),
-                        savedSearches.map((s, index) => (React__default["default"].createElement("option", { key: `${index}-${savedSearches.length}`, value: s.criteria }, s.name))))),
-                    React__default["default"].createElement(Button, { testid: "fields-button", size: "small", onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: true })) }, "Fields"),
-                    React__default["default"].createElement(Button, { testid: "filters-button", size: "small", onClick: () => setState(Object.assign(Object.assign({}, stateRef.current), { filterEditorVisible: true })) }, "Filters"),
-                    props.onNew && (React__default["default"].createElement(Button, { size: "small", onClick: props.onNew }, "New...")),
-                    props.onExport && (React__default["default"].createElement(Button, { size: "small", onClick: props.onExport }, "Export...")),
-                    props.onDelete && (React__default["default"].createElement(Button, { size: "small", onClick: () => props.onDelete(Object.keys(state.selected)) }, "Delete...")),
-                    props.onBulk && (React__default["default"].createElement(Button, { size: "small", onClick: () => props.onBulk(Object.keys(state.selected)) }, "Bulk..."))),
-                lastResult && (React__default["default"].createElement("div", null,
+        const buttonVariant = 'subtle';
+        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",
-                        ' ', (_d = lastResult.total) === null || _d === void 0 ? void 0 :
-                        _d.toLocaleString()),
-                    React__default["default"].createElement(Button, { testid: "prev-page-button", size: "small", onClick: () => emitSearchChange(movePage(search, -1)) }, "<<"),
-                    React__default["default"].createElement(Button, { testid: "next-page-button", size: "small", onClick: () => emitSearchChange(movePage(search, 1)) }, ">>"))))),
-            React__default["default"].createElement("table", null,
+                        ' ', (_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, onClick: (e) => handleSortClick(e, field.searchParams) },
-                            buildFieldNameString(field.name),
-                            field.searchParams && React__default["default"].createElement(FilterIcon, null))))),
+                        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) => {
+                                        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 })))))))),
@@ -4283,16 +3843,19 @@
                         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) => {
+                        switch (page) {
+                            case 'prev':
+                                return 'Previous page';
+                            case 'next':
+                                return 'Next page';
+                            default:
+                                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(SearchPopupMenu, { search: props.search, visible: state.popupVisible, x: state.popupX, y: state.popupY, searchParams: state.popupSearchParams, onPrompt: (searchParam, filter) => {
-                    setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: false, filterDialogVisible: true, filterDialogSearchParam: searchParam, filterDialogFilter: filter }));
-                }, onChange: (result) => {
-                    emitSearchChange(result);
-                    setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: false, popupSearchParams: undefined }));
-                }, onClose: () => {
-                    setState(Object.assign(Object.assign({}, stateRef.current), { popupVisible: false, popupSearchParams: undefined }));
-                } }),
             React__default["default"].createElement(SearchFieldEditor, { search: props.search, visible: stateRef.current.fieldEditorVisible, onOk: (result) => {
                     emitSearchChange(result);
                     setState(Object.assign(Object.assign({}, stateRef.current), { fieldEditorVisible: false }));
@@ -4324,9 +3887,12 @@
             "\u00A0",
             React__default["default"].createElement(SearchFilterValueDisplay, { resourceType: props.resourceType, filter: filter }))))));
     }
-    function FilterIcon() {
-        return (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "rgba(0, 0, 0, 0.3)", strokeWidth: 2 },
-            React__default["default"].createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16m-7 6h7" })));
+    function getPage(search) {
+        return Math.floor((search.offset || 0) / (search.count || core.DEFAULT_SEARCH_COUNT)) + 1;
+    }
+    function getTotalPages(search, total) {
+        const pageSize = search.count || core.DEFAULT_SEARCH_COUNT;
+        return Math.ceil(total / pageSize);
     }
     function getStart$1(search, total) {
         var _a;
@@ -4423,11 +3989,11 @@
         }, [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(Loading, null);
+            return React__default["default"].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("table", null,
+            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" },
@@ -4443,271 +4009,10 @@
             ((_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(Button, { size: "small", onClick: () => props.onBulk(Object.keys(selectedRef.current)) }, "Bulk..."))));
+            props.onBulk && (React__default["default"].createElement(core$1.Button, { onClick: () => props.onBulk(Object.keys(selectedRef.current)) }, "Bulk..."))));
     }
     const MemoizedFhirPathTable = React__default["default"].memo(FhirPathTable);
 
-    function FooterLinks(props) {
-        return React__default["default"].createElement("div", { className: "medplum-footer" }, props.children);
-    }
-
-    function HeaderSearchInput(props) {
-        const medplum = useMedplum();
-        return (React__default["default"].createElement(Autocomplete, { loadOptions: (input, signal) => __awaiter(this, void 0, void 0, function* () {
-                return getResourcesFromResponse((yield medplum.graphql(buildGraphQLQuery(input), undefined, undefined, { signal })), input);
-            }), getId: (item) => {
-                return item.id;
-            }, getIcon: (item) => React__default["default"].createElement(Avatar, { value: item }), getDisplay: (item) => React__default["default"].createElement(ResourceName, { value: item }), getHelpText: (item) => {
-                var _a;
-                if (item.resourceType === 'Patient' && item.birthDate) {
-                    return 'DoB: ' + item.birthDate;
-                }
-                return (_a = item.subject) === null || _a === void 0 ? void 0 : _a.display;
-            }, name: props.name, className: props.className, placeholder: props.placeholder, onChange: (items) => props.onChange(items[0]) }));
-    }
-    function buildGraphQLQuery(input) {
-        const escaped = JSON.stringify(input);
-        if (core.isUUID(input)) {
-            return `{
-      Patients1: PatientList(_id: ${escaped}, _count: 1) {
-        resourceType
-        id
-        identifier {
-          system
-          value
-        }
-        name {
-          given
-          family
-        }
-        birthDate
-      }
-      ServiceRequestList(_id: ${escaped}, _count: 1) {
-        resourceType
-        id
-        identifier {
-          system
-          value
-        }
-        subject {
-          display
-        }
-      }
-    }`.replace(/\s+/g, ' ');
-        }
-        return `{
-    Patients1: PatientList(name: ${escaped}, _count: 5) {
-      resourceType
-      id
-      identifier {
-        system
-        value
-      }
-      name {
-        given
-        family
-      }
-      birthDate
-    }
-    Patients2: PatientList(identifier: ${escaped}, _count: 5) {
-      resourceType
-      id
-      identifier {
-        system
-        value
-      }
-      name {
-        given
-        family
-      }
-      birthDate
-    }
-    ServiceRequestList(identifier: ${escaped}, _count: 5) {
-      resourceType
-      id
-      identifier {
-        system
-        value
-      }
-      subject {
-        display
-      }
-    }
-  }`.replace(/\s+/g, ' ');
-    }
-    /**
-     * Returns a de-duped and sorted list of resources from the search response.
-     * The search request is actually 3+ separate searches, which can include duplicates.
-     * This function combines the results, de-dupes, and sorts by relevance.
-     * @param response The response from a search query.
-     * @param query The user entered search query.
-     * @returns The resources to display in the autocomplete.
-     */
-    function getResourcesFromResponse(response, query) {
-        const resources = [];
-        if (response.data.Patients1) {
-            resources.push(...response.data.Patients1);
-        }
-        if (response.data.Patients2) {
-            resources.push(...response.data.Patients2);
-        }
-        if (response.data.ServiceRequestList) {
-            resources.push(...response.data.ServiceRequestList);
-        }
-        return sortByRelevance(dedupeResources(resources), query).slice(0, 5);
-    }
-    /**
-     * Removes duplicate resources from an array by ID.
-     * @param resources The array of resources with possible duplicates.
-     * @returns The array of resources with no duplicates.
-     */
-    function dedupeResources(resources) {
-        const ids = new Set();
-        const result = [];
-        for (const resource of resources) {
-            if (!ids.has(resource.id)) {
-                ids.add(resource.id);
-                result.push(resource);
-            }
-        }
-        return result;
-    }
-    /**
-     * Sorts an array of resources by relevance.
-     * @param resources The candidate resources.
-     * @param query The user entered search string.
-     * @returns The sorted array of resources.
-     */
-    function sortByRelevance(resources, query) {
-        return resources.sort((a, b) => {
-            return getResourceScore(b, query) - getResourceScore(a, query);
-        });
-    }
-    /**
-     * Calculates a relevance score of a candidate resource.
-     * Higher scores are better.
-     * @param resource The candidate resource.
-     * @param query The user entered search string.
-     * @returns The relevance score of the candidate resource.
-     */
-    function getResourceScore(resource, query) {
-        let bestScore = 0;
-        if (resource.identifier) {
-            for (const identifier of resource.identifier) {
-                bestScore = Math.max(bestScore, getStringScore(identifier.value, query));
-            }
-        }
-        if (resource.resourceType === 'Patient' && resource.name) {
-            for (const name of resource.name) {
-                bestScore = Math.max(bestScore, getStringScore(core.formatHumanName(name), query));
-            }
-        }
-        return bestScore;
-    }
-    /**
-     * Calculates a relevance score of a candidate display string.
-     * Higher scores are better.
-     * @param str The candidate display string.
-     * @param query The user entered search string.
-     * @returns The relevance score of the candidate string.
-     */
-    function getStringScore(str, query) {
-        if (!str) {
-            return 0;
-        }
-        const index = str.toLowerCase().indexOf(query.toLowerCase());
-        if (index < 0) {
-            return 0;
-        }
-        return 100 - index;
-    }
-
-    function Header(props) {
-        var _a, _b, _c, _d, _e, _f;
-        const navigate = reactRouterDom.useNavigate();
-        const location = reactRouterDom.useLocation();
-        const context = useMedplumContext();
-        const medplum = context.medplum;
-        const logins = medplum.getLogins();
-        const [userMenuVisible, setUserMenuVisible] = React.useState(false);
-        const [sidebarVisible, setSidebarVisible] = React.useState(false);
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("header", { role: "banner", "data-testid": "header", style: { background: props.bgColor } },
-                React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(MedplumLink, { label: "Toggle sidebar", testid: "header-menu-button", onClick: () => setSidebarVisible(!sidebarVisible) },
-                        React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: { width: 20, height: 20, verticalAlign: 'text-top' }, viewBox: "0 0 20 20", fill: "currentColor" },
-                            React__default["default"].createElement("path", { fillRule: "evenodd", d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }))),
-                    React__default["default"].createElement(MedplumLink, { id: "medplum-header-logo", testid: "header-logo", onClick: props.onLogo }, props.title || 'Medplum'),
-                    context.profile && (React__default["default"].createElement(HeaderSearchInput, { key: `header-input-${location.pathname}`, name: "search", className: "medplum-nav-search-container", placeholder: "Search", onChange: (resource) => navigate(`/${resource.resourceType}/${resource.id}`) }))),
-                context.profile && (React__default["default"].createElement("div", { className: "medplum-nav-menu-container" },
-                    React__default["default"].createElement(MedplumLink, { testid: "header-profile-menu-button", onClick: () => setUserMenuVisible(true) },
-                        React__default["default"].createElement(Avatar, { size: "small", color: "#f68d42", value: context.profile })),
-                    React__default["default"].createElement(Popup, { visible: userMenuVisible, autoClose: true, activeClassName: "medplum-nav-menu-popover", onClose: () => setUserMenuVisible(false) },
-                        React__default["default"].createElement("div", { className: "medplum-nav-menu" },
-                            React__default["default"].createElement("div", { style: { margin: 'auto', padding: '8px' } },
-                                React__default["default"].createElement(Avatar, { size: "large", value: context.profile })),
-                            React__default["default"].createElement("div", { style: { margin: 'auto', padding: '8px' } },
-                                React__default["default"].createElement("div", { style: { margin: '4px auto 4px auto', fontWeight: 'bold' } },
-                                    React__default["default"].createElement(HumanNameDisplay, { value: (_b = (_a = context.profile) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b[0] })),
-                                React__default["default"].createElement("div", { style: { margin: '4px auto 4px auto' } }, (_d = (_c = medplum.getActiveLogin()) === null || _c === void 0 ? void 0 : _c.project) === null || _d === void 0 ? void 0 : _d.display),
-                                React__default["default"].createElement(Button, { testid: "header-profile-link", onClick: () => {
-                                        setUserMenuVisible(false);
-                                        if (props.onProfile) {
-                                            props.onProfile();
-                                        }
-                                    } }, "Manage your account")),
-                            logins.length > 1 && (React__default["default"].createElement("div", null,
-                                React__default["default"].createElement("hr", null),
-                                logins.map((login) => {
-                                    var _a, _b, _c, _d;
-                                    return ((_a = login.profile) === null || _a === void 0 ? void 0 : _a.reference) !== core.getReferenceString(context.profile) && (React__default["default"].createElement("div", { className: "medplum-nav-menu-profile", key: (_b = login.profile) === null || _b === void 0 ? void 0 : _b.reference, onClick: () => {
-                                            medplum
-                                                .setActiveLogin(login)
-                                                .then(() => {
-                                                setUserMenuVisible(false);
-                                                window.location.reload();
-                                            })
-                                                .catch(console.log);
-                                        } },
-                                        React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-icon" },
-                                            React__default["default"].createElement(Avatar, null)),
-                                        React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-label" }, (_c = login.profile) === null || _c === void 0 ? void 0 :
-                                            _c.display,
-                                            React__default["default"].createElement("div", { className: "medplum-nav-menu-profile-help-text" }, (_d = login.project) === null || _d === void 0 ? void 0 : _d.display))));
-                                }))),
-                            React__default["default"].createElement("hr", null),
-                            React__default["default"].createElement("div", { style: { margin: 'auto', padding: '8px' } },
-                                React__default["default"].createElement(Button, { testid: "header-add-account-button", onClick: () => {
-                                        navigate('/signin');
-                                    } }, "Add another account")),
-                            React__default["default"].createElement("hr", null),
-                            React__default["default"].createElement("div", { style: { margin: 'auto', padding: '8px' } },
-                                React__default["default"].createElement(Button, { testid: "header-signout-button", onClick: () => {
-                                        setUserMenuVisible(false);
-                                        if (props.onSignOut) {
-                                            props.onSignOut();
-                                        }
-                                    } }, "Sign out of all accounts")),
-                            React__default["default"].createElement("hr", null),
-                            React__default["default"].createElement("div", { style: { margin: 'auto', padding: '8px', fontSize: '12px' } },
-                                React__default["default"].createElement("a", { href: "https://www.medplum.com/terms" }, "Terms"),
-                                React__default["default"].createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy"))))))),
-            React__default["default"].createElement(Popup, { modal: true, autoClose: true, visible: sidebarVisible, activeClassName: "medplum-sidebar active", inactiveClassName: "medplum-sidebar", onClose: () => setSidebarVisible(false) }, (_f = (_e = props.config) === null || _e === void 0 ? void 0 : _e.menu) === null || _f === void 0 ? void 0 :
-                _f.map((menu, index) => {
-                    var _a, _b, _c;
-                    return (React__default["default"].createElement(React__default["default"].Fragment, { key: `menu-${index}-${(_b = (_a = props.config) === null || _a === void 0 ? void 0 : _a.menu) === null || _b === void 0 ? void 0 : _b.length}` },
-                        React__default["default"].createElement("h5", null, menu.title),
-                        React__default["default"].createElement("ul", null, (_c = menu.link) === null || _c === void 0 ? void 0 : _c.map((link) => (React__default["default"].createElement("li", { key: link.target },
-                            React__default["default"].createElement(MedplumLink, { to: link.target }, link.name)))))));
-                }),
-                React__default["default"].createElement("h5", null, "Settings"),
-                React__default["default"].createElement("ul", null,
-                    React__default["default"].createElement("li", null,
-                        React__default["default"].createElement(MedplumLink, { to: context.profile }, "Profile")),
-                    React__default["default"].createElement("li", null,
-                        React__default["default"].createElement(MedplumLink, { to: "/changepassword" }, "Change password"))))));
-    }
-
     const searches = [
         '$/_history',
         'Communication?subject=$',
@@ -4729,12 +4034,14 @@
                 })),
             }), createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
+                status: 'completed',
                 subject: core.createReference(resource),
                 sender: core.createReference(sender),
                 sent: new Date().toISOString(),
                 payload: [{ contentString: text }],
             }), createMedia: (resource, operator, content) => ({
                 resourceType: 'Media',
+                status: 'completed',
                 subject: core.createReference(resource),
                 operator: core.createReference(operator),
                 issued: new Date().toISOString(),
@@ -4777,10 +4084,9 @@
         }
         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(FormSection, { title: "Plan Title", htmlFor: "title" },
-                    React__default["default"].createElement(Input, { defaultValue: value.title, onChange: (newValue) => changeProperty('title', newValue) })),
+                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(Button, { type: "submit", size: "large" }, "Save"))));
+                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
         const actionsRef = React.useRef();
@@ -4852,17 +4158,9 @@
             props.onChange(Object.assign(Object.assign({}, action), { [property]: value }));
         }
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(FormSection, { title: "Title", htmlFor: `actionTitle-${action.id}` },
-                React__default["default"].createElement(Input, { name: `actionTitle-${action.id}`, defaultValue: action.title, onChange: (newValue) => changeProperty('title', newValue) })),
-            React__default["default"].createElement(FormSection, { title: "Description", htmlFor: `actionDescription-${action.id}` },
-                React__default["default"].createElement(Input, { name: `actionDescription-${action.id}`, defaultValue: action.description, onChange: (newValue) => changeProperty('description', newValue) })),
-            React__default["default"].createElement(FormSection, { title: "Type of Action", description: "The type of the action to be performed.", htmlFor: `actionType-${action.id}` },
-                React__default["default"].createElement(Select, { name: `actionType-${action.id}`, defaultValue: actionType, onChange: setActionType },
-                    React__default["default"].createElement("option", null),
-                    React__default["default"].createElement("option", { value: "appointment" }, "Appointment"),
-                    React__default["default"].createElement("option", { value: "lab" }, "Lab"),
-                    React__default["default"].createElement("option", { value: "questionnaire" }, "Questionnaire"),
-                    React__default["default"].createElement("option", { value: "task" }, "Task"))),
+            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) })),
             (() => {
                 switch (actionType) {
@@ -4878,23 +4176,23 @@
                         return null;
                 }
             })(),
-            React__default["default"].createElement(FormSection, { title: "Timing", description: "When the action should take place.", htmlFor: 'timing-' + action.id },
-                React__default["default"].createElement(ActionTimingInput, { name: 'timing-' + action.id, action: action, onChange: props.onChange }))));
+            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 })));
     }
     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(FormSection, { title: props.title, description: props.description, htmlFor: id },
-            React__default["default"].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) }));
-                    }
-                    else {
-                        props.onChange(Object.assign(Object.assign({}, props.action), { definitionCanonical: undefined }));
-                    }
-                } })));
+        return (React__default["default"].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) }));
+                }
+                else {
+                    props.onChange(Object.assign(Object.assign({}, props.action), { definitionCanonical: undefined }));
+                }
+            } }));
     }
     function ActionTimingInput(props) {
         const value = props.action;
@@ -5009,7 +4307,7 @@
             } },
             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(Button, { type: "submit", size: "large" }, props.submitButtonText || 'OK')));
+            React__default["default"].createElement(core$1.Button, { type: "submit" }, props.submitButtonText || 'OK')));
     }
     function QuestionnaireFormItemArray(props) {
         const [responseItems, setResponseItems] = React.useState(buildInitialResponseItems(props.items));
@@ -5032,10 +4330,10 @@
             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(Checkbox, { name: item.linkId, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (newValue) => setResponseItem(index, {
+                    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, {
                             linkId: item.linkId,
                             text: item.text,
-                            answer: [{ valueBoolean: newValue }],
+                            answer: [{ valueBoolean: e.currentTarget.checked }],
                         }) })));
             }
             return (React__default["default"].createElement(FormSection, { key: item.linkId, htmlFor: item.linkId, title: item.text || '' },
@@ -5073,23 +4371,22 @@
                     React__default["default"].createElement("h3", null, item.text),
                     item.item && (React__default["default"].createElement(QuestionnaireFormItemArray, { items: item.item, answers: props.answers, onChange: onChangeItem }))));
             case exports.QuestionnaireItemType.boolean:
-                return (React__default["default"].createElement(Checkbox, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueBoolean, onChange: (newValue) => onChangeAnswer({ valueBoolean: newValue }) }));
+                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 }) }));
             case exports.QuestionnaireItemType.decimal:
-                return (React__default["default"].createElement(Input, { type: "number", step: "any", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDecimal, onChange: (newValue) => onChangeAnswer({ valueDecimal: parseFloat(newValue) }) }));
+                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 }) }));
             case exports.QuestionnaireItemType.integer:
-                return (React__default["default"].createElement(Input, { type: "number", step: 1, name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueInteger, onChange: (newValue) => onChangeAnswer({ valueInteger: parseInt(newValue) }) }));
+                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 }) }));
             case exports.QuestionnaireItemType.date:
-                return (React__default["default"].createElement(Input, { type: "date", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDate, onChange: (newValue) => onChangeAnswer({ valueDate: newValue }) }));
+                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 }) }));
             case exports.QuestionnaireItemType.dateTime:
-                return (React__default["default"].createElement(DateTimeInput, { type: "datetime-local", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueDateTime, onChange: (newValue) => onChangeAnswer({ valueDateTime: newValue }) }));
+                return (React__default["default"].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(Input, { type: "time", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueTime, onChange: (newValue) => onChangeAnswer({ valueTime: newValue }) }));
+                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 }) }));
             case exports.QuestionnaireItemType.string:
-                return (React__default["default"].createElement(Input, { type: "text", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (newValue) => onChangeAnswer({ valueString: newValue }) }));
-            case exports.QuestionnaireItemType.text:
-                return (React__default["default"].createElement(TextArea, { name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueString, onChange: (newValue) => onChangeAnswer({ valueString: newValue }) }));
             case exports.QuestionnaireItemType.url:
-                return (React__default["default"].createElement(Input, { type: "url", name: name, defaultValue: initial === null || initial === void 0 ? void 0 : initial.valueUri, onChange: (newValue) => onChangeAnswer({ valueUri: newValue }) }));
+                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 }) }));
+            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 }) }));
             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 }) }));
             case exports.QuestionnaireItemType.reference:
@@ -5109,9 +4406,15 @@
     }
     function QuestionnaireChoiceDropDownInput(props) {
         const { name, item, initial } = props;
-        const valueElementDefinition = core.globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
         const initialValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemInitial', value: initial }, 'value');
-        return (React__default["default"].createElement("select", { id: name, name: name, className: "medplum-select", onChange: (e) => {
+        const data = [''];
+        if (item.answerOption) {
+            for (const option of item.answerOption) {
+                const optionValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+                data.push(typedValueToString(optionValue));
+            }
+        }
+        return (React__default["default"].createElement(core$1.NativeSelect, { id: name, name: name, className: "medplum-select", onChange: (e) => {
                 const index = e.currentTarget.selectedIndex;
                 if (index === 0) {
                     props.onChangeAnswer({});
@@ -5121,15 +4424,19 @@
                 const optionValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
                 const propertyName = 'value' + core.capitalize(optionValue.type);
                 props.onChangeAnswer({ [propertyName]: optionValue.value });
-            } },
-            React__default["default"].createElement("option", null),
-            item.answerOption &&
-                item.answerOption.map((option, index) => {
-                    const optionValue = core.getTypedPropertyValue({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                    const optionName = `${name}-option-${index}`;
-                    return (React__default["default"].createElement("option", { key: optionName, value: optionValue.value, selected: initialValue && core.stringify(optionValue) === core.stringify(initialValue) },
-                        React__default["default"].createElement(ResourcePropertyDisplay, { property: valueElementDefinition, propertyType: optionValue.type, value: optionValue.value })));
-                })));
+            }, defaultValue: typedValueToString(initialValue), data: data }));
+    }
+    function typedValueToString(typedValue) {
+        if (!typedValue) {
+            return undefined;
+        }
+        if (typedValue.type === 'CodeableConcept') {
+            return typedValue.value.coding[0].display;
+        }
+        if (typedValue.type === 'Coding') {
+            return typedValue.value.display;
+        }
+        return typedValue.value.toString();
     }
     function QuestionnaireChoiceRadioInput(props) {
         const { name, item, initial, onChangeAnswer } = props;
@@ -5243,7 +4550,7 @@
         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(Button, { type: "submit", size: "large" }, "Save"))));
+                React__default["default"].createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ItemBuilder(props) {
         var _a;
@@ -5284,26 +4591,26 @@
         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(Input, { defaultValue: resource.title, onChange: (newValue) => changeProperty('title', newValue) }))),
+                    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(Select, { defaultValue: item.type, onChange: (newValue) => changeProperty('type', newValue) },
-                        React__default["default"].createElement("option", { value: "display" }, "Display"),
-                        React__default["default"].createElement("optgroup", { label: "Question" },
-                            React__default["default"].createElement("option", { value: "boolean" }, "Boolean"),
-                            React__default["default"].createElement("option", { value: "decimal" }, "Decimal"),
-                            React__default["default"].createElement("option", { value: "integer" }, "Integer"),
-                            React__default["default"].createElement("option", { value: "date" }, "Date"),
-                            React__default["default"].createElement("option", { value: "dateTime" }, "Date/Time"),
-                            React__default["default"].createElement("option", { value: "time" }, "Time"),
-                            React__default["default"].createElement("option", { value: "string" }, "String"),
-                            React__default["default"].createElement("option", { value: "text" }, "Text"),
-                            React__default["default"].createElement("option", { value: "url" }, "URL"),
-                            React__default["default"].createElement("option", { value: "choice" }, "Choice"),
-                            React__default["default"].createElement("option", { value: "open-choice" }, "Open Choice"),
-                            React__default["default"].createElement("option", { value: "attachment" }, "Attachment"),
-                            React__default["default"].createElement("option", { value: "reference" }, "Reference"),
-                            React__default["default"].createElement("option", { value: "quantity" }, "Quantity"))))),
-                !isResource && (React__default["default"].createElement(TextArea, { style: { width: '95%', height: '100px', minHeight: '100px', margin: '8px 4px 4px 4px' }, defaultValue: item.text, onChange: (newValue) => changeProperty('text', newValue) })),
+                    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),
@@ -5311,7 +4618,7 @@
             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(Input, { defaultValue: item.linkId, onChange: (newValue) => changeProperty('linkId', newValue), size: 4 })) : (React__default["default"].createElement("div", null, linkId)))),
+            !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) => {
@@ -5421,8 +4728,61 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
+    /*
+     * Request status: https://hl7.org/fhir/valueset-request-status.html
+     * draft, active, on-hold, revoked, completed, entered-in-error, unknown
+     *
+     * Publication status: https://hl7.org/fhir/valueset-publication-status.html
+     * draft, active, retired, unknown
+     *
+     * Observation status: https://www.hl7.org/fhir/valueset-observation-status.html
+     * registered, preliminary, final, amended, cancelled, entered-in-error, unknown
+     *
+     * DiagnosticReport status: https://hl7.org/fhir/valueset-diagnostic-report-status.html
+     * registered, preliminary, final, amended, corrected, appended, cancelled, entered-in-error, unknown
+     *
+     * Task status: https://hl7.org/fhir/valueset-task-status.html
+     * draft, requested, received, accepted, rejected, ready, cancelled, in-progress, on-hold, failed, completed, entered-in-error
+     *
+     * Appointment status: https://www.hl7.org/fhir/valueset-appointmentstatus.html
+     * proposed, pending, booked, arrived, fulfilled, cancelled, noshow, entered-in-error, chcked-in, waitlist
+     */
+    const statusToColor = {
+        draft: 'blue',
+        active: 'blue',
+        'on-hold': 'yellow',
+        revoked: 'red',
+        completed: 'green',
+        'entered-in-error': 'red',
+        unknown: 'gray',
+        retired: 'gray',
+        registered: 'blue',
+        preliminary: 'blue',
+        final: 'green',
+        amended: 'yellow',
+        cancelled: 'red',
+        requested: 'blue',
+        received: 'blue',
+        accepted: 'blue',
+        rejected: 'red',
+        ready: 'blue',
+        'in-progress': 'blue',
+        failed: 'red',
+        proposed: 'blue',
+        pending: 'blue',
+        booked: 'blue',
+        arrived: 'blue',
+        fulfilled: 'green',
+        noshow: 'red',
+        'checked-in': 'blue',
+        waitlist: 'gray',
+        routine: 'gray',
+        urgent: 'red',
+        asap: 'red',
+        stat: 'red',
+    };
     function StatusBadge(props) {
-        return React__default["default"].createElement("span", { className: `medplum-status medplum-status-${props.status}` }, props.status);
+        return React__default["default"].createElement(core$1.Badge, { color: statusToColor[props.status] }, props.status);
     }
 
     function RequestGroupDisplay(props) {
@@ -5459,8 +4819,8 @@
                         "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(Button, { onClick: () => props.onStart(task, taskInput) }, "Start"),
-                    taskInput && taskOutput && (React__default["default"].createElement(Button, { onClick: () => props.onEdit(task, taskInput, taskOutput) }, "Edit")))));
+                    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")))));
         })));
         function buildBatchRequest(request) {
             var _a;
@@ -5692,8 +5052,8 @@
             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(InputRow, { justifyContent: "space-between" },
-                            React__default["default"].createElement(ResourceBadge, { value: row.meta.author, size: "xsmall", link: true }),
+                        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" },
@@ -5767,7 +5127,7 @@
         if (!value) {
             return React__default["default"].createElement("div", null, "Loading...");
         }
-        return (React__default["default"].createElement("table", { className: "medplum-table" },
+        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"),
@@ -5817,11 +5177,11 @@
         }
         const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
         return (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(InputRow, 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("p", null,
-                    React__default["default"].createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
-                    React__default["default"].createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+                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,
@@ -5832,7 +5192,7 @@
                         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("button", { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
+                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()))))))))))));
     }
     function getStartMonth() {
         const result = new Date();
@@ -5922,8 +5282,8 @@
         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(Avatar, { value: actor, size: "large" }),
-                actor && (React__default["default"].createElement("h1", null,
+                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()),
@@ -5934,12 +5294,12 @@
                     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"),
-                    slots.map((s) => {
+                    React__default["default"].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(Button, { style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
-                    }))),
+                            React__default["default"].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!"),
@@ -5990,6 +5350,7 @@
                 ],
             }), createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
+                status: 'completed',
                 basedOn: [core.createReference(resource)],
                 subject: resource.subject,
                 sender: core.createReference(sender),
@@ -5997,6 +5358,7 @@
                 payload: [{ contentString: text }],
             }), createMedia: (resource, operator, content) => ({
                 resourceType: 'Media',
+                status: 'completed',
                 basedOn: [core.createReference(resource)],
                 subject: resource.subject,
                 operator: core.createReference(operator),
@@ -6005,62 +5367,13 @@
             }) }));
     }
 
-    function Tab(props) {
-        let className = 'medplum-tab';
-        if (props.selected) {
-            className += ' selected';
-        }
-        function clickHandler(e) {
-            killEvent(e);
-            // The onClick prop is set by TabBar as parent component.
-            // Using Tab outside of a TabBar is unsupported.
-            props.onClick(props.name, e.button);
-        }
-        return (React__default["default"].createElement("a", { href: `#${props.name}`, role: "tab", "aria-selected": props.selected, className: className, onClick: clickHandler, onAuxClick: clickHandler }, props.label));
-    }
-
-    function TabList(props) {
-        return (React__default["default"].createElement(Scrollable, { className: "medplum-surface", height: 50 },
-            React__default["default"].createElement("div", { role: "tablist", className: "medplum-tablist" },
-                React__default["default"].createElement("div", { className: "medplum-tablist-foreground" }, React__default["default"].Children.map(props.children, (child, tabIndex) => {
-                    if (React__default["default"].isValidElement(child) && child.type === Tab) {
-                        return React__default["default"].cloneElement(child, {
-                            selected: child.props.name === props.value,
-                            onClick: props.onChange,
-                            tabIndex,
-                        });
-                    }
-                    else {
-                        return null;
-                    }
-                })))));
-    }
-
-    function TabPanel(props) {
-        return React__default["default"].createElement("div", { role: "tabpanel" }, props.children);
-    }
-
-    function TabSwitch(props) {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].Children.map(props.children, (child) => {
-            if (React__default["default"].isValidElement(child) && child.type === TabPanel && child.props.name === props.value) {
-                return child;
-            }
-            else {
-                return null;
-            }
-        })));
-    }
-
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
     exports.AttachmentArrayInput = AttachmentArrayInput;
+    exports.AttachmentButton = AttachmentButton;
     exports.AttachmentInput = AttachmentInput;
-    exports.Autocomplete = Autocomplete;
-    exports.Avatar = Avatar;
     exports.BackboneElementInput = BackboneElementInput;
-    exports.Button = Button;
-    exports.Checkbox = Checkbox;
     exports.CheckboxFormSection = CheckboxFormSection;
     exports.CodeInput = CodeInput;
     exports.CodeableConceptDisplay = CodeableConceptDisplay;
@@ -6074,33 +5387,25 @@
     exports.DescriptionList = DescriptionList;
     exports.DescriptionListEntry = DescriptionListEntry;
     exports.DiagnosticReportDisplay = DiagnosticReportDisplay;
-    exports.Dialog = Dialog;
     exports.Document = Document;
     exports.ElementDefinitionInputSelector = ElementDefinitionInputSelector;
     exports.ElementDefinitionTypeInput = ElementDefinitionTypeInput;
     exports.EncounterTimeline = EncounterTimeline;
     exports.ErrorBoundary = ErrorBoundary;
     exports.FhirPathTable = FhirPathTable;
-    exports.FooterLinks = FooterLinks;
     exports.Form = Form;
     exports.FormSection = FormSection;
-    exports.Header = Header;
     exports.HumanNameDisplay = HumanNameDisplay;
     exports.HumanNameInput = HumanNameInput;
     exports.IdentifierInput = IdentifierInput;
-    exports.Input = Input;
-    exports.InputRow = InputRow;
-    exports.Loading = Loading;
     exports.Logo = Logo;
     exports.MedplumLink = MedplumLink;
     exports.MedplumProvider = MedplumProvider;
     exports.MemoizedFhirPathTable = MemoizedFhirPathTable;
     exports.MemoizedSearchControl = MemoizedSearchControl;
-    exports.MenuItem = MenuItem;
     exports.ObservationTable = ObservationTable;
     exports.PatientTimeline = PatientTimeline;
     exports.PlanDefinitionBuilder = PlanDefinitionBuilder;
-    exports.Popup = Popup;
     exports.QuestionnaireBuilder = QuestionnaireBuilder;
     exports.QuestionnaireForm = QuestionnaireForm;
     exports.QuestionnaireFormItem = QuestionnaireFormItem;
@@ -6111,6 +5416,7 @@
     exports.RequestGroupDisplay = RequestGroupDisplay;
     exports.ResourceArrayDisplay = ResourceArrayDisplay;
     exports.ResourceArrayInput = ResourceArrayInput;
+    exports.ResourceAvatar = ResourceAvatar;
     exports.ResourceBadge = ResourceBadge;
     exports.ResourceBlame = ResourceBlame;
     exports.ResourceDiff = ResourceDiff;
@@ -6123,26 +5429,17 @@
     exports.ResourceTable = ResourceTable;
     exports.ResourceTimeline = ResourceTimeline;
     exports.Scheduler = Scheduler;
-    exports.Scrollable = Scrollable;
     exports.SearchChangeEvent = SearchChangeEvent;
     exports.SearchClickEvent = SearchClickEvent;
     exports.SearchControl = SearchControl;
     exports.SearchFieldEditor = SearchFieldEditor;
     exports.SearchFilterEditor = SearchFilterEditor;
     exports.SearchLoadEvent = SearchLoadEvent;
-    exports.Select = Select;
     exports.ServiceRequestTimeline = ServiceRequestTimeline;
     exports.SignInForm = SignInForm;
     exports.StatusBadge = StatusBadge;
-    exports.Tab = Tab;
-    exports.TabList = TabList;
-    exports.TabPanel = TabPanel;
-    exports.TabSwitch = TabSwitch;
-    exports.TextArea = TextArea;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
-    exports.TitleBar = TitleBar;
-    exports.UploadButton = UploadButton;
     exports.addDateEqualsFilter = addDateEqualsFilter;
     exports.addDateFilter = addDateFilter;
     exports.addDateFilterBetween = addDateFilterBetween;
@@ -6164,6 +5461,8 @@
     exports.createScriptTag = createScriptTag;
     exports.deleteFilter = deleteFilter;
     exports.formatRangeString = formatRangeString;
+    exports.getErrorsForInput = getErrorsForInput;
+    exports.getIssuesForExpression = getIssuesForExpression;
     exports.getOpString = getOpString;
     exports.getRecaptcha = getRecaptcha;
     exports.getSearchOperators = getSearchOperators;
@@ -6175,11 +5474,11 @@
     exports.isChoiceQuestion = isChoiceQuestion;
     exports.isQuestionEnabled = isQuestionEnabled;
     exports.isSortDescending = isSortDescending;
-    exports.movePage = movePage;
     exports.parseForm = parseForm;
     exports.renderValue = renderValue;
     exports.setFilters = setFilters;
     exports.setOffset = setOffset;
+    exports.setPage = setPage;
     exports.setPropertyValue = setPropertyValue;
     exports.setSort = setSort;
     exports.sortByDateAndPriority = sortByDateAndPriority;