@kenyaemr/esm-ward-app 8.0.1-pre.99 → 8.0.2

package/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace.tsx

@@ -1,20 +1,24 @@
+import { Button, ButtonSet, Column, Form, InlineNotification, Row } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { z } from 'zod';
 import { Controller, useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
-import { Button, ButtonSet, Column, Dropdown, DropdownSkeleton, Form, InlineNotification, Row } from '@carbon/react';
-import { showSnackbar, useFeatureFlag, useSession } from '@openmrs/esm-framework';
-import { filterBeds } from '../../ward-view/ward-view.resource';
-import type { BedLayout, DispositionType } from '../../types';
-import { assignPatientToBed, createEncounter } from '../../ward.resource';
-import { useAdmissionLocation } from '../../hooks/useAdmissionLocation';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
-import useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { z } from 'zod';
+import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
 import useWardLocation from '../../hooks/useWardLocation';
-import type { AdmitPatientFormWorkspaceProps } from './types';
+import type { WardViewContext } from '../../types';
+import { assignPatientToBed, removePatientFromBed, useAdmitPatient } from '../../ward.resource';
+import BedSelector from '../bed-selector.component';
 import styles from './admit-patient-form.scss';
+import type { AdmitPatientFormWorkspaceProps } from './types';
 
+/**
+ * This form gets rendered when the user clicks "admit patient" in
+ * the patient card in the admission requests workspace, but only when
+ * the bed management module is installed. It asks to (optionally) select
+ * a bed to assign to patient
+ */
 const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   patient,
   dispositionType,
@@ -24,29 +28,23 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
 }) => {
   const { t } = useTranslation();
   const { location } = useWardLocation();
-  const { currentProvider } = useSession();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { mutate: mutateInpatientRequest } = useInpatientRequest();
-  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { admitPatient, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useAdmitPatient();
   const [showErrorNotifications, setShowErrorNotifications] = useState(false);
-  const { isLoading, admissionLocation, mutate: mutateAdmissionLocation } = useAdmissionLocation();
-  const beds = useMemo(() => (isLoading ? [] : filterBeds(admissionLocation)), [admissionLocation]);
-  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-  const getBedRepresentation = useCallback((bedLayout: BedLayout) => {
-    const bedNumber = bedLayout.bedNumber;
-    const patients =
-      bedLayout.patients.length === 0
-        ? [t('emptyText', 'Empty')]
-        : bedLayout.patients.map((patient) => patient?.person?.preferredName?.display);
-    return [bedNumber, ...patients].join(' · ');
-  }, []);
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { isLoading } = wardPatientGroupDetails?.admissionLocationResponse ?? {};
+
+  const { data: bedsAssignedToPatient, isLoading: isLoadingBedsAssignedToPatient } = useAssignedBedByPatient(
+    patient.uuid,
+  );
+  const beds = isLoading ? [] : wardPatientGroupDetails?.bedLayouts ?? [];
 
   const zodSchema = useMemo(
     () =>
       z.object({
         bedId: z.number().optional(),
       }),
-    [isBedManagementModuleInstalled, beds],
+    [beds],
   );
 
   type FormValues = z.infer<typeof zodSchema>;
@@ -55,8 +53,6 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
     control,
     formState: { errors, isDirty },
     handleSubmit,
-    getValues,
-    watch,
   } = useForm<FormValues>({
     resolver: zodResolver(zodSchema),
   });
@@ -65,174 +61,108 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
     promptBeforeClosing(() => isDirty);
   }, [isDirty]);
 
