@medplum/react 0.10.1 → 1.0.0

package/dist/cjs/stories/DescriptionList.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/cjs/stories/PlanDefinitionBuilder.stories.d.ts

@@ -3,3 +3,5 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: () => JSX.Element;
+export declare const Covid19Eval: () => JSX.Element;
+export declare const Covid19PCRLabServiceStory: () => JSX.Element;

package/dist/cjs/stories/RequestGroupDisplay.stories.d.ts

@@ -3,3 +3,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Simple: () => JSX.Element;
+export declare const Covid19: () => JSX.Element;

package/dist/cjs/stories/ResourceTable.stories.d.ts

@@ -5,3 +5,7 @@ export default _default;
 export declare const Patient: () => JSX.Element;
 export declare const Observation: () => JSX.Element;
 export declare const ObservationIgnoreEmpty: () => JSX.Element;
+export declare const Covid19PCRTestActivity: () => JSX.Element;
+export declare const Covid19ReviewReportActivity: () => JSX.Element;
+export declare const Covid19SpecimenRequirement: () => JSX.Element;
+export declare const Covid19ObservationDefinition: () => JSX.Element;

package/dist/cjs/stories/covid19.d.ts

@@ -0,0 +1,15 @@
+import { ActivityDefinition, ObservationDefinition, PlanDefinition, Questionnaire, RequestGroup, ServiceRequest, SpecimenDefinition, Task } from '@medplum/fhirtypes';
+export declare const Covid19AssessmentQuestionnaire: Questionnaire;
+export declare const Covid19NasalSpecimen: SpecimenDefinition;
+export declare const Covid19PCRObservationDefinition: ObservationDefinition;
+export declare const Covid19PCRTest: ActivityDefinition;
+export declare const Covid19ReviewReport: ActivityDefinition;
+export declare const Covid19CarePlanDefinition: PlanDefinition;
+export declare const Covid19PCRLabService: PlanDefinition;
+export declare const Covid19AssessmentTask: Task;
+export declare const Covid19InitialConsultTask: Task;
+export declare const Covid19PCRServiceRequest: ServiceRequest;
+export declare const Covid19PCRTask: Task;
+export declare const Covid19ReviewLabsTask: Task;
+export declare const Covid19FollowUpConsultTask: Task;
+export declare const Covid19RequestGroup: RequestGroup;

package/dist/esm/AttachmentArrayInput.js

