@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/form/post-procedures/post-procedure.resource.tsx

@@ -0,0 +1,71 @@
+import useSWR from 'swr';
+import { type OpenmrsResource, openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import { type CodedProvider, type CodedCondition, ProcedurePayload } from '../../types';
+import { updateOrder } from '../../procedures-ordered/pick-procedure-order/add-to-worklist-dialog.resource';
+
+type Provider = {
+  uuid: string;
+  display: string;
+  person: OpenmrsResource;
+};
+
+export const useProviders = () => {
+  const url = `${restBaseUrl}/provider?v=custom:(uuid,display,person:(uuid,display))`;
+  const { data, error, isLoading } = useSWR<{
+    data: { results: Array<Provider> };
+  }>(url, openmrsFetch);
+
+  return {
+    providers: data?.data.results ?? [],
+    isLoadingProviders: isLoading,
+    loadingProvidersError: error,
+  };
+};
+
+export async function savePostProcedure(reportPayload) {
+  const abortController = new AbortController();
+  const updateResults = await openmrsFetch(`/ws/rest/v1/procedure`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: reportPayload,
+  });
+
+  if (updateResults.status === 201 || updateResults.status === 200) {
+    return await updateOrder(reportPayload.procedureOrder, {
+      fulfillerStatus: 'COMPLETED',
+    });
+  }
+}
+
+export function useConditionsSearch(conditionToLookup: string) {
+  const config = useConfig();
+  const conditionConceptClassUuid = config?.conditionConceptClassUuid;
+  const conditionsSearchUrl = `${restBaseUrl}/conceptsearch?conceptClasses=${conditionConceptClassUuid}&q=${conditionToLookup}`;
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<CodedCondition> } }, Error>(
+    conditionToLookup ? conditionsSearchUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    searchResults: data?.data?.results ?? [],
+    error: error,
+    isSearching: isLoading,
+  };
+}
+
+export function useProvidersSearch(providerToLookup: string) {
+  const providerSearchUrl = `${restBaseUrl}/provider?v=custom:(uuid,display,person:(uuid,display))&q=${providerToLookup}`;
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<CodedProvider> } }, Error>(
+    providerToLookup ? providerSearchUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    providerSearchResults: data?.data?.results ?? [],
+    error: error,
+    isProviderSearching: isLoading,
+  };
+}

package/src/form/procedures-orders/add-procedures-order/add-procedures-order.scss