-  const onSubmit = useCallback(
-    (values: FormValues) => {
-      setShowErrorNotifications(false);
-      setIsSubmitting(true);
-      const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
-      createEncounter({
-        patient: patient.uuid,
-        encounterType:
-          dispositionType === 'ADMIT'
-            ? emrConfiguration.admissionEncounterType.uuid
-            : dispositionType === 'TRANSFER'
-              ? emrConfiguration.transferWithinHospitalEncounterType.uuid
-              : null,
-        location: location?.uuid,
-        encounterProviders: [
-          {
-            provider: currentProvider?.uuid,
-            encounterRole: emrConfiguration.clinicianEncounterRole.uuid,
-          },
-        ],
-        obs: [],
-      })
-        .then(
-          async (response) => {
-            if (response.ok) {
-              if (bedSelected) {
-                return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+  const onSubmit = (values: FormValues) => {
+    setShowErrorNotifications(false);
+    setIsSubmitting(true);
+    const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
+    admitPatient(patient, dispositionType)
+      .then(
+        async (response) => {
+          if (response.ok) {
+            if (bedSelected) {
+              return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+            } else {
+              const assignedBedId = bedsAssignedToPatient?.data?.results?.[0]?.bedId;
+              if (assignedBedId) {
+                return removePatientFromBed(assignedBedId, patient.uuid);
               }
               return response;
             }
-          },
-          (err: Error) => {
-            showSnackbar({
-              kind: 'error',
-              title: t('errorCreatingEncounter', 'Failed to admit patient', {
-                encounterType:
-                  dispositionType === 'ADMIT'
-                    ? emrConfiguration.admissionEncounterType.display
-                    : emrConfiguration.transferWithinHospitalEncounterType.display,
-              }),
-              subtitle: err.message,
-            });
-          },
-        )
-        .then(
-          (response) => {
-            if (response && response?.ok) {
-              if (bedSelected) {
-                showSnackbar({
-                  kind: 'success',
-                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-                  subtitle: t(
-                    'patientAdmittedSuccessfullySubtitle',
-                    '{{patientName}} has been successfully admitted and assigned to bed {{bedNumber}}',
-                    {
-                      patientName: patient.person.preferredName.display,
-                      bedNumber: bedSelected.bedNumber,
-                    },
-                  ),
-                });
-              } else {
-                showSnackbar({
-                  kind: 'success',
-                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-                  subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
-                    location: location?.display,
-                  }),
-                });
-              }
-              mutateAdmissionLocation();
-              mutateInpatientRequest();
-              closeWorkspaceWithSavedChanges();
+          }
+        },
+        (err: Error) => {
+          showSnackbar({
+            kind: 'error',
+            title: t('errorCreatingEncounter', 'Failed to admit patient'),
+            subtitle: err.message,
+          });
+        },
+      )
+      .then(
+        (response) => {
+          if (response && response?.ok) {
+            if (bedSelected) {
+              showSnackbar({
+                kind: 'success',
+                title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                subtitle: t(
+                  'patientAdmittedSuccessfullySubtitle',
+                  '{{patientName}} has been successfully admitted and assigned to bed {{bedNumber}}',
+                  {
+                    patientName: patient.person.preferredName.display,
+                    bedNumber: bedSelected.bedNumber,
+                  },
+                ),
+              });
+            } else {
+              showSnackbar({
+                kind: 'success',
+                title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
+                  location: location?.display,
+                }),
+              });
             }
-          },
-          () => {
-            showSnackbar({
-              kind: 'warning',
-              title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-              subtitle: t(
-                'patientAdmittedButBedNotAssigned',
-                'Patient admitted successfully but fail to assign bed to patient',
-              ),
-            });
-            mutateAdmissionLocation();
-            mutateInpatientRequest();
-            closeWorkspaceWithSavedChanges();
-          },
-        )
-        .finally(() => {
-          setIsSubmitting(false);
-        });
-    },
-    [beds, patient, emrConfiguration, location, closeWorkspaceWithSavedChanges, dispositionType, currentProvider],
-  );
+          }
+        },
+        () => {
+          showSnackbar({
+            kind: 'warning',
+            title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+            subtitle: t(
+              'patientAdmittedButBedNotAssigned',
+              'Patient admitted successfully but fail to assign bed to patient',
+            ),
+          });
+        },
+      )
+      .finally(() => {
+        setIsSubmitting(false);
+        wardPatientGroupDetails?.mutate?.();
+        closeWorkspaceWithSavedChanges();
+      });
+  };
 
   const onError = useCallback((values) => {
     setShowErrorNotifications(true);
     setIsSubmitting(false);
   }, []);
 
