@medplum/react 0.9.30 → 0.9.31

package/dist/cjs/index.js

@@ -329,6 +329,578 @@
         return React__default["default"].createElement(UploadButton, { onUpload: setValueWrapper });
     }
 
+    function Document(props) {
+        return (React__default["default"].createElement("main", { className: "medplum-document" },
+            React__default["default"].createElement("article", { style: { maxWidth: props.width } }, props.children)));
+    }
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    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) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    /**
+     * Parses an HTML form and returns the result as a JavaScript object.
+     * @param form The HTML form element.
+     */
+    function parseForm(form) {
+        const result = {};
+        for (const element of Array.from(form.elements)) {
+            if (element instanceof HTMLInputElement) {
+                parseInputElement(result, element);
+            }
+            else if (element instanceof HTMLTextAreaElement) {
+                result[element.name] = element.value;
+            }
+            else if (element instanceof HTMLSelectElement) {
+                parseSelectElement(result, element);
+            }
+        }
+        return result;
+    }
+    /**
+     * Parses an HTML input element.
+     * Sets the name/value pair in the result,
+     * but only if the element is enabled and checked.
+     * @param el The input element.
+     * @param result The result builder.
+     */
+    function parseInputElement(result, el) {
+        if (el.disabled) {
+            // Ignore disabled elements
+            return;
+        }
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            // Ignore unchecked radio or checkbox elements
+            return;
+        }
+        result[el.name] = el.value;
+    }
+    /**
+     * Parses an HTML select element.
+     * Sets the name/value pair if one is selected.
+     * @param result The result builder.
+     * @param el The select element.
+     */
+    function parseSelectElement(result, el) {
+        result[el.name] = el.value;
+    }
+
+    function Form(props) {
+        return (React__default["default"].createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
+                e.preventDefault();
+                const formData = parseForm(e.target);
+                if (props.onSubmit) {
+                    props.onSubmit(formData);
+                }
+            } }, props.children));
+    }
+
+    function 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" })));
+    }
+
+    function NewProjectForm(props) {
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    props.handleAuthResponse(yield medplum.startNewProject({
+                        login: props.login,
+                        projectName: formData.projectName,
+                    }));
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            }) },
+            React__default["default"].createElement("div", { className: "medplum-center" },
+                React__default["default"].createElement(Logo, { size: 32 }),
+                React__default["default"].createElement("h1", null, "Create project")),
+            React__default["default"].createElement(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")))));
+    }
+
+    /**
+     * Dynamically creates a script tag for the specified JavaScript file.
+     * @param src The JavaScript file URL.
+     */
+    function createScriptTag(src, onload) {
+        const head = document.getElementsByTagName('head')[0];
+        const script = document.createElement('script');
+        script.async = true;
+        script.src = src;
+        script.onload = onload || null;
+        head.appendChild(script);
+    }
+
+    function GoogleButton(props) {
+        const medplum = useMedplum();
+        const { googleClientId, handleGoogleCredential } = props;
+        const parentRef = React.useRef(null);
+        const [scriptLoaded, setScriptLoaded] = React.useState(typeof google !== 'undefined');
+        const [initialized, setInitialized] = React.useState(false);
+        const [buttonRendered, setButtonRendered] = React.useState(false);
+        React.useEffect(() => {
+            if (typeof google === 'undefined') {
+                createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
+                return;
+            }
+            if (!initialized) {
+                google.accounts.id.initialize({
+                    client_id: googleClientId,
+                    callback: handleGoogleCredential,
+                });
+                setInitialized(true);
+            }
+            if (parentRef.current && !buttonRendered) {
+                google.accounts.id.renderButton(parentRef.current, {});
+                setButtonRendered(true);
+            }
+        }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
+        if (!googleClientId) {
+            return null;
+        }
+        return React__default["default"].createElement("div", { ref: parentRef });
+    }
+    function getGoogleClientId(clientId) {
+        var _a, _b;
+        if (clientId) {
+            return clientId;
+        }
+        const origin = window.location.protocol + '//' + window.location.host;
+        const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        if (authorizedOrigins.includes(origin)) {
+            return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
+        }
+        return undefined;
+    }
+
+    /**
+     * Dynamically loads the recaptcha script.
+     * We do not want to load the script on page load unless the user needs it.
+     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     */
+    function initRecaptcha(siteKey) {
+        if (typeof grecaptcha === 'undefined') {
+            createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);
+        }
+    }
+    /**
+     * Starts a request to generate a recapcha token.
+     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     * @returns Promise to a recaptcha token for the current user.
+     */
+    function getRecaptcha(siteKey) {
+        return new Promise((resolve, reject) => {
+            grecaptcha.ready(() => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    resolve(yield grecaptcha.execute(siteKey, { action: 'submit' }));
+                }
+                catch (err) {
+                    reject(err);
+                }
+            }));
+        });
+    }
+
+    function NewUserForm(props) {
+        const googleClientId = getGoogleClientId(props.googleClientId);
+        const recaptchaSiteKey = props.recaptchaSiteKey;
+        const medplum = useMedplum();
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        React.useEffect(() => initRecaptcha(recaptchaSiteKey), [recaptchaSiteKey]);
+        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const recaptchaToken = yield getRecaptcha(recaptchaSiteKey);
+                    props.handleAuthResponse(yield medplum.startNewUser({
+                        projectId: props.projectId,
+                        firstName: formData.firstName,
+                        lastName: formData.lastName,
+                        email: formData.email,
+                        password: formData.password,
+                        remember: formData.remember === 'true',
+                        recaptchaSiteKey,
+                        recaptchaToken,
+                    }));
+                }
+                catch (err) {
+                    setOutcome(err);
+                }
+            }) },
+            React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
+            issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, 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));
+            }))),
+            googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
+                    React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
+                            try {
+                                props.handleAuthResponse(yield medplum.startGoogleLogin({
+                                    googleClientId: response.clientId,
+                                    googleCredential: response.credential,
+                                    createUser: true,
+                                }));
+                            }
+                            catch (err) {
+                                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")))));
+    }
+
+    function RegisterForm(props) {
+        const { type, projectId, googleClientId, recaptchaSiteKey, onSuccess } = props;
+        const medplum = useMedplum();
+        const [login, setLogin] = React.useState(undefined);
+        const [outcome, setOutcome] = React.useState();
+        React.useEffect(() => {
+            if (type === 'patient' && login) {
+                medplum
+                    .startNewPatient({ login, projectId: projectId })
+                    .then((response) => medplum.processCode(response.code))
+                    .then(() => onSuccess())
+                    .catch((err) => setOutcome(err));
+            }
+        }, [medplum, type, projectId, login, onSuccess]);
+        function handleAuthResponse(response) {
+            if (response.code) {
+                medplum
+                    .processCode(response.code)
+                    .then(() => onSuccess())
+                    .catch(console.log);
+            }
+            else if (response.login) {
+                setLogin(response.login);
+            }
+        }
+        return (React__default["default"].createElement(Document, { width: 450 },
+            outcome && React__default["default"].createElement("pre", null, JSON.stringify(outcome, null, 2)),
+            !login && (React__default["default"].createElement(NewUserForm, { projectId: projectId, googleClientId: googleClientId, recaptchaSiteKey: recaptchaSiteKey, handleAuthResponse: handleAuthResponse })),
+            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);
+        const [outcome, setOutcome] = React.useState();
+        const issues = getIssuesForExpression(outcome, undefined);
+        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
+                medplum
+                    .startLogin({
+                    projectId: props.projectId,
+                    clientId: props.clientId,
+                    scope: props.scope,
+                    nonce: props.nonce,
+                    email: formData.email,
+                    password: formData.password,
+                    remember: formData.remember === 'true',
+                })
+                    .then(props.handleAuthResponse)
+                    .catch(setOutcome);
+            } },
+            React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
+            issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
+                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));
+            }))),
+            googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
+                    React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
+                            medplum
+                                .startGoogleLogin({
+                                projectId: props.projectId,
+                                clientId: props.clientId,
+                                scope: props.scope,
+                                nonce: props.nonce,
+                                googleClientId: response.clientId,
+                                googleCredential: response.credential,
+                            })
+                                .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('');
+    }
+
+    function ChooseProfileForm(props) {
+        const medplum = useMedplum();
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement("div", { className: "medplum-center" },
+                React__default["default"].createElement(Logo, { size: 32 }),
+                React__default["default"].createElement("h1", null, "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: () => {
+                        medplum
+                            .post('auth/profile', {
+                            login: props.login,
+                            profile: membership.id,
+                        })
+                            .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))));
+            })));
+    }
+
+    function SignInForm(props) {
+        const medplum = useMedplum();
+        const [login, setLogin] = React.useState(undefined);
+        const [memberships, setMemberships] = React.useState(undefined);
+        function handleAuthResponse(response) {
+            if (response.login) {
+                setLogin(response.login);
+            }
+            if (response.memberships) {
+                setMemberships(response.memberships);
+            }
+            if (response.code) {
+                if (props.onCode) {
+                    props.onCode(response.code);
+                }
+                else {
+                    medplum
+                        .processCode(response.code)
+                        .then(() => {
+                        if (props.onSuccess) {
+                            props.onSuccess();
+                        }
+                    })
+                        .catch(console.log);
+                }
+            }
+        }
+        return (React__default["default"].createElement(Document, { width: 450 }, (() => {
+            if (!login) {
+                return (React__default["default"].createElement(AuthenticationForm, { projectId: props.projectId, clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
+            }
+            else if (memberships) {
+                return React__default["default"].createElement(ChooseProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
+            }
+            else if (props.projectId === 'new') {
+                return React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
+            }
+            else {
+                return React__default["default"].createElement("div", null, "Success");
+            }
+        })()));
+    }
+
     function Autocomplete(props) {
         var _a, _b;
         const inputRef = React.useRef(null);
@@ -580,134 +1152,29 @@
             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 MedplumLink(props) {
-        const navigate = reactRouterDom.useNavigate();
-        let href = '#';
-        if (props.to) {
-            if (typeof props.to === 'string') {
-                href = props.to;
-            }
-            else if ('resourceType' in props.to) {
-                href = `/${props.to.resourceType}/${props.to.id}`;
-            }
-            else if ('reference' in props.to) {
-                href = `/${props.to.reference}`;
-            }
-            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));
-    }
-
-    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('');
+         * 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) {
@@ -728,19 +1195,6 @@
         '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));
-            })))));
-    }
-
     function ResourceForm(props) {
         const medplum = useMedplum();
         const defaultValue = useResource(props.defaultValue);
@@ -1473,31 +1927,6 @@
             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 })) })));
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    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) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     function ResourceName(props) {
         const resource = useResource(props.value);
         if (!resource) {
@@ -1985,63 +2414,6 @@
         return React__default["default"].createElement(RangeDisplay, { value: range });
     }
 
-    /**
-     * Parses an HTML form and returns the result as a JavaScript object.
-     * @param form The HTML form element.
-     */
-    function parseForm(form) {
-        const result = {};
-        for (const element of Array.from(form.elements)) {
-            if (element instanceof HTMLInputElement) {
-                parseInputElement(result, element);
-            }
-            else if (element instanceof HTMLTextAreaElement) {
-                result[element.name] = element.value;
-            }
-            else if (element instanceof HTMLSelectElement) {
-                parseSelectElement(result, element);
-            }
-        }
-        return result;
-    }
-    /**
-     * Parses an HTML input element.
-     * Sets the name/value pair in the result,
-     * but only if the element is enabled and checked.
-     * @param el The input element.
-     * @param result The result builder.
-     */
-    function parseInputElement(result, el) {
-        if (el.disabled) {
-            // Ignore disabled elements
-            return;
-        }
-        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
-            // Ignore unchecked radio or checkbox elements
-            return;
-        }
-        result[el.name] = el.value;
-    }
-    /**
-     * Parses an HTML select element.
-     * Sets the name/value pair if one is selected.
-     * @param result The result builder.
-     * @param el The select element.
-     */
-    function parseSelectElement(result, el) {
-        result[el.name] = el.value;
-    }
-
-    function Form(props) {
-        return (React__default["default"].createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
-                e.preventDefault();
-                const formData = parseForm(e.target);
-                if (props.onSubmit) {
-                    props.onSubmit(formData);
-                }
-            } }, props.children));
-    }
-
     function Loading() {
         return (React__default["default"].createElement("div", { role: "progressbar", "aria-busy": "true", className: "medplum-loading" },
             React__default["default"].createElement("div", { className: "medplum-loading-container" },
@@ -2331,7 +2703,9 @@
                     }
                     if (bundle.entry) {
                         for (const entry of bundle.entry) {
-                            newItems.push(entry.resource);
+                            if (entry.resource) {
+                                newItems.push(entry.resource);
+                            }
                         }
                     }
                 }
@@ -2518,11 +2892,6 @@
             }) }));
     }
 
