@medplum/react 1.0.2 → 1.0.4

package/dist/cjs/index.js

@@ -64,28 +64,6 @@
             React.createElement(core$1.TextInput, { placeholder: "Postal Code", defaultValue: value.postalCode, onChange: (e) => setPostalCode(e.currentTarget.value) })));
     }
 
-    function AttachmentDisplay(props) {
-        const value = props.value;
-        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
-        if (!url) {
-            return null;
-        }
-        return (React.createElement("div", { "data-testid": "attachment-display" },
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
-            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
-                React.createElement("source", { type: contentType, src: url }))),
-            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
-                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
-            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
-                React.createElement("a", { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
-    }
-
-    function AttachmentArrayDisplay(props) {
-        return (React.createElement("div", null, props.values &&
-            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
-                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
-    }
-
     const reactContext = React.createContext(undefined);
     /**
      * The MedplumProvider component provides Medplum context state.
@@ -132,6 +110,49 @@
         return useMedplumContext().profile;
     }
 
+    function AnnotationInput(props) {
+        const author = useMedplumProfile();
+        const [value, setValue] = React.useState(props.defaultValue || {});
+        const valueRef = React.useRef();
+        valueRef.current = value;
+        function setText(text) {
+            const newValue = text
+                ? {
+                    text,
+                    authorReference: author && core.createReference(author),
+                    time: new Date().toISOString(),
+                }
+                : {};
+            setValue(newValue);
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
+        }
+        return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
+    }
+
+    function AttachmentDisplay(props) {
+        const value = props.value;
+        const { contentType, url, title } = value !== null && value !== void 0 ? value : {};
+        if (!url) {
+            return null;
+        }
+        return (React.createElement("div", { "data-testid": "attachment-display" },
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('image/')) && (React.createElement("img", { "data-testid": "attachment-image", style: { maxWidth: props.maxWidth }, src: url, alt: value === null || value === void 0 ? void 0 : value.title })),
+            (contentType === null || contentType === void 0 ? void 0 : contentType.startsWith('video/')) && (React.createElement("video", { "data-testid": "attachment-video", style: { maxWidth: props.maxWidth }, controls: true },
+                React.createElement("source", { type: contentType, src: url }))),
+            contentType === 'application/pdf' && !(title === null || title === void 0 ? void 0 : title.endsWith('.pdf')) && (React.createElement("div", { "data-testid": "attachment-pdf", style: { maxWidth: props.maxWidth, minHeight: 400 } },
+                React.createElement("iframe", { width: "100%", height: "400", src: url + '#navpanes=0', allowFullScreen: true, frameBorder: 0, seamless: true }))),
+            React.createElement("div", { "data-testid": "download-link", style: { padding: '2px 16px 16px 16px' } },
+                React.createElement(core$1.Anchor, { href: value === null || value === void 0 ? void 0 : value.url, "data-testid": "attachment-details", target: "_blank", rel: "noopener noreferrer" }, (value === null || value === void 0 ? void 0 : value.title) || 'Download'))));
+    }
+
+    function AttachmentArrayDisplay(props) {
+        return (React.createElement("div", null, props.values &&
+            props.values.map((v, index) => (React.createElement("div", { key: 'attatchment-' + index },
+                React.createElement(AttachmentDisplay, { value: v, maxWidth: props.maxWidth }))))));
+    }
+
     /**
      * Kills a browser event.
      * Prevents default behavior.
@@ -271,15 +292,6 @@
         return (React.createElement(AttachmentButton, { onUpload: setValueWrapper }, (props) => React.createElement(core$1.Button, Object.assign({}, props), "Upload...")));
     }
 
-    function Document(props) {
-        let style = undefined;
-        if (props.width) {
-            style = { maxWidth: props.width };
-        }
-        return (React.createElement(core$1.Container, null,
-            React.createElement(core$1.Paper, { style: style, mx: "auto", my: "lg", p: "lg", shadow: "xs", radius: "sm", withBorder: true }, props.children)));
-    }
-
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -317,6 +329,55 @@
         });
     }
 
+    const useStyles$d = core$1.createStyles(() => ({
+        root: {
+            '@media (max-width: 800px)': {
+                paddingLeft: 4,
+                paddingRight: 4,
+            },
+        },
+    }));
+    function Container(props) {
+        const { children } = props, others = __rest(props, ["children"]);
+        const { classes } = useStyles$d();
+        return (React.createElement(core$1.Container, Object.assign({ className: classes.root }, others), children));
+    }
+
+    const useStyles$c = core$1.createStyles((theme, { width, fill }) => ({
+        paper: {
+            maxWidth: width,
+            margin: `${theme.spacing.xl}px auto`,
+            padding: fill ? 0 : theme.spacing.md,
+            '@media (max-width: 800px)': {
+                padding: fill ? 0 : 8,
+            },
+            '& img': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+            '& video': {
+                width: '100%',
+                maxWidth: '100%',
+            },
+        },
+    }));
+    const defaultProps$1 = {
+        shadow: 'xs',
+        radius: 'md',
+        withBorder: true,
+    };
+    function Panel(props) {
+        const _a = core$1.useComponentDefaultProps('Panel', defaultProps$1, props), { className, children, width, fill, unstyled } = _a, others = __rest(_a, ["className", "children", "width", "fill", "unstyled"]);
+        const { classes, cx } = useStyles$c({ width, fill }, { name: 'Panel', unstyled });
+        return (React.createElement(core$1.Paper, Object.assign({ className: cx(classes.paper, className) }, others), children));
+    }
+
+    function Document(props) {
+        const { children } = props, others = __rest(props, ["children"]);
+        return (React.createElement(Container, null,
+            React.createElement(Panel, Object.assign({}, others), children)));
+    }
+
     /**
      * Parses an HTML form and returns the result as a JavaScript object.
      * @param form The HTML form element.
@@ -431,10 +492,11 @@
             React.createElement(core$1.Stack, { spacing: "xl" },
                 React.createElement(core$1.TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum ",
-                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     ".")),
             React.createElement(core$1.Group, { position: "right", mt: "xl", noWrap: true },
                 React.createElement(core$1.Button, { type: "submit" }, "Create project"))));
@@ -575,17 +637,18 @@
                 React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
-                    "By clicking submit you agree to the Medplum ",
-                    React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                    "By clicking submit you agree to the Medplum",
+                    ' ',
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     "."),
                 React.createElement(core$1.Text, { color: "dimmed", size: "xs" },
                     "This site is protected by reCAPTCHA and the Google",
                     ' ',
-                    React.createElement("a", { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
                     ' and ',
-                    React.createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                    React.createElement(core$1.Anchor, { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
                     " apply.")),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
                 React.createElement(core$1.Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
@@ -659,10 +722,10 @@
             React.createElement(core$1.Stack, { spacing: "xl" },
                 React.createElement(core$1.TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
                 React.createElement(core$1.PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
-            React.createElement(core$1.Group, { position: "apart", mt: "xl", noWrap: true },
+            React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
                 onRegister && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onRegister, size: "xs" }, "Register")),
-                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs" }),
+                React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),
                 React.createElement(core$1.Button, { type: "submit" }, "Sign in"))));
     }
 
@@ -769,13 +832,6 @@
         })()));
     }
 
-    function CheckboxFormSection(props) {
-        return (React.createElement(core$1.Group, { noWrap: true },
-            React.createElement("div", null, props.children),
-            React.createElement("div", null,
-                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
-    }
-
     const DEFAULT_IGNORED_PROPERTIES = [
         'meta',
         'implicitRules',
@@ -786,116 +842,6 @@
         'modifierExtension',
     ];
 
-    function FormSection(props) {
-        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
-    }
-
-    const system = {
-        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);
-        const [schema, setSchema] = React.useState();
-        const [value, setValue] = React.useState();
-        React.useEffect(() => {
-            if (defaultValue) {
-                setValue(JSON.parse(JSON.stringify(defaultValue)));
-                medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
-            }
-        }, [medplum, defaultValue]);
-        if (!schema || !value) {
-            return React.createElement("div", null, "Loading...");
-        }
-        return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
-                e.preventDefault();
-                if (props.onSubmit) {
-                    props.onSubmit(value);
-                }
-            } },
-            React.createElement(core$1.Stack, { mb: "xl" },
-                React.createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
-                    React.createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
-                React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
-                    React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
-            React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
-            React.createElement(core$1.Group, { position: "right", mt: "xl" },
-                React.createElement(core$1.Button, { type: "submit" }, "OK"),
-                props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
-                        props.onDelete(value);
-                    } }, "Delete")))));
-    }
-    function setPropertyValue(obj, key, propName, elementDefinition, value) {
-        const types = elementDefinition.type;
-        if (types.length > 1) {
-            for (const type of types) {
-                const compoundKey = key.replace('[x]', core.capitalize(type.code));
-                if (compoundKey in obj) {
-                    delete obj[compoundKey];
-                }
-            }
-        }
-        obj[propName] = value;
-        return obj;
-    }
-
     const useStyles$b = core$1.createStyles((theme) => ({
         root: {
             display: 'grid',
@@ -926,63 +872,12 @@
             React.createElement("dd", null, props.children)));
     }
 
-    function BackboneElementDisplay(props) {
-        const typedValue = props.value;
-        const value = typedValue.value;
-        if (!value) {
-            return null;
-        }
-        const typeName = typedValue.type;
-        const typeSchema = core.globalSchema.types[typeName];
-        if (!typeSchema) {
-            return React.createElement("div", null,
-                typeName,
-                "\u00A0not implemented");
-        }
-        if (typeof value === 'object' &&
-            'name' in value &&
-            Object.keys(value).length === 1 &&
-            typeof value.name === 'string') {
-            // Special case for common BackboneElement pattern
-            // Where there is an object with a single property 'name'
-            // Just display the name value.
-            return React.createElement("div", null, value.name);
-        }
-        return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
-            const key = entry[0];
-            if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
-                return null;
-            }
-            const property = entry[1];
-            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
-            if (props.ignoreMissingValues &&
-                (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
-                return null;
-            }
-            return (React.createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
-                React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
-        })));
+    function CodeableConceptDisplay(props) {
+        return React.createElement(React.Fragment, null, core.formatCodeableConcept(props.value));
     }
 
     function CodingDisplay(props) {
-        var _a, _b;
-        return React.createElement(React.Fragment, null, ((_a = props.value) === null || _a === void 0 ? void 0 : _a.display) || ((_b = props.value) === null || _b === void 0 ? void 0 : _b.code));
-    }
-
-    function CodeableConceptDisplay(props) {
-        const value = props.value;
-        if (!value) {
-            return null;
-        }
-        if (value.text) {
-            return React.createElement(React.Fragment, null, value.text);
-        }
-        if (value.coding) {
-            return (React.createElement(React.Fragment, null, value.coding.map((coding, index) => (React.createElement(React.Fragment, { key: 'coding-' + index },
-                index > 0 && React.createElement(React.Fragment, null, ', '),
-                React.createElement(CodingDisplay, { value: coding }))))));
-        }
-        return null;
+        return React.createElement(React.Fragment, null, core.formatCoding(props.value));
     }
 
     function ContactPointDisplay(props) {
@@ -1175,6 +1070,7 @@
             case core.PropertyType.Period:
                 return React.createElement(React.Fragment, null, core.formatPeriod(value));
             case core.PropertyType.Quantity:
+            case core.PropertyType.Duration:
                 return React.createElement(QuantityDisplay, { value: value });
             case core.PropertyType.Range:
                 return React.createElement(RangeDisplay, { value: value });
@@ -1184,6 +1080,9 @@
                 return React.createElement(ReferenceDisplay, { value: value, link: props.link });
             case core.PropertyType.Timing:
                 return React.createElement(React.Fragment, null, core.formatTiming(value));
+            case core.PropertyType.Dosage:
+            case core.PropertyType.UsageContext:
+                return (React.createElement(BackboneElementDisplay, { value: { type: propertyType, value }, compact: true, ignoreMissingValues: props.ignoreMissingValues }));
             default:
                 if (!(property === null || property === void 0 ? void 0 : property.path)) {
                     throw Error(`Displaying property of type ${props.propertyType} requires element definition path`);
@@ -1212,25 +1111,162 @@
         return [typedResult.value, typedResult.type];
     }
 
-    function AnnotationInput(props) {
-        const author = useMedplumProfile();
-        const [value, setValue] = React.useState(props.defaultValue || {});
-        const valueRef = React.useRef();
-        valueRef.current = value;
-        function setText(text) {
-            const newValue = text
-                ? {
-                    text,
-                    authorReference: author && core.createReference(author),
-                    time: new Date().toISOString(),
+    function BackboneElementDisplay(props) {
+        const typedValue = props.value;
+        const value = typedValue.value;
+        if (!value) {
+            return null;
+        }
+        const typeName = typedValue.type;
+        const typeSchema = core.globalSchema.types[typeName];
+        if (!typeSchema) {
+            return React.createElement("div", null,
+                typeName,
+                "\u00A0not implemented");
+        }
+        if (typeof value === 'object' &&
+            'name' in value &&
+            Object.keys(value).length === 1 &&
+            typeof value.name === 'string') {
+            // Special case for common BackboneElement pattern
+            // Where there is an object with a single property 'name'
+            // Just display the name value.
+            return React.createElement("div", null, value.name);
+        }
+        return (React.createElement(DescriptionList, { compact: props.compact }, Object.entries(typeSchema.properties).map((entry) => {
+            const key = entry[0];
+            if (DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+                return null;
+            }
+            const property = entry[1];
+            if (!property.path) {
+                property.path = typeName + '.' + key;
+            }
+            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+            if (props.ignoreMissingValues &&
+                (!propertyValue || (Array.isArray(propertyValue) && propertyValue.length === 0))) {
+                return null;
+            }
+            return (React.createElement(DescriptionListEntry, { key: key, term: core.getPropertyDisplayName(key) },
+                React.createElement(ResourcePropertyDisplay, { property: property, propertyType: propertyType, value: propertyValue, ignoreMissingValues: props.ignoreMissingValues, link: props.link })));
+        })));
+    }
+
+    function CheckboxFormSection(props) {
+        return (React.createElement(core$1.Group, { noWrap: true },
+            React.createElement("div", null, props.children),
+            React.createElement("div", null,
+                React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
+    }
+
+    function FormSection(props) {
+        return (React.createElement(core$1.Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description, error: getErrorsForInput(props.outcome, props.htmlFor) }, props.children));
+    }
+
+    const system = {
+        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);
+        const [schema, setSchema] = React.useState();
+        const [value, setValue] = React.useState();
+        React.useEffect(() => {
+            if (defaultValue) {
+                setValue(JSON.parse(JSON.stringify(defaultValue)));
+                medplum.requestSchema(defaultValue.resourceType).then(setSchema).catch(console.log);
+            }
+        }, [medplum, defaultValue]);
+        if (!schema || !value) {
+            return React.createElement("div", null, "Loading...");
+        }
+        return (React.createElement("form", { noValidate: true, autoComplete: "off", onSubmit: (e) => {
+                e.preventDefault();
+                if (props.onSubmit) {
+                    props.onSubmit(value);
+                }
+            } },
+            React.createElement(core$1.Stack, { mb: "xl" },
+                React.createElement(FormSection, { title: "Resource Type", htmlFor: "resourceType", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "resourceType", defaultValue: value.resourceType, disabled: true })),
+                React.createElement(FormSection, { title: "ID", htmlFor: "id", outcome: props.outcome },
+                    React.createElement(core$1.TextInput, { name: "id", defaultValue: value.id, disabled: true }))),
+            React.createElement(BackboneElementInput, { typeName: value.resourceType, defaultValue: value, outcome: props.outcome, onChange: setValue }),
+            React.createElement(core$1.Group, { position: "right", mt: "xl" },
+                React.createElement(core$1.Button, { type: "submit" }, "OK"),
+                props.onDelete && (React.createElement(core$1.Button, { variant: "outline", color: "red", type: "button", onClick: () => {
+                        props.onDelete(value);
+                    } }, "Delete")))));
+    }
+    function setPropertyValue(obj, key, propName, elementDefinition, value) {
+        const types = elementDefinition.type;
+        if (types.length > 1) {
+            for (const type of types) {
+                const compoundKey = key.replace('[x]', core.capitalize(type.code));
+                if (compoundKey in obj) {
+                    delete obj[compoundKey];
                 }
-                : {};
-            setValue(newValue);
-            if (props.onChange) {
-                props.onChange(newValue);
             }
         }
-        return (React.createElement(core$1.TextInput, { name: props.name, placeholder: "Annotation text", defaultValue: value.text, onChange: (e) => setText(e.currentTarget.value) }));
+        obj[propName] = value;
+        return obj;
     }
 
     function valueSetElementToAutocompleteItem(element) {
@@ -1658,6 +1694,7 @@
         Observation: 'code',
         RequestGroup: '_id',
         ActivityDefinition: 'name',
+        User: 'email',
     };
     function ResourceInput(props) {
         const medplum = useMedplum();
@@ -1981,6 +2018,7 @@
                 return React.createElement(IdentifierInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Period:
                 return React.createElement(PeriodInput, { name: name, defaultValue: value, onChange: props.onChange });
+            case core.PropertyType.Duration:
             case core.PropertyType.Quantity:
                 return React.createElement(QuantityInput, { name: name, defaultValue: value, onChange: props.onChange });
             case core.PropertyType.Range:
@@ -1991,53 +2029,184 @@
                 return (React.createElement(ReferenceInput, { name: name, defaultValue: value, targetTypes: getTargetTypes(property), onChange: props.onChange }));
             case core.PropertyType.Timing:
                 return React.createElement(TimingInput, { name: name, defaultValue: value, onChange: props.onChange });
+            case core.PropertyType.Dosage:
+            case core.PropertyType.UsageContext:
+                return (React.createElement(BackboneElementInput, { typeName: propertyType, defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
             default:
                 return (React.createElement(BackboneElementInput, { typeName: core.buildTypeName((_a = property.path) === null || _a === void 0 ? void 0 : _a.split('.')), defaultValue: value, onChange: props.onChange, outcome: props.outcome }));
         }
     }
-    function getTargetTypes(property) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.type) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetProfile) === null || _c === void 0 ? void 0 : _c.map((p) => p.split('/').pop());
+    function getTargetTypes(property) {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.type) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.targetProfile) === null || _c === void 0 ? void 0 : _c.map((p) => p.split('/').pop());
+    }
+
+    function BackboneElementInput(props) {
+        var _a;
+        const [value, setValue] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
+        function setValueWrapper(newValue) {
+            setValue(newValue);
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
+        }
+        const typeName = props.typeName;
+        const typeSchema = core.globalSchema.types[typeName];
+        if (!typeSchema) {
+            return React.createElement("div", null,
+                typeName,
+                "\u00A0not implemented");
+        }
+        const typedValue = { type: typeName, value };
+        return (React.createElement(core$1.Stack, null, Object.entries(typeSchema.properties).map((entry) => {
+            const key = entry[0];
+            if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
+                return null;
+            }
+            const property = entry[1];
+            if (!property.type) {
+                return null;
+            }
+            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
+            if (property.type.length === 1 && property.type[0].code === 'boolean') {
+                return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
+                    React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                            setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                        } })));
+            }
+            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
+                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
+                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
+                    } })));
+        })));
+    }
+
+    const useStyles$a = core$1.createStyles((theme) => ({
+        table: {
+            width: 350,
+            '& th': {
+                fontWeight: 'normal',
+                fontSize: 11,
+                padding: 8,
+                textAlign: 'center',
+            },
+            '& td': {
+                padding: '2px 4px',
+            },
+            '& td button': {
+                width: 44,
+                height: 44,
+                color: theme.colors[theme.primaryColor][5],
+                fontSize: 16,
+                fontWeight: 500,
+                textAlign: 'center',
+                padding: 0,
+                backgroundColor: theme.colors[theme.primaryColor][0],
+                border: 0,
+                borderRadius: '50%',
+                cursor: 'pointer',
+            },
+            '& td button:hover': {
+                backgroundColor: theme.colors[theme.primaryColor][1],
+            },
+            '& td button:disabled': {
+                backgroundColor: 'transparent',
+                cursor: 'default',
+                color: theme.colors.gray[4],
+                fontWeight: 'normal',
+            },
+        },
+    }));
+    /**
+     * Returns a month display string (e.g. "January 2020").
+     * @param date Any date within the month.
+     * @returns The month display string (e.g. "January 2020")
+     */
+    function getMonthString(date) {
+        return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+    }
+    function CalendarInput(props) {
+        const { classes } = useStyles$a();
+        const { onChangeMonth, onClick } = props;
+        const [month, setMonth] = React.useState(getStartMonth);
+        function moveMonth(delta) {
+            setMonth((currMonth) => {
+                const newMonth = new Date(currMonth.getTime());
+                newMonth.setMonth(currMonth.getMonth() + delta);
+                onChangeMonth(newMonth);
+                return newMonth;
+            });
+        }
+        const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+        return (React.createElement("div", null,
+            React.createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
+                React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+                React.createElement(core$1.Group, { position: "right", spacing: "xs" },
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
+            React.createElement("table", { className: classes.table },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, "SUN"),
+                        React.createElement("th", null, "MON"),
+                        React.createElement("th", null, "TUE"),
+                        React.createElement("th", null, "WED"),
+                        React.createElement("th", null, "THU"),
+                        React.createElement("th", null, "FRI"),
+                        React.createElement("th", null, "SAT"))),
+                React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
+    }
+    function getStartMonth() {
+        const result = new Date();
+        result.setDate(1);
+        result.setHours(0, 0, 0, 0);
+        return result;
     }
-
-    function BackboneElementInput(props) {
-        var _a;
-        const [value, setValue] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : {});
-        function setValueWrapper(newValue) {
-            setValue(newValue);
-            if (props.onChange) {
-                props.onChange(newValue);
-            }
-        }
-        const typeName = props.typeName;
-        const typeSchema = core.globalSchema.types[typeName];
-        if (!typeSchema) {
-            return React.createElement("div", null,
-                typeName,
-                "\u00A0not implemented");
+    function buildGrid(startDate, slots) {
+        const d = new Date(startDate.getFullYear(), startDate.getMonth());
+        const grid = [];
+        let row = [];
+        // Fill leading empty days
+        for (let i = 0; i < d.getDay(); i++) {
+            row.push(undefined);
         }
-        const typedValue = { type: typeName, value };
-        return (React.createElement(core$1.Stack, null, Object.entries(typeSchema.properties).map((entry) => {
-            const key = entry[0];
-            if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
-                return null;
+        while (d.getMonth() === startDate.getMonth()) {
+            row.push({
+                date: new Date(d.getTime()),
+                available: isDayAvailable(d, slots),
+            });
+            if (d.getDay() === 6) {
+                grid.push(row);
+                row = [];
             }
-            const property = entry[1];
-            if (!property.type) {
-                return null;
+            d.setDate(d.getDate() + 1);
+        }
+        // Fill trailing empty days
+        if (d.getDay() !== 0) {
+            for (let i = d.getDay(); i < 7; i++) {
+                row.push(undefined);
             }
-            const [propertyValue, propertyType] = getValueAndType(typedValue, key);
-            if (property.type.length === 1 && property.type[0].code === 'boolean') {
-                return (React.createElement(CheckboxFormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key },
-                    React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
-                            setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
-                        } })));
+            grid.push(row);
+        }
+        return grid;
+    }
+    /**
+     * Returns true if the given date is available for booking.
+     * @param day The day to check.
+     * @param slots The list of available slots.
+     * @returns True if there are any available slots for the day.
+     */
+    function isDayAvailable(day, slots) {
+        // Note that slot start and end time may or may not be in UTC.
+        for (const slot of slots) {
+            const slotStart = new Date(slot.start);
+            if (slotStart.getFullYear() === day.getFullYear() &&
+                slotStart.getMonth() === day.getMonth() &&
+                slotStart.getDate() === day.getDate()) {
+                return true;
             }
-            return (React.createElement(FormSection, { key: key, title: core.getPropertyDisplayName(key), description: property.definition, htmlFor: key, outcome: props.outcome },
-                React.createElement(ResourcePropertyInput, { property: property, name: key, defaultValue: propertyValue, defaultPropertyType: propertyType, outcome: props.outcome, onChange: (newValue, propName) => {
-                        setValueWrapper(setPropertyValue(value, key, propName !== null && propName !== void 0 ? propName : key, entry[1], newValue));
-                    } })));
-        })));
+        }
+        return false;
     }
 
     function ResourceName(props) {
@@ -2056,7 +2225,7 @@
             React.createElement(ResourceName, { value: props.value, link: props.link })));
     }
 
-    const useStyles$a = core$1.createStyles((theme) => ({
+    const useStyles$9 = core$1.createStyles((theme) => ({
         table: {
             border: `0.1px solid ${theme.colors.gray[5]}`,
             borderCollapse: 'collapse',
@@ -2117,7 +2286,7 @@
     }
     function ObservationTable(props) {
         var _a;
-        const { classes } = useStyles$a();
+        const { classes } = useStyles$9();
         return (React.createElement("table", { className: classes.table },
             React.createElement("thead", null,
                 React.createElement("tr", null,
@@ -2128,7 +2297,7 @@
             React.createElement("tbody", null, (_a = props.value) === null || _a === void 0 ? void 0 : _a.map((observation, index) => (React.createElement(ObservationRow, { key: 'obs-' + index, value: observation }))))));
     }
     function ObservationRow(props) {
-        const { classes, cx } = useStyles$a();
+        const { classes, cx } = useStyles$9();
         const observation = useResource(props.value);
         if (!observation) {
             return null;
@@ -2145,20 +2314,8 @@
             React.createElement("td", null, observation.interpretation && observation.interpretation.length > 0 && (React.createElement(CodeableConceptDisplay, { value: observation.interpretation[0] })))));
     }
     function ObservationValueDisplay(props) {
-        var _a;
         const obs = props.value;
-        if (obs === null || obs === void 0 ? void 0 : obs.valueQuantity) {
-            return React.createElement(QuantityDisplay, { value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.valueQuantity });
-        }
-        if (obs === null || obs === void 0 ? void 0 : obs.valueString) {
-            return React.createElement(React.Fragment, null, obs.valueString);
-        }
-        if (obs && 'component' in obs && (obs === null || obs === void 0 ? void 0 : obs.component)) {
-            return (React.createElement(React.Fragment, null, obs.component
-                .map((component, index) => (React.createElement(ObservationValueDisplay, { key: `obs-${index}`, value: component })))
-                .reduce((prev, curr) => [prev, ' / ', curr])));
-        }
-        return null;
+        return React.createElement(React.Fragment, null, core.formatObservationValue(obs));
     }
     function ReferenceRangeDisplay(props) {
         const range = props.value && props.value.length > 0 && props.value[0];
@@ -2182,7 +2339,7 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
-    const useStyles$9 = core$1.createStyles((theme) => ({
+    const useStyles$8 = core$1.createStyles((theme) => ({
         root: {
             borderCollapse: 'collapse',
             width: '100%',
@@ -2203,7 +2360,7 @@
         },
     }));
     function ResourceDiffTable(props) {
-        const { classes } = useStyles$9();
+        const { classes } = useStyles$8();
         const medplum = useMedplum();
         const [schema, setSchema] = React.useState();
         React.useEffect(() => {
@@ -2293,29 +2450,30 @@
     }
 
     function Timeline(props) {
-        return React.createElement(core$1.Container, null, props.children);
+        return React.createElement(Container, null, props.children);
     }
     function TimelineItem(props) {
-        var _a, _b, _c;
-        const author = (_a = props.profile) !== null && _a !== void 0 ? _a : (_b = props.resource.meta) === null || _b === void 0 ? void 0 : _b.author;
-        return (React.createElement(core$1.Paper, { "data-testid": "timeline-item", m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true, className: props.className },
-            React.createElement(core$1.Group, { position: "apart", spacing: 8 },
+        var _a, _b;
+        const { resource, profile, padding, popupMenuItems } = props, others = __rest(props, ["resource", "profile", "padding", "popupMenuItems"]);
+        const author = profile !== null && profile !== void 0 ? profile : (_a = resource.meta) === null || _a === void 0 ? void 0 : _a.author;
+        return (React.createElement(Panel, Object.assign({ "data-testid": "timeline-item", fill: true }, others),
+            React.createElement(core$1.Group, { position: "apart", spacing: 8, mx: "xs", my: "sm" },
                 React.createElement(ResourceAvatar, { value: author, link: true, size: "md" }),
                 React.createElement("div", { style: { flex: 1 } },
                     React.createElement(core$1.Text, { size: "sm" },
                         React.createElement(ResourceName, { color: "dark", weight: 500, value: author, link: true })),
                     React.createElement(core$1.Text, { size: "xs" },
-                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime((_c = props.resource.meta) === null || _c === void 0 ? void 0 : _c.lastUpdated)),
+                        React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, core.formatDateTime((_b = props.resource.meta) === null || _b === void 0 ? void 0 : _b.lastUpdated)),
                         React.createElement(core$1.Text, { component: "span", color: "dimmed", mx: 8 }, "\u00B7"),
                         React.createElement(MedplumLink, { color: "dimmed", to: props.resource }, props.resource.resourceType))),
-                props.popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
+                popupMenuItems && (React.createElement(core$1.Menu, { position: "bottom-end", shadow: "md", width: 200 },
                     React.createElement(core$1.Menu.Target, null,
                         React.createElement(core$1.ActionIcon, { radius: "xl", "aria-label": `Actions for ${core.getReferenceString(props.resource)}` },
                             React.createElement(icons.IconDots, null))),
-                    props.popupMenuItems))),
+                    popupMenuItems))),
             React.createElement(ErrorBoundary, null,
-                props.padding && React.createElement("div", { style: { padding: '2px 16px 16px 16px' } }, props.children),
-                !props.padding && React.createElement(React.Fragment, null, props.children))));
+                padding && React.createElement("div", { style: { padding: '0 16px 16px 16px' } }, props.children),
+                !padding && React.createElement(React.Fragment, null, props.children))));
     }
 
     /**
@@ -2364,7 +2522,7 @@
         return new Date(dateTime).getTime();
     }
 
-    const useStyles$8 = core$1.createStyles((theme) => ({
+    const useStyles$7 = core$1.createStyles((theme) => ({
         pinnedComment: {
             backgroundColor: theme.colors.blue[0],
         },
@@ -2522,7 +2680,7 @@
                 React.createElement(core$1.Loader, null)));
         }
         return (React.createElement(Timeline, null,
-            props.createCommunication && (React.createElement(core$1.Paper, { m: "lg", p: "sm", shadow: "xs", radius: "sm", withBorder: true },
+            props.createCommunication && (React.createElement(Panel, null,
                 React.createElement(Form, { testid: "timeline-form", onSubmit: (formData) => {
                         createComment(formData.text);
                         const input = inputRef.current;
@@ -2593,7 +2751,7 @@
     }
     function CommunicationTimelineItem(props) {
         var _a, _b;
-        const { classes } = useStyles$8();
+        const { classes } = useStyles$7();
         const routine = !props.resource.priority || props.resource.priority === 'routine';
         const className = routine ? undefined : classes.pinnedComment;
         return (React.createElement(TimelineItem, { resource: props.resource, profile: props.resource.sender, padding: true, className: className, popupMenuItems: React.createElement(TimelineItemPopupMenu, Object.assign({}, props)) },
@@ -3742,7 +3900,7 @@
             this.browserEvent = browserEvent;
         }
     }
-    const useStyles$7 = core$1.createStyles((theme) => ({
+    const useStyles$6 = core$1.createStyles((theme) => ({
         root: {
             maxWidth: '100%',
             overflow: 'auto',
@@ -3780,7 +3938,7 @@
      */
     function SearchControl(props) {
         var _a, _b, _c;
-        const { classes } = useStyles$7();
+        const { classes } = useStyles$6();
         const medplum = useMedplum();
         const [schemaLoaded, setSchemaLoaded] = React.useState(false);
         const [outcome, setOutcome] = React.useState();
@@ -3946,7 +4104,7 @@
                     checkboxColumn && (React.createElement("td", null,
                         React.createElement("input", { type: "checkbox", value: "checked", "data-testid": "row-checkbox", "aria-label": `Checkbox for ${resource.id}`, checked: !!state.selected[resource.id], onChange: (e) => handleSingleCheckboxClick(e, resource.id) }))),
                     fields.map((field) => (React.createElement("td", { key: field.name }, renderValue(resource, field))))))))),
-            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React.createElement(core$1.Container, null,
+            (resources === null || resources === void 0 ? void 0 : resources.length) === 0 && (React.createElement(Container, null,
                 React.createElement(core$1.Center, null,
                     React.createElement(core$1.Text, { size: "xl", color: "dimmed" }, "No results")))),
             (lastResult === null || lastResult === void 0 ? void 0 : lastResult.total) !== undefined && lastResult.total > 0 && (React.createElement(core$1.Center, { m: "md", p: "md" },
@@ -4155,7 +4313,7 @@
             }) }));
     }
 
-    const useStyles$6 = core$1.createStyles((theme) => ({
+    const useStyles$5 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4221,7 +4379,7 @@
                 React.createElement(core$1.Button, { type: "submit" }, "Save"))));
     }
     function ActionArrayBuilder(props) {
-        const { classes } = useStyles$6();
+        const { classes } = useStyles$5();
         const actionsRef = React.useRef();
         actionsRef.current = props.actions;
         function changeAction(changedAction) {
@@ -4238,13 +4396,13 @@
             props.actions.map((action) => (React.createElement("div", { key: action.id },
                 React.createElement(ActionBuilder, { action: action, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onChange: changeAction, onRemove: () => removeAction(action) })))),
             React.createElement("div", { className: classes.bottomActions },
-                React.createElement("a", { href: "#", onClick: (e) => {
+                React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         killEvent(e);
                         addAction({ id: generateId$1() });
                     } }, "Add action"))));
     }
     function ActionBuilder(props) {
-        const { classes, cx } = useStyles$6();
+        const { classes, cx } = useStyles$5();
         const { action } = props;
         const actionType = getInitialActionType(action);
         const editing = props.selectedKey === props.action.id;
@@ -4264,7 +4422,7 @@
         return (React.createElement("div", { "data-testid": action.id, className: className, onClick: onClick, onMouseOver: onHover },
             editing ? (React.createElement(ActionEditor, { action: action, actionType: actionType, onChange: props.onChange, selectedKey: props.selectedKey, setSelectedKey: props.setSelectedKey, hoverKey: props.hoverKey, setHoverKey: props.setHoverKey, onRemove: props.onRemove })) : (React.createElement(ActionDisplay, { action: action, actionType: actionType })),
             React.createElement("div", { className: classes.bottomActions },
-                React.createElement("a", { href: "#", onClick: (e) => {
+                React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         e.preventDefault();
                         props.onRemove();
                     } }, "Remove"))));
@@ -4665,7 +4823,7 @@
         }
     }
 