@@ -24,7 +24,7 @@ function AttachmentArrayInput(props) {
             values.map((v, index) => (React.createElement("tr", { key: `${index}-${values.length}` },
                 React.createElement("td", null,
                     React.createElement(AttachmentDisplay, { value: v, maxWidth: 200 })),
-                React.createElement("td", { className: "medplum-right" },
+                React.createElement("td", null,
                     React.createElement(ActionIcon, { title: "Remove", size: "sm", onClick: (e) => {
                             killEvent(e);
                             const copy = values.slice();
@@ -34,7 +34,7 @@ function AttachmentArrayInput(props) {
                         React.createElement(IconCircleMinus, null)))))),
             React.createElement("tr", null,
                 React.createElement("td", null),
-                React.createElement("td", { className: "medplum-right" },
+                React.createElement("td", null,
                     React.createElement(AttachmentButton, { onUpload: (attachment) => {
                             setValuesWrapper([...valuesRef.current, attachment]);
                         } }, (props) => (React.createElement(ActionIcon, Object.assign({}, props, { title: "Add", size: "sm", color: "green" }),

package/dist/esm/AttachmentArrayInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentArrayInput.js","sources":["../../src/AttachmentArrayInput.tsx"],"sourcesContent":["import { ActionIcon } from '@mantine/core';\nimport { Attachment } from '@medplum/fhirtypes';\nimport { IconCircleMinus, IconCloudUpload } from '@tabler/icons';\nimport React, { useRef, useState } from 'react';\nimport { AttachmentButton } from './AttachmentButton';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentArrayInputProps {\n  name: string;\n  defaultValue?: Attachment[];\n  arrayElement?: boolean;\n  onChange?: (value: Attachment[]) => void;\n}\n\nexport function AttachmentArrayInput(props: AttachmentArrayInputProps): JSX.Element {\n  const [values, setValues] = useState<Attachment[]>(props.defaultValue ?? []);\n\n  const valuesRef = useRef<Attachment[]>();\n  valuesRef.current = values;\n\n  function setValuesWrapper(newValues: Attachment[]): void {\n    setValues(newValues);\n    if (props.onChange) {\n      props.onChange(newValues);\n    }\n  }\n\n  return (\n    <table style={{ width: '100%' }}>\n      <colgroup>\n        <col width=\"97%\" />\n        <col width=\"3%\" />\n      </colgroup>\n      <tbody>\n        {values.map((v: Attachment, index: number) => (\n          <tr key={`${index}-${values.length}`}>\n            <td>\n              <AttachmentDisplay value={v} maxWidth={200} />\n            </td>\n            <td className=\"medplum-right\">\n              <ActionIcon\n                title=\"Remove\"\n                size=\"sm\"\n                onClick={(e: React.MouseEvent) => {\n                  killEvent(e);\n                  const copy = values.slice();\n                  copy.splice(index, 1);\n                  setValuesWrapper(copy);\n                }}\n              >\n                <IconCircleMinus />\n              </ActionIcon>\n            </td>\n          </tr>\n        ))}\n        <tr>\n          <td></td>\n          <td className=\"medplum-right\">\n            <AttachmentButton\n              onUpload={(attachment: Attachment) => {\n                setValuesWrapper([...(valuesRef.current as Attachment[]), attachment]);\n              }}\n            >\n              {(props) => (\n                <ActionIcon {...props} title=\"Add\" size=\"sm\" color=\"green\">\n                  <IconCloudUpload size={16} />\n                </ActionIcon>\n              )}\n            </AttachmentButton>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AttachmentArrayInput.js","sources":["../../src/AttachmentArrayInput.tsx"],"sourcesContent":["import { ActionIcon } from '@mantine/core';\nimport { Attachment } from '@medplum/fhirtypes';\nimport { IconCircleMinus, IconCloudUpload } from '@tabler/icons';\nimport React, { useRef, useState } from 'react';\nimport { AttachmentButton } from './AttachmentButton';\nimport { AttachmentDisplay } from './AttachmentDisplay';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentArrayInputProps {\n  name: string;\n  defaultValue?: Attachment[];\n  arrayElement?: boolean;\n  onChange?: (value: Attachment[]) => void;\n}\n\nexport function AttachmentArrayInput(props: AttachmentArrayInputProps): JSX.Element {\n  const [values, setValues] = useState<Attachment[]>(props.defaultValue ?? []);\n\n  const valuesRef = useRef<Attachment[]>();\n  valuesRef.current = values;\n\n  function setValuesWrapper(newValues: Attachment[]): void {\n    setValues(newValues);\n    if (props.onChange) {\n      props.onChange(newValues);\n    }\n  }\n\n  return (\n    <table style={{ width: '100%' }}>\n      <colgroup>\n        <col width=\"97%\" />\n        <col width=\"3%\" />\n      </colgroup>\n      <tbody>\n        {values.map((v: Attachment, index: number) => (\n          <tr key={`${index}-${values.length}`}>\n            <td>\n              <AttachmentDisplay value={v} maxWidth={200} />\n            </td>\n            <td>\n              <ActionIcon\n                title=\"Remove\"\n                size=\"sm\"\n                onClick={(e: React.MouseEvent) => {\n                  killEvent(e);\n                  const copy = values.slice();\n                  copy.splice(index, 1);\n                  setValuesWrapper(copy);\n                }}\n              >\n                <IconCircleMinus />\n              </ActionIcon>\n            </td>\n          </tr>\n        ))}\n        <tr>\n          <td></td>\n          <td>\n            <AttachmentButton\n              onUpload={(attachment: Attachment) => {\n                setValuesWrapper([...(valuesRef.current as Attachment[]), attachment]);\n              }}\n            >\n              {(props) => (\n                <ActionIcon {...props} title=\"Add\" size=\"sm\" color=\"green\">\n                  <IconCloudUpload size={16} />\n                </ActionIcon>\n              )}\n            </AttachmentButton>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAeM,SAAU,oBAAoB,CAAC,KAAgC,EAAA;;AACnE,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAC,CAAC;AAE7E,IAAA,MAAM,SAAS,GAAG,MAAM,EAAgB,CAAC;AACzC,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAE3B,SAAS,gBAAgB,CAAC,SAAuB,EAAA;QAC/C,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,IAAI,KAAK,CAAC,QAAQ,EAAE;AAClB,YAAA,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAC3B,SAAA;KACF;IAED,QACE,+BAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA;AAC7B,QAAA,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA;YACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAG,CAAA;AACnB,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAA,CAAG,CACT;AACX,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;YACG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAa,EAAE,KAAa,MACvC,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,CAAG,EAAA,KAAK,IAAI,MAAM,CAAC,MAAM,CAAE,CAAA,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;oBACE,KAAC,CAAA,aAAA,CAAA,iBAAiB,EAAC,EAAA,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAA,CAAI,CAC3C;AACL,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,CAAC,CAAmB,KAAI;4BAC/B,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,4BAAA,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;AAC5B,4BAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;4BACtB,gBAAgB,CAAC,IAAI,CAAC,CAAC;yBACxB,EAAA;AAED,wBAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAG,IAAA,CAAA,CACR,CACV,CACF,CACN,CAAC;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;gBACE,KAAS,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAAA;AACT,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;AACE,oBAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,QAAQ,EAAE,CAAC,UAAsB,KAAI;4BACnC,gBAAgB,CAAC,CAAC,GAAI,SAAS,CAAC,OAAwB,EAAE,UAAU,CAAC,CAAC,CAAC;yBACxE,EAAA,EAEA,CAAC,KAAK,MACL,KAAC,CAAA,aAAA,CAAA,UAAU,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAA,CAAA;AACxD,wBAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CAClB,CACd,CACgB,CAChB,CACF,CACC,CACF,EACR;AACJ;;;;"}

package/dist/esm/AttachmentButton.d.ts

@@ -2,6 +2,8 @@ import { Attachment } from '@medplum/fhirtypes';
 import React from 'react';
 export interface AttachmentButtonProps {
     onUpload: (attachment: Attachment) => void;
+    onUploadStart?: () => void;
+    onUploadProgress?: (e: ProgressEvent) => void;
     children(props: {
         onClick(e: React.MouseEvent): void;
     }): React.ReactNode;

package/dist/esm/AttachmentButton.js

@@ -30,10 +30,13 @@ function AttachmentButton(props) {
         if (!fileName) {
             return;
         }
+        if (props.onUploadStart) {
+            props.onUploadStart();
+        }
         const filename = file.name;
         const contentType = file.type || 'application/octet-stream';
         medplum
-            .createBinary(file, filename, contentType)
+            .createBinary(file, filename, contentType, props.onUploadProgress)
             .then((binary) => {
             props.onUpload({
                 contentType: binary.contentType,

package/dist/esm/AttachmentButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentButton.js","sources":["../../src/AttachmentButton.tsx"],"sourcesContent":["import { Attachment, Binary, OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useRef } from 'react';\nimport { useMedplum } from './MedplumProvider';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentButtonProps {\n  onUpload: (attachment: Attachment) => void;\n  children(props: { onClick(e: React.MouseEvent): void }): React.ReactNode;\n}\n\nexport function AttachmentButton(props: AttachmentButtonProps): JSX.Element {\n  const medplum = useMedplum();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  function onClick(e: React.MouseEvent): void {\n    killEvent(e);\n    fileInputRef.current?.click();\n  }\n\n  function onFileChange(e: React.ChangeEvent): void {\n    killEvent(e);\n    const files = (e.target as HTMLInputElement).files;\n    if (files) {\n      Array.from(files).forEach(processFile);\n    }\n  }\n\n  /**\n   * Processes a single file.\n   *\n   * @param {File} file The file descriptor.\n   */\n  function processFile(file: File): void {\n    if (!file) {\n      return;\n    }\n\n    const fileName = file.name;\n    if (!fileName) {\n      return;\n    }\n\n    const filename = file.name;\n    const contentType = file.type || 'application/octet-stream';\n    medplum\n      .createBinary(file, filename, contentType)\n      .then((binary: Binary) => {\n        props.onUpload({\n          contentType: binary.contentType,\n          url: binary.url,\n          title: filename,\n        });\n      })\n      .catch((outcome: OperationOutcome) => {\n        alert(outcome?.issue?.[0]?.details?.text);\n      });\n  }\n\n  return (\n    <>\n      <input\n        type=\"file\"\n        data-testid=\"upload-file-input\"\n        style={{ display: 'none' }}\n        ref={fileInputRef}\n        onChange={(e) => onFileChange(e)}\n      />\n      {props.children({ onClick })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAUM,SAAU,gBAAgB,CAAC,KAA4B,EAAA;AAC3D,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,SAAS,OAAO,CAAC,CAAmB,EAAA;;QAClC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;KAC/B;IAED,SAAS,YAAY,CAAC,CAAoB,EAAA;QACxC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;AACnD,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACxC,SAAA;KACF;AAED;;;;AAIG;IACH,SAAS,WAAW,CAAC,IAAU,EAAA;QAC7B,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;AACR,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;AACR,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;AAC3B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,0BAA0B,CAAC;QAC5D,OAAO;AACJ,aAAA,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC;AACzC,aAAA,IAAI,CAAC,CAAC,MAAc,KAAI;YACvB,KAAK,CAAC,QAAQ,CAAC;gBACb,WAAW,EAAE,MAAM,CAAC,WAAW;gBAC/B,GAAG,EAAE,MAAM,CAAC,GAAG;AACf,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;AACD,aAAA,KAAK,CAAC,CAAC,OAAyB,KAAI;;AACnC,YAAA,KAAK,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC;AAC5C,SAAC,CAAC,CAAC;KACN;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EAAA,aAAA,EACC,mBAAmB,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAChC,CAAA;QACD,KAAK,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAC3B,EACH;AACJ;;;;"}
+{"version":3,"file":"AttachmentButton.js","sources":["../../src/AttachmentButton.tsx"],"sourcesContent":["import { Attachment, Binary, OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useRef } from 'react';\nimport { useMedplum } from './MedplumProvider';\nimport { killEvent } from './utils/dom';\n\nexport interface AttachmentButtonProps {\n  onUpload: (attachment: Attachment) => void;\n  onUploadStart?: () => void;\n  onUploadProgress?: (e: ProgressEvent) => void;\n  children(props: { onClick(e: React.MouseEvent): void }): React.ReactNode;\n}\n\nexport function AttachmentButton(props: AttachmentButtonProps): JSX.Element {\n  const medplum = useMedplum();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  function onClick(e: React.MouseEvent): void {\n    killEvent(e);\n    fileInputRef.current?.click();\n  }\n\n  function onFileChange(e: React.ChangeEvent): void {\n    killEvent(e);\n    const files = (e.target as HTMLInputElement).files;\n    if (files) {\n      Array.from(files).forEach(processFile);\n    }\n  }\n\n  /**\n   * Processes a single file.\n   *\n   * @param {File} file The file descriptor.\n   */\n  function processFile(file: File): void {\n    if (!file) {\n      return;\n    }\n\n    const fileName = file.name;\n    if (!fileName) {\n      return;\n    }\n\n    if (props.onUploadStart) {\n      props.onUploadStart();\n    }\n\n    const filename = file.name;\n    const contentType = file.type || 'application/octet-stream';\n    medplum\n      .createBinary(file, filename, contentType, props.onUploadProgress)\n      .then((binary: Binary) => {\n        props.onUpload({\n          contentType: binary.contentType,\n          url: binary.url,\n          title: filename,\n        });\n      })\n      .catch((outcome: OperationOutcome) => {\n        alert(outcome?.issue?.[0]?.details?.text);\n      });\n  }\n\n  return (\n    <>\n      <input\n        type=\"file\"\n        data-testid=\"upload-file-input\"\n        style={{ display: 'none' }}\n        ref={fileInputRef}\n        onChange={(e) => onFileChange(e)}\n      />\n      {props.children({ onClick })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAYM,SAAU,gBAAgB,CAAC,KAA4B,EAAA;AAC3D,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,SAAS,OAAO,CAAC,CAAmB,EAAA;;QAClC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,EAAE,CAAC;KAC/B;IAED,SAAS,YAAY,CAAC,CAAoB,EAAA;QACxC,SAAS,CAAC,CAAC,CAAC,CAAC;AACb,QAAA,MAAM,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;AACnD,QAAA,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;AACxC,SAAA;KACF;AAED;;;;AAIG;IACH,SAAS,WAAW,CAAC,IAAU,EAAA;QAC7B,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;AACR,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;AACR,SAAA;QAED,IAAI,KAAK,CAAC,aAAa,EAAE;YACvB,KAAK,CAAC,aAAa,EAAE,CAAC;AACvB,SAAA;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;AAC3B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,IAAI,0BAA0B,CAAC;QAC5D,OAAO;aACJ,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC;AACjE,aAAA,IAAI,CAAC,CAAC,MAAc,KAAI;YACvB,KAAK,CAAC,QAAQ,CAAC;gBACb,WAAW,EAAE,MAAM,CAAC,WAAW;gBAC/B,GAAG,EAAE,MAAM,CAAC,GAAG;AACf,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA,CAAC,CAAC;AACL,SAAC,CAAC;AACD,aAAA,KAAK,CAAC,CAAC,OAAyB,KAAI;;AACnC,YAAA,KAAK,CAAC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC;AAC5C,SAAC,CAAC,CAAC;KACN;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EAAA,aAAA,EACC,mBAAmB,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,EAChC,CAAA;QACD,KAAK,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAC3B,EACH;AACJ;;;;"}

package/dist/esm/BackboneElementInput.js

@@ -1,3 +1,4 @@
+import { Stack } from '@mantine/core';
 import { globalSchema, getPropertyDisplayName } from '@medplum/core';
 import React, { useState } from 'react';
 import { CheckboxFormSection } from './CheckboxFormSection.js';
@@ -24,7 +25,7 @@ function BackboneElementInput(props) {
             "\u00A0not implemented");
     }
     const typedValue = { type: typeName, value };
-    return (React.createElement(React.Fragment, null, Object.entries(typeSchema.properties).map((entry) => {
+    return (React.createElement(Stack, null, Object.entries(typeSchema.properties).map((entry) => {
         const key = entry[0];
         if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {
             return null;

package/dist/esm/BackboneElementInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackboneElementInput.js","sources":["../../src/BackboneElementInput.tsx"],"sourcesContent":["import { getPropertyDisplayName, globalSchema } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { CheckboxFormSection } from './CheckboxFormSection';\nimport { DEFAULT_IGNORED_PROPERTIES } from './constants';\nimport { FormSection } from './FormSection';\nimport { setPropertyValue } from './ResourceForm';\nimport { getValueAndType } from './ResourcePropertyDisplay';\nimport { ResourcePropertyInput } from './ResourcePropertyInput';\n\nexport interface BackboneElementInputProps {\n  typeName: string;\n  defaultValue?: any;\n  outcome?: OperationOutcome;\n  onChange?: (value: any) => void;\n}\n\nexport function BackboneElementInput(props: BackboneElementInputProps): JSX.Element {\n  const [value, setValue] = useState<any>(props.defaultValue ?? {});\n\n  function setValueWrapper(newValue: any): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  const typeName = props.typeName;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  const typedValue = { type: typeName, value };\n\n  return (\n    <>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        if (!property.type) {\n          return null;\n        }\n\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n\n        if (property.type.length === 1 && property.type[0].code === 'boolean') {\n          return (\n            <CheckboxFormSection\n              key={key}\n              title={getPropertyDisplayName(key)}\n              description={property.definition}\n              htmlFor={key}\n            >\n              <ResourcePropertyInput\n                property={property}\n                name={key}\n                defaultValue={propertyValue}\n                defaultPropertyType={propertyType}\n                outcome={props.outcome}\n                onChange={(newValue: any, propName?: string) => {\n                  setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n                }}\n              />\n            </CheckboxFormSection>\n          );\n        }\n\n        return (\n          <FormSection\n            key={key}\n            title={getPropertyDisplayName(key)}\n            description={property.definition}\n            htmlFor={key}\n            outcome={props.outcome}\n          >\n            <ResourcePropertyInput\n              property={property}\n              name={key}\n              defaultValue={propertyValue}\n              defaultPropertyType={propertyType}\n              outcome={props.outcome}\n              onChange={(newValue: any, propName?: string) => {\n                setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n              }}\n            />\n          </FormSection>\n        );\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BackboneElementInput.js","sources":["../../src/BackboneElementInput.tsx"],"sourcesContent":["import { Stack } from '@mantine/core';\nimport { getPropertyDisplayName, globalSchema } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { CheckboxFormSection } from './CheckboxFormSection';\nimport { DEFAULT_IGNORED_PROPERTIES } from './constants';\nimport { FormSection } from './FormSection';\nimport { setPropertyValue } from './ResourceForm';\nimport { getValueAndType } from './ResourcePropertyDisplay';\nimport { ResourcePropertyInput } from './ResourcePropertyInput';\n\nexport interface BackboneElementInputProps {\n  typeName: string;\n  defaultValue?: any;\n  outcome?: OperationOutcome;\n  onChange?: (value: any) => void;\n}\n\nexport function BackboneElementInput(props: BackboneElementInputProps): JSX.Element {\n  const [value, setValue] = useState<any>(props.defaultValue ?? {});\n\n  function setValueWrapper(newValue: any): void {\n    setValue(newValue);\n    if (props.onChange) {\n      props.onChange(newValue);\n    }\n  }\n\n  const typeName = props.typeName;\n  const typeSchema = globalSchema.types[typeName];\n  if (!typeSchema) {\n    return <div>{typeName}&nbsp;not implemented</div>;\n  }\n\n  const typedValue = { type: typeName, value };\n\n  return (\n    <Stack>\n      {Object.entries(typeSchema.properties).map((entry) => {\n        const key = entry[0];\n        if (key === 'id' || DEFAULT_IGNORED_PROPERTIES.indexOf(key) >= 0) {\n          return null;\n        }\n        const property = entry[1];\n        if (!property.type) {\n          return null;\n        }\n\n        const [propertyValue, propertyType] = getValueAndType(typedValue, key);\n\n        if (property.type.length === 1 && property.type[0].code === 'boolean') {\n          return (\n            <CheckboxFormSection\n              key={key}\n              title={getPropertyDisplayName(key)}\n              description={property.definition}\n              htmlFor={key}\n            >\n              <ResourcePropertyInput\n                property={property}\n                name={key}\n                defaultValue={propertyValue}\n                defaultPropertyType={propertyType}\n                outcome={props.outcome}\n                onChange={(newValue: any, propName?: string) => {\n                  setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n                }}\n              />\n            </CheckboxFormSection>\n          );\n        }\n\n        return (\n          <FormSection\n            key={key}\n            title={getPropertyDisplayName(key)}\n            description={property.definition}\n            htmlFor={key}\n            outcome={props.outcome}\n          >\n            <ResourcePropertyInput\n              property={property}\n              name={key}\n              defaultValue={propertyValue}\n              defaultPropertyType={propertyType}\n              outcome={props.outcome}\n              onChange={(newValue: any, propName?: string) => {\n                setValueWrapper(setPropertyValue(value, key, propName ?? key, entry[1], newValue));\n              }}\n            />\n          </FormSection>\n        );\n      })}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/CalendarInput.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { Slot } from '@medplum/fhirtypes';
-import './CalendarInput.css';
 export interface CalendarInputProps {
     slots: Slot[];
     onChangeMonth: (date: Date) => void;

package/dist/esm/CalendarInput.js

@@ -1,6 +1,42 @@
-import { Group, Button } from '@mantine/core';
+import { createStyles, Group, Button } from '@mantine/core';
 import React, { useState, useMemo } from 'react';
 
+const useStyles = 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.
@@ -10,6 +46,7 @@ function getMonthString(date) {
     return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
 }
 function CalendarInput(props) {
+    const { classes } = useStyles();
     const { onChangeMonth, onClick } = props;
     const [month, setMonth] = useState(getStartMonth);
     function moveMonth(delta) {
@@ -27,7 +64,7 @@ function CalendarInput(props) {
             React.createElement(Group, { position: "right", spacing: "xs" },
                 React.createElement(Button, { variant: "outline", "aria-label": "Previous month", onClick: () => moveMonth(-1) }, "<"),
                 React.createElement(Button, { variant: "outline", "aria-label": "Next month", onClick: () => moveMonth(1) }, ">"))),
-        React.createElement("table", { className: "medplum-calendar-table" },
+        React.createElement("table", { className: classes.table },
             React.createElement("thead", null,
                 React.createElement("tr", null,
                     React.createElement("th", null, "SUN"),

package/dist/esm/CalendarInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarInput.js","sources":["../../src/CalendarInput.tsx"],"sourcesContent":["import { Button, Group } from '@mantine/core';\nimport { Slot } from '@medplum/fhirtypes';\nimport React, { useMemo, useState } from 'react';\n\nimport './CalendarInput.css';\n\nexport interface CalendarInputProps {\n  slots: Slot[];\n  onChangeMonth: (date: Date) => void;\n  onClick: (date: Date) => void;\n}\n\n/**\n * Returns a month display string (e.g. \"January 2020\").\n * @param date Any date within the month.\n * @returns The month display string (e.g. \"January 2020\")\n */\nexport function getMonthString(date: Date): string {\n  return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();\n}\n\ninterface CalendarCell {\n  date: Date;\n  available: boolean;\n}\n\ntype OptionalCalendarCell = CalendarCell | undefined;\n\nexport function CalendarInput(props: CalendarInputProps): JSX.Element {\n  const { onChangeMonth, onClick } = props;\n  const [month, setMonth] = useState<Date>(getStartMonth);\n\n  function moveMonth(delta: number): void {\n    setMonth((currMonth) => {\n      const newMonth = new Date(currMonth.getTime());\n      newMonth.setMonth(currMonth.getMonth() + delta);\n      onChangeMonth(newMonth);\n      return newMonth;\n    });\n  }\n\n  const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);\n\n  return (\n    <div>\n      <Group position=\"apart\" spacing=\"xs\" grow noWrap>\n        <p style={{ flex: 1 }}>{getMonthString(month)}</p>\n        <Group position=\"right\" spacing=\"xs\">\n          <Button variant=\"outline\" aria-label=\"Previous month\" onClick={() => moveMonth(-1)}>\n            &lt;\n          </Button>\n          <Button variant=\"outline\" aria-label=\"Next month\" onClick={() => moveMonth(1)}>\n            &gt;\n          </Button>\n        </Group>\n      </Group>\n      <table className=\"medplum-calendar-table\">\n        <thead>\n          <tr>\n            <th>SUN</th>\n            <th>MON</th>\n            <th>TUE</th>\n            <th>WED</th>\n            <th>THU</th>\n            <th>FRI</th>\n            <th>SAT</th>\n          </tr>\n        </thead>\n        <tbody>\n          {grid.map((week, weekIndex) => (\n            <tr key={'week-' + weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={'day-' + dayIndex}>\n                  {day && (\n                    <Button disabled={!day.available} onClick={() => onClick(day.date)}>\n                      {day.date.getDate()}\n                    </Button>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport function getStartMonth(): Date {\n  const result = new Date();\n  result.setDate(1);\n  result.setHours(0, 0, 0, 0);\n  return result;\n}\n\nfunction buildGrid(startDate: Date, slots: Slot[]): OptionalCalendarCell[][] {\n  const d = new Date(startDate.getFullYear(), startDate.getMonth());\n  const grid: OptionalCalendarCell[][] = [];\n  let row: OptionalCalendarCell[] = [];\n\n  // Fill leading empty days\n  for (let i = 0; i < d.getDay(); i++) {\n    row.push(undefined);\n  }\n\n  while (d.getMonth() === startDate.getMonth()) {\n    row.push({\n      date: new Date(d.getTime()),\n      available: isDayAvailable(d, slots),\n    });\n\n    if (d.getDay() === 6) {\n      grid.push(row);\n      row = [];\n    }\n\n    d.setDate(d.getDate() + 1);\n  }\n\n  // Fill trailing empty days\n  if (d.getDay() !== 0) {\n    for (let i = d.getDay(); i < 7; i++) {\n      row.push(undefined);\n    }\n    grid.push(row);\n  }\n\n  return grid;\n}\n\n/**\n * Returns true if the given date is available for booking.\n * @param day The day to check.\n * @param slots The list of available slots.\n * @returns True if there are any available slots for the day.\n */\nfunction isDayAvailable(day: Date, slots: Slot[]): boolean {\n  // Note that slot start and end time may or may not be in UTC.\n  for (const slot of slots) {\n    const slotStart = new Date(slot.start as string);\n    if (\n      slotStart.getFullYear() === day.getFullYear() &&\n      slotStart.getMonth() === day.getMonth() &&\n      slotStart.getDate() === day.getDate()\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarInput.js","sources":["../../src/CalendarInput.tsx"],"sourcesContent":["import { Button, createStyles, Group } from '@mantine/core';\nimport { Slot } from '@medplum/fhirtypes';\nimport React, { useMemo, useState } from 'react';\n\nconst useStyles = createStyles((theme) => ({\n  table: {\n    width: 350,\n\n    '& th': {\n      fontWeight: 'normal',\n      fontSize: 11,\n      padding: 8,\n      textAlign: 'center',\n    },\n\n    '& td': {\n      padding: '2px 4px',\n    },\n\n    '& td button': {\n      width: 44,\n      height: 44,\n      color: theme.colors[theme.primaryColor][5],\n      fontSize: 16,\n      fontWeight: 500,\n      textAlign: 'center',\n      padding: 0,\n      backgroundColor: theme.colors[theme.primaryColor][0],\n      border: 0,\n      borderRadius: '50%',\n      cursor: 'pointer',\n    },\n\n    '& td button:hover': {\n      backgroundColor: theme.colors[theme.primaryColor][1],\n    },\n\n    '& td button:disabled': {\n      backgroundColor: 'transparent',\n      cursor: 'default',\n      color: theme.colors.gray[4],\n      fontWeight: 'normal',\n    },\n  },\n}));\n\nexport interface CalendarInputProps {\n  slots: Slot[];\n  onChangeMonth: (date: Date) => void;\n  onClick: (date: Date) => void;\n}\n\n/**\n * Returns a month display string (e.g. \"January 2020\").\n * @param date Any date within the month.\n * @returns The month display string (e.g. \"January 2020\")\n */\nexport function getMonthString(date: Date): string {\n  return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();\n}\n\ninterface CalendarCell {\n  date: Date;\n  available: boolean;\n}\n\ntype OptionalCalendarCell = CalendarCell | undefined;\n\nexport function CalendarInput(props: CalendarInputProps): JSX.Element {\n  const { classes } = useStyles();\n  const { onChangeMonth, onClick } = props;\n  const [month, setMonth] = useState<Date>(getStartMonth);\n\n  function moveMonth(delta: number): void {\n    setMonth((currMonth) => {\n      const newMonth = new Date(currMonth.getTime());\n      newMonth.setMonth(currMonth.getMonth() + delta);\n      onChangeMonth(newMonth);\n      return newMonth;\n    });\n  }\n\n  const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);\n\n  return (\n    <div>\n      <Group position=\"apart\" spacing=\"xs\" grow noWrap>\n        <p style={{ flex: 1 }}>{getMonthString(month)}</p>\n        <Group position=\"right\" spacing=\"xs\">\n          <Button variant=\"outline\" aria-label=\"Previous month\" onClick={() => moveMonth(-1)}>\n            &lt;\n          </Button>\n          <Button variant=\"outline\" aria-label=\"Next month\" onClick={() => moveMonth(1)}>\n            &gt;\n          </Button>\n        </Group>\n      </Group>\n      <table className={classes.table}>\n        <thead>\n          <tr>\n            <th>SUN</th>\n            <th>MON</th>\n            <th>TUE</th>\n            <th>WED</th>\n            <th>THU</th>\n            <th>FRI</th>\n            <th>SAT</th>\n          </tr>\n        </thead>\n        <tbody>\n          {grid.map((week, weekIndex) => (\n            <tr key={'week-' + weekIndex}>\n              {week.map((day, dayIndex) => (\n                <td key={'day-' + dayIndex}>\n                  {day && (\n                    <Button disabled={!day.available} onClick={() => onClick(day.date)}>\n                      {day.date.getDate()}\n                    </Button>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport function getStartMonth(): Date {\n  const result = new Date();\n  result.setDate(1);\n  result.setHours(0, 0, 0, 0);\n  return result;\n}\n\nfunction buildGrid(startDate: Date, slots: Slot[]): OptionalCalendarCell[][] {\n  const d = new Date(startDate.getFullYear(), startDate.getMonth());\n  const grid: OptionalCalendarCell[][] = [];\n  let row: OptionalCalendarCell[] = [];\n\n  // Fill leading empty days\n  for (let i = 0; i < d.getDay(); i++) {\n    row.push(undefined);\n  }\n\n  while (d.getMonth() === startDate.getMonth()) {\n    row.push({\n      date: new Date(d.getTime()),\n      available: isDayAvailable(d, slots),\n    });\n\n    if (d.getDay() === 6) {\n      grid.push(row);\n      row = [];\n    }\n\n    d.setDate(d.getDate() + 1);\n  }\n\n  // Fill trailing empty days\n  if (d.getDay() !== 0) {\n    for (let i = d.getDay(); i < 7; i++) {\n      row.push(undefined);\n    }\n    grid.push(row);\n  }\n\n  return grid;\n}\n\n/**\n * Returns true if the given date is available for booking.\n * @param day The day to check.\n * @param slots The list of available slots.\n * @returns True if there are any available slots for the day.\n */\nfunction isDayAvailable(day: Date, slots: Slot[]): boolean {\n  // Note that slot start and end time may or may not be in UTC.\n  for (const slot of slots) {\n    const slotStart = new Date(slot.start as string);\n    if (\n      slotStart.getFullYear() === day.getFullYear() &&\n      slotStart.getMonth() === day.getMonth() &&\n      slotStart.getDate() === day.getDate()\n    ) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/CheckboxFormSection.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './CheckboxFormSection.css';
 export interface CheckboxFormSectionProps {
     htmlFor?: string;
     title?: string;

package/dist/esm/CheckboxFormSection.js

@@ -1,11 +1,11 @@
+import { Group, Input } from '@mantine/core';
 import React from 'react';
 
 function CheckboxFormSection(props) {
-    return (React.createElement("div", { className: "medplum-checkbox-form-section" },
-        React.createElement("div", { className: "medplum-checkbox-form-section-checkbox-container" }, props.children),
-        React.createElement("div", { className: "medplum-checkbox-form-section-details-container" },
-            React.createElement("label", { htmlFor: props.htmlFor }, props.title),
-            React.createElement("p", null, props.description))));
+    return (React.createElement(Group, { noWrap: true },
+        React.createElement("div", null, props.children),
+        React.createElement("div", null,
+            React.createElement(Input.Wrapper, { id: props.htmlFor, label: props.title, description: props.description }, (() => null)()))));
 }
 
 export { CheckboxFormSection };

package/dist/esm/CheckboxFormSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFormSection.js","sources":["../../src/CheckboxFormSection.tsx"],"sourcesContent":["import React from 'react';\nimport './CheckboxFormSection.css';\n\nexport interface CheckboxFormSectionProps {\n  htmlFor?: string;\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n}\n\nexport function CheckboxFormSection(props: CheckboxFormSectionProps): JSX.Element {\n  return (\n    <div className=\"medplum-checkbox-form-section\">\n      <div className=\"medplum-checkbox-form-section-checkbox-container\">{props.children}</div>\n      <div className=\"medplum-checkbox-form-section-details-container\">\n        <label htmlFor={props.htmlFor}>{props.title}</label>\n        <p>{props.description}</p>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAUM,SAAU,mBAAmB,CAAC,KAA+B,EAAA;AACjE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,IAAE,KAAK,CAAC,QAAQ,CAAO;QACxF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iDAAiD,EAAA;YAC9D,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,OAAO,EAAE,KAAK,CAAC,OAAO,EAAG,EAAA,KAAK,CAAC,KAAK,CAAS;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAI,KAAK,CAAC,WAAW,CAAK,CACtB,CACF,EACN;AACJ;;;;"}
+{"version":3,"file":"CheckboxFormSection.js","sources":["../../src/CheckboxFormSection.tsx"],"sourcesContent":["import { Group, Input } from '@mantine/core';\nimport React from 'react';\n\nexport interface CheckboxFormSectionProps {\n  htmlFor?: string;\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n}\n\nexport function CheckboxFormSection(props: CheckboxFormSectionProps): JSX.Element {\n  return (\n    <Group noWrap>\n      <div>{props.children}</div>\n      <div>\n        <Input.Wrapper id={props.htmlFor} label={props.title} description={props.description}>\n          {(() => null)()}\n        </Input.Wrapper>\n      </div>\n    </Group>\n  );\n}\n"],"names":[],"mappings":";;;AAUM,SAAU,mBAAmB,CAAC,KAA+B,EAAA;AACjE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,MAAM,EAAA,IAAA,EAAA;QACX,KAAM,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,KAAK,CAAC,QAAQ,CAAO;AAC3B,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAO,EAAA,EAAC,EAAE,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAA,EACjF,CAAC,MAAM,IAAI,GAAG,CACD,CACZ,CACA,EACR;AACJ;;;;"}

package/dist/esm/DescriptionList.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './DescriptionList.css';
 export interface DescriptionListProps {
     children: React.ReactNode;
     compact?: boolean;

package/dist/esm/DescriptionList.js

@@ -1,7 +1,29 @@
+import { createStyles } from '@mantine/core';
 import React from 'react';
 
+const useStyles = createStyles((theme) => ({
+    root: {
+        display: 'grid',
+        gridTemplateColumns: '30% 70%',
+        margin: 0,
+        '& > dt, & > dd': {
+            padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,
+            borderTop: `0.1px solid ${theme.colors.gray[3]}`,
+            margin: 0,
+        },
+    },
+    compact: {
+        gridTemplateColumns: '20% 80%',
+        '& > dt, & > dd': {
+            padding: `0 ${theme.spacing.xs}px ${theme.spacing.xs}px 0`,
+            border: 0,
+        },
+    },
+}));
 function DescriptionList(props) {
-    return React.createElement("dl", { className: 'medplum-description-list' + (props.compact ? ' compact' : '') }, props.children);
+    const { children, compact } = props;
+    const { classes, cx } = useStyles();
+    return React.createElement("dl", { className: cx(classes.root, { [classes.compact]: compact }) }, children);
 }
 function DescriptionListEntry(props) {
     return (React.createElement(React.Fragment, null,

package/dist/esm/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../../src/DescriptionList.tsx"],"sourcesContent":["import React from 'react';\nimport './DescriptionList.css';\n\nexport interface DescriptionListProps {\n  children: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  return <dl className={'medplum-description-list' + (props.compact ? ' compact' : '')}>{props.children}</dl>;\n}\n\nexport interface DescriptionListEntryProps {\n  term: string;\n  children: React.ReactNode;\n}\n\nexport function DescriptionListEntry(props: DescriptionListEntryProps): JSX.Element {\n  return (\n    <>\n      <dt>{props.term}</dt>\n      <dd>{props.children}</dd>\n    </>\n  );\n}\n"],"names":[],"mappings":";;AAQM,SAAU,eAAe,CAAC,KAA2B,EAAA;IACzD,OAAO,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,0BAA0B,IAAI,KAAK,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAM,CAAC;AAC9G,CAAC;AAOK,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAK,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,KAAK,CAAC,IAAI,CAAM;AACrB,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAK,KAAK,CAAC,QAAQ,CAAM,CACxB,EACH;AACJ;;;;"}
+{"version":3,"file":"DescriptionList.js","sources":["../../src/DescriptionList.tsx"],"sourcesContent":["import { createStyles } from '@mantine/core';\nimport React from 'react';\n\nconst useStyles = createStyles((theme) => ({\n  root: {\n    display: 'grid',\n    gridTemplateColumns: '30% 70%',\n    margin: 0,\n\n    '& > dt, & > dd': {\n      padding: `${theme.spacing.sm}px ${theme.spacing.sm}px`,\n      borderTop: `0.1px solid ${theme.colors.gray[3]}`,\n      margin: 0,\n    },\n  },\n\n  compact: {\n    gridTemplateColumns: '20% 80%',\n\n    '& > dt, & > dd': {\n      padding: `0 ${theme.spacing.xs}px ${theme.spacing.xs}px 0`,\n      border: 0,\n    },\n  },\n}));\n\nexport interface DescriptionListProps {\n  children: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function DescriptionList(props: DescriptionListProps): JSX.Element {\n  const { children, compact } = props;\n  const { classes, cx } = useStyles();\n  return <dl className={cx(classes.root, { [classes.compact]: compact })}>{children}</dl>;\n}\n\nexport interface DescriptionListEntryProps {\n  term: string;\n  children: React.ReactNode;\n}\n\nexport function DescriptionListEntry(props: DescriptionListEntryProps): JSX.Element {\n  return (\n    <>\n      <dt>{props.term}</dt>\n      <dd>{props.children}</dd>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,KAAK,MAAM;AACzC,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,mBAAmB,EAAE,SAAS;AAC9B,QAAA,MAAM,EAAE,CAAC;AAET,QAAA,gBAAgB,EAAE;AAChB,YAAA,OAAO,EAAE,CAAA,EAAG,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,GAAA,EAAM,KAAK,CAAC,OAAO,CAAC,EAAE,CAAI,EAAA,CAAA;YACtD,SAAS,EAAE,CAAe,YAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAE,CAAA;AAChD,YAAA,MAAM,EAAE,CAAC;AACV,SAAA;AACF,KAAA;AAED,IAAA,OAAO,EAAE;AACP,QAAA,mBAAmB,EAAE,SAAS;AAE9B,QAAA,gBAAgB,EAAE;AAChB,YAAA,OAAO,EAAE,CAAA,EAAA,EAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,GAAA,EAAM,KAAK,CAAC,OAAO,CAAC,EAAE,CAAM,IAAA,CAAA;AAC1D,YAAA,MAAM,EAAE,CAAC;AACV,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAOE,SAAU,eAAe,CAAC,KAA2B,EAAA;AACzD,IAAA,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,EAAE,CAAC;IACpC,OAAO,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC,EAAA,EAAG,QAAQ,CAAM,CAAC;AAC1F,CAAC;AAOK,SAAU,oBAAoB,CAAC,KAAgC,EAAA;AACnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAK,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,KAAK,CAAC,IAAI,CAAM;AACrB,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAK,KAAK,CAAC,QAAQ,CAAM,CACxB,EACH;AACJ;;;;"}

package/dist/esm/DiagnosticReportDisplay.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { DiagnosticReport, Observation, Reference } from '@medplum/fhirtypes';
-import './DiagnosticReportDisplay.css';
 export interface DiagnosticReportDisplayProps {
     value?: DiagnosticReport | Reference<DiagnosticReport>;
 }

package/dist/esm/DiagnosticReportDisplay.js

@@ -1,3 +1,4 @@
+import { createStyles, Stack, Title, Group, Text } from '@mantine/core';
 import { formatDateTime, capitalize } from '@medplum/core';
 import React from 'react';
 import { CodeableConceptDisplay } from './CodeableConceptDisplay.js';
@@ -6,8 +7,26 @@ import { QuantityDisplay } from './QuantityDisplay.js';
 import { RangeDisplay } from './RangeDisplay.js';
 import { ResourceBadge } from './ResourceBadge.js';
 import { useResource } from './useResource.js';
-import { Table } from '@mantine/core';
 
+const useStyles = createStyles((theme) => ({
+    table: {
+        border: `0.1px solid ${theme.colors.gray[5]}`,
+        borderCollapse: 'collapse',
+        '& td, & th': {
+            border: `0.1px solid ${theme.colors.gray[5]}`,
+            padding: 4,
+        },
+    },
+    criticalRow: {
+        background: theme.colorScheme === 'dark' ? theme.colors.red[7] : theme.colors.red[1],
+        border: `0.1px solid ${theme.colors.red[5]}`,
+        color: theme.colors.red[5],
+        fontWeight: 500,
+        '& td': {
+            border: `0.1px solid ${theme.colors.red[5]}`,
+        },
+    },
+}));
 function DiagnosticReportDisplay(props) {
     var _a, _b;
     const diagnosticReport = useResource(props.value);
@@ -27,30 +46,31 @@ function DiagnosticReportDisplay(props) {
             textContent += note.text + '\n\n';
         }
     }
-    return (React.createElement("div", { className: "medplum-diagnostic-report" },
-        React.createElement("h1", null, "Diagnostic Report"),
-        React.createElement("div", { className: "medplum-diagnostic-report-header" },
-            diagnosticReport.subject && (React.createElement("dl", null,
-                React.createElement("dt", null, "Subject"),
-                React.createElement("dd", null,
+    return (React.createElement(Stack, null,
+        React.createElement(Title, null, "Diagnostic Report"),
+        React.createElement(Group, { mt: "md", spacing: 30 },
+            diagnosticReport.subject && (React.createElement("div", null,
+                React.createElement(Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Subject"),
+                React.createElement(Text, null,
                     React.createElement(ResourceBadge, { value: diagnosticReport.subject, link: true })))),
             diagnosticReport.resultsInterpreter &&
-                diagnosticReport.resultsInterpreter.map((interpreter) => (React.createElement("dl", { key: interpreter.reference },
-                    React.createElement("dt", null, "Interpreter"),
-                    React.createElement("dd", null,
+                diagnosticReport.resultsInterpreter.map((interpreter) => (React.createElement("div", { key: interpreter.reference },
+                    React.createElement(Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Interpreter"),
+                    React.createElement(Text, null,
                         React.createElement(ResourceBadge, { value: interpreter, link: true }))))),
-            diagnosticReport.issued && (React.createElement("dl", null,
-                React.createElement("dt", null, "Issued"),
-                React.createElement("dd", null, formatDateTime(diagnosticReport.issued)))),
-            diagnosticReport.status && (React.createElement("dl", null,
-                React.createElement("dt", null, "Status"),
-                React.createElement("dd", null, capitalize(diagnosticReport.status))))),
+            diagnosticReport.issued && (React.createElement("div", null,
+                React.createElement(Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Issued"),
+                React.createElement(Text, null, formatDateTime(diagnosticReport.issued)))),
+            diagnosticReport.status && (React.createElement("div", null,
+                React.createElement(Text, { size: "xs", transform: "uppercase", color: "dimmed" }, "Status"),
+                React.createElement(Text, null, capitalize(diagnosticReport.status))))),
         diagnosticReport.result && React.createElement(ObservationTable, { value: diagnosticReport.result }),
         textContent && React.createElement("pre", null, textContent.trim())));
 }
 function ObservationTable(props) {
     var _a;
-    return (React.createElement(Table, { withBorder: true, withColumnBorders: true },
+    const { classes } = useStyles();
+    return (React.createElement("table", { className: classes.table },
         React.createElement("thead", null,
             React.createElement("tr", null,
                 React.createElement("th", null, "Test"),
@@ -60,15 +80,13 @@ function ObservationTable(props) {
         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();
     const observation = useResource(props.value);
     if (!observation) {
         return null;
     }
-    let className = undefined;
-    if (isCritical(observation)) {
-        className = 'medplum-critical';
-    }
-    return (React.createElement("tr", { className: className },
+    const critical = isCritical(observation);
+    return (React.createElement("tr", { className: cx({ [classes.criticalRow]: critical }) },
         React.createElement("td", null,
             React.createElement(MedplumLink, { to: observation },
                 React.createElement(CodeableConceptDisplay, { value: observation.code }))),

package/dist/esm/DiagnosticReportDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../src/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { capitalize, formatDateTime } from '@medplum/core';\nimport {\n  DiagnosticReport,\n  Observation,\n  ObservationComponent,\n  ObservationReferenceRange,\n  Reference,\n} from '@medplum/fhirtypes';\nimport React from 'react';\nimport { CodeableConceptDisplay } from './CodeableConceptDisplay';\nimport { MedplumLink } from './MedplumLink';\nimport { QuantityDisplay } from './QuantityDisplay';\nimport { RangeDisplay } from './RangeDisplay';\nimport { ResourceBadge } from './ResourceBadge';\nimport { useResource } from './useResource';\n\nimport { Table } from '@mantine/core';\nimport './DiagnosticReportDisplay.css';\n\nexport interface DiagnosticReportDisplayProps {\n  value?: DiagnosticReport | Reference<DiagnosticReport>;\n}\n\nexport function DiagnosticReportDisplay(props: DiagnosticReportDisplayProps): JSX.Element | null {\n  const diagnosticReport = useResource(props.value);\n  const specimen = useResource(diagnosticReport?.specimen?.[0]);\n  if (!diagnosticReport) {\n    return null;\n  }\n\n  let textContent = '';\n\n  if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {\n    const pf = diagnosticReport.presentedForm[0];\n    if (pf.contentType?.startsWith('text/plain') && pf.data) {\n      textContent = window.atob(pf.data);\n    }\n  }\n\n  if (specimen?.note) {\n    for (const note of specimen.note) {\n      textContent += note.text + '\\n\\n';\n    }\n  }\n\n  return (\n    <div className=\"medplum-diagnostic-report\">\n      <h1>Diagnostic Report</h1>\n      <div className=\"medplum-diagnostic-report-header\">\n        {diagnosticReport.subject && (\n          <dl>\n            <dt>Subject</dt>\n            <dd>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </dd>\n          </dl>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <dl key={interpreter.reference}>\n              <dt>Interpreter</dt>\n              <dd>\n                <ResourceBadge value={interpreter} link={true} />\n              </dd>\n            </dl>\n          ))}\n        {diagnosticReport.issued && (\n          <dl>\n            <dt>Issued</dt>\n            <dd>{formatDateTime(diagnosticReport.issued)}</dd>\n          </dl>\n        )}\n        {diagnosticReport.status && (\n          <dl>\n            <dt>Status</dt>\n            <dd>{capitalize(diagnosticReport.status)}</dd>\n          </dl>\n        )}\n      </div>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </div>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  return (\n    <Table withBorder withColumnBorders>\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Value</th>\n          <th>Reference Range</th>\n          <th>Interpretation</th>\n        </tr>\n      </thead>\n      <tbody>\n        {props.value?.map((observation, index) => (\n          <ObservationRow key={'obs-' + index} value={observation} />\n        ))}\n      </tbody>\n    </Table>\n  );\n}\n\ninterface ObservationRowProps {\n  value: Observation | Reference<Observation>;\n}\n\nfunction ObservationRow(props: ObservationRowProps): JSX.Element | null {\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  let className = undefined;\n  if (isCritical(observation)) {\n    className = 'medplum-critical';\n  }\n\n  return (\n    <tr className={className}>\n      <td>\n        <MedplumLink to={observation}>\n          <CodeableConceptDisplay value={observation.code} />\n        </MedplumLink>\n      </td>\n      <td>\n        <ObservationValueDisplay value={observation} />\n      </td>\n      <td>\n        <ReferenceRangeDisplay value={observation.referenceRange} />\n      </td>\n      <td>\n        {observation.interpretation && observation.interpretation.length > 0 && (\n          <CodeableConceptDisplay value={observation.interpretation[0]} />\n        )}\n      </td>\n    </tr>\n  );\n}\n\ninterface ObservationValueDisplayProps {\n  value?: Observation | ObservationComponent;\n}\n\nfunction ObservationValueDisplay(props: ObservationValueDisplayProps): JSX.Element | null {\n  const obs = props.value;\n\n  if (obs?.valueQuantity) {\n    return <QuantityDisplay value={props.value?.valueQuantity} />;\n  }\n\n  if (obs?.valueString) {\n    return <>{obs.valueString}</>;\n  }\n\n  if (obs && 'component' in obs && obs?.component) {\n    return (\n      <>\n        {obs.component\n          .map<React.ReactNode>((component: ObservationComponent, index: number) => (\n            <ObservationValueDisplay key={`obs-${index}`} value={component} />\n          ))\n          .reduce((prev, curr) => [prev, ' / ', curr])}\n      </>\n    );\n  }\n\n  return null;\n}\n\ninterface ReferenceRangeProps {\n  value?: ObservationReferenceRange[];\n}\n\nfunction ReferenceRangeDisplay(props: ReferenceRangeProps): JSX.Element | null {\n  const range = props.value && props.value.length > 0 && props.value[0];\n  if (!range) {\n    return null;\n  }\n  if (range.text) {\n    return <>{range.text}</>;\n  }\n  return <RangeDisplay value={range} />;\n}\n\n/**\n * Returns true if the observation is critical.\n * See: https://www.hl7.org/fhir/valueset-observation-interpretation.html\n * @param observation The FHIR observation.\n * @returns True if the FHIR observation is a critical value.\n */\nfunction isCritical(observation: Observation): boolean {\n  const code = observation.interpretation?.[0]?.coding?.[0]?.code;\n  return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DiagnosticReportDisplay.js","sources":["../../src/DiagnosticReportDisplay.tsx"],"sourcesContent":["import { createStyles, Group, Stack, Text, Title } from '@mantine/core';\nimport { capitalize, formatDateTime } from '@medplum/core';\nimport {\n  DiagnosticReport,\n  Observation,\n  ObservationComponent,\n  ObservationReferenceRange,\n  Reference,\n} from '@medplum/fhirtypes';\nimport React from 'react';\nimport { CodeableConceptDisplay } from './CodeableConceptDisplay';\nimport { MedplumLink } from './MedplumLink';\nimport { QuantityDisplay } from './QuantityDisplay';\nimport { RangeDisplay } from './RangeDisplay';\nimport { ResourceBadge } from './ResourceBadge';\nimport { useResource } from './useResource';\n\nconst useStyles = createStyles((theme) => ({\n  table: {\n    border: `0.1px solid ${theme.colors.gray[5]}`,\n    borderCollapse: 'collapse',\n\n    '& td, & th': {\n      border: `0.1px solid ${theme.colors.gray[5]}`,\n      padding: 4,\n    },\n  },\n\n  criticalRow: {\n    background: theme.colorScheme === 'dark' ? theme.colors.red[7] : theme.colors.red[1],\n    border: `0.1px solid ${theme.colors.red[5]}`,\n    color: theme.colors.red[5],\n    fontWeight: 500,\n\n    '& td': {\n      border: `0.1px solid ${theme.colors.red[5]}`,\n    },\n  },\n}));\n\nexport interface DiagnosticReportDisplayProps {\n  value?: DiagnosticReport | Reference<DiagnosticReport>;\n}\n\nexport function DiagnosticReportDisplay(props: DiagnosticReportDisplayProps): JSX.Element | null {\n  const diagnosticReport = useResource(props.value);\n  const specimen = useResource(diagnosticReport?.specimen?.[0]);\n  if (!diagnosticReport) {\n    return null;\n  }\n\n  let textContent = '';\n\n  if (diagnosticReport.presentedForm && diagnosticReport.presentedForm.length > 0) {\n    const pf = diagnosticReport.presentedForm[0];\n    if (pf.contentType?.startsWith('text/plain') && pf.data) {\n      textContent = window.atob(pf.data);\n    }\n  }\n\n  if (specimen?.note) {\n    for (const note of specimen.note) {\n      textContent += note.text + '\\n\\n';\n    }\n  }\n\n  return (\n    <Stack>\n      <Title>Diagnostic Report</Title>\n      <Group mt=\"md\" spacing={30}>\n        {diagnosticReport.subject && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Subject\n            </Text>\n            <Text>\n              <ResourceBadge value={diagnosticReport.subject} link={true} />\n            </Text>\n          </div>\n        )}\n        {diagnosticReport.resultsInterpreter &&\n          diagnosticReport.resultsInterpreter.map((interpreter) => (\n            <div key={interpreter.reference}>\n              <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n                Interpreter\n              </Text>\n              <Text>\n                <ResourceBadge value={interpreter} link={true} />\n              </Text>\n            </div>\n          ))}\n        {diagnosticReport.issued && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Issued\n            </Text>\n            <Text>{formatDateTime(diagnosticReport.issued)}</Text>\n          </div>\n        )}\n        {diagnosticReport.status && (\n          <div>\n            <Text size=\"xs\" transform=\"uppercase\" color=\"dimmed\">\n              Status\n            </Text>\n            <Text>{capitalize(diagnosticReport.status)}</Text>\n          </div>\n        )}\n      </Group>\n      {diagnosticReport.result && <ObservationTable value={diagnosticReport.result} />}\n      {textContent && <pre>{textContent.trim()}</pre>}\n    </Stack>\n  );\n}\n\nexport interface ObservationTableProps {\n  value?: Observation[] | Reference<Observation>[];\n}\n\nexport function ObservationTable(props: ObservationTableProps): JSX.Element {\n  const { classes } = useStyles();\n  return (\n    <table className={classes.table}>\n      <thead>\n        <tr>\n          <th>Test</th>\n          <th>Value</th>\n          <th>Reference Range</th>\n          <th>Interpretation</th>\n        </tr>\n      </thead>\n      <tbody>\n        {props.value?.map((observation, index) => (\n          <ObservationRow key={'obs-' + index} value={observation} />\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\ninterface ObservationRowProps {\n  value: Observation | Reference<Observation>;\n}\n\nfunction ObservationRow(props: ObservationRowProps): JSX.Element | null {\n  const { classes, cx } = useStyles();\n  const observation = useResource(props.value);\n  if (!observation) {\n    return null;\n  }\n\n  const critical = isCritical(observation);\n\n  return (\n    <tr className={cx({ [classes.criticalRow]: critical })}>\n      <td>\n        <MedplumLink to={observation}>\n          <CodeableConceptDisplay value={observation.code} />\n        </MedplumLink>\n      </td>\n      <td>\n        <ObservationValueDisplay value={observation} />\n      </td>\n      <td>\n        <ReferenceRangeDisplay value={observation.referenceRange} />\n      </td>\n      <td>\n        {observation.interpretation && observation.interpretation.length > 0 && (\n          <CodeableConceptDisplay value={observation.interpretation[0]} />\n        )}\n      </td>\n    </tr>\n  );\n}\n\ninterface ObservationValueDisplayProps {\n  value?: Observation | ObservationComponent;\n}\n\nfunction ObservationValueDisplay(props: ObservationValueDisplayProps): JSX.Element | null {\n  const obs = props.value;\n\n  if (obs?.valueQuantity) {\n    return <QuantityDisplay value={props.value?.valueQuantity} />;\n  }\n\n  if (obs?.valueString) {\n    return <>{obs.valueString}</>;\n  }\n\n  if (obs && 'component' in obs && obs?.component) {\n    return (\n      <>\n        {obs.component\n          .map<React.ReactNode>((component: ObservationComponent, index: number) => (\n            <ObservationValueDisplay key={`obs-${index}`} value={component} />\n          ))\n          .reduce((prev, curr) => [prev, ' / ', curr])}\n      </>\n    );\n  }\n\n  return null;\n}\n\ninterface ReferenceRangeProps {\n  value?: ObservationReferenceRange[];\n}\n\nfunction ReferenceRangeDisplay(props: ReferenceRangeProps): JSX.Element | null {\n  const range = props.value && props.value.length > 0 && props.value[0];\n  if (!range) {\n    return null;\n  }\n  if (range.text) {\n    return <>{range.text}</>;\n  }\n  return <RangeDisplay value={range} />;\n}\n\n/**\n * Returns true if the observation is critical.\n * See: https://www.hl7.org/fhir/valueset-observation-interpretation.html\n * @param observation The FHIR observation.\n * @returns True if the FHIR observation is a critical value.\n */\nfunction isCritical(observation: Observation): boolean {\n  const code = observation.interpretation?.[0]?.coding?.[0]?.code;\n  return code === 'AA' || code === 'LL' || code === 'HH' || code === 'RR';\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/Document.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './Document.css';
 export interface DocumentProps {
     width?: number;
     children?: React.ReactNode;

package/dist/esm/Document.js

@@ -1,8 +1,13 @@
+import { Container, Paper } from '@mantine/core';
 import React from 'react';
 
 function Document(props) {
-    return (React.createElement("main", { className: "medplum-document" },
-        React.createElement("article", { style: { maxWidth: props.width } }, props.children)));
+    let style = undefined;
+    if (props.width) {
+        style = { maxWidth: props.width };
+    }
+    return (React.createElement(Container, null,
+        React.createElement(Paper, { style: style, mx: "auto", my: "lg", p: "lg", shadow: "xs", radius: "sm", withBorder: true }, props.children)));
 }
 
 export { Document };

package/dist/esm/Document.js.map

@@ -1 +1 @@
-{"version":3,"file":"Document.js","sources":["../../src/Document.tsx"],"sourcesContent":["import React from 'react';\nimport './Document.css';\n\nexport interface DocumentProps {\n  width?: number;\n  children?: React.ReactNode;\n}\n\nexport function Document(props: DocumentProps): JSX.Element {\n  return (\n    <main className=\"medplum-document\">\n      <article style={{ maxWidth: props.width }}>{props.children}</article>\n    </main>\n  );\n}\n"],"names":[],"mappings":";;AAQM,SAAU,QAAQ,CAAC,KAAoB,EAAA;AAC3C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kBAAkB,EAAA;AAChC,QAAA,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,EAAE,EAAA,EAAG,KAAK,CAAC,QAAQ,CAAW,CAChE,EACP;AACJ;;;;"}
+{"version":3,"file":"Document.js","sources":["../../src/Document.tsx"],"sourcesContent":["import { Container, Paper } from '@mantine/core';\nimport React from 'react';\n\nexport interface DocumentProps {\n  width?: number;\n  children?: React.ReactNode;\n}\n\nexport function Document(props: DocumentProps): JSX.Element {\n  let style: React.CSSProperties | undefined = undefined;\n  if (props.width) {\n    style = { maxWidth: props.width };\n  }\n\n  return (\n    <Container>\n      <Paper style={style} mx=\"auto\" my=\"lg\" p=\"lg\" shadow=\"xs\" radius=\"sm\" withBorder>\n        {props.children}\n      </Paper>\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;AAQM,SAAU,QAAQ,CAAC,KAAoB,EAAA;IAC3C,IAAI,KAAK,GAAoC,SAAS,CAAC;IACvD,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;AACnC,KAAA;IAED,QACE,oBAAC,SAAS,EAAA,IAAA;AACR,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,IAAA,EAAA,EAC7E,KAAK,CAAC,QAAQ,CACT,CACE,EACZ;AACJ;;;;"}