@medplum/react 0.9.38 → 0.10.0

package/dist/esm/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sources":["../../src/Timeline.tsx"],"sourcesContent":["import { formatDateTime, getReferenceString } from '@medplum/core';\nimport { Reference, Resource } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Avatar } from './Avatar';\nimport { Button } from './Button';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { MedplumLink } from './MedplumLink';\nimport { Popup } from './Popup';\nimport { ResourceName } from './ResourceName';\nimport './Timeline.css';\nimport { killEvent } from './utils/dom';\n\nexport interface TimelineProps {\n  children?: React.ReactNode;\n}\n\nexport function Timeline(props: TimelineProps): JSX.Element {\n  return <main className=\"medplum-document medplum-timeline\">{props.children}</main>;\n}\n\nexport interface TimelineItemProps {\n  resource: Resource;\n  profile?: Reference;\n  socialEnabled?: boolean;\n  children?: React.ReactNode;\n  padding?: boolean;\n  className?: string;\n  popupMenuItems?: React.ReactNode;\n}\n\nexport function TimelineItem(props: TimelineItemProps): JSX.Element {\n  const [popupAnchor, setPopupAnchor] = useState<DOMRect | undefined>();\n  const author = props.profile ?? props.resource.meta?.author;\n  return (\n    <article className={props.className || 'medplum-timeline-item'} data-testid=\"timeline-item\">\n      <div className=\"medplum-timeline-item-header\">\n        <div className=\"medplum-timeline-item-avatar\">\n          <Avatar value={author} link={true} size=\"medium\" />\n        </div>\n        <div className=\"medplum-timeline-item-title\">\n          <ResourceName value={author} link={true} />\n          <div className=\"medplum-timeline-item-subtitle\">\n            <MedplumLink to={props.resource}>{formatDateTime(props.resource.meta?.lastUpdated)}</MedplumLink>\n            <span>&middot;</span>\n            <MedplumLink to={props.resource}>{props.resource.resourceType}</MedplumLink>\n          </div>\n        </div>\n        {props.popupMenuItems && (\n          <div className=\"medplum-timeline-item-actions\">\n            <a\n              href=\"#\"\n              aria-label={`Actions for ${getReferenceString(props.resource)}`}\n              onClick={(e) => {\n                killEvent(e);\n                const el = e.currentTarget;\n                const rect = el.getBoundingClientRect();\n                setPopupAnchor(rect);\n              }}\n            >\n              <svg fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <g transform=\"translate(-446 -350)\">\n                  <path d=\"M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0\"></path>\n                </g>\n              </svg>\n            </a>\n          </div>\n        )}\n      </div>\n      <ErrorBoundary>\n        {props.padding && <div style={{ padding: '2px 16px 16px 16px' }}>{props.children}</div>}\n        {!props.padding && <>{props.children}</>}\n      </ErrorBoundary>\n      {props.socialEnabled && (\n        <div className=\"medplum-timeline-item-footer\">\n          <Button borderless={true}>Like</Button>\n          <Button borderless={true}>Comment</Button>\n        </div>\n      )}\n      {props.popupMenuItems && (\n        <Popup visible={!!popupAnchor} anchor={popupAnchor} autoClose={true} onClose={() => setPopupAnchor(undefined)}>\n          {props.popupMenuItems}\n        </Popup>\n      )}\n    </article>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Timeline.js","sources":["../../src/Timeline.tsx"],"sourcesContent":["import { ActionIcon, Button, Menu } from '@mantine/core';\nimport { formatDateTime, getReferenceString } from '@medplum/core';\nimport { Reference, Resource } from '@medplum/fhirtypes';\nimport { IconDots } from '@tabler/icons';\nimport React from 'react';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { MedplumLink } from './MedplumLink';\nimport { ResourceAvatar } from './ResourceAvatar';\nimport { ResourceName } from './ResourceName';\n\nimport './Timeline.css';\n\nexport interface TimelineProps {\n  children?: React.ReactNode;\n}\n\nexport function Timeline(props: TimelineProps): JSX.Element {\n  return <main className=\"medplum-document medplum-timeline\">{props.children}</main>;\n}\n\nexport interface TimelineItemProps {\n  resource: Resource;\n  profile?: Reference;\n  socialEnabled?: boolean;\n  children?: React.ReactNode;\n  padding?: boolean;\n  className?: string;\n  popupMenuItems?: React.ReactNode;\n}\n\nexport function TimelineItem(props: TimelineItemProps): JSX.Element {\n  const author = props.profile ?? props.resource.meta?.author;\n  return (\n    <article className={props.className || 'medplum-timeline-item'} data-testid=\"timeline-item\">\n      <div className=\"medplum-timeline-item-header\">\n        <div className=\"medplum-timeline-item-avatar\">\n          <ResourceAvatar value={author} link={true} size=\"md\" />\n        </div>\n        <div className=\"medplum-timeline-item-title\">\n          <ResourceName value={author} link={true} />\n          <div className=\"medplum-timeline-item-subtitle\">\n            <MedplumLink to={props.resource}>{formatDateTime(props.resource.meta?.lastUpdated)}</MedplumLink>\n            <span>&middot;</span>\n            <MedplumLink to={props.resource}>{props.resource.resourceType}</MedplumLink>\n          </div>\n        </div>\n        {props.popupMenuItems && (\n          <Menu position=\"bottom-end\" shadow=\"md\" width={200}>\n            <Menu.Target>\n              <ActionIcon radius=\"xl\" aria-label={`Actions for ${getReferenceString(props.resource)}`}>\n                <IconDots />\n              </ActionIcon>\n            </Menu.Target>\n            {props.popupMenuItems}\n          </Menu>\n        )}\n      </div>\n      <ErrorBoundary>\n        {props.padding && <div style={{ padding: '2px 16px 16px 16px' }}>{props.children}</div>}\n        {!props.padding && <>{props.children}</>}\n      </ErrorBoundary>\n      {props.socialEnabled && (\n        <div className=\"medplum-timeline-item-footer\">\n          <Button variant=\"subtle\">Like</Button>\n          <Button variant=\"subtle\">Comment</Button>\n        </div>\n      )}\n    </article>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBM,SAAU,QAAQ,CAAC,KAAoB,EAAA;IAC3C,OAAO,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAC,QAAQ,CAAQ,CAAC;AACrF,CAAC;AAYK,SAAU,YAAY,CAAC,KAAwB,EAAA;;AACnD,IAAA,MAAM,MAAM,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAA,EAAA,GAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,MAAM,CAAC;IAC5D,QACE,KAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,uBAAuB,EAAA,aAAA,EAAc,eAAe,EAAA;QACzF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;YAC3C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;AAC3C,gBAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnD;YACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAAA;gBAC1C,KAAC,CAAA,aAAA,CAAA,YAAY,IAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAI,CAAA;gBAC3C,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA;AAC7C,oBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAG,EAAA,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,CAAC,CAAe;oBACjG,KAAqB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAA,CAAA;AACrB,oBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAG,EAAA,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAe,CACxE,CACF;AACL,YAAA,KAAK,CAAC,cAAc,KACnB,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,QAAQ,EAAC,YAAY,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAE,GAAG,EAAA;gBAChD,KAAC,CAAA,aAAA,CAAA,IAAI,CAAC,MAAM,EAAA,IAAA;AACV,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAC,IAAI,EAAA,YAAA,EAAa,CAAe,YAAA,EAAA,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAE,CAAA,EAAA;wBACrF,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAG,IAAA,CAAA,CACD,CACD;AACb,gBAAA,KAAK,CAAC,cAAc,CAChB,CACR,CACG;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA;AACX,YAAA,KAAK,CAAC,OAAO,IAAI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,EAAA,EAAG,KAAK,CAAC,QAAQ,CAAO;YACtF,CAAC,KAAK,CAAC,OAAO,IAAI,0CAAG,KAAK,CAAC,QAAQ,CAAI,CAC1B;AACf,QAAA,KAAK,CAAC,aAAa,KAClB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;AAC3C,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAc,EAAA,MAAA,CAAA;YACtC,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,OAAO,EAAC,QAAQ,cAAiB,CACrC,CACP,CACO,EACV;AACJ;;;;"}

package/dist/esm/TimingInput.js

@@ -1,13 +1,8 @@
+import { Group, Button, Modal, TextInput, NativeSelect, Checkbox } from '@mantine/core';
 import { formatTiming } from '@medplum/core';
 import React, { useState, useRef } from 'react';
-import { Button } from './Button.js';
-import { Checkbox } from './Checkbox.js';
 import { DateTimeInput } from './DateTimeInput.js';
-import { Dialog } from './Dialog.js';
 import { FormSection } from './FormSection.js';
-import { Input } from './Input.js';
-import { InputRow } from './InputRow.js';
-import { Select } from './Select.js';
 
 const daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 function TimingInput(props) {
@@ -16,7 +11,7 @@ function TimingInput(props) {
     const valueRef = useRef();
     valueRef.current = value;
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputRow, null,
+        React.createElement(Group, { spacing: "xs", grow: true, noWrap: true },
             React.createElement("span", null, formatTiming(valueRef.current) || 'No repeat'),
             React.createElement(Button, { onClick: () => setOpen(true) }, "Edit")),
         React.createElement(TimingEditorDialog, { visible: open, defaultValue: valueRef.current, onOk: (newValue) => {
@@ -68,22 +63,24 @@ function TimingEditorDialog(props) {
             setRepeat(Object.assign(Object.assign({}, (_c = valueRef.current) === null || _c === void 0 ? void 0 : _c.repeat), { dayOfWeek: existing.filter((d) => d !== day) }));
         }
     }
-    return (React.createElement(Dialog, { title: "Timing", visible: props.visible, onOk: () => props.onOk(value), onCancel: () => props.onCancel() },
+    return (React.createElement(Modal, { title: "Timing", closeButtonLabel: "Close", opened: props.visible, onClose: () => props.onCancel() },
         React.createElement("div", { style: { padding: '5px 20px', textAlign: 'left' } },
             React.createElement(FormSection, { title: "Starts on", htmlFor: 'timing-dialog-start' },
                 React.createElement(DateTimeInput, { name: 'timing-dialog-start', onChange: (newValue) => setStart(newValue) })),
             React.createElement(FormSection, { title: "Repeat every", htmlFor: 'timing-dialog-period' },
-                React.createElement(InputRow, null,
-                    React.createElement(Input, { type: "number", step: 1, name: 'timing-dialog-period', defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (newValue) => setPeriod(parseInt(newValue)) }),
-                    React.createElement(Select, { name: 'timing-dialog-periodUnit', defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (newValue) => setPeriodUnit(newValue) },
-                        React.createElement("option", { value: "d" }, "day"),
-                        React.createElement("option", { value: "wk" }, "week"),
-                        React.createElement("option", { value: "mo" }, "month"),
-                        React.createElement("option", { value: "a" }, "year")))),
+                React.createElement(Group, { spacing: "xs", grow: true, noWrap: true },
+                    React.createElement(TextInput, { type: "number", step: 1, id: "timing-dialog-period", name: "timing-dialog-period", defaultValue: (_a = value === null || value === void 0 ? void 0 : value.repeat) === null || _a === void 0 ? void 0 : _a.period, onChange: (e) => setPeriod(parseInt(e.currentTarget.value)) }),
+                    React.createElement(NativeSelect, { id: "timing-dialog-periodUnit", name: "timing-dialog-periodUnit", defaultValue: (_b = value === null || value === void 0 ? void 0 : value.repeat) === null || _b === void 0 ? void 0 : _b.periodUnit, onChange: (e) => setPeriodUnit(e.currentTarget.value), data: [
+                            { label: 'day', value: 'd' },
+                            { label: 'week', value: 'wk' },
+                            { label: 'month', value: 'mo' },
+                            { label: 'year', value: 'a' },
+                        ] }))),
             React.createElement(FormSection, { title: "Repeat on" },
-                React.createElement(InputRow, null, daysOfWeek.map((day) => (React.createElement(React.Fragment, { key: day },
+                React.createElement(Group, { spacing: "xs", grow: true, noWrap: true }, daysOfWeek.map((day) => (React.createElement(React.Fragment, { key: day },
                     React.createElement("label", { htmlFor: 'timing-dialog-repeat-' + day }, day.charAt(0).toUpperCase()),
-                    React.createElement(Checkbox, { name: 'timing-dialog-repeat-' + day, onChange: (newValue) => setDayOfWeek(day, newValue) })))))))));
+                    React.createElement(Checkbox, { id: 'timing-dialog-repeat-' + day, name: 'timing-dialog-repeat-' + day, onChange: (e) => setDayOfWeek(day, e.currentTarget.checked) }))))))),
+        React.createElement(Button, { onClick: () => props.onOk(value) }, "OK")));
 }
 
 export { TimingInput };

package/dist/esm/TimingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimingInput.js","sources":["../../src/TimingInput.tsx"],"sourcesContent":["import { formatTiming } from '@medplum/core';\nimport { Timing, TimingRepeat } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { Button } from './Button';\nimport { Checkbox } from './Checkbox';\nimport { DateTimeInput } from './DateTimeInput';\nimport { Dialog } from './Dialog';\nimport { FormSection } from './FormSection';\nimport { Input } from './Input';\nimport { InputRow } from './InputRow';\nimport { Select } from './Select';\n\nconst daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\nexport interface TimingInputProps {\n  name: string;\n  defaultValue?: Timing;\n  onChange?: (newValue: Timing) => void;\n}\n\nexport function TimingInput(props: TimingInputProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n  const [open, setOpen] = useState(false);\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  return (\n    <>\n      <InputRow>\n        <span>{formatTiming(valueRef.current) || 'No repeat'}</span>\n        <Button onClick={() => setOpen(true)}>Edit</Button>\n      </InputRow>\n      <TimingEditorDialog\n        visible={open}\n        defaultValue={valueRef.current}\n        onOk={(newValue) => {\n          if (props.onChange) {\n            props.onChange(newValue);\n          }\n          setValue(newValue);\n          setOpen(false);\n        }}\n        onCancel={() => setOpen(false)}\n      />\n    </>\n  );\n}\n\ninterface TimingEditorDialogProps {\n  visible: boolean;\n  defaultValue?: Timing;\n  onOk: (newValue: Timing) => void;\n  onCancel: () => void;\n}\n\nfunction TimingEditorDialog(props: TimingEditorDialogProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  function setStart(newStart: string): void {\n    setValue({ ...valueRef.current, event: [newStart] });\n  }\n\n  function setRepeat(repeat: TimingRepeat): void {\n    setValue({ ...valueRef.current, repeat });\n  }\n\n  function setPeriod(newPeriod: number | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, period: newPeriod });\n  }\n\n  function setPeriodUnit(newPeriodUnit: 'a' | 's' | 'min' | 'h' | 'd' | 'wk' | 'mo' | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, periodUnit: newPeriodUnit });\n  }\n\n  function setDayOfWeek(day: DayOfWeek, enabled: boolean): void {\n    if (enabled) {\n      addDayOfWeek(day);\n    } else {\n      removeDayOfWeek(day);\n    }\n  }\n\n  function addDayOfWeek(day: DayOfWeek): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (!existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: [...existing, day] });\n    }\n  }\n\n  function removeDayOfWeek(day: DayOfWeek): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: existing.filter((d) => d !== day) });\n    }\n  }\n\n  return (\n    <Dialog title=\"Timing\" visible={props.visible} onOk={() => props.onOk(value)} onCancel={() => props.onCancel()}>\n      <div style={{ padding: '5px 20px', textAlign: 'left' }}>\n        <FormSection title=\"Starts on\" htmlFor={'timing-dialog-start'}>\n          <DateTimeInput name={'timing-dialog-start'} onChange={(newValue) => setStart(newValue)} />\n        </FormSection>\n        <FormSection title=\"Repeat every\" htmlFor={'timing-dialog-period'}>\n          <InputRow>\n            <Input\n              type=\"number\"\n              step={1}\n              name={'timing-dialog-period'}\n              defaultValue={value?.repeat?.period}\n              onChange={(newValue) => setPeriod(parseInt(newValue))}\n            />\n            <Select\n              name={'timing-dialog-periodUnit'}\n              defaultValue={value?.repeat?.periodUnit}\n              onChange={(newValue) => setPeriodUnit(newValue as 'a' | 'd' | 'wk' | 'mo' | undefined)}\n            >\n              <option value=\"d\">day</option>\n              <option value=\"wk\">week</option>\n              <option value=\"mo\">month</option>\n              <option value=\"a\">year</option>\n            </Select>\n          </InputRow>\n        </FormSection>\n        <FormSection title=\"Repeat on\">\n          <InputRow>\n            {daysOfWeek.map((day) => (\n              <React.Fragment key={day}>\n                <label htmlFor={'timing-dialog-repeat-' + day}>{day.charAt(0).toUpperCase()}</label>\n                <Checkbox\n                  name={'timing-dialog-repeat-' + day}\n                  onChange={(newValue) => setDayOfWeek(day as DayOfWeek, newValue)}\n                />\n              </React.Fragment>\n            ))}\n          </InputRow>\n        </FormSection>\n      </div>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimingInput.js","sources":["../../src/TimingInput.tsx"],"sourcesContent":["import { Button, Checkbox, Group, Modal, NativeSelect, TextInput } from '@mantine/core';\nimport { formatTiming } from '@medplum/core';\nimport { Timing, TimingRepeat } from '@medplum/fhirtypes';\nimport React, { useRef, useState } from 'react';\nimport { DateTimeInput } from './DateTimeInput';\nimport { FormSection } from './FormSection';\n\nconst daysOfWeek = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\n\ntype DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n\nexport interface TimingInputProps {\n  name: string;\n  defaultValue?: Timing;\n  onChange?: (newValue: Timing) => void;\n}\n\nexport function TimingInput(props: TimingInputProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n  const [open, setOpen] = useState(false);\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  return (\n    <>\n      <Group spacing=\"xs\" grow noWrap>\n        <span>{formatTiming(valueRef.current) || 'No repeat'}</span>\n        <Button onClick={() => setOpen(true)}>Edit</Button>\n      </Group>\n      <TimingEditorDialog\n        visible={open}\n        defaultValue={valueRef.current}\n        onOk={(newValue) => {\n          if (props.onChange) {\n            props.onChange(newValue);\n          }\n          setValue(newValue);\n          setOpen(false);\n        }}\n        onCancel={() => setOpen(false)}\n      />\n    </>\n  );\n}\n\ninterface TimingEditorDialogProps {\n  visible: boolean;\n  defaultValue?: Timing;\n  onOk: (newValue: Timing) => void;\n  onCancel: () => void;\n}\n\nfunction TimingEditorDialog(props: TimingEditorDialogProps): JSX.Element {\n  const [value, setValue] = useState<Timing>(props.defaultValue || {});\n\n  const valueRef = useRef<Timing>();\n  valueRef.current = value;\n\n  function setStart(newStart: string): void {\n    setValue({ ...valueRef.current, event: [newStart] });\n  }\n\n  function setRepeat(repeat: TimingRepeat): void {\n    setValue({ ...valueRef.current, repeat });\n  }\n\n  function setPeriod(newPeriod: number | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, period: newPeriod });\n  }\n\n  function setPeriodUnit(newPeriodUnit: 'a' | 's' | 'min' | 'h' | 'd' | 'wk' | 'mo' | undefined): void {\n    setRepeat({ ...valueRef.current?.repeat, periodUnit: newPeriodUnit });\n  }\n\n  function setDayOfWeek(day: DayOfWeek, enabled: boolean): void {\n    if (enabled) {\n      addDayOfWeek(day);\n    } else {\n      removeDayOfWeek(day);\n    }\n  }\n\n  function addDayOfWeek(day: DayOfWeek): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (!existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: [...existing, day] });\n    }\n  }\n\n  function removeDayOfWeek(day: DayOfWeek): void {\n    const existing = valueRef.current?.repeat?.dayOfWeek || [];\n    if (existing.includes(day)) {\n      setRepeat({ ...valueRef.current?.repeat, dayOfWeek: existing.filter((d) => d !== day) });\n    }\n  }\n\n  return (\n    <Modal title=\"Timing\" closeButtonLabel=\"Close\" opened={props.visible} onClose={() => props.onCancel()}>\n      <div style={{ padding: '5px 20px', textAlign: 'left' }}>\n        <FormSection title=\"Starts on\" htmlFor={'timing-dialog-start'}>\n          <DateTimeInput name={'timing-dialog-start'} onChange={(newValue) => setStart(newValue)} />\n        </FormSection>\n        <FormSection title=\"Repeat every\" htmlFor={'timing-dialog-period'}>\n          <Group spacing=\"xs\" grow noWrap>\n            <TextInput\n              type=\"number\"\n              step={1}\n              id=\"timing-dialog-period\"\n              name=\"timing-dialog-period\"\n              defaultValue={value?.repeat?.period}\n              onChange={(e) => setPeriod(parseInt(e.currentTarget.value))}\n            />\n            <NativeSelect\n              id=\"timing-dialog-periodUnit\"\n              name=\"timing-dialog-periodUnit\"\n              defaultValue={value?.repeat?.periodUnit}\n              onChange={(e) => setPeriodUnit(e.currentTarget.value as 'a' | 'd' | 'wk' | 'mo' | undefined)}\n              data={[\n                { label: 'day', value: 'd' },\n                { label: 'week', value: 'wk' },\n                { label: 'month', value: 'mo' },\n                { label: 'year', value: 'a' },\n              ]}\n            />\n          </Group>\n        </FormSection>\n        <FormSection title=\"Repeat on\">\n          <Group spacing=\"xs\" grow noWrap>\n            {daysOfWeek.map((day) => (\n              <React.Fragment key={day}>\n                <label htmlFor={'timing-dialog-repeat-' + day}>{day.charAt(0).toUpperCase()}</label>\n                <Checkbox\n                  id={'timing-dialog-repeat-' + day}\n                  name={'timing-dialog-repeat-' + day}\n                  onChange={(e) => setDayOfWeek(day as DayOfWeek, e.currentTarget.checked)}\n                />\n              </React.Fragment>\n            ))}\n          </Group>\n        </FormSection>\n      </div>\n      <Button onClick={() => props.onOk(value)}>OK</Button>\n    </Modal>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ValueSetAutocomplete.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';
+export interface ValueSetAutocompleteProps {
+    property: ElementDefinition;
+    name: string;
+    placeholder?: string;
+    defaultValue?: ValueSetExpansionContains;
+    onChange?: (value: ValueSetExpansionContains) => void;
+}
+export declare function ValueSetAutocomplete(props: ValueSetAutocompleteProps): JSX.Element;

package/dist/esm/ValueSetAutocomplete.js

@@ -0,0 +1,57 @@
+import { __awaiter } from './node_modules/tslib/tslib.es6.js';
+import { Autocomplete, Loader } from '@mantine/core';
+import React, { useState } from 'react';
+import { useMedplum } from './MedplumProvider.js';
+
+function ValueSetAutocomplete(props) {
+    const medplum = useMedplum();
+    const defaultValue = props.defaultValue;
+    const [value, setValue] = useState(defaultValue);
+    const [text, setText] = useState(defaultValue ? getDisplay(defaultValue) : '');
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState([]);
+    function loadValues(input) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            setLoading(true);
+            const system = (_a = props.property.binding) === null || _a === void 0 ? void 0 : _a.valueSet;
+            const valueSet = yield medplum.searchValueSet(system, input);
+            const valueSetElements = (_b = valueSet.expansion) === null || _b === void 0 ? void 0 : _b.contains;
+            setData(valueSetElements.map((element) => ({ value: getDisplay(element), element })));
+            setLoading(false);
+        });
+    }
+    function handleChange(val) {
+        return __awaiter(this, void 0, void 0, function* () {
+            setText(val);
+            return loadValues(val);
+        });
+    }
+    function handleSelect(item) {
+        setValue(item.element);
+        setText(item.value);
+        setData([]);
+        if (props.onChange) {
+            props.onChange(item.element);
+        }
+    }
+    function handleBlur(val) {
+        if (!value) {
+            const unstructured = {
+                display: val,
+                code: val,
+            };
+            setValue(unstructured);
+            if (props.onChange) {
+                props.onChange(unstructured);
+            }
+        }
+    }
+    return (React.createElement(Autocomplete, { value: text, data: data, placeholder: props.placeholder, onFocus: () => loadValues(text), onBlur: () => handleBlur(text), onChange: handleChange, onItemSubmit: handleSelect, rightSection: loading ? React.createElement(Loader, { size: 16 }) : null }));
+}
+function getDisplay(item) {
+    return item.display || item.code || '';
+}
+
+export { ValueSetAutocomplete };
+//# sourceMappingURL=ValueSetAutocomplete.js.map