-    const useStyles$5 = core$1.createStyles((theme) => ({
+    const useStyles$4 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -4744,7 +4902,7 @@
     }
     function ItemBuilder(props) {
         var _a;
-        const { classes, cx } = useStyles$5();
+        const { classes, cx } = useStyles$4();
         const resource = props.item;
         const item = props.item;
         const isResource = 'resourceType' in props.item;
@@ -4814,7 +4972,7 @@
                     ] })))) : (React.createElement("div", null, linkId)))),
             React.createElement("div", { className: classes.bottomActions },
                 isContainer && (React.createElement(React.Fragment, null,
-                    React.createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4823,7 +4981,7 @@
                                 text: 'Question',
                             });
                         } }, "Add item"),
-                    React.createElement("a", { href: "#", onClick: (e) => {
+                    React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                             e.preventDefault();
                             addItem({
                                 id: generateId(),
@@ -4832,7 +4990,7 @@
                                 text: 'Group',
                             });
                         } }, "Add group"))),
-                editing && !isResource && (React.createElement("a", { href: "#", onClick: (e) => {
+                editing && !isResource && (React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                         e.preventDefault();
                         if (props.onRemove) {
                             props.onRemove();
@@ -4861,12 +5019,12 @@
                                 props.onChange(newOptions);
                             } })),
                     React.createElement("div", null,
-                        React.createElement("a", { href: "#", onClick: (e) => {
+                        React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                                 killEvent(e);
                                 props.onChange(options.filter((o) => o.id !== option.id));
                             } }, "Remove"))));
             }),