-    function Document(props) {
-        return (React__default["default"].createElement("main", { className: "medplum-document" },
-            React__default["default"].createElement("article", { style: { maxWidth: props.width } }, props.children)));
-    }
-
     function EncounterTimeline(props) {
         return (React__default["default"].createElement(ResourceTimeline, { value: props.encounter, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
@@ -4301,16 +4670,6 @@
                         React__default["default"].createElement(MedplumLink, { to: "/changepassword" }, "Change password"))))));
     }
 
-    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" })));
-    }
-
     const searches = [
         '$/_history',
         'Communication?subject=$',
@@ -4980,262 +5339,73 @@
         var _a;
         const property = core.globalSchema.types['QuestionnaireItemAnswerOption'].properties['value[x]'];
         const options = (_a = props.options) !== null && _a !== void 0 ? _a : [];
-        return (React__default["default"].createElement("div", null,
-            options.map((option) => {
-                const [propertyValue, propertyType] = getValueAndType({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
-                return (React__default["default"].createElement("div", { key: option.id, style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        width: '80%',
-                    } },
-                    React__default["default"].createElement("div", null,
-                        React__default["default"].createElement(ResourcePropertyInput, { key: option.id, name: "value[x]", property: property, defaultPropertyType: propertyType, defaultValue: propertyValue, onChange: (newValue, propName) => {
-                                const newOptions = [...options];
-                                const index = newOptions.findIndex((o) => o.id === option.id);
-                                newOptions[index] = { id: option.id, [propName]: newValue };
-                                props.onChange(newOptions);
-                            } })),
-                    React__default["default"].createElement("div", null,
-                        React__default["default"].createElement("a", { href: "#", onClick: (e) => {
-                                killEvent(e);
-                                props.onChange(options.filter((o) => o.id !== option.id));
-                            } }, "Remove"))));
-            }),
-            React__default["default"].createElement("a", { href: "#", onClick: (e) => {
-                    killEvent(e);
-                    props.onChange([
-                        ...options,
-                        {
-                            id: generateId(),
-                        },
-                    ]);
-                } }, "Add choice")));
-    }
-    let nextLinkId = 1;
-    let nextId = 1;
-    /**
-     * Generates a link ID for an item.
-     * Link IDs are required properties on QuestionnaireItem objects.
-     * @return A unique link ID.
-     */
-    function generateLinkId(prefix) {
-        return prefix + nextLinkId++;
-    }
-    /**
-     * Generates a unique ID.
-     * React needs unique IDs for components for rendering performance.
-     * All of the important components in the questionnaire builder have id properties for this:
-     * Questionnaire, QuestionnaireItem, and QuestionnaireItemAnswerOption.
-     * @return A unique key.
-     */
-    function generateId() {
-        return 'id-' + nextId++;
-    }
-    function ensureQuestionnaireKeys(questionnaire) {
-        return Object.assign(Object.assign({}, questionnaire), { id: questionnaire.id || generateId(), item: ensureQuestionnaireItemKeys(questionnaire.item) });
-    }
-    function ensureQuestionnaireItemKeys(items) {
-        if (!items) {
-            return undefined;
-        }
-        return items.map((item) => (Object.assign(Object.assign({}, item), { id: item.id || generateId(), item: ensureQuestionnaireItemKeys(item.item), answerOption: ensureQuestionnaireOptionKeys(item.answerOption) })));
-    }
-    function ensureQuestionnaireOptionKeys(options) {
-        if (!options) {
-            return undefined;
-        }
-        return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
-    }
-
-    /**
-     * Dynamically creates a script tag for the specified JavaScript file.
-     * @param src The JavaScript file URL.
-     */
-    function createScriptTag(src, onload) {
-        const head = document.getElementsByTagName('head')[0];
-        const script = document.createElement('script');
-        script.async = true;
-        script.src = src;
-        script.onload = onload || null;
-        head.appendChild(script);
-    }
-
-    function GoogleButton(props) {
-        const medplum = useMedplum();
-        const { googleClientId, handleGoogleCredential } = props;
-        const parentRef = React.useRef(null);
-        const [scriptLoaded, setScriptLoaded] = React.useState(typeof google !== 'undefined');
-        const [initialized, setInitialized] = React.useState(false);
-        const [buttonRendered, setButtonRendered] = React.useState(false);
-        React.useEffect(() => {
-            if (typeof google === 'undefined') {
-                createScriptTag('https://accounts.google.com/gsi/client', () => setScriptLoaded(true));
-                return;
-            }
-            if (!initialized) {
-                google.accounts.id.initialize({
-                    client_id: googleClientId,
-                    callback: handleGoogleCredential,
-                });
-                setInitialized(true);
-            }
-            if (parentRef.current && !buttonRendered) {
-                google.accounts.id.renderButton(parentRef.current, {});
-                setButtonRendered(true);
-            }
-        }, [medplum, googleClientId, initialized, scriptLoaded, parentRef, buttonRendered, handleGoogleCredential]);
-        if (!googleClientId) {
-            return null;
-        }
-        return React__default["default"].createElement("div", { ref: parentRef });
-    }
-    function getGoogleClientId(clientId) {
-        var _a, _b;
-        if (clientId) {
-            return clientId;
-        }
-        const origin = window.location.protocol + '//' + window.location.host;
-        const authorizedOrigins = (_b = (_a = "http://localhost:3000,http://127.0.0.1:3000,http://localhost:6006,http://127.0.0.1:6006,https://app.medplum.com,https://docs.medplum.com") === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
-        if (authorizedOrigins.includes(origin)) {
-            return "921088377005-3j1sa10vr6hj86jgmdfh2l53v3mp7lfi.apps.googleusercontent.com";
-        }
-        return undefined;
+        return (React__default["default"].createElement("div", null,
+            options.map((option) => {
+                const [propertyValue, propertyType] = getValueAndType({ type: 'QuestionnaireItemAnswerOption', value: option }, 'value');
+                return (React__default["default"].createElement("div", { key: option.id, style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        width: '80%',
+                    } },
+                    React__default["default"].createElement("div", null,
+                        React__default["default"].createElement(ResourcePropertyInput, { key: option.id, name: "value[x]", property: property, defaultPropertyType: propertyType, defaultValue: propertyValue, onChange: (newValue, propName) => {
+                                const newOptions = [...options];
+                                const index = newOptions.findIndex((o) => o.id === option.id);
+                                newOptions[index] = { id: option.id, [propName]: newValue };
+                                props.onChange(newOptions);
+                            } })),
+                    React__default["default"].createElement("div", null,
+                        React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                                killEvent(e);
+                                props.onChange(options.filter((o) => o.id !== option.id));
+                            } }, "Remove"))));
+            }),
+            React__default["default"].createElement("a", { href: "#", onClick: (e) => {
+                    killEvent(e);
+                    props.onChange([
+                        ...options,
+                        {
+                            id: generateId(),
+                        },
+                    ]);
+                } }, "Add choice")));
     }