package/dist/esm/ValueSetAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueSetAutocomplete.js","sources":["../../src/ValueSetAutocomplete.tsx"],"sourcesContent":["import { Autocomplete, Loader } from '@mantine/core';\nimport { ElementDefinition, ValueSetExpansionContains } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { useMedplum } from './MedplumProvider';\n\nexport interface ValueSetAutocompleteProps {\n  property: ElementDefinition;\n  name: string;\n  placeholder?: string;\n  defaultValue?: ValueSetExpansionContains;\n  onChange?: (value: ValueSetExpansionContains) => void;\n}\n\ninterface ValueSetAutocompleteItem {\n  value: string;\n  element: ValueSetExpansionContains;\n}\n\nexport function ValueSetAutocomplete(props: ValueSetAutocompleteProps): JSX.Element {\n  const medplum = useMedplum();\n  const defaultValue = props.defaultValue;\n  const [value, setValue] = useState<ValueSetExpansionContains | undefined>(defaultValue);\n  const [text, setText] = useState<string>(defaultValue ? getDisplay(defaultValue) : '');\n  const [loading, setLoading] = useState(false);\n  const [data, setData] = useState<ValueSetAutocompleteItem[]>([]);\n\n  async function loadValues(input: string): Promise<void> {\n    setLoading(true);\n    const system = props.property.binding?.valueSet as string;\n    const valueSet = await medplum.searchValueSet(system, input);\n    const valueSetElements = valueSet.expansion?.contains as ValueSetExpansionContains[];\n    setData(valueSetElements.map((element) => ({ value: getDisplay(element), element })));\n    setLoading(false);\n  }\n\n  async function handleChange(val: string): Promise<void> {\n    setText(val);\n    return loadValues(val);\n  }\n\n  function handleSelect(item: ValueSetAutocompleteItem): void {\n    setValue(item.element);\n    setText(item.value);\n    setData([]);\n    if (props.onChange) {\n      props.onChange(item.element);\n    }\n  }\n\n  function handleBlur(val: string): void {\n    if (!value) {\n      const unstructured: ValueSetExpansionContains = {\n        display: val,\n        code: val,\n      };\n      setValue(unstructured);\n      if (props.onChange) {\n        props.onChange(unstructured);\n      }\n    }\n  }\n\n  return (\n    <Autocomplete\n      value={text}\n      data={data}\n      placeholder={props.placeholder}\n      onFocus={() => loadValues(text)}\n      onBlur={() => handleBlur(text)}\n      onChange={handleChange}\n      onItemSubmit={handleSelect}\n      rightSection={loading ? <Loader size={16} /> : null}\n    />\n  );\n}\n\nfunction getDisplay(item: ValueSetExpansionContains): string {\n  return item.display || item.code || '';\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/auth/AuthenticationForm.js

@@ -1,13 +1,10 @@
 import { __awaiter } from '../node_modules/tslib/tslib.es6.js';
+import { Group, Divider, Stack, TextInput, PasswordInput, Anchor, Checkbox, Button } from '@mantine/core';
 import React, { useState } from 'react';
-import { Button } from '../Button.js';
 import { Form } from '../Form.js';
-import { FormSection } from '../FormSection.js';
 import { getGoogleClientId, GoogleButton } from '../GoogleButton.js';
-import { Input } from '../Input.js';
-import { MedplumLink } from '../MedplumLink.js';
 import { useMedplum } from '../MedplumProvider.js';
-import { getIssuesForExpression } from '../utils/outcomes.js';
+import { getIssuesForExpression, getErrorsForInput } from '../utils/outcomes.js';
 
 function AuthenticationForm(props) {
     const medplum = useMedplum();
@@ -43,7 +40,7 @@ function AuthenticationForm(props) {
             return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
         }))),
         googleClientId && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "medplum-signin-google-container" },