+  if (!wardPatientGroupDetails) return <></>;
   return (
     <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
       <div className={styles.formContent}>
-        {errorFetchingEmrConfiguration && (
-          <div className={styles.formError}>
-            <InlineNotification
-              kind="error"
-              title={t('somePartsOfTheFormDidntLoad', "Some parts of the form didn't load")}
-              subtitle={t(
-                'fetchingEmrConfigurationFailed',
-                'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
-              )}
-              lowContrast
-              hideCloseButton
-            />
-          </div>
-        )}
         <Row>
           <Column>
             <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
             <div className={styles.bedSelectionDropdown}>
-              {isBedManagementModuleInstalled ? (
-                isLoading ? (
-                  <DropdownSkeleton />
-                ) : beds.length ? (
-                  <Controller
-                    control={control}
-                    name="bedId"
-                    render={({ field: { onChange }, fieldState: { error } }) => {
-                      const selectedItem = beds.find((bed) => bed.bedId === getValues()?.bedId);
-                      return (
-                        <Dropdown
-                          id="default"
-                          titleText=""
-                          helperText=""
-                          label={!selectedItem && t('chooseAnOption', 'Choose an option')}
-                          items={beds}
-                          itemToString={getBedRepresentation}
-                          selectedItem={selectedItem}
-                          onChange={({ selectedItem }: { selectedItem: BedLayout }) => onChange(selectedItem.bedId)}
-                          invalid={!!error}
-                          invalidText={error?.message}
-                        />
-                      );
-                    }}
-                  />
-                ) : (
-                  <InlineNotification
-                    kind="error"
-                    title={t('noBedsConfiguredForLocation', 'No beds configured for {{location}} location', {
-                      location: location?.display,
-                    })}
-                    lowContrast
-                    hideCloseButton
-                  />
-                )
-              ) : (
-                <InlineNotification
-                  kind="info"
-                  title={t('unableToSelectBeds', 'Unable to select beds')}
-                  subtitle={t(
-                    'bedManagementModuleNotInstalled',
-                    'Bed management module is not present to allow bed selection',
-                  )}
-                  lowContrast
-                  hideCloseButton
-                />
-              )}
+              <Controller
+                control={control}
+                name="bedId"
+                render={({ field: { onChange, value }, fieldState: { error } }) => {
+                  return (
+                    <BedSelector
+                      beds={beds}
+                      isLoadingBeds={isLoading}
+                      currentPatient={patient}
+                      selectedBedId={value}
+                      error={error}
+                      control={control}
+                      onChange={onChange}
+                    />
+                  );
+                }}
+              />
             </div>
           </Column>
         </Row>
@@ -256,7 +186,13 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
         <Button
           type="submit"
           size="xl"
-          disabled={isSubmitting || isLoadingEmrConfiguration || errorFetchingEmrConfiguration}>
+          disabled={
+            isSubmitting ||
+            isLoadingEmrConfiguration ||
+            errorFetchingEmrConfiguration ||
+            isLoading ||
+            isLoadingBedsAssignedToPatient
+          }>
           {!isSubmitting ? t('admit', 'Admit') : t('admitting', 'Admitting...')}
         </Button>
       </ButtonSet>

package/src/ward-workspace/bed-selector.component.tsx

@@ -0,0 +1,119 @@
+import { Dropdown, InlineNotification, RadioButton, RadioButtonGroup, RadioButtonSkeleton } from '@carbon/react';
+import { type Patient } from '@openmrs/esm-framework';
+import React from 'react';
+import { type Control, type FieldError } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import useWardLocation from '../hooks/useWardLocation';
+import { type BedLayout } from '../types';
+import styles from './bed-selector.scss';
+
+interface BedSelectorProps {
+  beds: BedLayout[];
+  isLoadingBeds: boolean;
+  currentPatient: Patient;
+  selectedBedId: number;
+  error: FieldError;
+  onChange(bedId: number);
+  control: Control<{ bedId?: number }, any, { bedId?: number }>;
+  minBedCountToUseDropdown?: number;
+}
+
+interface BedDropdownItem {
+  bedId: number;
+  label: string;
+  disabled: boolean;
+}
+
+const BedSelector: React.FC<BedSelectorProps> = ({
+  selectedBedId,
+  beds,
+  isLoadingBeds,
+  error,
+  onChange,
+  currentPatient,
+  control,
+  minBedCountToUseDropdown = 16,
+}) => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
+
+  const getBedRepresentation = (bedLayout: BedLayout) => {
+    const bedNumber = bedLayout.bedNumber;
+    const patients =
+      bedLayout.patients.length === 0
+        ? [t('emptyText', 'Empty')]
+        : bedLayout.patients.map((patient) => patient?.person?.preferredName?.display);
+    return [bedNumber, ...patients].join(' · ');
+  };
+
+  const bedDropdownItems: BedDropdownItem[] = [
+    { bedId: 0, label: t('noBed', 'No bed'), disabled: false },
+    ...beds.map((bed) => {
+      const isPatientAssignedToBed = bed.patients.some((bedPatient) => bedPatient.uuid === currentPatient.uuid);
+      return { bedId: bed.bedId, label: getBedRepresentation(bed), disabled: isPatientAssignedToBed };
+    }),
+  ];
+  const selectedItem = bedDropdownItems.find((bed) => bed.bedId === selectedBedId);
+
+  const useDropdown = beds.length >= minBedCountToUseDropdown;
+
+  if (isLoadingBeds) {
+    return (
+      <RadioButtonGroup className={styles.radioButtonGroup} name="bedId">
+        <RadioButtonSkeleton />
+        <RadioButtonSkeleton />
+        <RadioButtonSkeleton />
+      </RadioButtonGroup>
+    );
+  }
+  if (!beds.length) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('noBedsConfiguredForLocation', 'No beds configured for {{location}} location', {
+          location: location?.display,
+        })}
+        lowContrast
+        hideCloseButton
+      />
+    );
+  }
+  if (useDropdown) {
+    return (
+      <Dropdown
+        id="default"
+        titleText=""
+        helperText=""
+        label={!selectedItem && t('chooseAnOption', 'Choose an option')}
+        items={bedDropdownItems}
+        itemToString={(bedDropdownItem: BedDropdownItem) => bedDropdownItem.label}
+        selectedItem={selectedItem}
+        onChange={({ selectedItem }: { selectedItem: BedLayout }) => onChange(selectedItem.bedId)}
+        invalid={!!error}
+        invalidText={error?.message}
+      />
+    );
+  } else {
+    return (
+      <RadioButtonGroup
+        name="bedId"
+        className={styles.radioButtonGroup}
+        onChange={onChange}
+        invalid={!!error}
+        invalidText={error?.message}>
+        {bedDropdownItems.map(({ bedId, label, disabled }) => (
+          <RadioButton
+            key={bedId}
+            labelText={label}
+            control={control}
+            value={bedId}
+            checked={bedId === selectedBedId}
+            disabled={disabled}
+          />
+        ))}
+      </RadioButtonGroup>
+    );
+  }
+};
+
+export default BedSelector;