@@ -0,0 +1,44 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.container {
+  position: relative;
+  min-height: var(--desktop-workspace-window-height);
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.patientHeader {
+  padding: spacing.$spacing-03 spacing.$spacing-05 spacing.$spacing-06;
+  background-color: vars.$ui-01;
+
+  span:first-of-type {
+    margin-right: spacing.$spacing-03;
+  }
+
+  .text02 {
+    color: vars.$text-02;
+  }
+}
+
+.backButton {
+  padding: spacing.$spacing-03;
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+    margin: 0 spacing.$spacing-05;
+
+    svg {
+      order: 1;
+      margin-right: spacing.$spacing-03;
+      margin-left: 0 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}

package/src/form/procedures-orders/add-procedures-order/add-procedures-order.workspace.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import capitalize from 'lodash-es/capitalize';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import {
+  age,
+  formatDate,
+  parseDate,
+  useLayoutType,
+  usePatient,
+  type DefaultWorkspaceProps,
+} from '@openmrs/esm-framework';
+import { launchPatientWorkspace, type OrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import { TestTypeSearch } from './procedures-type-search';
+import { ProceduresOrderForm } from './procedures-order-form.component';
+import styles from './add-procedures-order.scss';
+import { type ProcedureOrderBasketItem } from '../../../types';
+
+export interface AddProcedureOrderWorkspaceAdditionalProps {
+  order?: OrderBasketItem;
+}
+
+export interface AddProceduresOrderWorkspace extends DefaultWorkspaceProps, AddProcedureOrderWorkspaceAdditionalProps {}
+
+export default function AddProceduresOrderWorkspace({
+  order: initialOrder,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}: AddProceduresOrderWorkspace) {
+  const { t } = useTranslation();
+
+  const { patient, isLoading: isLoadingPatient } = usePatient();
+  const [currentLabOrder, setCurrentLabOrder] = useState(initialOrder as ProcedureOrderBasketItem);
+
+  const isTablet = useLayoutType() === 'tablet';
+
+  const patientName = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`;
+
+  const cancelOrder = useCallback(() => {
+    closeWorkspace({
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, [closeWorkspace]);
+
+  return (
+    <div className={styles.container}>
+      {isTablet && !isLoadingPatient && (
+        <div className={styles.patientHeader}>
+          <span className={styles.bodyShort02}>{patientName}</span>
+          <span className={classNames(styles.text02, styles.bodyShort01)}>
+            {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
+            <span>
+              {formatDate(parseDate(patient?.birthDate), {
+                mode: 'wide',
+                time: false,
+              })}
+            </span>
+          </span>
+        </div>
+      )}
+      {!isTablet && (
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+            iconDescription="Return to order basket"
+            size="sm"
+            onClick={cancelOrder}>
+            <span>{t('backToOrderBasket', 'Back to order basket')}</span>
+          </Button>
+        </div>
+      )}
+      {!currentLabOrder ? (
+        <div>
+          <TestTypeSearch openLabForm={setCurrentLabOrder} />
+        </div>
+      ) : (
+        <div>
+          <ProceduresOrderForm
+            initialOrder={currentLabOrder}
+            closeWorkspace={closeWorkspace}
+            closeWorkspaceWithSavedChanges={closeWorkspaceWithSavedChanges}
+            promptBeforeClosing={promptBeforeClosing}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/form/procedures-orders/add-procedures-order/procedures-order-form.component.tsx

@@ -0,0 +1,476 @@
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import classNames from 'classnames';
+import { launchPatientWorkspace, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import {
+  translateFrom,
+  useLayoutType,
+  useSession,
+  useConfig,
+  ExtensionSlot,
+  type DefaultWorkspaceProps,
+} from '@openmrs/esm-framework';
+import { careSettingUuid, prepProceduresOrderPostData, useOrderReasons, useConceptById, type Concept } from '../api';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  ComboBox,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Layer,
+  Grid,
+  InlineNotification,
+  TextArea,
+  NumberInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { priorityOptions } from './procedures-order';
+import { useProceduresTypes } from './useProceduresTypes';
+import { Controller, type FieldErrors, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { type ConfigObject } from '../../../config-schema';
+import styles from './procedures-order-form.scss';
+import type { ProcedureOrderBasketItem, OrderFrequency } from '../../../types';
+import { useOrderConfig } from '../order-config';
+import { moduleName } from '../../../constants';
+
+export interface ProceduresOrderFormProps {
+  initialOrder: ProcedureOrderBasketItem;
+  closeWorkspace: DefaultWorkspaceProps['closeWorkspace'];
+  closeWorkspaceWithSavedChanges: DefaultWorkspaceProps['closeWorkspaceWithSavedChanges'];
+  promptBeforeClosing: DefaultWorkspaceProps['promptBeforeClosing'];
+}
+
+export function ProceduresOrderForm({
+  initialOrder,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+}: ProceduresOrderFormProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const session = useSession();
+  const { orderConfigObject, isLoading: isLoadingOrderConfig, error: errorFetchingOrderConfig } = useOrderConfig();
+  const { orders, setOrders } = useOrderBasket<ProcedureOrderBasketItem>('procedures', prepProceduresOrderPostData);
+  const { testTypes, isLoading: isLoadingTestTypes, error: errorLoadingTestTypes } = useProceduresTypes();
+  const [showErrorNotification, setShowErrorNotification] = useState(false);
+  const {
+    items: { answers: specimenSourceItems },
+    isLoading: isLoadingSpecimenSourceItems,
+    isError: errorFetchingSpecimenSourceItems,
+  } = useConceptById('159959AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  const {
+    items: { setMembers: specimenTypeItems },
+    isLoading: isLoadingSpecimenTypeItems,
+    isError: errorFetchingSpecimenTypeItems,
+  } = useConceptById('162476AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
+  const config = useConfig<ConfigObject>();
+  const orderReasonRequired = (
+    config.labTestsWithOrderReasons?.find((c) => c.labTestUuid === initialOrder?.testType?.conceptUuid) || {}
+  ).required;
+
+  const {
+    items: { answers: bodySiteItems },
+  } = useConceptById('ccf643d9-e525-499f-ae81-0e660d97c3e4');
+
+  const proceduresOrderFormSchema = z.object({
+    instructions: z.string().optional(),
+    urgency: z.string().refine((value) => value !== '', {
+      message: translateFrom(moduleName, 'addLabOrderPriorityRequired', 'Priority is required'),
+    }),
+    labReferenceNumber: z.string().optional(),
+    testType: z.object(
+      { label: z.string(), conceptUuid: z.string() },
+      {
+        required_error: translateFrom(moduleName, 'addLabOrderLabTestTypeRequired', 'Test type is required'),
+        invalid_type_error: translateFrom(moduleName, 'addLabOrderLabReferenceRequired', 'Test type is required'),
+      },
+    ),
+    orderReason: orderReasonRequired
+      ? z
+          .string({
+            required_error: translateFrom(moduleName, 'addLabOrderLabOrderReasonRequired', 'Order reason is required'),
+          })
+          .refine(
+            (value) => !!value,
+            translateFrom(moduleName, 'addLabOrderLabOrderReasonRequired', 'Order reason is required'),
+          )
+      : z.string().optional(),
+    scheduleDate: z.union([z.string(), z.date(), z.string().optional()]),
+    commentsToFulfiller: z.string().optional(),
+    numberOfRepeats: z.string().optional(),
+    previousOrder: z.string().optional(),
+    frequency: z.string().optional(),
+    bodySite: z.string().optional(),
+    orderReasonNonCoded: z.string().min(1, {
+      message: translateFrom(moduleName, 'addOrderReasonRequired', 'Order reason is required'),
+    }),
+  });
+
+  const orderFrequencies: Array<OrderFrequency> = useMemo(
+    () => orderConfigObject?.orderFrequencies ?? [],
+    [orderConfigObject],
+  );
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, defaultValues, isDirty },
+  } = useForm<ProcedureOrderBasketItem>({
+    mode: 'all',
+    resolver: zodResolver(proceduresOrderFormSchema),
+    defaultValues: {
+      ...initialOrder,
+    },
+  });
+
+  const orderReasonUuids =
+    (config.labTestsWithOrderReasons?.find((c) => c.labTestUuid === defaultValues?.testType?.conceptUuid) || {})
+      .orderReasons || [];
+
+  const { orderReasons } = useOrderReasons(orderReasonUuids);
+
+  const handleFormSubmission = useCallback(
+    (data: ProcedureOrderBasketItem) => {
+      data.action = 'NEW';
+      data.careSetting = careSettingUuid;
+      data.orderer = session.currentProvider.uuid;
+      const newOrders = [...orders];
+      const existingOrder = orders.find((order) => order.testType.conceptUuid == defaultValues.testType.conceptUuid);
+      const orderIndex = existingOrder ? orders.indexOf(existingOrder) : orders.length;
+      newOrders[orderIndex] = data;
+      setOrders(newOrders);
+      closeWorkspaceWithSavedChanges({
+        onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+      });
+    },
+    [orders, setOrders, closeWorkspace, session?.currentProvider?.uuid, defaultValues],
+  );
+
+  const cancelOrder = useCallback(() => {
+    setOrders(orders.filter((order) => order.testType.conceptUuid !== defaultValues.testType.conceptUuid));
+    closeWorkspace({
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, [closeWorkspace, orders, setOrders, defaultValues]);
+
+  const onError = (errors: FieldErrors<ProcedureOrderBasketItem>) => {
+    if (errors) {
+      setShowErrorNotification(true);
+    }
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
+  const [showScheduleDate, setShowScheduleDate] = useState(false);
+
+  return (
+    <>
+      {errorLoadingTestTypes && (
+        <InlineNotification
+          kind="error"
+          lowContrast
+          className={styles.inlineNotification}
+          title={t('errorLoadingTestTypes', 'Error occured when loading test types')}
+          subtitle={t('tryReopeningTheForm', 'Please try launching the form again')}
+        />
+      )}
+      <Form className={styles.orderForm} onSubmit={handleSubmit(handleFormSubmission, onError)} id="procedureOrderForm">
+        <div className={styles.form}>
+          <ExtensionSlot name="top-of-procedure-order-form-slot" state={{ order: initialOrder }} />
+
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="testType"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="testTypeInput"
+                      titleText={t('testType', 'Test type')}
+                      selectedItem={value}
+                      items={testTypes ?? []}
+                      placeholder={
+                        isLoadingTestTypes ? `${t('loading', 'Loading')}...` : t('testTypePlaceholder', 'Select one')
+                      }
+                      onBlur={onBlur}
+                      disabled={isLoadingTestTypes}
+                      onChange={({ selectedItem }) => onChange(selectedItem)}
+                      invalid={errors.testType?.message}
+                      invalidText={errors.testType?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={8} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="urgency"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="priorityInput"
+                      titleText={t('priority', 'Priority')}
+                      selectedItem={priorityOptions.find((option) => option.value === value) || null}
+                      items={priorityOptions ?? []}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => {
+                        onChange(selectedItem?.value || '');
+                        setShowScheduleDate(selectedItem?.label === 'Scheduled');
+                      }}
+                      invalid={errors.urgency?.message}
+                      invalidText={errors.urgency?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          {showScheduleDate && (
+            <Grid className={styles.gridRow}>
+              <Column lg={16} md={4} sm={4}>
+                <div className={styles.fullWidthDatePickerContainer}>
+                  <InputWrapper>
+                    <Controller
+                      name="scheduleDate"
+                      control={control}
+                      render={({ field: { onBlur, value, onChange, ref } }) => (
+                        <DatePicker
+                          datePickerType="single"
+                          value={value}
+                          onChange={([newStartDate]) => onChange(newStartDate)}
+                          onBlur={onBlur}
+                          ref={ref}>
+                          <DatePickerInput
+                            id="scheduleDatePicker"
+                            placeholder="mm/dd/yyyy"
+                            labelText={t('scheduleDate', 'Scheduled date')}
+                            size="lg"
+                          />
+                        </DatePicker>
+                      )}
+                    />
+                  </InputWrapper>
+                </div>
+              </Column>
+            </Grid>
+          )}
+          {orderReasons.length > 0 && (
+            <Grid className={styles.gridRow}>
+              <Column lg={16} md={8} sm={4}>
+                <InputWrapper>
+                  <Controller
+                    name="orderReason"
+                    control={control}
+                    render={({ field: { onChange, onBlur, value } }) => (
+                      <ComboBox
+                        size="lg"
+                        id="orderReasonInput"
+                        titleText={t('orderReason', 'Order reason')}
+                        selectedItem={''}
+                        itemToString={(item) => item?.display}
+                        items={orderReasons ?? []}
+                        onBlur={onBlur}
+                        onChange={({ selectedItem }) => onChange(selectedItem?.uuid || '')}
+                        invalid={errors.orderReason?.message}
+                        invalidText={errors.orderReason?.message}
+                      />
+                    )}
+                  />
+                </InputWrapper>
+              </Column>
+            </Grid>
+          )}
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="bodySite"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="bodySiteInput"
+                      titleText={t('bodySite', 'Body Site')}
+                      selectedItem={bodySiteItems?.find((option) => option.uuid === value) || null}
+                      items={bodySiteItems ?? []}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => onChange(selectedItem?.uuid || '')}
+                      invalid={errors.bodySite?.message}
+                      invalidText={errors.bodySite?.message}
+                      itemToString={(item) => item?.display}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="numberOfRepeats"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <NumberInput
+                      enableCounter
+                      id="numberOfRepeats"
+                      label={t('numberOfRepeats', 'Number Of Repeats')}
+                      min={0}
+                      hideSteppers={false}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      invalid={errors.numberOfRepeats?.message}
+                      invalidText={errors.numberOfRepeats?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="frequency"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <ComboBox
+                      size="lg"
+                      id="frequencyInput"
+                      titleText={t('frequency', 'Frequency')}
+                      selectedItem={orderFrequencies.find((option) => option.value === value) || null}
+                      items={orderFrequencies ?? []}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => onChange(selectedItem?.value || '')}
+                      invalid={errors.frequency?.message}
+                      invalidText={errors.frequency?.message}
+                      itemToString={(item) => item?.value}
+                      disabled={isLoadingOrderConfig}
+                      placeholder={
+                        isLoadingOrderConfig ? `${t('loading', 'Loading')}...` : t('testTypePlaceholder', 'Select one')
+                      }
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="orderReasonNonCoded"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextArea
+                      enableCounter
+                      id="orderReasonNonCodedInput"
+                      size="lg"
+                      labelText={'Order Reason'}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      maxCount={500}
+                      invalid={errors.orderReasonNonCoded?.message}
+                      invalidText={errors.orderReasonNonCoded?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="instructions"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextArea
+                      enableCounter
+                      id="additionalInstructionsInput"
+                      size="lg"
+                      labelText={t('additionalInstructions', 'Additional instructions')}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      maxCount={500}
+                      invalid={errors.instructions?.message}
+                      invalidText={errors.instructions?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+          <Grid className={styles.gridRow}>
+            <Column lg={16} md={8} sm={4}>
+              <InputWrapper>
+                <Controller
+                  name="commentsToFulfiller"
+                  control={control}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextArea
+                      enableCounter
+                      id="commentsToFulfillerInput"
+                      size="lg"
+                      labelText={t('commentsToFulfiller', 'Comments To Fulfiller')}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                      maxCount={500}
+                      invalid={errors.commentsToFulfiller?.message}
+                      invalidText={errors.commentsToFulfiller?.message}
+                    />
+                  )}
+                />
+              </InputWrapper>
+            </Column>
+          </Grid>
+        </div>
+        <div>
+          {showErrorNotification && (
+            <Column className={styles.errorContainer}>
+              <InlineNotification
+                lowContrast
+                title={t('error', 'Error')}
+                subtitle={t('pleaseRequiredFields', 'Please fill all required fields') + '.'}
+                onClose={() => setShowErrorNotification(false)}
+              />
+            </Column>
+          )}
+          <ButtonSet
+            className={classNames(styles.buttonSet, isTablet ? styles.tabletButtonSet : styles.desktopButtonSet)}>
+            <Button className={styles.button} kind="secondary" onClick={cancelOrder} size="xl">
+              {t('discard', 'Discard')}
+            </Button>
+            <Button className={styles.button} kind="primary" type="submit" size="xl">
+              {t('saveOrder', 'Save order')}
+            </Button>
+          </ButtonSet>
+        </div>
+      </Form>
+    </>
+  );
+}
+
+function InputWrapper({ children }) {
+  const isTablet = useLayoutType() === 'tablet';
+  return (
+    <Layer level={isTablet ? 1 : 0}>
+      <div className={styles.field}>{children}</div>
+    </Layer>
+  );
+}