-
+    let nextLinkId = 1;
+    let nextId = 1;
     /**
-     * Dynamically loads the recaptcha script.
-     * We do not want to load the script on page load unless the user needs it.
-     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
+     * Generates a link ID for an item.
+     * Link IDs are required properties on QuestionnaireItem objects.
+     * @return A unique link ID.
      */
-    function initRecaptcha(siteKey) {
-        if (typeof grecaptcha === 'undefined') {
-            createScriptTag('https://www.google.com/recaptcha/api.js?render=' + siteKey);
-        }
+    function generateLinkId(prefix) {
+        return prefix + nextLinkId++;
     }
     /**
-     * Starts a request to generate a recapcha token.
-     * @param siteKey The reCAPTCHA site key, available from the reCAPTCHA admin page.
-     * @returns Promise to a recaptcha token for the current user.
+     * Generates a unique ID.
+     * React needs unique IDs for components for rendering performance.
+     * All of the important components in the questionnaire builder have id properties for this:
+     * Questionnaire, QuestionnaireItem, and QuestionnaireItemAnswerOption.
+     * @return A unique key.
      */
-    function getRecaptcha(siteKey) {
-        return new Promise((resolve, reject) => {
-            grecaptcha.ready(() => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    resolve(yield grecaptcha.execute(siteKey, { action: 'submit' }));
-                }
-                catch (err) {
-                    reject(err);
-                }
-            }));
-        });
+    function generateId() {
+        return 'id-' + nextId++;
     }