+            React.createElement(Group, { position: "center", p: "xl", style: { height: 70 } },
                 React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => {
                         startPkce()
                             .then(() => medplum.startGoogleLogin({
@@ -59,20 +56,15 @@ function AuthenticationForm(props) {
                             .then(props.handleAuthResponse)
                             .catch(setOutcome);
                     } })),
-            React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
-        React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
-            React.createElement(Input, { name: "email", type: "email", testid: "email", required: true, autoFocus: true, outcome: outcome })),
-        React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
-            React.createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
-        React.createElement("div", { className: "medplum-signin-buttons" },
-            (props.onForgotPassword || props.onRegister) && (React.createElement("div", null,
-                props.onForgotPassword && (React.createElement(MedplumLink, { testid: "forgotpassword", onClick: props.onForgotPassword }, "Forgot password")),
-                props.onRegister && (React.createElement(MedplumLink, { testid: "register", onClick: props.onRegister }, "Register")))),
-            React.createElement("div", null,
-                React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
-                React.createElement("label", { htmlFor: "remember" }, "Remember me")),
-            React.createElement("div", null,
-                React.createElement(Button, { type: "submit", testid: "submit" }, "Sign in")))));
+            React.createElement(Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+        React.createElement(Stack, { spacing: "xl" },
+            React.createElement(TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'email') }),
+            React.createElement(PasswordInput, { name: "password", type: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
+        React.createElement(Group, { position: "apart", mt: "xl", noWrap: true },
+            props.onForgotPassword && (React.createElement(Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onForgotPassword, size: "xs" }, "Forgot password")),
+            props.onRegister && (React.createElement(Anchor, { component: "button", type: "button", color: "dimmed", onClick: props.onRegister, size: "xs" }, "Register")),
+            React.createElement(Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
+            React.createElement(Button, { type: "submit" }, "Sign in"))));
 }
 
 export { AuthenticationForm };

