@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './clear-queue-entries-dialog.scss';
+import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showNotification, showToast } from '@openmrs/esm-framework';
+import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
+import { MappedVisitQueueEntry, useVisitQueueEntries } from '../active-visits/active-visits-table.resource';
+
+interface ClearQueueEntriesDialogProps {
+  visitQueueEntries: Array<MappedVisitQueueEntry>;
+  closeModal: () => void;
+}
+
+const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ visitQueueEntries, closeModal }) => {
+  const { t } = useTranslation();
+  const { mutate } = useVisitQueueEntries('', '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleClearQueueBatchRequest = useCallback(() => {
+    setIsSubmitting(true);
+    batchClearQueueEntries(visitQueueEntries).then(
+      (response) => {
+        closeModal();
+        showToast({
+          critical: true,
+          title: t('clearQueue', 'Clear queue'),
+          kind: 'success',
+          description: t('queuesClearedSuccessfully', 'Queues cleared successfully'),
+        });
+        mutate();
+      },
+      (error) => {
+        showNotification({
+          title: t('errorClearingQueues', 'Error clearing queues'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  }, [closeModal, mutate, t, visitQueueEntries]);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('serviceQueue', 'Service queue')}
+        title={t('clearAllQueueEntries', 'Clear all queue entries?')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'clearAllQueueEntriesWarningMessage',
+            'Clearing all queue entries will remove  all the patients from the queues and will not allow you to fill any other encounter forms for the patients',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting === true ? (
+          <ButtonSkeleton />
+        ) : (
+          <Button kind="danger" onClick={handleClearQueueBatchRequest}>
+            {t('clearQueue', 'Clear queue')}
+          </Button>
+        )}
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ClearQueueEntriesDialog;

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.resource.tsx

@@ -0,0 +1,46 @@
+import { openmrsFetch, parseDate, toDateObjectStrict, toOmrsIsoString } from '@openmrs/esm-framework';
+import { endPatientStatus, MappedVisitQueueEntry } from '../active-visits/active-visits-table.resource';
+
+export async function batchClearQueueEntries(queueEntries: Array<MappedVisitQueueEntry>) {
+  const abortController = new AbortController();
+  // number of concurrent requests in one batch
+  const batchSize = 10;
+  // request counter
+  let curReq = 0;
+  // as long as there are items in the list continue to form batches
+  while (curReq < queueEntries.length) {
+    const end = queueEntries.length < curReq + batchSize ? queueEntries.length : curReq + batchSize;
+    const concurrentReq = new Array(batchSize);
+    const endedAt = toDateObjectStrict(toOmrsIsoString(new Date()));
+    for (let index = curReq; index < end; index++) {
+      await Promise.all([
+        endPatientStatus(queueEntries[index]?.queueUuid, queueEntries[index]?.queueEntryUuid, endedAt),
+      ]);
+
+      concurrentReq.push(
+        openmrsFetch(`/ws/rest/v1/visit/${queueEntries[index].visitUuid}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          signal: abortController.signal,
+          body: {
+            location: queueEntries[index]?.visitLocation,
+            startDatetime: parseDate(queueEntries[index]?.visitStartDateTime),
+            visitType: queueEntries[index]?.visitTypeUuid,
+            stopDatetime: new Date(),
+          },
+        }),
+      );
+      curReq++;
+    }
+    // wait until all promises are done or one promise is rejected
+    return await Promise.all(concurrentReq)
+      .then((res) => {
+        return res;
+      })
+      .catch((error) => {
+        return error;
+      });
+  }
+}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '~carbon-components/src/globals/scss/mixins';
+
+#subHeading {
+  @include carbon--type-style('productive-heading-01');
+  color: $ui-05;
+}
+
+.clearBtn {
+  margin-left: spacing.$spacing-05;
+  height: spacing.$spacing-09;
+  border: 0.063rem solid #a2191f;
+}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ClearQueueEntriesDialog from './clear-queue-entries-dialog.component';
+import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
+
+const mockBatchClearQueueEntries = batchClearQueueEntries as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  showToast: jest.fn(),
+}));
+
+jest.mock('./clear-queue-entries-dialog.resource');
+
+jest.mock('../active-visits/active-visits-table.resource', () => ({
+  useVisitQueueEntries: () => ({
+    mutate: jest.fn(),
+  }),
+}));
+
+describe('ClearQueueEntriesDialog Component', () => {
+  const visitQueueEntriesMock = [];
+
+  it('renders the component with warning message', () => {
+    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={() => {}} />);
+
+    expect(screen.getByRole('heading', { name: 'Service queue' })).toBeInTheDocument();
+    expect(screen.getByText('Clear all queue entries?')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Clear queue')).toBeInTheDocument();
+  });
+
+  it('should close modal when clicked on cancel', async () => {
+    const closeModalMock = jest.fn();
+    mockBatchClearQueueEntries.mockImplementationOnce(() => Promise.resolve());
+    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={closeModalMock} />);
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(closeModalMock).toHaveBeenCalled();
+  });
+});

package/src/clear-queue-entries-dialog/clear-queue-entries.component.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { MappedVisitQueueEntry } from '../active-visits/active-visits-table.resource';
+import { Button } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import styles from './clear-queue-entries-dialog.scss';
+
+interface ClearQueueEntriesProps {
+  visitQueueEntries: Array<MappedVisitQueueEntry>;
+}
+
+const ClearQueueEntries: React.FC<ClearQueueEntriesProps> = ({ visitQueueEntries }) => {
+  const { t } = useTranslation();
+
+  const launchClearAllQueueEntriesModal = useCallback(() => {
+    const dispose = showModal('clear-all-queue-entries', {
+      closeModal: () => dispose(),
+      visitQueueEntries,
+    });
+  }, [visitQueueEntries]);
+
+  return (
+    <Button
+      size="sm"
+      kind="danger--tertiary"
+      className={styles.clearBtn}
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+      onClick={launchClearAllQueueEntriesModal}
+      iconDescription={t('clearQueue', 'Clear queue')}>
+      {t('clearQueue', 'Clear queue')}
+    </Button>
+  );
+};
+
+export default ClearQueueEntries;

package/src/config-schema.ts

@@ -0,0 +1,177 @@
+import { Type } from '@openmrs/esm-framework';
+import vitalsConfigSchema, { VitalsConfigObject } from './current-visit/visit-details/vitals-config-schema';
+import biometricsConfigSchema, { BiometricsConfigObject } from './current-visit/visit-details/biometrics-config-schema';
+
+export const configSchema = {
+  concepts: {
+    priorityConceptSetUuid: {
+      _type: Type.ConceptUuid,
+      _default: '78063dec-b6d8-40c1-9483-dd4d3c3ca434',
+    },
+    defaultPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _description: 'The UUID of the default priority for the queues eg Not urgent.',
+      _default: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+    },
+    emergencyPriorityConceptUuid: {
+      _type: Type.ConceptUuid,
+      _description: 'The UUID of the priority with the highest sort weight for the queues eg Emergency.',
+      _default: '04f6f7e0-e3cb-4e13-a133-4479f759574e',
+    },
+    serviceConceptSetUuid: {
+      _type: Type.ConceptUuid,
+      _default: 'a8f3f64a-11d5-4a09-b0fb-c8118fa349f3',
+    },
+    statusConceptSetUuid: {
+      _type: Type.ConceptUuid,
+      _default: 'd60ffa60-fca6-4c60-aea9-a79469ae65c7',
+    },
+    defaultStatusConceptUuid: {
+      _type: Type.ConceptUuid,
+      _description: 'The UUID of the default status for the queues eg Waiting.',
+      _default: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
+    },
+    defaultTransitionStatus: {
+      _type: Type.ConceptUuid,
+      _description: 'The UUID of the default status for attending a service in the queues eg In Service.',
+      _default: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
+    },
+    visitQueueNumberAttributeUuid: {
+      _type: Type.ConceptUuid,
+      _description: 'The UUID of the visit attribute that contains the visit queue number.',
+      _default: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+    systolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5085AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    diastolicBloodPressureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5086AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    pulseUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5087AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    temperatureUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5088AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    oxygenSaturationUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5092AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    heightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    weightUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    respiratoryRateUuid: {
+      _type: Type.ConceptUuid,
+      _default: '5242AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    generalPatientNoteUuid: {
+      _type: Type.ConceptUuid,
+      _default: '165095AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    midUpperArmCircumferenceUuid: {
+      _type: Type.ConceptUuid,
+      _default: '1343AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    },
+    historicalObsConceptUuid: {
+      _type: Type.Array,
+      _description: 'The Uuids of the obs that are displayed on the previous visit modal',
+      _default: ['161643AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+    },
+  },
+  contactAttributeType: {
+    _type: Type.UUID,
+    _description:
+      'The Uuids of person attribute-type that captures contact information `e.g Next of kin contact details`',
+    _default: [],
+  },
+  vitals: vitalsConfigSchema,
+  biometrics: biometricsConfigSchema,
+  showQueueTableTab: {
+    _type: Type.Boolean,
+    _default: false,
+    _description: 'Disable outpatient table tabs',
+  },
+  appointmentStatuses: {
+    _type: Type.Array,
+    _description: 'Configurable appointment status (status of appointments)',
+    _default: ['Requested', 'Scheduled', 'CheckedIn', 'Completed', 'Cancelled', 'Missed'],
+  },
+  defaultIdentifierTypes: {
+    _type: Type.Array,
+    _element: {
+      _type: Type.String,
+    },
+    _description: 'The identifier types to be display on all patient search result page',
+    _default: ['05ee9cf4-7242-4a17-b4d4-00f707265c8a', 'f85081e2-b4be-4e48-b3a4-7994b69bb101'],
+  },
+  showRecommendedVisitTypeTab: {
+    _type: Type.Boolean,
+    _description: 'Whether start visit form should display recommended visit type tab. Requires `visitTypeResourceUrl`',
+    _default: false,
+  },
+  customPatientChartUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'Custom URL to load patient chart',
+  },
+  customPatientIdUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'Custom URL to fetch patient with id',
+  },
+  defaultFacilityUrl: {
+    _type: Type.String,
+    _default: '/ws/rest/v1/kenyaemr/default-facility',
+    _description: 'Custom URL to load default facility if it is not in the session',
+  },
+  customPatientChartText: {
+    _type: Type.String,
+    _default: '',
+    _description: 'Custom label for patient chart button',
+  },
+};
+
+export interface ConfigObject {
+  concepts: {
+    priorityConceptSetUuid: string;
+    defaultPriorityConceptUuid: string;
+    serviceConceptSetUuid: string;
+    statusConceptSetUuid: string;
+    defaultStatusConceptUuid: string;
+    systolicBloodPressureUuid: string;
+    diastolicBloodPressureUuid: string;
+    pulseUuid: string;
+    temperatureUuid: string;
+    oxygenSaturationUuid: string;
+    heightUuid: string;
+    weightUuid: string;
+    respiratoryRateUuid: string;
+    midUpperArmCircumferenceUuid: string;
+    emergencyPriorityConceptUuid: string;
+    historicalObsConceptUuid: Array<string>;
+  };
+  contactAttributeType: Array<string>;
+  vitals: VitalsConfigObject;
+  biometrics: BiometricsConfigObject;
+  showQueueTableTab: boolean;
+  appointmentStatuses: Array<string>;
+  defaultIdentifierTypes: Array<string>;
+  showRecommendedVisitTypeTab: boolean;
+  customPatientChartUrl: string;
+  customPatientIdUrl: string;
+  defaultFacilityUrl: string;
+  customPatientChartText: string;
+}
+
+export interface OutpatientConfig {
+  visitTypeResourceUrl: string;
+}

package/src/constants.ts

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs';
+export const spaRoot = window['getOpenmrsSpaBase'];
+export const basePath = '/outpatient';
+export const spaBasePath = `${window.spaBase}/home`;
+export const omrsDateFormat = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+export const startOfDay = dayjs(new Date().setUTCHours(0, 0, 0, 0)).format(omrsDateFormat);
+export const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/src/createDashboardLink.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  const { name, title } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${name}`}
+      className={`cds--side-nav__link ${navLink.match(name) && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );

package/src/current-visit/current-visit-summary.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag, DataTableSkeleton } from '@carbon/react';
+import CurrentVisitDetails from './visit-details/current-visit-details.component';
+import { useVisit } from './current-visit.resource';
+import styles from './current-visit.scss';
+
+interface CurrentVisitProps {
+  patientUuid: string;
+  visitUuid: string;
+}
+
+const CurrentVisit: React.FC<CurrentVisitProps> = ({ patientUuid, visitUuid }) => {
+  const { t } = useTranslation();
+  const { visit, isError, isLoading } = useVisit(visitUuid);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (visit) {
+    return (
+      <div className={styles.wrapper}>
+        <div>
+          <p className={styles.heading}>{visit?.visitType?.display}</p>
+          <div className={styles.subHeading}>
+            {t('scheduledToday', 'Scheduled for today')} <Tag type="blue"> {t('onTime', 'On time')}</Tag>
+          </div>
+        </div>
+
+        <div className={styles.visitContainer}>
+          <CurrentVisitDetails encounters={visit.encounters} patientUuid={patientUuid} />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default CurrentVisit;

package/src/current-visit/current-visit-summary.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import CurrentVisit from './current-visit-summary.component';
+import { useVisit } from './current-visit.resource';
+import { mockPastVisit } from '../../__mocks__/visits.mock';
+
+const useVisitMock = useVisit as jest.Mock;
+
+jest.mock('./current-visit.resource', () => ({
+  useVisit: jest.fn(() => ({
+    visit: {
+      visitType: { display: 'Visit Type' },
+      encounters: [],
+    },
+    isError: false,
+    isLoading: false,
+  })),
+}));
+
+const patientUuid = mockPastVisit.data.results[0].patient.uuid;
+const visitUuid = mockPastVisit.data.results[0].uuid;
+
+describe('CurrentVisit', () => {
+  it('renders visit details correctly', async () => {
+    render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).toBeNull();
+      expect(screen.getByText('Visit Type')).toBeInTheDocument();
+      expect(screen.getByText('Scheduled for today')).toBeInTheDocument();
+      expect(screen.getByText('On time')).toBeInTheDocument();
+    });
+  });
+  it('should render skeleton when loading', async () => {
+    useVisitMock.mockImplementationOnce(() => ({
+      visit: undefined,
+      isError: false,
+      isLoading: true,
+    }));
+
+    render(<CurrentVisit patientUuid={patientUuid} visitUuid={visitUuid} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+  });
+});

package/src/current-visit/current-visit.resource.ts

@@ -0,0 +1,84 @@
+import useSWR from 'swr';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
+import { ConceptMetadata } from './hooks/useVitalsConceptMetadata';
+import { ObsMetaInfo } from '../types/index';
+
+export function useVisit(visitUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,encounterDatetime,' +
+    'orders:(uuid,dateActivated,' +
+    'drug:(uuid,name,strength),doseUnits:(uuid,display),' +
+    'dose,route:(uuid,display),frequency:(uuid,display),' +
+    'duration,durationUnits:(uuid,display),numRefills,' +
+    'orderType:(uuid,display),orderer:(uuid,person:(uuid,display))),' +
+    'obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),' +
+    'display,groupMembers:(uuid,concept:(uuid,display),' +
+    'value:(uuid,display)),value),encounterType:(uuid,display),' +
+    'encounterProviders:(uuid,display,encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime';
+
+  const apiUrl = `/ws/rest/v1/visit/${visitUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Visit }, Error>(
+    visitUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    visit: data ? data.data : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}
+
+export function calculateBMI(weight: number, height: number): number {
+  if (!weight || !height) {
+    return;
+  }
+
+  if (weight > 0 && height > 0) {
+    return Number((weight / (height / 100) ** 2).toFixed(1));
+  }
+}
+
+export function assessValue(value: number, range: ObsMetaInfo): ObservationInterpretation {
+  if (range?.hiCritical && value >= range.hiCritical) {
+    return 'critically_high';
+  }
+
+  if (range?.hiAbsolute && value >= range.hiAbsolute) {
+    return 'critically_high';
+  }
+
+  if (range?.hiNormal && value > range.hiNormal) {
+    return 'high';
+  }
+
+  if (range?.lowCritical && value <= range.lowCritical) {
+    return 'critically_low';
+  }
+
+  if (range?.lowAbsolute && value <= range.lowAbsolute) {
+    return 'critically_low';
+  }
+
+  if (range?.lowNormal && value < range.lowNormal) {
+    return 'low';
+  }
+
+  return 'normal';
+}
+
+export type ObservationInterpretation = 'critically_low' | 'critically_high' | 'high' | 'low' | 'normal';
+
+export function getReferenceRangesForConcept(
+  conceptUuid: string,
+  conceptMetadata: Array<ConceptMetadata>,
+): ConceptMetadata {
+  if (!conceptUuid || !conceptMetadata?.length) {
+    return null;
+  }
+
+  return conceptMetadata?.find((metadata) => metadata.uuid === conceptUuid);
+}

package/src/current-visit/current-visit.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.visitContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+}
+
+.subHeading {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.structuredListRow {
+  border-bottom: none;
+}
+
+.structuredList {
+  margin-bottom: 0;
+}
+
+.wrapper {
+  margin: spacing.$spacing-03;
+}