package/src/ward-workspace/bed-selector.scss

@@ -0,0 +1,15 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.radioButtonGroup {
+  margin-top: layout.$spacing-03;
+  fieldset {
+    flex-direction: column;
+    align-items: flex-start;
+
+    :global(.cds--radio-button-wrapper) {
+      margin-bottom: layout.$spacing-04;
+    }
+  }
+}

package/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -1,27 +1,20 @@
+import { useAppContext } from '@openmrs/esm-framework';
 import React from 'react';
-import type { WardPatient } from '../../types';
-import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
-import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
+import type { WardPatient, WardViewContext } from '../../types';
 import styles from './style.scss';
-import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
-import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
 
 const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
-  const { headerRowElements } = useCurrentWardCardConfig();
-  const { patient, bed, visit } = wardPatient;
+  const { patient } = wardPatient;
+  const {WardPatientHeader} = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
-  if (!(patient && visit)) {
-    console.warn('Patient details and visit details were not received by the workspace');
+  if (!patient) {
+    console.warn('Patient details were not received by the ward workspace');
     return null;
   }
 
   return (
     <div className={styles.patientBanner}>
-      {bed ? <WardPatientBedNumber bed={bed} /> : null}
-      <WardPatientName patient={patient} />
-      {headerRowElements.map((elementId, i) => (
-        <WardPatientCardElement key={`ward-card-${patient.uuid}-header-${i}`} elementId={elementId} {...wardPatient} />
-      ))}
+      {WardPatientHeader && <WardPatientHeader {...wardPatient} />}
     </div>
   );
 };