package/dist/esm/auth/AuthenticationForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthenticationForm.js","sources":["../../../src/auth/AuthenticationForm.tsx"],"sourcesContent":["import { GoogleCredentialResponse, LoginAuthenticationResponse } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Button } from '../Button';\nimport { Form } from '../Form';\nimport { FormSection } from '../FormSection';\nimport { getGoogleClientId, GoogleButton } from '../GoogleButton';\nimport { Input } from '../Input';\nimport { MedplumLink } from '../MedplumLink';\nimport { useMedplum } from '../MedplumProvider';\nimport { getIssuesForExpression } from '../utils/outcomes';\n\nexport interface AuthenticationFormProps {\n  readonly projectId?: string;\n  readonly clientId?: string;\n  readonly scope?: string;\n  readonly nonce?: string;\n  readonly googleClientId?: string;\n  readonly generatePkce?: boolean;\n  readonly codeChallenge?: string;\n  readonly codeChallengeMethod?: string;\n  readonly onForgotPassword?: () => void;\n  readonly onRegister?: () => void;\n  readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;\n  readonly children?: React.ReactNode;\n}\n\nexport function AuthenticationForm(props: AuthenticationFormProps): JSX.Element {\n  const medplum = useMedplum();\n  const googleClientId = getGoogleClientId(props.googleClientId);\n  const [outcome, setOutcome] = useState<OperationOutcome>();\n  const issues = getIssuesForExpression(outcome, undefined);\n\n  async function startPkce(): Promise<void> {\n    if (props.generatePkce) {\n      await medplum.startPkce();\n    }\n  }\n\n  return (\n    <Form\n      style={{ maxWidth: 400 }}\n      onSubmit={(formData: Record<string, string>) => {\n        startPkce()\n          .then(() =>\n            medplum.startLogin({\n              projectId: props.projectId,\n              clientId: props.clientId,\n              scope: props.scope,\n              nonce: props.nonce,\n              codeChallenge: props.codeChallenge,\n              codeChallengeMethod: props.codeChallengeMethod,\n              email: formData.email,\n              password: formData.password,\n              remember: formData.remember === 'true',\n            })\n          )\n          .then(props.handleAuthResponse)\n          .catch(setOutcome);\n      }}\n    >\n      <div className=\"medplum-center\">{props.children}</div>\n      {issues && (\n        <div className=\"medplum-input-error\">\n          {issues.map((issue) => (\n            <div data-testid=\"text-field-error\" key={issue.details?.text}>\n              {issue.details?.text}\n            </div>\n          ))}\n        </div>\n      )}\n      {googleClientId && (\n        <>\n          <div className=\"medplum-signin-google-container\">\n            <GoogleButton\n              googleClientId={googleClientId}\n              handleGoogleCredential={(response: GoogleCredentialResponse) => {\n                startPkce()\n                  .then(() =>\n                    medplum.startGoogleLogin({\n                      projectId: props.projectId,\n                      clientId: props.clientId,\n                      scope: props.scope,\n                      nonce: props.nonce,\n                      codeChallenge: props.codeChallenge,\n                      codeChallengeMethod: props.codeChallengeMethod,\n                      googleClientId: response.clientId,\n                      googleCredential: response.credential,\n                    })\n                  )\n                  .then(props.handleAuthResponse)\n                  .catch(setOutcome);\n              }}\n            />\n          </div>\n          <div className=\"medplum-signin-separator\">or</div>\n        </>\n      )}\n      <FormSection title=\"Email\" htmlFor=\"email\" outcome={outcome}>\n        <Input name=\"email\" type=\"email\" testid=\"email\" required={true} autoFocus={true} outcome={outcome} />\n      </FormSection>\n      <FormSection title=\"Password\" htmlFor=\"password\" outcome={outcome}>\n        <Input name=\"password\" type=\"password\" testid=\"password\" autoComplete=\"off\" required={true} outcome={outcome} />\n      </FormSection>\n      <div className=\"medplum-signin-buttons\">\n        {(props.onForgotPassword || props.onRegister) && (\n          <div>\n            {props.onForgotPassword && (\n              <MedplumLink testid=\"forgotpassword\" onClick={props.onForgotPassword}>\n                Forgot password\n              </MedplumLink>\n            )}\n            {props.onRegister && (\n              <MedplumLink testid=\"register\" onClick={props.onRegister}>\n                Register\n              </MedplumLink>\n            )}\n          </div>\n        )}\n        <div>\n          <input type=\"checkbox\" id=\"remember\" name=\"remember\" value=\"true\" />\n          <label htmlFor=\"remember\">Remember me</label>\n        </div>\n        <div>\n          <Button type=\"submit\" testid=\"submit\">\n            Sign in\n          </Button>\n        </div>\n      </div>\n    </Form>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AuthenticationForm.js","sources":["../../../src/auth/AuthenticationForm.tsx"],"sourcesContent":["import { Anchor, Button, Checkbox, Divider, Group, PasswordInput, Stack, TextInput } from '@mantine/core';\nimport { GoogleCredentialResponse, LoginAuthenticationResponse } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Form } from '../Form';\nimport { getGoogleClientId, GoogleButton } from '../GoogleButton';\nimport { useMedplum } from '../MedplumProvider';\nimport { getErrorsForInput, getIssuesForExpression } from '../utils/outcomes';\n\nexport interface AuthenticationFormProps {\n  readonly projectId?: string;\n  readonly clientId?: string;\n  readonly scope?: string;\n  readonly nonce?: string;\n  readonly googleClientId?: string;\n  readonly generatePkce?: boolean;\n  readonly codeChallenge?: string;\n  readonly codeChallengeMethod?: string;\n  readonly onForgotPassword?: () => void;\n  readonly onRegister?: () => void;\n  readonly handleAuthResponse: (response: LoginAuthenticationResponse) => void;\n  readonly children?: React.ReactNode;\n}\n\nexport function AuthenticationForm(props: AuthenticationFormProps): JSX.Element {\n  const medplum = useMedplum();\n  const googleClientId = getGoogleClientId(props.googleClientId);\n  const [outcome, setOutcome] = useState<OperationOutcome>();\n  const issues = getIssuesForExpression(outcome, undefined);\n\n  async function startPkce(): Promise<void> {\n    if (props.generatePkce) {\n      await medplum.startPkce();\n    }\n  }\n\n  return (\n    <Form\n      style={{ maxWidth: 400 }}\n      onSubmit={(formData: Record<string, string>) => {\n        startPkce()\n          .then(() =>\n            medplum.startLogin({\n              projectId: props.projectId,\n              clientId: props.clientId,\n              scope: props.scope,\n              nonce: props.nonce,\n              codeChallenge: props.codeChallenge,\n              codeChallengeMethod: props.codeChallengeMethod,\n              email: formData.email,\n              password: formData.password,\n              remember: formData.remember === 'true',\n            })\n          )\n          .then(props.handleAuthResponse)\n          .catch(setOutcome);\n      }}\n    >\n      <div className=\"medplum-center\">{props.children}</div>\n      {issues && (\n        <div className=\"medplum-input-error\">\n          {issues.map((issue) => (\n            <div data-testid=\"text-field-error\" key={issue.details?.text}>\n              {issue.details?.text}\n            </div>\n          ))}\n        </div>\n      )}\n      {googleClientId && (\n        <>\n          <Group position=\"center\" p=\"xl\" style={{ height: 70 }}>\n            <GoogleButton\n              googleClientId={googleClientId}\n              handleGoogleCredential={(response: GoogleCredentialResponse) => {\n                startPkce()\n                  .then(() =>\n                    medplum.startGoogleLogin({\n                      projectId: props.projectId,\n                      clientId: props.clientId,\n                      scope: props.scope,\n                      nonce: props.nonce,\n                      codeChallenge: props.codeChallenge,\n                      codeChallengeMethod: props.codeChallengeMethod,\n                      googleClientId: response.clientId,\n                      googleCredential: response.credential,\n                    })\n                  )\n                  .then(props.handleAuthResponse)\n                  .catch(setOutcome);\n              }}\n            />\n          </Group>\n          <Divider label=\"or\" labelPosition=\"center\" my=\"lg\" />\n        </>\n      )}\n      <Stack spacing=\"xl\">\n        <TextInput\n          name=\"email\"\n          type=\"email\"\n          label=\"Email\"\n          placeholder=\"name@domain.com\"\n          required={true}\n          autoFocus={true}\n          error={getErrorsForInput(outcome, 'email')}\n        />\n        <PasswordInput\n          name=\"password\"\n          type=\"password\"\n          label=\"Password\"\n          autoComplete=\"off\"\n          required={true}\n          error={getErrorsForInput(outcome, 'password')}\n        />\n      </Stack>\n      <Group position=\"apart\" mt=\"xl\" noWrap>\n        {props.onForgotPassword && (\n          <Anchor component=\"button\" type=\"button\" color=\"dimmed\" onClick={props.onForgotPassword} size=\"xs\">\n            Forgot password\n          </Anchor>\n        )}\n        {props.onRegister && (\n          <Anchor component=\"button\" type=\"button\" color=\"dimmed\" onClick={props.onRegister} size=\"xs\">\n            Register\n          </Anchor>\n        )}\n        <Checkbox name=\"remember\" label=\"Remember me\" size=\"xs\" />\n        <Button type=\"submit\">Sign in</Button>\n      </Group>\n    </Form>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/auth/ChooseProfileForm.js

@@ -1,17 +1,17 @@
+import { Stack, Text, UnstyledButton, Group, Avatar } from '@mantine/core';
 import React from 'react';
-import { Avatar } from '../Avatar.js';
 import { Logo } from '../Logo.js';
 import { useMedplum } from '../MedplumProvider.js';
 
 function ChooseProfileForm(props) {
     const medplum = useMedplum();
-    return (React.createElement("div", null,
+    return (React.createElement(Stack, null,
         React.createElement("div", { className: "medplum-center" },
             React.createElement(Logo, { size: 32 }),
-            React.createElement("h1", null, "Choose profile")),
+            React.createElement(Text, { size: "lg", weight: 500 }, "Choose profile")),
         props.memberships.map((membership) => {
-            var _a, _b, _c;
-            return (React.createElement("div", { className: "medplum-nav-menu-profile", key: membership.id, onClick: () => {
+            var _a, _b;
+            return (React.createElement(UnstyledButton, { key: membership.id, onClick: () => {
                     medplum
                         .post('auth/profile', {
                         login: props.login,
@@ -20,11 +20,11 @@ function ChooseProfileForm(props) {
                         .then(props.handleAuthResponse)
                         .catch(console.log);
                 } },
-                React.createElement("div", { className: "medplum-nav-menu-profile-icon" },
-                    React.createElement(Avatar, { alt: (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display })),
-                React.createElement("div", { className: "medplum-nav-menu-profile-label" }, (_b = membership.profile) === null || _b === void 0 ? void 0 :
-                    _b.display,
-                    React.createElement("div", { className: "medplum-nav-menu-profile-help-text" }, (_c = membership.project) === null || _c === void 0 ? void 0 : _c.display))));
+                React.createElement(Group, null,
+                    React.createElement(Avatar, { radius: "xl" }),
+                    React.createElement("div", { style: { flex: 1 } },
+                        React.createElement(Text, { size: "sm", weight: 500 }, (_a = membership.profile) === null || _a === void 0 ? void 0 : _a.display),
+                        React.createElement(Text, { color: "dimmed", size: "xs" }, (_b = membership.project) === null || _b === void 0 ? void 0 : _b.display)))));
         })));
 }
 

package/dist/esm/auth/ChooseProfileForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChooseProfileForm.js","sources":["../../../src/auth/ChooseProfileForm.tsx"],"sourcesContent":["import { ProjectMembership } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { Avatar } from '../Avatar';\nimport { Logo } from '../Logo';\nimport { useMedplum } from '../MedplumProvider';\n\nexport interface ChooseProfileFormProps {\n  login: string;\n  memberships: ProjectMembership[];\n  handleAuthResponse: (response: any) => void;\n}\n\nexport function ChooseProfileForm(props: ChooseProfileFormProps): JSX.Element {\n  const medplum = useMedplum();\n  return (\n    <div>\n      <div className=\"medplum-center\">\n        <Logo size={32} />\n        <h1>Choose profile</h1>\n      </div>\n      {props.memberships.map((membership: ProjectMembership) => (\n        <div\n          className=\"medplum-nav-menu-profile\"\n          key={membership.id}\n          onClick={() => {\n            medplum\n              .post('auth/profile', {\n                login: props.login,\n                profile: membership.id,\n              })\n              .then(props.handleAuthResponse)\n              .catch(console.log);\n          }}\n        >\n          <div className=\"medplum-nav-menu-profile-icon\">\n            <Avatar alt={membership.profile?.display} />\n          </div>\n          <div className=\"medplum-nav-menu-profile-label\">\n            {membership.profile?.display}\n            <div className=\"medplum-nav-menu-profile-help-text\">{membership.project?.display}</div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYM,SAAU,iBAAiB,CAAC,KAA6B,EAAA;AAC7D,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;AAC7B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA;AAC7B,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,gBAAA,CAAuB,CACnB;QACL,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAA6B,KAAI;;AAAC,YAAA,QACxD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0BAA0B,EACpC,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,OAAO,EAAE,MAAK;oBACZ,OAAO;yBACJ,IAAI,CAAC,cAAc,EAAE;wBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,OAAO,EAAE,UAAU,CAAC,EAAE;qBACvB,CAAC;AACD,yBAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC;AAC9B,yBAAA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;iBACvB,EAAA;gBAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,+BAA+B,EAAA;oBAC5C,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,GAAG,EAAE,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,EAAA,CAAI,CACxC;AACN,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,IAC5C,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA;uBAAE,OAAO;AAC5B,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,EAAE,MAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CAAO,CACnF,CACF,EACP;SAAA,CAAC,CACE,EACN;AACJ;;;;"}
+{"version":3,"file":"ChooseProfileForm.js","sources":["../../../src/auth/ChooseProfileForm.tsx"],"sourcesContent":["import { Avatar, Group, Stack, Text, UnstyledButton } from '@mantine/core';\nimport { ProjectMembership } from '@medplum/fhirtypes';\nimport React from 'react';\nimport { Logo } from '../Logo';\nimport { useMedplum } from '../MedplumProvider';\n\nexport interface ChooseProfileFormProps {\n  login: string;\n  memberships: ProjectMembership[];\n  handleAuthResponse: (response: any) => void;\n}\n\nexport function ChooseProfileForm(props: ChooseProfileFormProps): JSX.Element {\n  const medplum = useMedplum();\n  return (\n    <Stack>\n      <div className=\"medplum-center\">\n        <Logo size={32} />\n        <Text size=\"lg\" weight={500}>\n          Choose profile\n        </Text>\n      </div>\n      {props.memberships.map((membership: ProjectMembership) => (\n        <UnstyledButton\n          key={membership.id}\n          onClick={() => {\n            medplum\n              .post('auth/profile', {\n                login: props.login,\n                profile: membership.id,\n              })\n              .then(props.handleAuthResponse)\n              .catch(console.log);\n          }}\n        >\n          <Group>\n            <Avatar radius=\"xl\" />\n            <div style={{ flex: 1 }}>\n              <Text size=\"sm\" weight={500}>\n                {membership.profile?.display}\n              </Text>\n              <Text color=\"dimmed\" size=\"xs\">\n                {membership.project?.display}\n              </Text>\n            </div>\n          </Group>\n        </UnstyledButton>\n      ))}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYM,SAAU,iBAAiB,CAAC,KAA6B,EAAA;AAC7D,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,QACE,oBAAC,KAAK,EAAA,IAAA;QACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA;AAC7B,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA;YAClB,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,EAAA,EAAA,gBAAA,CAEpB,CACH;QACL,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAA6B,KAAI;;AAAC,YAAA,QACxD,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,UAAU,CAAC,EAAE,EAClB,OAAO,EAAE,MAAK;oBACZ,OAAO;yBACJ,IAAI,CAAC,cAAc,EAAE;wBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;wBAClB,OAAO,EAAE,UAAU,CAAC,EAAE;qBACvB,CAAC;AACD,yBAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC;AAC9B,yBAAA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;iBACvB,EAAA;AAED,gBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA;AACJ,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAC,IAAI,EAAG,CAAA;AACtB,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA;AACrB,wBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,EAAA,EACxB,MAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CACvB;wBACP,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,EAC3B,MAAA,UAAU,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,CACvB,CACH,CACA,CACO,EAClB;SAAA,CAAC,CACI,EACR;AACJ;;;;"}

package/dist/esm/auth/NewProjectForm.js

@@ -1,11 +1,10 @@
 import { __awaiter } from '../node_modules/tslib/tslib.es6.js';
+import { Stack, TextInput, Text, Group, Button } from '@mantine/core';
 import React, { useState } from 'react';
-import { Button } from '../Button.js';
 import { Form } from '../Form.js';
-import { FormSection } from '../FormSection.js';
-import { Input } from '../Input.js';
 import { Logo } from '../Logo.js';
 import { useMedplum } from '../MedplumProvider.js';
+import { getErrorsForInput } from '../utils/outcomes.js';
 
 function NewProjectForm(props) {
     const medplum = useMedplum();
@@ -24,18 +23,16 @@ function NewProjectForm(props) {
         React.createElement("div", { className: "medplum-center" },
             React.createElement(Logo, { size: 32 }),
             React.createElement("h1", null, "Create project")),
-        React.createElement(FormSection, { title: "Project Name", htmlFor: "projectName", outcome: outcome },
-            React.createElement(Input, { name: "projectName", type: "text", testid: "projectName", placeholder: "My Project", required: true, outcome: outcome })),
-        React.createElement("p", { style: { fontSize: '12px', color: '#888' } },
-            "By clicking submit you agree to the Medplum ",
-            React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
-            ' and ',
-            React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
-            "."),
-        React.createElement("div", { className: "medplum-signin-buttons" },
-            React.createElement("div", null),
-            React.createElement("div", null,
-                React.createElement(Button, { type: "submit", testid: "submit" }, "Create project")))));
+        React.createElement(Stack, { spacing: "xl" },
+            React.createElement(TextInput, { name: "projectName", label: "Project Name", placeholder: "My Project", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
+            React.createElement(Text, { color: "dimmed", size: "xs" },
+                "By clicking submit you agree to the Medplum ",
+                React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                ' and ',
+                React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                ".")),
+        React.createElement(Group, { position: "right", mt: "xl", noWrap: true },
+            React.createElement(Button, { type: "submit" }, "Create project"))));
 }
 
 export { NewProjectForm };

package/dist/esm/auth/NewProjectForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewProjectForm.js","sources":["../../../src/auth/NewProjectForm.tsx"],"sourcesContent":["import { LoginAuthenticationResponse } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Button } from '../Button';\nimport { Form } from '../Form';\nimport { FormSection } from '../FormSection';\nimport { Input } from '../Input';\nimport { Logo } from '../Logo';\nimport { useMedplum } from '../MedplumProvider';\n\nexport interface NewProjectFormProps {\n  login: string;\n  handleAuthResponse: (response: LoginAuthenticationResponse) => void;\n}\n\nexport function NewProjectForm(props: NewProjectFormProps): JSX.Element {\n  const medplum = useMedplum();\n  const [outcome, setOutcome] = useState<OperationOutcome | undefined>();\n  return (\n    <Form\n      style={{ maxWidth: 400 }}\n      onSubmit={async (formData: Record<string, string>) => {\n        try {\n          props.handleAuthResponse(\n            await medplum.startNewProject({\n              login: props.login,\n              projectName: formData.projectName,\n            })\n          );\n        } catch (err) {\n          setOutcome(err as OperationOutcome);\n        }\n      }}\n    >\n      <div className=\"medplum-center\">\n        <Logo size={32} />\n        <h1>Create project</h1>\n      </div>\n      <FormSection title=\"Project Name\" htmlFor=\"projectName\" outcome={outcome}>\n        <Input\n          name=\"projectName\"\n          type=\"text\"\n          testid=\"projectName\"\n          placeholder=\"My Project\"\n          required={true}\n          outcome={outcome}\n        />\n      </FormSection>\n      <p style={{ fontSize: '12px', color: '#888' }}>\n        By clicking submit you agree to the Medplum <a href=\"https://www.medplum.com/privacy\">Privacy&nbsp;Policy</a>\n        {' and '}\n        <a href=\"https://www.medplum.com/terms\">Terms&nbsp;of&nbsp;Service</a>.\n      </p>\n      <div className=\"medplum-signin-buttons\">\n        <div />\n        <div>\n          <Button type=\"submit\" testid=\"submit\">\n            Create project\n          </Button>\n        </div>\n      </div>\n    </Form>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAeM,SAAU,cAAc,CAAC,KAA0B,EAAA;AACvD,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgC,CAAC;AACvE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxB,QAAQ,EAAE,CAAO,QAAgC,KAAI,SAAA,CAAA,IAAA,EAAA,KAAA,CAAA,EAAA,KAAA,CAAA,EAAA,aAAA;YACnD,IAAI;AACF,gBAAA,KAAK,CAAC,kBAAkB,CACtB,MAAM,OAAO,CAAC,eAAe,CAAC;oBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,WAAW,EAAE,QAAQ,CAAC,WAAW;AAClC,iBAAA,CAAC,CACH,CAAC;AACH,aAAA;AAAC,YAAA,OAAO,GAAG,EAAE;gBACZ,UAAU,CAAC,GAAuB,CAAC,CAAC;AACrC,aAAA;AACH,SAAC,CAAA,EAAA;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA;AAC7B,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,gBAAA,CAAuB,CACnB;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,OAAO,EAAA;YACtE,KAAC,CAAA,aAAA,CAAA,KAAK,EACJ,EAAA,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,aAAa,EACpB,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,OAAO,EAAA,CAChB,CACU;QACd,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA;;YACC,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,iCAAiC,EAAwB,EAAA,qBAAA,CAAA;YAC5G,OAAO;YACR,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,+BAA+B,EAA+B,EAAA,4BAAA,CAAA;AACpE,YAAA,GAAA,CAAA;QACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA;YACrC,KAAO,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,CAAA;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,gBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAE5B,EAAA,gBAAA,CAAA,CACL,CACF,CACD,EACP;AACJ;;;;"}
+{"version":3,"file":"NewProjectForm.js","sources":["../../../src/auth/NewProjectForm.tsx"],"sourcesContent":["import { Button, Group, Stack, Text, TextInput } from '@mantine/core';\nimport { LoginAuthenticationResponse } from '@medplum/core';\nimport { OperationOutcome } from '@medplum/fhirtypes';\nimport React, { useState } from 'react';\nimport { Form } from '../Form';\nimport { Logo } from '../Logo';\nimport { useMedplum } from '../MedplumProvider';\nimport { getErrorsForInput } from '../utils/outcomes';\n\nexport interface NewProjectFormProps {\n  login: string;\n  handleAuthResponse: (response: LoginAuthenticationResponse) => void;\n}\n\nexport function NewProjectForm(props: NewProjectFormProps): JSX.Element {\n  const medplum = useMedplum();\n  const [outcome, setOutcome] = useState<OperationOutcome | undefined>();\n  return (\n    <Form\n      style={{ maxWidth: 400 }}\n      onSubmit={async (formData: Record<string, string>) => {\n        try {\n          props.handleAuthResponse(\n            await medplum.startNewProject({\n              login: props.login,\n              projectName: formData.projectName,\n            })\n          );\n        } catch (err) {\n          setOutcome(err as OperationOutcome);\n        }\n      }}\n    >\n      <div className=\"medplum-center\">\n        <Logo size={32} />\n        <h1>Create project</h1>\n      </div>\n      <Stack spacing=\"xl\">\n        <TextInput\n          name=\"projectName\"\n          label=\"Project Name\"\n          placeholder=\"My Project\"\n          required={true}\n          autoFocus={true}\n          error={getErrorsForInput(outcome, 'firstName')}\n        />\n        <Text color=\"dimmed\" size=\"xs\">\n          By clicking submit you agree to the Medplum <a href=\"https://www.medplum.com/privacy\">Privacy&nbsp;Policy</a>\n          {' and '}\n          <a href=\"https://www.medplum.com/terms\">Terms&nbsp;of&nbsp;Service</a>.\n        </Text>\n      </Stack>\n      <Group position=\"right\" mt=\"xl\" noWrap>\n        <Button type=\"submit\">Create project</Button>\n      </Group>\n    </Form>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAcM,SAAU,cAAc,CAAC,KAA0B,EAAA;AACvD,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgC,CAAC;AACvE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxB,QAAQ,EAAE,CAAO,QAAgC,KAAI,SAAA,CAAA,IAAA,EAAA,KAAA,CAAA,EAAA,KAAA,CAAA,EAAA,aAAA;YACnD,IAAI;AACF,gBAAA,KAAK,CAAC,kBAAkB,CACtB,MAAM,OAAO,CAAC,eAAe,CAAC;oBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,WAAW,EAAE,QAAQ,CAAC,WAAW;AAClC,iBAAA,CAAC,CACH,CAAC;AACH,aAAA;AAAC,YAAA,OAAO,GAAG,EAAE;gBACZ,UAAU,CAAC,GAAuB,CAAC,CAAC;AACrC,aAAA;AACH,SAAC,CAAA,EAAA;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA;AAC7B,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA;AAClB,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,gBAAA,CAAuB,CACnB;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA;AACjB,YAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,YAAY,EACxB,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,iBAAiB,CAAC,OAAO,EAAE,WAAW,CAAC,EAC9C,CAAA;YACF,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA;;gBACgB,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,iCAAiC,EAAwB,EAAA,qBAAA,CAAA;gBAC5G,OAAO;gBACR,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAC,+BAA+B,EAA+B,EAAA,4BAAA,CAAA;oBACjE,CACD;QACR,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAA,IAAA,EAAA;YACpC,KAAC,CAAA,aAAA,CAAA,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAwB,EAAA,gBAAA,CAAA,CACvC,CACH,EACP;AACJ;;;;"}

package/dist/esm/auth/NewUserForm.js

@@ -1,12 +1,10 @@
 import { __awaiter } from '../node_modules/tslib/tslib.es6.js';
+import { Group, Divider, Stack, TextInput, PasswordInput, Text, Checkbox, Button } from '@mantine/core';
 import React, { useState, useEffect } from 'react';
-import { Button } from '../Button.js';
 import { Form } from '../Form.js';
-import { FormSection } from '../FormSection.js';
 import { getGoogleClientId, GoogleButton } from '../GoogleButton.js';
-import { Input } from '../Input.js';
 import { useMedplum } from '../MedplumProvider.js';
-import { getIssuesForExpression } from '../utils/outcomes.js';
+import { getIssuesForExpression, getErrorsForInput } from '../utils/outcomes.js';
 import { initRecaptcha, getRecaptcha } from '../utils/recaptcha.js';
 
 function NewUserForm(props) {
@@ -40,7 +38,7 @@ function NewUserForm(props) {
             return (React.createElement("div", { "data-testid": "text-field-error", key: (_a = issue.details) === null || _a === void 0 ? void 0 : _a.text }, (_b = issue.details) === null || _b === void 0 ? void 0 : _b.text));
         }))),
         googleClientId && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "medplum-signin-google-container" },
+            React.createElement(Group, { position: "center", p: "xl", style: { height: 70 } },
                 React.createElement(GoogleButton, { googleClientId: googleClientId, handleGoogleCredential: (response) => __awaiter(this, void 0, void 0, function* () {
                         try {
                             props.handleAuthResponse(yield medplum.startGoogleLogin({
@@ -53,34 +51,28 @@ function NewUserForm(props) {
                             setOutcome(err);
                         }
                     }) })),
-            React.createElement("div", { className: "medplum-signin-separator" }, "or"))),
-        React.createElement(FormSection, { title: "First Name", htmlFor: "firstName", outcome: outcome },
-            React.createElement(Input, { name: "firstName", type: "text", testid: "firstName", placeholder: "First name", required: true, autoFocus: true, outcome: outcome })),
-        React.createElement(FormSection, { title: "Last Name", htmlFor: "lastName", outcome: outcome },
-            React.createElement(Input, { name: "lastName", type: "text", testid: "lastName", placeholder: "Last name", required: true, outcome: outcome })),
-        React.createElement(FormSection, { title: "Email", htmlFor: "email", outcome: outcome },
-            React.createElement(Input, { name: "email", type: "email", testid: "email", placeholder: "name@domain.com", required: true, outcome: outcome })),
-        React.createElement(FormSection, { title: "Password", htmlFor: "password", outcome: outcome },
-            React.createElement(Input, { name: "password", type: "password", testid: "password", autoComplete: "off", required: true, outcome: outcome })),
-        React.createElement("p", { style: { fontSize: '12px', color: '#888' } },
-            "By clicking submit you agree to the Medplum ",
-            React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
-            ' and ',
-            React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
-            "."),
-        React.createElement("p", { style: { fontSize: '12px', color: '#888' } },
-            "This site is protected by reCAPTCHA and the Google",
-            ' ',
-            React.createElement("a", { href: "https://policies.google.com/privacy" }, "Privacy\u00A0Policy"),
-            ' and ',
-            React.createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
-            " apply."),
-        React.createElement("div", { className: "medplum-signin-buttons" },
-            React.createElement("div", null,
-                React.createElement("input", { type: "checkbox", id: "remember", name: "remember", value: "true" }),
-                React.createElement("label", { htmlFor: "remember" }, "Remember me")),
-            React.createElement("div", null,
-                React.createElement(Button, { type: "submit", testid: "submit" }, "Create account")))));
+            React.createElement(Divider, { label: "or", labelPosition: "center", my: "lg" }))),
+        React.createElement(Stack, { spacing: "xl" },
+            React.createElement(TextInput, { name: "firstName", type: "text", label: "First name", placeholder: "First name", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'firstName') }),
+            React.createElement(TextInput, { name: "lastName", type: "text", label: "Last name", placeholder: "Last name", required: true, error: getErrorsForInput(outcome, 'lastName') }),
+            React.createElement(TextInput, { name: "email", type: "email", label: "Email", placeholder: "name@domain.com", required: true, error: getErrorsForInput(outcome, 'email') }),
+            React.createElement(PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') }),
+            React.createElement(Text, { color: "dimmed", size: "xs" },
+                "By clicking submit you agree to the Medplum ",
+                React.createElement("a", { href: "https://www.medplum.com/privacy" }, "Privacy\u00A0Policy"),
+                ' and ',
+                React.createElement("a", { href: "https://www.medplum.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                "."),
+            React.createElement(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"),
+                ' and ',
+                React.createElement("a", { href: "https://policies.google.com/terms" }, "Terms\u00A0of\u00A0Service"),
+                " apply.")),
+        React.createElement(Group, { position: "apart", mt: "xl", noWrap: true },
+            React.createElement(Checkbox, { name: "remember", label: "Remember me", size: "xs" }),
+            React.createElement(Button, { type: "submit" }, "Create account"))));
 }
 
 export { NewUserForm };