-
-    function RegisterForm(props) {
-        const medplum = useMedplum();
-        const googleClientId = getGoogleClientId(props.googleClientId);
-        const recaptchaSiteKey = props.recaptchaSiteKey;
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        React.useEffect(() => initRecaptcha(recaptchaSiteKey), [recaptchaSiteKey]);
-        function handleAuthResponse(registerRequest, partialLogin) {
-            return __awaiter(this, void 0, void 0, function* () {
-                try {
-                    let login;
-                    if (props.type === 'patient') {
-                        login = yield medplum.startNewPatient(registerRequest, partialLogin);
-                    }
-                    else {
-                        login = yield medplum.startNewProject(registerRequest, partialLogin);
-                    }
-                    yield medplum.processCode(login.code);
-                    props.onSuccess();
-                }
-                catch (err) {
-                    setOutcome(err);
-                }
-            });
+    function ensureQuestionnaireKeys(questionnaire) {
+        return Object.assign(Object.assign({}, questionnaire), { id: questionnaire.id || generateId(), item: ensureQuestionnaireItemKeys(questionnaire.item) });
+    }
+    function ensureQuestionnaireItemKeys(items) {
+        if (!items) {
+            return undefined;
         }
-        return (React__default["default"].createElement(Document, { width: 450 },
-            React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
-                    try {
-                        const recaptchaToken = yield getRecaptcha(recaptchaSiteKey);
-                        const registerRequest = {
-                            projectId: props.projectId,
-                            projectName: formData.projectName,
-                            firstName: formData.firstName,
-                            lastName: formData.lastName,
-                            email: formData.email,
-                            password: formData.password,
-                            remember: formData.remember === 'true',
-                            recaptchaSiteKey,
-                            recaptchaToken,
-                        };
-                        const userLogin = yield medplum.startNewUser(registerRequest);
-                        yield handleAuthResponse(registerRequest, userLogin);
-                    }
-                    catch (err) {
-                        setOutcome(err);
-                    }
-                }) },
-                React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
-                issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
-                    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));
-                }))),
-                googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
-                        React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
-                                try {
-                                    const loginRequest = {
-                                        googleClientId: response.clientId,
-                                        googleCredential: response.credential,
-                                    };
-                                    const userLogin = yield medplum.startGoogleLogin(loginRequest);
-                                    const googleClaims = core.parseJWTPayload(loginRequest.googleCredential);
-                                    const registerRequest = {
-                                        projectId: props.projectId,
-                                        firstName: googleClaims.given_name,
-                                        lastName: googleClaims.family_name,
-                                        email: googleClaims.email,
-                                    };
-                                    yield handleAuthResponse(registerRequest, userLogin);
-                                }
-                                catch (err) {
-                                    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 })),
-                props.type === '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(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"))))));
+        return items.map((item) => (Object.assign(Object.assign({}, item), { id: item.id || generateId(), item: ensureQuestionnaireItemKeys(item.item), answerOption: ensureQuestionnaireOptionKeys(item.answerOption) })));
+    }
+    function ensureQuestionnaireOptionKeys(options) {
+        if (!options) {
+            return undefined;
+        }
+        return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
     function StatusBadge(props) {
@@ -5588,19 +5758,23 @@
                     React__default["default"].createElement("th", null, "Author"),
                     React__default["default"].createElement("th", null, "Date"),
                     React__default["default"].createElement("th", null, "Version"))),