package/src/ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace.tsx

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps } from '../../types';
+
+const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (props) => {
+  const { wardPatient, ...restWorkspaceProps } = props;
+  const patientUuid = wardPatient?.patient?.uuid;
+
+  const clinicalFormsExtensionState = useMemo(
+    () => ({
+      patientUuid,
+      clinicalFormsWorkspaceName: 'ward-patient-clinical-forms-workspace',
+      formEntryWorkspaceName: 'ward-patient-form-entry-workspace',
+      htmlFormEntryWorkspaceName: 'ward-patient-html-form-entry-workspace',
+      ...restWorkspaceProps,
+    }),
+    [patientUuid, restWorkspaceProps],
+  );
+
+  return <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />;
+};
+
+export default WardPatientClinicalFormsWorkspace;

package/src/{ward-patient-workspace → ward-workspace/patient-details}/ward-patient-action-button.extension.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { UserAvatarIcon } from '@openmrs/esm-framework';
 import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps } from '../../types';
 
 export default function WardPatientActionButton() {
   const { t } = useTranslation();
@@ -11,7 +12,7 @@ export default function WardPatientActionButton() {
       getIcon={(props) => <UserAvatarIcon {...props} />}
       label={t('Patient', 'patient')}
       iconDescription={t('Patient', 'patient')}
-      handler={() => launchWorkspace('ward-patient-workspace')}
+      handler={() =>  launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace')}
       type={'ward'}
     />
   );

package/src/{ward-patient-workspace → ward-workspace/patient-details}/ward-patient.workspace.tsx

@@ -1,21 +1,28 @@
 import { age, attach, ExtensionSlot, type Patient } from '@openmrs/esm-framework';
 import React, { useEffect } from 'react';
-import { type WardPatientWorkspaceProps } from '../types';
 import styles from './ward-patient.style.scss';
 import { useTranslation } from 'react-i18next';
-import { getGender } from '../ward-patient-card/row-elements/ward-patient-gender.component';
+import { type WardPatientWorkspaceProps } from '../../types';
+import { getGender } from '../../ward-patient-card/row-elements/ward-patient-gender.component';
 
 attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
 
-export default function WardPatientWorkspace({ setTitle, wardPatient: { patient } }: WardPatientWorkspaceProps) {
+export default function WardPatientWorkspace({ setTitle, wardPatient }: WardPatientWorkspaceProps) {
   useEffect(() => {
-    setTitle(patient.person.display, <PatientWorkspaceTitle patient={patient} />);
-  }, []);
+    if (wardPatient) {
+      const { patient } = wardPatient;
+      setTitle(patient.person.display, <PatientWorkspaceTitle key={patient.uuid} patient={patient} />);
+    }
+  }, [wardPatient]);
 
   return (
-    <div className={styles.workspaceContainer}>
-      <WardPatientWorkspaceView patient={patient} />
-    </div>
+    <>
+      {wardPatient && (
+        <div className={styles.workspaceContainer}>
+          <WardPatientWorkspaceView patient={wardPatient.patient} />
+        </div>
+      )}
+    </>
   );
 }
 
@@ -45,7 +52,9 @@ const PatientWorkspaceTitle: React.FC<WardPatientWorkspaceViewProps> = ({ patien
     <>
       <div>{patient.person.display} &nbsp;</div>
       <div className={styles.headerPatientDetail}>&middot; &nbsp; {getGender(t, patient.person?.gender)}</div>
-      <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.person?.birthdate)}</div>
+      {patient.person?.birthdate && (
+        <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.person?.birthdate)}</div>
+      )}
     </>
   );
 };

package/src/ward-workspace/patient-discharge/patient-discharge.scss

@@ -0,0 +1,41 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.workspaceContent {
+  padding: layout.$spacing-05;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #393939;
+}
+
+.patientWorkspaceBanner {
+  margin: (-(layout.$spacing-05)) (-(layout.$spacing-05)) layout.$spacing-05 (-(layout.$spacing-05));
+}
+
+.contentSwitcher {
+  margin-top: layout.$spacing-03;
+}
+
+.workspaceForm {
+  margin-top: layout.$spacing-05;
+  flex: 1;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.buttonSet {
+  margin: 0 (-(layout.$spacing-05)) (-(layout.$spacing-05)) (-(layout.$spacing-05));
+
+  button {
+    max-width: unset !important;
+    width: auto !important;
+
+    > svg {
+      fill: currentColor !important;
+    }
+  }
+}