-            React.createElement("a", { href: "#", onClick: (e) => {
+            React.createElement(core$1.Anchor, { href: "#", onClick: (e) => {
                     killEvent(e);
                     props.onChange([
                         ...options,
@@ -4921,7 +5079,7 @@
         return options.map((option) => (Object.assign(Object.assign({}, option), { id: option.id || generateId() })));
     }
 
-    const useStyles$4 = core$1.createStyles((theme) => ({
+    const useStyles$3 = core$1.createStyles((theme) => ({
         section: {
             position: 'relative',
             margin: '4px 4px 8px 0',
@@ -5025,8 +5183,8 @@
     }
     function ReferenceRangeGroupEditor(props) {
         const { intervalGroup, unit } = props;
-        const { classes } = useStyles$4();
-        return (React.createElement(core$1.Container, { "data-testid": intervalGroup.id, className: classes.section },
+        const { classes } = useStyles$3();
+        return (React.createElement(Container, { "data-testid": intervalGroup.id, className: classes.section },
             React.createElement(core$1.Stack, { spacing: 'lg' },
                 React.createElement(core$1.Group, { position: "right" },
                     React.createElement(core$1.ActionIcon, { title: "Remove Group", "data-testid": `remove-group-button-${intervalGroup.id}`, key: `remove-group-button-${intervalGroup.id}`, size: "sm", onClick: (e) => {
@@ -5487,7 +5645,7 @@
         }
     }
 
-    const useStyles$3 = core$1.createStyles((theme) => ({
+    const useStyles$2 = core$1.createStyles((theme) => ({
         container: {
             overflowX: 'auto',
         },
@@ -5536,7 +5694,7 @@
     }));
     function ResourceBlame(props) {
         var _a, _b;
-        const { classes } = useStyles$3();
+        const { classes } = useStyles$2();
         const medplum = useMedplum();
         const [value, setValue] = React.useState(props.history);
         React.useEffect(() => {
@@ -5592,7 +5750,7 @@
         return `${count} ${count === 1 ? noun : noun + 's'} ago`;
     }
 
-    const useStyles$2 = core$1.createStyles((theme) => ({
+    const useStyles$1 = core$1.createStyles((theme) => ({
         removed: {
             color: theme.colors.red[7],
             textDecoration: 'line-through',
@@ -5614,7 +5772,7 @@
         return (React.createElement("pre", { style: { color: 'gray' } }, deltas.map((delta, index) => (React.createElement(ChangeDiff, { key: 'delta' + index, delta: delta })))));
     }
     function ChangeDiff(props) {
-        const { classes } = useStyles$2();
+        const { classes } = useStyles$1();
         return (React.createElement(React.Fragment, null,
             "...",
             React.createElement("br", null),
@@ -5668,134 +5826,6 @@
         return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
     }
 
-    const useStyles$1 = core$1.createStyles((theme) => ({
-        table: {
-            width: 350,
-            '& th': {
-                fontWeight: 'normal',
-                fontSize: 11,
-                padding: 8,
-                textAlign: 'center',
-            },
-            '& td': {
-                padding: '2px 4px',
-            },
-            '& td button': {
-                width: 44,
-                height: 44,
-                color: theme.colors[theme.primaryColor][5],
-                fontSize: 16,
-                fontWeight: 500,
-                textAlign: 'center',
-                padding: 0,
-                backgroundColor: theme.colors[theme.primaryColor][0],
-                border: 0,
-                borderRadius: '50%',
-                cursor: 'pointer',
-            },
-            '& td button:hover': {
-                backgroundColor: theme.colors[theme.primaryColor][1],
-            },
-            '& td button:disabled': {
-                backgroundColor: 'transparent',
-                cursor: 'default',
-                color: theme.colors.gray[4],
-                fontWeight: 'normal',
-            },
-        },
-    }));
-    /**
-     * Returns a month display string (e.g. "January 2020").
-     * @param date Any date within the month.
-     * @returns The month display string (e.g. "January 2020")
-     */
-    function getMonthString(date) {
-        return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
-    }
-    function CalendarInput(props) {
-        const { classes } = useStyles$1();
-        const { onChangeMonth, onClick } = props;
-        const [month, setMonth] = React.useState(getStartMonth);
-        function moveMonth(delta) {
-            setMonth((currMonth) => {
-                const newMonth = new Date(currMonth.getTime());
-                newMonth.setMonth(currMonth.getMonth() + delta);
-                onChangeMonth(newMonth);
-                return newMonth;
-            });
-        }
-        const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
-        return (React.createElement("div", null,
-            React.createElement(core$1.Group, { position: "apart", spacing: "xs", grow: true, noWrap: true },
-                React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
-                React.createElement(core$1.Group, { position: "right", spacing: "xs" },
-                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
-                    React.createElement(core$1.Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
-            React.createElement("table", { className: classes.table },
-                React.createElement("thead", null,
-                    React.createElement("tr", null,
-                        React.createElement("th", null, "SUN"),
-                        React.createElement("th", null, "MON"),
-                        React.createElement("th", null, "TUE"),
-                        React.createElement("th", null, "WED"),
-                        React.createElement("th", null, "THU"),
-                        React.createElement("th", null, "FRI"),
-                        React.createElement("th", null, "SAT"))),
-                React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement(core$1.Button, { disabled: !day.available, onClick: () => onClick(day.date) }, day.date.getDate()))))))))))));
-    }
-    function getStartMonth() {
-        const result = new Date();
-        result.setDate(1);
-        result.setHours(0, 0, 0, 0);
-        return result;
-    }
-    function buildGrid(startDate, slots) {
-        const d = new Date(startDate.getFullYear(), startDate.getMonth());
-        const grid = [];
-        let row = [];
-        // Fill leading empty days
-        for (let i = 0; i < d.getDay(); i++) {
-            row.push(undefined);
-        }
-        while (d.getMonth() === startDate.getMonth()) {
-            row.push({
-                date: new Date(d.getTime()),
-                available: isDayAvailable(d, slots),
-            });
-            if (d.getDay() === 6) {
-                grid.push(row);
-                row = [];
-            }
-            d.setDate(d.getDate() + 1);
-        }
-        // Fill trailing empty days
-        if (d.getDay() !== 0) {
-            for (let i = d.getDay(); i < 7; i++) {
-                row.push(undefined);
-            }
-            grid.push(row);
-        }
-        return grid;
-    }
-    /**
-     * Returns true if the given date is available for booking.
-     * @param day The day to check.
-     * @param slots The list of available slots.
-     * @returns True if there are any available slots for the day.
-     */
-    function isDayAvailable(day, slots) {
-        // Note that slot start and end time may or may not be in UTC.
-        for (const slot of slots) {
-            const slotStart = new Date(slot.start);
-            if (slotStart.getFullYear() === day.getFullYear() &&
-                slotStart.getMonth() === day.getMonth() &&
-                slotStart.getDate() === day.getDate()) {
-                return true;
-            }
-        }
-        return false;
-    }
-
     const useStyles = core$1.createStyles((theme) => ({
         container: {
             display: 'flex',
@@ -5934,19 +5964,26 @@
 
     exports.AddressDisplay = AddressDisplay;
     exports.AddressInput = AddressInput;
+    exports.AnnotationInput = AnnotationInput;
     exports.AttachmentArrayDisplay = AttachmentArrayDisplay;
     exports.AttachmentArrayInput = AttachmentArrayInput;
     exports.AttachmentButton = AttachmentButton;
+    exports.AttachmentDisplay = AttachmentDisplay;
     exports.AttachmentInput = AttachmentInput;
+    exports.BackboneElementDisplay = BackboneElementDisplay;
     exports.BackboneElementInput = BackboneElementInput;
+    exports.CalendarInput = CalendarInput;
     exports.CheckboxFormSection = CheckboxFormSection;
     exports.CodeInput = CodeInput;
     exports.CodeableConceptDisplay = CodeableConceptDisplay;
     exports.CodeableConceptInput = CodeableConceptInput;
+    exports.CodingDisplay = CodingDisplay;
+    exports.CodingInput = CodingInput;
     exports.ContactDetailDisplay = ContactDetailDisplay;
     exports.ContactDetailInput = ContactDetailInput;
     exports.ContactPointDisplay = ContactPointDisplay;
     exports.ContactPointInput = ContactPointInput;
+    exports.Container = Container;
     exports.DateTimeInput = DateTimeInput;
     exports.DefaultResourceTimeline = DefaultResourceTimeline;
     exports.DescriptionList = DescriptionList;
@@ -5962,6 +5999,7 @@
     exports.FormSection = FormSection;
     exports.HumanNameDisplay = HumanNameDisplay;
     exports.HumanNameInput = HumanNameInput;
+    exports.IdentifierDisplay = IdentifierDisplay;
     exports.IdentifierInput = IdentifierInput;
     exports.Logo = Logo;
     exports.MedplumLink = MedplumLink;
@@ -5969,13 +6007,17 @@
     exports.MemoizedFhirPathTable = MemoizedFhirPathTable;
     exports.MemoizedSearchControl = MemoizedSearchControl;
     exports.ObservationTable = ObservationTable;
+    exports.Panel = Panel;
     exports.PatientTimeline = PatientTimeline;
     exports.PlanDefinitionBuilder = PlanDefinitionBuilder;
+    exports.QuantityDisplay = QuantityDisplay;
+    exports.QuantityInput = QuantityInput;
     exports.QuestionnaireBuilder = QuestionnaireBuilder;
     exports.QuestionnaireForm = QuestionnaireForm;
     exports.QuestionnaireFormItem = QuestionnaireFormItem;
     exports.RangeDisplay = RangeDisplay;
     exports.RangeInput = RangeInput;
+    exports.ReferenceDisplay = ReferenceDisplay;
     exports.ReferenceInput = ReferenceInput;
     exports.ReferenceRangeEditor = ReferenceRangeEditor;
     exports.ReferenceRangeGroupEditor = ReferenceRangeGroupEditor;
@@ -6007,6 +6049,7 @@
     exports.StatusBadge = StatusBadge;
     exports.Timeline = Timeline;
     exports.TimelineItem = TimelineItem;
+    exports.TimingInput = TimingInput;
     exports.addDateFilterBetween = addDateFilterBetween;
     exports.addField = addField;
     exports.addFilter = addFilter;
@@ -6027,10 +6070,12 @@
     exports.deleteFilter = deleteFilter;
     exports.getErrorsForInput = getErrorsForInput;
     exports.getIssuesForExpression = getIssuesForExpression;
+    exports.getMonthString = getMonthString;
     exports.getOpString = getOpString;
     exports.getRecaptcha = getRecaptcha;
     exports.getSearchOperators = getSearchOperators;
     exports.getSortField = getSortField;
+    exports.getStartMonth = getStartMonth;
     exports.getTimeString = getTimeString;
     exports.getValueAndType = getValueAndType;
     exports.initRecaptcha = initRecaptcha;