-            React__default["default"].createElement("tbody", null, (_a = value.entry) === null || _a === void 0 ? void 0 : _a.map((entry) => {
-                var _a, _b;
-                return (React__default["default"].createElement(HistoryRow, { key: (_b = (_a = entry.resource) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.versionId, version: entry.resource }));
-            }))));
+            React__default["default"].createElement("tbody", null, (_a = value.entry) === null || _a === void 0 ? void 0 : _a.map((entry, index) => (React__default["default"].createElement(HistoryRow, { key: 'entry-' + index, entry: entry }))))));
     }
     function HistoryRow(props) {
         var _a, _b, _c;
-        return (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(ResourceBadge, { value: (_a = props.version.meta) === null || _a === void 0 ? void 0 : _a.author, link: true })),
-            React__default["default"].createElement("td", null, core.formatDateTime((_b = props.version.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
-            React__default["default"].createElement("td", null,
-                React__default["default"].createElement(MedplumLink, { to: getVersionUrl(props.version) }, (_c = props.version.meta) === null || _c === void 0 ? void 0 : _c.versionId))));
+        const { response, resource } = props.entry;
+        if (resource) {
+            return (React__default["default"].createElement("tr", null,
+                React__default["default"].createElement("td", null,
+                    React__default["default"].createElement(ResourceBadge, { value: (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.author, link: true })),
+                React__default["default"].createElement("td", null, core.formatDateTime((_b = resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
+                React__default["default"].createElement("td", null,
+                    React__default["default"].createElement(MedplumLink, { to: getVersionUrl(resource) }, (_c = resource.meta) === null || _c === void 0 ? void 0 : _c.versionId))));
+        }
+        else {
+            return (React__default["default"].createElement("tr", null,
+                React__default["default"].createElement("td", { colSpan: 3 }, core.normalizeErrorString(response === null || response === void 0 ? void 0 : response.outcome))));
+        }
     }
     function getVersionUrl(resource) {
         var _a;
@@ -5821,157 +5995,6 @@
             }) }));
     }
 
-    function SignInForm(props) {
-        const medplum = useMedplum();
-        const [login, setLogin] = React.useState(undefined);
-        const [memberships, setMemberships] = React.useState(undefined);
-        function handleAuthResponse(response) {
-            if (response.login) {
-                setLogin(response.login);
-            }
-            if (response.memberships) {
-                setMemberships(response.memberships);
-            }
-            if (response.code) {
-                if (props.onCode) {
-                    props.onCode(response.code);
-                }
-                else {
-                    medplum
-                        .processCode(response.code)
-                        .then(() => {
-                        if (props.onSuccess) {
-                            props.onSuccess();
-                        }
-                    })
-                        .catch(console.log);
-                }
-            }
-        }
-        return (React__default["default"].createElement(Document, { width: 450 }, (() => {
-            if (!login) {
-                return (React__default["default"].createElement(AuthenticationForm, { projectId: props.projectId, clientId: props.clientId, scope: props.scope, nonce: props.nonce, googleClientId: props.googleClientId, onForgotPassword: props.onForgotPassword, onRegister: props.onRegister, handleAuthResponse: handleAuthResponse }, props.children));
-            }
-            else if (memberships) {
-                return React__default["default"].createElement(ProfileForm, { login: login, memberships: memberships, handleAuthResponse: handleAuthResponse });
-            }
-            else if (props.projectId === 'new') {
-                return React__default["default"].createElement(NewProjectForm, { login: login, handleAuthResponse: handleAuthResponse });
-            }
-            else {
-                return React__default["default"].createElement("div", null, "Success");
-            }
-        })()));
-    }
-    function AuthenticationForm(props) {
-        const medplum = useMedplum();
-        const googleClientId = getGoogleClientId(props.googleClientId);
-        const [outcome, setOutcome] = React.useState();
-        const issues = getIssuesForExpression(outcome, undefined);
-        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => {
-                medplum
-                    .startLogin({
-                    projectId: props.projectId,
-                    clientId: props.clientId,
-                    scope: props.scope,
-                    nonce: props.nonce,
-                    email: formData.email,
-                    password: formData.password,
-                    remember: formData.remember === 'true',
-                })
-                    .then(props.handleAuthResponse)
-                    .catch(setOutcome);
-            } },
-            React__default["default"].createElement("div", { className: "medplum-center" }, props.children),
-            issues && (React__default["default"].createElement("div", { className: "medplum-input-error" }, issues.map((issue) => {
-                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));
-            }))),
-            googleClientId && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                React__default["default"].createElement("div", { className: "medplum-signin-google-container" },
-                    React__default["default"].createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
-                            medplum
-                                .startGoogleLogin({
-                                projectId: props.projectId,
-                                clientId: props.clientId,
-                                scope: props.scope,
-                                nonce: props.nonce,
-                                googleClientId: response.clientId,
-                                googleCredential: response.credential,
-                            })
-                                .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")))));
-    }
-    function ProfileForm(props) {
-        const medplum = useMedplum();
-        return (React__default["default"].createElement("div", null,
-            React__default["default"].createElement("div", { className: "medplum-center" },
-                React__default["default"].createElement(Logo, { size: 32 }),
-                React__default["default"].createElement("h1", null, "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: () => {
-                        medplum
-                            .post('auth/profile', {
-                            login: props.login,
-                            profile: membership.id,
-                        })
-                            .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))));
-            })));
-    }
-    function NewProjectForm(props) {
-        const medplum = useMedplum();
-        const [outcome, setOutcome] = React.useState();
-        return (React__default["default"].createElement(Form, { style: { maxWidth: 400 }, onSubmit: (formData) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const registerRequest = { projectName: formData.projectName };
-                    const partialLogin = { login: props.login };
-                    const login = yield medplum.startNewProject(registerRequest, partialLogin);
-                    props.handleAuthResponse(login);
-                }
-                catch (err) {
-                    setOutcome(err);
-                }
-            }) },
-            React__default["default"].createElement("div", { className: "medplum-center" },
-                React__default["default"].createElement(Logo, { size: 32 }),
-                React__default["default"].createElement("h1", null, "Create project")),
-            React__default["default"].createElement(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")))));
-    }
-
     function Tab(props) {
         let className = 'medplum-tab';
         if (props.selected) {