@openmrs/esm-appointments-app 8.5.1-pre.5752 → 8.5.1-pre.5754

package/src/metrics/metrics-cards/metrics-error-card.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './metrics-error-card.scss';
+
+interface MetricsCardProps {
+  headerLabel: string;
+}
+
+const MetricsErrorCard: React.FC<MetricsCardProps> = ({ headerLabel }) => {
+  const { t } = useTranslation();
+
+  return (
+    <article className={styles.container}>
+      <div className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <span className={styles.errorHeaderLabel}>
+              {t('failedToLoadMetrics', 'Failed to load')} {headerLabel}
+            </span>
+          </div>
+        </div>
+        <div className={styles.errorMessage}>
+          <p>{t('metricLoadErrorMessage', 'Please contact your system administrator if the problem persists.')}</p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default MetricsErrorCard;

package/src/metrics/metrics-cards/metrics-error-card.scss

@@ -0,0 +1,33 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  border: 1px solid $ui-03;
+  height: 7.875rem;
+  padding: layout.$spacing-05;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: layout.$spacing-03;
+}
+
+.errorHeaderLabel {
+  @include type.type-style('heading-compact-01');
+  color: var(--omrs-color-danger);
+}
+
+.errorMessage {
+  @include type.type-style('body-compact-01');
+}

package/src/metrics/metrics-cards/providers-booked.extension.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import MetricsCard from './metrics-card.component';
+import { useTranslation } from 'react-i18next';
+import { useAllAppointmentsByDate } from '../../hooks/useClinicalMetrics';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { useAppointmentsStore } from '../../store';
+
+export default function ProvidersBookedExtension() {
+  const { t } = useTranslation();
+  const { totalProviders } = useAllAppointmentsByDate();
+  const { selectedDate } = useAppointmentsStore();
+  const formattedStartDate = formatDate(parseDate(selectedDate), { mode: 'standard', time: false });
+
+  return (
+    <MetricsCard
+      headerLabel={t('providersBooked', 'Providers booked: {{time}}', { time: formattedStartDate })}
+      label={t('providers', 'Providers')}
+      value={totalProviders}
+    />
+  );
+}

package/src/metrics/metrics-cards/scheduled-appointments.extension.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import MetricsCard from './metrics-card.component';
+import { useScheduledAppointments } from '../../hooks/useClinicalMetrics';
+import { useAppointmentsStore } from '../../store';
+import { useAppointmentList } from '../../hooks/useAppointmentList';
+
+export default function ScheduledAppointmentsExtension() {
+  const { t } = useTranslation();
+  const { appointmentServiceTypes } = useAppointmentsStore();
+
+  const { appointmentList: arrivedAppointments } = useAppointmentList('CheckedIn');
+  const { appointmentList: pendingAppointments } = useAppointmentList('Scheduled');
+
+  const { totalScheduledAppointments } = useScheduledAppointments(appointmentServiceTypes);
+
+  const filteredArrivedAppointments = appointmentServiceTypes
+    ? arrivedAppointments.filter(({ service }) => appointmentServiceTypes.includes(service.uuid))
+    : arrivedAppointments;
+
+  const filteredPendingAppointments = appointmentServiceTypes
+    ? pendingAppointments.filter(({ service }) => appointmentServiceTypes.includes(service.uuid))
+    : pendingAppointments;
+
+  return (
+    <MetricsCard
+      count={{ pendingAppointments: filteredPendingAppointments, arrivedAppointments: filteredArrivedAppointments }}
+      headerLabel={t('scheduledAppointments', 'Scheduled appointments')}
+      label={t('appointments', 'Appointments')}
+      value={totalScheduledAppointments}
+    />
+  );
+}

package/src/metrics/metrics-container.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import MetricsHeader from './metrics-header.component';
+import styles from './metrics-container.scss';
+
+interface AppointmentMetricsProps {
+  appointmentServiceTypes: Array<string>;
+}
+
+const AppointmentsMetrics: React.FC<AppointmentMetricsProps> = ({ appointmentServiceTypes }) => {
+  return (
+    <>
+      <MetricsHeader />
+      <ExtensionSlot name="appointments-metrics-slot" className={styles.cardContainer} />
+    </>
+  );
+};
+
+export default AppointmentsMetrics;

package/src/metrics/metrics-container.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  padding: 0 layout.$spacing-05 layout.$spacing-07 layout.$spacing-05;
+  flex-flow: row wrap;
+  margin-top: -(layout.$spacing-03);
+  gap: layout.$spacing-05;
+}
+
+.cardContainer > * {
+  flex: 1 0 0%;
+  min-width: 18.75rem;
+}
+
+@media (max-width: calc(layout.$spacing-05 * 2 + 18.75rem)) {
+  .cardContainer > *:has(:global(.cardWithChildren)) {
+    order: 999;
+  }
+}

package/src/metrics/metrics-header.component.tsx

@@ -6,14 +6,14 @@ import { Calendar, Hospital } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { ExtensionSlot, isDesktop, launchWorkspace, navigate, useLayoutType } from '@openmrs/esm-framework';
 import { spaHomePage } from '../constants';
-import { useSelectedDateContext } from '../hooks/selected-date-context';
+import { useAppointmentsStore } from '../store';
 import styles from './metrics-header.scss';
 
 dayjs.extend(isToday);
 
 const MetricsHeader: React.FC = () => {
   const { t } = useTranslation();
-  const { selectedDate } = useSelectedDateContext();
+  const { selectedDate } = useAppointmentsStore();
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'md';
 

package/src/routes.json

@@ -105,6 +105,24 @@
       "name": "home-appointments-tile",
       "slot": "home-metrics-tiles-slot",
       "component": "homeAppointmentsTile"
+    },
+    {
+      "name": "metrics-card-scheduled-appointments",
+      "component": "metricsCardScheduledAppointments",
+      "slot": "appointments-metrics-slot",
+      "order": 1
+    },
+    {
+      "name": "metrics-card-highest-volume-service",
+      "component": "metricsCardHighestVolumeService",
+      "slot": "appointments-metrics-slot",
+      "order": 2
+    },
+    {
+      "name": "metrics-card-providers-booked",
+      "component": "metricsCardProvidersBooked",
+      "slot": "appointments-metrics-slot",
+      "order": 3
     }
   ],
   "modals": [

package/src/store.ts

@@ -0,0 +1,46 @@
+import { createGlobalStore, isOmrsDateStrict, useStore } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { omrsDateFormat } from './constants';
+
+export const appointmentsStore = createGlobalStore('appointments-app', {
+  appointmentServiceTypes: getFromLocalStorage('openmrs:appointments:serviceTypes') || [],
+  selectedDate: dayjs().startOf('day').format(omrsDateFormat),
+});
+
+export function useAppointmentsStore() {
+  return useStore(appointmentsStore);
+}
+
+export function setAppointmentServiceTypes(serviceTypes: Array<string>) {
+  appointmentsStore.setState({ appointmentServiceTypes: serviceTypes });
+}
+
+export function setSelectedDate(date: string) {
+  if (!isOmrsDateStrict(date)) {
+    console.warn(
+      'esm-appointments-app: setSelectedDate called with incorrectly formatted date. Should be omrsDateFormat string. Received:',
+      date,
+    );
+  }
+  appointmentsStore.setState({ selectedDate: date });
+}
+
+/* Set up localStorage serialization */
+
+let lastValueOfAppointmentServiceTypes = getFromLocalStorage('openmrs:appointments:serviceTypes');
+
+function getFromLocalStorage(key: string) {
+  const value = localStorage.getItem(key);
+  return value ? JSON.parse(value) : undefined;
+}
+
+function setInLocalStorage(key: string, value: any) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+
+appointmentsStore.subscribe(({ appointmentServiceTypes }) => {
+  if (lastValueOfAppointmentServiceTypes !== appointmentServiceTypes) {
+    setInLocalStorage('openmrs:appointments:serviceTypes', appointmentServiceTypes);
+    lastValueOfAppointmentServiceTypes = appointmentServiceTypes;
+  }
+});

package/src/workload/monthly-view-workload/monthly-view.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { monthDays } from '../../helpers';
-import { useSelectedDateContext } from '../../hooks/selected-date-context';
+import { useAppointmentsStore } from '../../store';
 import DaysOfWeekCard from '../../calendar/monthly/days-of-week.component';
 import MonthlyWorkloadCard from './monthlyWorkCard';
 import styles from './monthly-workload.scss';
@@ -20,7 +20,7 @@ const MonthlyCalendarView: React.FC<MonthlyCalendarViewProps> = ({
 }) => {
   const monthFormat = 'MMMM, YYYY';
   const { t } = useTranslation();
-  const { selectedDate } = useSelectedDateContext();
+  const { selectedDate } = useAppointmentsStore();
   const daysInWeek = ['SUN', 'MON', 'TUE', 'WED', 'THUR', 'FRI', 'SAT'];
   const monthViewDate = dateToDisplay === '' ? selectedDate : dateToDisplay;
   const daysInWeeks = daysInWeek.map((day) => t(day));

package/translations/en.json

@@ -19,7 +19,6 @@
   "appointmentFormError": "Error scheduling appointment",
   "appointmentHistory": "Appointment History",
   "appointmentMarkedChecked": "Appointment marked as Checked In",
-  "appointmentMetricsLoadError": "",
   "appointmentNoteLabel": "Write an additional note",
   "appointmentNotePlaceholder": "Write any additional points here",
   "appointmentNotes": "Appointment Notes",
@@ -79,11 +78,13 @@
   "endAppointmentConfirmationMessage": "Checking the patient out will mark the appointment as complete.",
   "endDate": "End date",
   "expected": "Expected",
+  "failedToLoadMetrics": "Failed to load",
   "filterAppointments": "Filter appointments",
   "filterAppointmentsByServiceType": "Filter appointments by service type",
   "filterTable": "Filter table",
   "gender": "Gender",
   "highestServiceVolume": "Highest volume service: {{time}}",
+  "highestServiceVolumeCardTitle": "Highest volume service",
   "identifier": "Identifier",
   "invalidNumber": "Number is not valid",
   "isRecurringAppointment": "Is this a recurring appointment?",
@@ -91,6 +92,7 @@
   "loading": "Loading",
   "location": "Location",
   "medications": "Medications",
+  "metricLoadErrorMessage": "Please contact your system administrator if the problem persists.",
   "missed": "Missed",
   "next": "Next",
   "nextMonth": "Next month",

package/dist/1293.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_openmrs_esm_appointments_app=globalThis.webpackChunk_openmrs_esm_appointments_app||[]).push([[1293],{4120:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,".-esm-appointments__scheduled-appointments__switcher___slfHc{margin:1rem 0;max-width:70%}","",{version:3,sources:["webpack://./src/appointments/scheduled/scheduled-appointments.scss"],names:[],mappings:"AAEA,6DACE,aAAA,CACA,aAAA",sourcesContent:["@use '@carbon/layout';\n\n.switcher {\n  margin: layout.$spacing-05 0;\n  max-width: 70%;\n}\n"],sourceRoot:""}]),l.locals={switcher:"-esm-appointments__scheduled-appointments__switcher___slfHc"};const i=l},7253:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,".-esm-appointments__appointments-metrics__cardContainer___SeKP6{background-color:#fff;display:grid;grid-template-columns:repeat(auto-fit, minmax(18.75rem, 1fr));gap:1rem;margin:1rem}.-esm-appointments__appointments-metrics__errorContainer___Xswl5{margin:1rem}","",{version:3,sources:["webpack://./src/metrics/appointments-metrics.scss","webpack://./../../node_modules/@carbon/colors/index.scss","webpack://./../../node_modules/@carbon/layout/scss/generated/_spacing.scss"],names:[],mappings:"AAGA,gEACE,qBCKM,CDJN,YAAA,CACA,6DAAA,CACA,QEwBW,CFvBX,WEuBW,CFpBb,iEACE,WEmBW",sourcesContent:["@use '@carbon/colors';\n@use '@carbon/layout';\n\n.cardContainer {\n  background-color: colors.$white;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));\n  gap: layout.$spacing-05;\n  margin: layout.$spacing-05;\n}\n\n.errorContainer {\n  margin: layout.$spacing-05;\n}\n","// Code generated by @carbon/colors. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$black: #000000 !default;\n$white: #ffffff !default;\n\n$black-100: #000000 !default;\n$blue-10: #edf5ff !default;\n$blue-20: #d0e2ff !default;\n$blue-30: #a6c8ff !default;\n$blue-40: #78a9ff !default;\n$blue-50: #4589ff !default;\n$blue-60: #0f62fe !default;\n$blue-70: #0043ce !default;\n$blue-80: #002d9c !default;\n$blue-90: #001d6c !default;\n$blue-100: #001141 !default;\n$cool-gray-10: #f2f4f8 !default;\n$cool-gray-20: #dde1e6 !default;\n$cool-gray-30: #c1c7cd !default;\n$cool-gray-40: #a2a9b0 !default;\n$cool-gray-50: #878d96 !default;\n$cool-gray-60: #697077 !default;\n$cool-gray-70: #4d5358 !default;\n$cool-gray-80: #343a3f !default;\n$cool-gray-90: #21272a !default;\n$cool-gray-100: #121619 !default;\n$cyan-10: #e5f6ff !default;\n$cyan-20: #bae6ff !default;\n$cyan-30: #82cfff !default;\n$cyan-40: #33b1ff !default;\n$cyan-50: #1192e8 !default;\n$cyan-60: #0072c3 !default;\n$cyan-70: #00539a !default;\n$cyan-80: #003a6d !default;\n$cyan-90: #012749 !default;\n$cyan-100: #061727 !default;\n$gray-10: #f4f4f4 !default;\n$gray-20: #e0e0e0 !default;\n$gray-30: #c6c6c6 !default;\n$gray-40: #a8a8a8 !default;\n$gray-50: #8d8d8d !default;\n$gray-60: #6f6f6f !default;\n$gray-70: #525252 !default;\n$gray-80: #393939 !default;\n$gray-90: #262626 !default;\n$gray-100: #161616 !default;\n$green-10: #defbe6 !default;\n$green-20: #a7f0ba !default;\n$green-30: #6fdc8c !default;\n$green-40: #42be65 !default;\n$green-50: #24a148 !default;\n$green-60: #198038 !default;\n$green-70: #0e6027 !default;\n$green-80: #044317 !default;\n$green-90: #022d0d !default;\n$green-100: #071908 !default;\n$magenta-10: #fff0f7 !default;\n$magenta-20: #ffd6e8 !default;\n$magenta-30: #ffafd2 !default;\n$magenta-40: #ff7eb6 !default;\n$magenta-50: #ee5396 !default;\n$magenta-60: #d02670 !default;\n$magenta-70: #9f1853 !default;\n$magenta-80: #740937 !default;\n$magenta-90: #510224 !default;\n$magenta-100: #2a0a18 !default;\n$orange-10: #fff2e8 !default;\n$orange-20: #ffd9be !default;\n$orange-30: #ffb784 !default;\n$orange-40: #ff832b !default;\n$orange-50: #eb6200 !default;\n$orange-60: #ba4e00 !default;\n$orange-70: #8a3800 !default;\n$orange-80: #5e2900 !default;\n$orange-90: #3e1a00 !default;\n$orange-100: #231000 !default;\n$purple-10: #f6f2ff !default;\n$purple-20: #e8daff !default;\n$purple-30: #d4bbff !default;\n$purple-40: #be95ff !default;\n$purple-50: #a56eff !default;\n$purple-60: #8a3ffc !default;\n$purple-70: #6929c4 !default;\n$purple-80: #491d8b !default;\n$purple-90: #31135e !default;\n$purple-100: #1c0f30 !default;\n$red-10: #fff1f1 !default;\n$red-20: #ffd7d9 !default;\n$red-30: #ffb3b8 !default;\n$red-40: #ff8389 !default;\n$red-50: #fa4d56 !default;\n$red-60: #da1e28 !default;\n$red-70: #a2191f !default;\n$red-80: #750e13 !default;\n$red-90: #520408 !default;\n$red-100: #2d0709 !default;\n$teal-10: #d9fbfb !default;\n$teal-20: #9ef0f0 !default;\n$teal-30: #3ddbd9 !default;\n$teal-40: #08bdba !default;\n$teal-50: #009d9a !default;\n$teal-60: #007d79 !default;\n$teal-70: #005d5d !default;\n$teal-80: #004144 !default;\n$teal-90: #022b30 !default;\n$teal-100: #081a1c !default;\n$warm-gray-10: #f7f3f2 !default;\n$warm-gray-20: #e5e0df !default;\n$warm-gray-30: #cac5c4 !default;\n$warm-gray-40: #ada8a8 !default;\n$warm-gray-50: #8f8b8b !default;\n$warm-gray-60: #726e6e !default;\n$warm-gray-70: #565151 !default;\n$warm-gray-80: #3c3838 !default;\n$warm-gray-90: #272525 !default;\n$warm-gray-100: #171414 !default;\n$white-0: #ffffff !default;\n$yellow-10: #fcf4d6 !default;\n$yellow-20: #fddc69 !default;\n$yellow-30: #f1c21b !default;\n$yellow-40: #d2a106 !default;\n$yellow-50: #b28600 !default;\n$yellow-60: #8e6a00 !default;\n$yellow-70: #684e00 !default;\n$yellow-80: #483700 !default;\n$yellow-90: #302400 !default;\n$yellow-100: #1c1500 !default;\n\n$white-hover: #e8e8e8 !default;\n$black-hover: #212121 !default;\n$blue-10-hover: #dbebff !default;\n$blue-20-hover: #b8d3ff !default;\n$blue-30-hover: #8ab6ff !default;\n$blue-40-hover: #5c97ff !default;\n$blue-50-hover: #1f70ff !default;\n$blue-60-hover: #0050e6 !default;\n$blue-70-hover: #0053ff !default;\n$blue-80-hover: #0039c7 !default;\n$blue-90-hover: #00258a !default;\n$blue-100-hover: #001f75 !default;\n$cool-gray-10-hover: #e4e9f1 !default;\n$cool-gray-20-hover: #cdd3da !default;\n$cool-gray-30-hover: #adb5bd !default;\n$cool-gray-40-hover: #9199a1 !default;\n$cool-gray-50-hover: #757b85 !default;\n$cool-gray-60-hover: #585e64 !default;\n$cool-gray-70-hover: #5d646a !default;\n$cool-gray-80-hover: #434a51 !default;\n$cool-gray-90-hover: #2b3236 !default;\n$cool-gray-100-hover: #222a2f !default;\n$cyan-10-hover: #cceeff !default;\n$cyan-20-hover: #99daff !default;\n$cyan-30-hover: #57beff !default;\n$cyan-40-hover: #059fff !default;\n$cyan-50-hover: #0f7ec8 !default;\n$cyan-60-hover: #005fa3 !default;\n$cyan-70-hover: #0066bd !default;\n$cyan-80-hover: #00498a !default;\n$cyan-90-hover: #013360 !default;\n$cyan-100-hover: #0b2947 !default;\n$gray-10-hover: #e8e8e8 !default;\n$gray-20-hover: #d1d1d1 !default;\n$gray-30-hover: #b5b5b5 !default;\n$gray-40-hover: #999999 !default;\n$gray-50-hover: #7a7a7a !default;\n$gray-60-hover: #5e5e5e !default;\n$gray-70-hover: #636363 !default;\n$gray-80-hover: #474747 !default;\n$gray-90-hover: #333333 !default;\n$gray-100-hover: #292929 !default;\n$green-10-hover: #b6f6c8 !default;\n$green-20-hover: #74e792 !default;\n$green-30-hover: #36ce5e !default;\n$green-40-hover: #3bab5a !default;\n$green-50-hover: #208e3f !default;\n$green-60-hover: #166f31 !default;\n$green-70-hover: #11742f !default;\n$green-80-hover: #05521c !default;\n$green-90-hover: #033b11 !default;\n$green-100-hover: #0d300f !default;\n$magenta-10-hover: #ffe0ef !default;\n$magenta-20-hover: #ffbdda !default;\n$magenta-30-hover: #ff94c3 !default;\n$magenta-40-hover: #ff57a0 !default;\n$magenta-50-hover: #e3176f !default;\n$magenta-60-hover: #b0215f !default;\n$magenta-70-hover: #bf1d63 !default;\n$magenta-80-hover: #8e0b43 !default;\n$magenta-90-hover: #68032e !default;\n$magenta-100-hover: #53142f !default;\n$orange-10-hover: #ffe2cc !default;\n$orange-20-hover: #ffc69e !default;\n$orange-30-hover: #ff9d57 !default;\n$orange-40-hover: #fa6800 !default;\n$orange-50-hover: #cc5500 !default;\n$orange-60-hover: #9e4200 !default;\n$orange-70-hover: #a84400 !default;\n$orange-80-hover: #753300 !default;\n$orange-90-hover: #522200 !default;\n$orange-100-hover: #421e00 !default;\n$purple-10-hover: #ede5ff !default;\n$purple-20-hover: #dcc7ff !default;\n$purple-30-hover: #c5a3ff !default;\n$purple-40-hover: #ae7aff !default;\n$purple-50-hover: #9352ff !default;\n$purple-60-hover: #7822fb !default;\n$purple-70-hover: #7c3dd6 !default;\n$purple-80-hover: #5b24ad !default;\n$purple-90-hover: #40197b !default;\n$purple-100-hover: #341c59 !default;\n$red-10-hover: #ffe0e0 !default;\n$red-20-hover: #ffc2c5 !default;\n$red-30-hover: #ff99a0 !default;\n$red-40-hover: #ff6168 !default;\n$red-50-hover: #ee0713 !default;\n$red-60-hover: #b81922 !default;\n$red-70-hover: #c21e25 !default;\n$red-80-hover: #921118 !default;\n$red-90-hover: #66050a !default;\n$red-100-hover: #540d11 !default;\n$teal-10-hover: #acf6f6 !default;\n$teal-20-hover: #57e5e5 !default;\n$teal-30-hover: #25cac8 !default;\n$teal-40-hover: #07aba9 !default;\n$teal-50-hover: #008a87 !default;\n$teal-60-hover: #006b68 !default;\n$teal-70-hover: #007070 !default;\n$teal-80-hover: #005357 !default;\n$teal-90-hover: #033940 !default;\n$teal-100-hover: #0f3034 !default;\n$warm-gray-10-hover: #f0e8e6 !default;\n$warm-gray-20-hover: #d8d0cf !default;\n$warm-gray-30-hover: #b9b3b1 !default;\n$warm-gray-40-hover: #9c9696 !default;\n$warm-gray-50-hover: #7f7b7b !default;\n$warm-gray-60-hover: #605d5d !default;\n$warm-gray-70-hover: #696363 !default;\n$warm-gray-80-hover: #4c4848 !default;\n$warm-gray-90-hover: #343232 !default;\n$warm-gray-100-hover: #2c2626 !default;\n$yellow-10-hover: #f8e6a0 !default;\n$yellow-20-hover: #fccd27 !default;\n$yellow-30-hover: #ddb00e !default;\n$yellow-40-hover: #bc9005 !default;\n$yellow-50-hover: #9e7700 !default;\n$yellow-60-hover: #755800 !default;\n$yellow-70-hover: #806000 !default;\n$yellow-80-hover: #5c4600 !default;\n$yellow-90-hover: #3d2e00 !default;\n$yellow-100-hover: #332600 !default;\n\n/// Colors from the IBM Design Language\n/// @access public\n/// @group @carbon/colors\n$colors: (\n  black: (\n    100: #000000,\n  ),\n  blue: (\n    10: #edf5ff,\n    20: #d0e2ff,\n    30: #a6c8ff,\n    40: #78a9ff,\n    50: #4589ff,\n    60: #0f62fe,\n    70: #0043ce,\n    80: #002d9c,\n    90: #001d6c,\n    100: #001141,\n  ),\n  cool-gray: (\n    10: #f2f4f8,\n    20: #dde1e6,\n    30: #c1c7cd,\n    40: #a2a9b0,\n    50: #878d96,\n    60: #697077,\n    70: #4d5358,\n    80: #343a3f,\n    90: #21272a,\n    100: #121619,\n  ),\n  cyan: (\n    10: #e5f6ff,\n    20: #bae6ff,\n    30: #82cfff,\n    40: #33b1ff,\n    50: #1192e8,\n    60: #0072c3,\n    70: #00539a,\n    80: #003a6d,\n    90: #012749,\n    100: #061727,\n  ),\n  gray: (\n    10: #f4f4f4,\n    20: #e0e0e0,\n    30: #c6c6c6,\n    40: #a8a8a8,\n    50: #8d8d8d,\n    60: #6f6f6f,\n    70: #525252,\n    80: #393939,\n    90: #262626,\n    100: #161616,\n  ),\n  green: (\n    10: #defbe6,\n    20: #a7f0ba,\n    30: #6fdc8c,\n    40: #42be65,\n    50: #24a148,\n    60: #198038,\n    70: #0e6027,\n    80: #044317,\n    90: #022d0d,\n    100: #071908,\n  ),\n  magenta: (\n    10: #fff0f7,\n    20: #ffd6e8,\n    30: #ffafd2,\n    40: #ff7eb6,\n    50: #ee5396,\n    60: #d02670,\n    70: #9f1853,\n    80: #740937,\n    90: #510224,\n    100: #2a0a18,\n  ),\n  orange: (\n    10: #fff2e8,\n    20: #ffd9be,\n    30: #ffb784,\n    40: #ff832b,\n    50: #eb6200,\n    60: #ba4e00,\n    70: #8a3800,\n    80: #5e2900,\n    90: #3e1a00,\n    100: #231000,\n  ),\n  purple: (\n    10: #f6f2ff,\n    20: #e8daff,\n    30: #d4bbff,\n    40: #be95ff,\n    50: #a56eff,\n    60: #8a3ffc,\n    70: #6929c4,\n    80: #491d8b,\n    90: #31135e,\n    100: #1c0f30,\n  ),\n  red: (\n    10: #fff1f1,\n    20: #ffd7d9,\n    30: #ffb3b8,\n    40: #ff8389,\n    50: #fa4d56,\n    60: #da1e28,\n    70: #a2191f,\n    80: #750e13,\n    90: #520408,\n    100: #2d0709,\n  ),\n  teal: (\n    10: #d9fbfb,\n    20: #9ef0f0,\n    30: #3ddbd9,\n    40: #08bdba,\n    50: #009d9a,\n    60: #007d79,\n    70: #005d5d,\n    80: #004144,\n    90: #022b30,\n    100: #081a1c,\n  ),\n  warm-gray: (\n    10: #f7f3f2,\n    20: #e5e0df,\n    30: #cac5c4,\n    40: #ada8a8,\n    50: #8f8b8b,\n    60: #726e6e,\n    70: #565151,\n    80: #3c3838,\n    90: #272525,\n    100: #171414,\n  ),\n  white: (\n    0: #ffffff,\n  ),\n  yellow: (\n    10: #fcf4d6,\n    20: #fddc69,\n    30: #f1c21b,\n    40: #d2a106,\n    50: #b28600,\n    60: #8e6a00,\n    70: #684e00,\n    80: #483700,\n    90: #302400,\n    100: #1c1500,\n  ),\n) !default;\n","// Code generated by @carbon/layout. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-01: 0.125rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-02: 0.25rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-03: 0.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-04: 0.75rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-05: 1rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-06: 1.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-07: 2rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-08: 2.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-09: 3rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-10: 4rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-11: 5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-12: 6rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-13: 10rem !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/layout\n$spacing: (\n  spacing-01: $spacing-01,\n  spacing-02: $spacing-02,\n  spacing-03: $spacing-03,\n  spacing-04: $spacing-04,\n  spacing-05: $spacing-05,\n  spacing-06: $spacing-06,\n  spacing-07: $spacing-07,\n  spacing-08: $spacing-08,\n  spacing-09: $spacing-09,\n  spacing-10: $spacing-10,\n  spacing-11: $spacing-11,\n  spacing-12: $spacing-12,\n  spacing-13: $spacing-13,\n);\n"],sourceRoot:""}]),l.locals={cardContainer:"-esm-appointments__appointments-metrics__cardContainer___SeKP6",errorContainer:"-esm-appointments__appointments-metrics__errorContainer___Xswl5"};const i=l},15089:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79;--bottom-nav-height: 4rem;--workspace-header-height: 3rem;--tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));--desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height))}.-esm-appointments__metrics-card__container___G\\+nC8{flex-grow:1}.-esm-appointments__metrics-card__tileContainer___ifQ6K{border:1px solid #e0e0e0;height:7.875rem;padding:1rem;display:flex;justify-content:space-between;flex-direction:column}.-esm-appointments__metrics-card__tileHeader___nIOp1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}.-esm-appointments__metrics-card__headerLabel___UesNK{font-size:var(--cds-heading-compact-01-font-size, 0.875rem);font-weight:var(--cds-heading-compact-01-font-weight, 600);line-height:var(--cds-heading-compact-01-line-height, 1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing, 0.16px);color:#525252}.-esm-appointments__metrics-card__totalsLabel___bPWb1{font-size:var(--cds-label-01-font-size, 0.75rem);font-weight:var(--cds-label-01-font-weight, 400);line-height:var(--cds-label-01-line-height, 1.33333);letter-spacing:var(--cds-label-01-letter-spacing, 0.32px);color:#525252}.-esm-appointments__metrics-card__totalsValue___Vfhkt{font-size:var(--cds-heading-04-font-size, 1.75rem);font-weight:var(--cds-heading-04-font-weight, 400);line-height:var(--cds-heading-04-line-height, 1.28572);letter-spacing:var(--cds-heading-04-letter-spacing, 0);color:#161616}.-esm-appointments__metrics-card__headerLabelContainer___Y4yw8{display:flex;align-items:center;justify-content:space-between;width:100%}.-esm-appointments__metrics-card__link___Irh0L{text-decoration:none;display:flex;align-items:center;color:#0f62fe}.-esm-appointments__metrics-card__metricsGrid___\\+184M{display:grid;grid-template-columns:1fr 1fr}.-esm-appointments__metrics-card__countGrid___6cfiB{display:grid;grid-template-columns:1fr 1fr;justify-self:flex-end;column-gap:.5rem;row-gap:.5rem;margin:.5rem}.-esm-appointments__metrics-card__countGrid___6cfiB>span{font-size:.7rem !important;margin:0;color:#525252}.-esm-appointments__metrics-card__countGrid___6cfiB>p{margin:0}","",{version:3,sources:["webpack://./../../node_modules/@openmrs/esm-styleguide/src/_vars.scss","webpack://./src/metrics/metrics-card.scss","webpack://./../../node_modules/@carbon/layout/scss/generated/_spacing.scss","webpack://./../../node_modules/@carbon/type/scss/_styles.scss","webpack://./../../node_modules/@carbon/colors/index.scss"],names:[],mappings:"AAsDA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,yBAAA,CACA,+BAAA,CACA,oGAAA,CACA,2GAAA,CCxDF,qDACE,WAAA,CAGF,wDACE,wBAAA,CACA,eAAA,CACA,YCmBW,CDlBX,YAAA,CACA,6BAAA,CACA,qBAAA,CAGF,qDACE,YAAA,CACA,6BAAA,CACA,oBAAA,CACA,mBCDW,CDIb,sDEy0BI,2DAAA,CAAA,0DAAA,CAAA,8DAAA,CAAA,mEAAA,CFv0BF,aDpBQ,CCuBV,sDEo0BI,gDAAA,CAAA,gDAAA,CAAA,oDAAA,CAAA,yDAAA,CFl0BF,aDzBQ,CC4BV,sDE+zBI,kDAAA,CAAA,kDAAA,CAAA,sDAAA,CAAA,sDAAA,CF7zBF,aD/BM,CCkCR,+DACE,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,UAAA,CAGF,+CACE,oBAAA,CACA,YAAA,CACA,kBAAA,CACA,aD5Be,CC+BjB,uDACE,YAAA,CACA,6BAAA,CAGF,oDACE,YAAA,CACA,6BAAA,CACA,qBAAA,CACA,gBC1CW,CD2CX,aC3CW,CD4CX,YC5CW,CD8CX,yDACE,0BAAA,CACA,QAAA,CACA,aGtBM,CHyBR,sDACE,QAAA",sourcesContent:["@use '@carbon/layout';\n\n$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n$brand-primary-10: #d9fbfb;\n$brand-primary-20: #9ef0f0;\n$brand-primary-30: #3ddbd9;\n$brand-primary-40: #08bdba;\n$brand-primary-50: #009d9a;\n\n/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */\n\n$brand-primary-90: #022b30;\n$brand-primary-100: #081a1c;\n\n@mixin brand-01($property) {\n  #{$property}: #005d5d;\n  #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n  #{$property}: #004144;\n  #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n  #{$property}: #007d79;\n  #{$property}: var(--brand-03);\n}\n\n:root {\n  --brand-01: #005d5d;\n  --brand-02: #004144;\n  --brand-03: #007d79;\n  --bottom-nav-height: #{layout.$spacing-10};\n  --workspace-header-height: #{layout.$spacing-09};\n  --tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));\n  --desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height));\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1023px;\n$breakpoint-small-desktop-min: 1024px;\n$breakpoint-small-desktop-max: 1439px;\n$breakpoint-large-desktop-min: 1440px;\n$breakpoint-large-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n","@use '@carbon/colors';\n@use '@carbon/layout';\n@use '@carbon/type';\n@use '@openmrs/esm-styleguide/src/vars' as *;\n\n.container {\n  flex-grow: 1;\n}\n\n.tileContainer {\n  border: 1px solid $ui-03;\n  height: 7.875rem;\n  padding: layout.$spacing-05;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n}\n\n.tileHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  margin-bottom: layout.$spacing-03;\n}\n\n.headerLabel {\n  @include type.type-style('heading-compact-01');\n  color: $text-02;\n}\n\n.totalsLabel {\n  @include type.type-style('label-01');\n  color: $text-02;\n}\n\n.totalsValue {\n  @include type.type-style('heading-04');\n  color: $ui-05;\n}\n\n.headerLabelContainer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.link {\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  color: $interactive-01;\n}\n\n.metricsGrid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n\n.countGrid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  justify-self: flex-end;\n  column-gap: layout.$spacing-03;\n  row-gap: layout.$spacing-03;\n  margin: layout.$spacing-03;\n\n  & > span {\n    font-size: 0.7rem !important;\n    margin: 0;\n    color: colors.$gray-70;\n  }\n\n  & > p {\n    margin: 0;\n  }\n}\n","// Code generated by @carbon/layout. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-01: 0.125rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-02: 0.25rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-03: 0.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-04: 0.75rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-05: 1rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-06: 1.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-07: 2rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-08: 2.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-09: 3rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-10: 4rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-11: 5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-12: 6rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-13: 10rem !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/layout\n$spacing: (\n  spacing-01: $spacing-01,\n  spacing-02: $spacing-02,\n  spacing-03: $spacing-03,\n  spacing-04: $spacing-04,\n  spacing-05: $spacing-05,\n  spacing-06: $spacing-06,\n  spacing-07: $spacing-07,\n  spacing-08: $spacing-08,\n  spacing-09: $spacing-09,\n  spacing-10: $spacing-10,\n  spacing-11: $spacing-11,\n  spacing-12: $spacing-12,\n  spacing-13: $spacing-13,\n);\n","//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n// stylelint-disable number-max-precision\n\n@use 'sass:map';\n@use 'sass:math';\n@use '@carbon/grid/scss/config' as gridconfig;\n@use '@carbon/grid/scss/breakpoint' as grid;\n@use 'prefix' as *;\n@use 'font-family';\n@use 'scale';\n\n/// @type Map\n/// @access public\n/// @deprecated\n/// @group @carbon/type\n$caption-01: (\n  font-size: scale.type-scale(1),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.33333,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @deprecated\n/// @group @carbon/type\n$caption-02: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$label-01: (\n  font-size: scale.type-scale(1),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.33333,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$label-02: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$legal-01: (\n  font-size: scale.type-scale(1),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.33333,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$legal-02: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @deprecated\n/// @group @carbon/type\n$helper-text-01: (\n  font-size: scale.type-scale(1),\n  line-height: 1.33333,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @deprecated\n/// @group @carbon/type\n$helper-text-02: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-01: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-compact-01: $body-short-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-01: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.42857,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-01: $body-long-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-02: (\n  font-size: scale.type-scale(3),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.375,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-compact-02: $body-short-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-02: (\n  font-size: scale.type-scale(3),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.5,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-02: $body-long-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-01: (\n  font-family: font-family.font-family('mono'),\n  font-size: scale.type-scale(1),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.33333,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-02: (\n  font-family: font-family.font-family('mono'),\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.42857,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-01: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.42857,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-01: (\n  font-size: scale.type-scale(2),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.28572,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-compact-01: $productive-heading-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-02: (\n  font-size: scale.type-scale(3),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.5,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-02: (\n  font-size: scale.type-scale(3),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.375,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-compact-02: $productive-heading-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-03: (\n  font-size: scale.type-scale(5),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.4,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-03: $productive-heading-03 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-04: (\n  font-size: scale.type-scale(7),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-04: $productive-heading-04 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-05: (\n  font-size: scale.type-scale(8),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.25,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-05: $productive-heading-05 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-06: (\n  font-size: scale.type-scale(10),\n  font-weight: font-family.font-weight('light'),\n  // Extra digit needed for precision in Chrome\n  line-height: 1.199,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-06: $productive-heading-06 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-07: (\n  font-size: scale.type-scale(12),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-07: $productive-heading-07 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-01: $heading-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-02: $heading-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-03: (\n  font-size: scale.type-scale(5),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.4,\n  letter-spacing: 0,\n  breakpoints: (\n    xlg: (\n      font-size: scale.type-scale(5),\n      line-height: 1.4,\n    ),\n    max: (\n      font-size: scale.type-scale(6),\n      line-height: 1.334,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-heading-03: $expressive-heading-03 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-04: (\n  font-size: scale.type-scale(7),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.28572,\n  letter-spacing: 0,\n  breakpoints: (\n    xlg: (\n      font-size: scale.type-scale(8),\n      line-height: 1.25,\n      font-weight: font-family.font-weight('regular'),\n    ),\n    max: (\n      font-size: scale.type-scale(8),\n      font-weight: font-family.font-weight('regular'),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-heading-04: $expressive-heading-04 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-05: (\n  font-size: scale.type-scale(8),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(9),\n      font-weight: font-family.font-weight('light'),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: scale.type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: scale.type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: scale.type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-heading-05: $expressive-heading-05 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-06: (\n  font-size: scale.type-scale(8),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(9),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: scale.type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: scale.type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: scale.type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-heading-06: $expressive-heading-06 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-paragraph-01: (\n  font-size: scale.type-scale(6),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.334,\n  letter-spacing: 0,\n  breakpoints: (\n    lg: (\n      font-size: scale.type-scale(7),\n      line-height: 1.28572,\n    ),\n    max: (\n      font-size: scale.type-scale(8),\n      line-height: 1.25,\n    ),\n  ),\n);\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-paragraph-01: $expressive-paragraph-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-01: (\n  font-family: font-family.font-family('serif'),\n  font-size: scale.type-scale(5),\n  font-weight: font-family.font-weight('regular'),\n  line-height: 1.3,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(5),\n    ),\n    lg: (\n      font-size: scale.type-scale(6),\n      line-height: 1.334,\n    ),\n    xlg: (\n      font-size: scale.type-scale(7),\n      line-height: 1.28572,\n    ),\n    max: (\n      font-size: scale.type-scale(8),\n      line-height: 1.25,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-quotation-01: $quotation-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-02: (\n  font-family: font-family.font-family('serif'),\n  font-size: scale.type-scale(8),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(9),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: scale.type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: scale.type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: scale.type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-quotation-02: $quotation-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-01: (\n  font-size: scale.type-scale(10),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(10),\n    ),\n    lg: (\n      font-size: scale.type-scale(12),\n    ),\n    xlg: (\n      font-size: scale.type-scale(13),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: scale.type-scale(15),\n      line-height: 1.13,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-display-01: $display-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-02: (\n  font-size: scale.type-scale(10),\n  font-weight: font-family.font-weight('semibold'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(10),\n    ),\n    lg: (\n      font-size: scale.type-scale(12),\n    ),\n    xlg: (\n      font-size: scale.type-scale(13),\n      line-height: 1.16,\n    ),\n    max: (\n      font-size: scale.type-scale(15),\n      line-height: 1.13,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-display-02: $display-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-03: (\n  font-size: scale.type-scale(10),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(12),\n      line-height: 1.18,\n    ),\n    lg: (\n      font-size: scale.type-scale(13),\n      line-height: 1.16,\n      letter-spacing: -0.64px,\n    ),\n    xlg: (\n      font-size: scale.type-scale(15),\n      line-height: 1.13,\n      letter-spacing: -0.64px,\n    ),\n    max: (\n      font-size: scale.type-scale(16),\n      line-height: 1.11,\n      letter-spacing: -0.96px,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-display-03: $display-03 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-04: (\n  font-size: scale.type-scale(10),\n  font-weight: font-family.font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: scale.type-scale(14),\n      line-height: 1.15,\n    ),\n    lg: (\n      font-size: scale.type-scale(17),\n      line-height: 1.11,\n      letter-spacing: -0.64px,\n    ),\n    xlg: (\n      font-size: scale.type-scale(20),\n      line-height: 1.07,\n      letter-spacing: -0.64px,\n    ),\n    max: (\n      font-size: scale.type-scale(23),\n      line-height: 1.05,\n      letter-spacing: -0.96px,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$fluid-display-04: $display-04 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$tokens: (\n  caption-01: $caption-01,\n  caption-02: $caption-02,\n  label-01: $label-01,\n  label-02: $label-02,\n  helper-text-01: $helper-text-01,\n  helper-text-02: $helper-text-02,\n  body-short-01: $body-short-01,\n  body-short-02: $body-short-02,\n  body-long-01: $body-long-01,\n  body-long-02: $body-long-02,\n  code-01: $code-01,\n  code-02: $code-02,\n  heading-01: $heading-01,\n  heading-02: $heading-02,\n  productive-heading-01: $productive-heading-01,\n  productive-heading-02: $productive-heading-02,\n  productive-heading-03: $productive-heading-03,\n  productive-heading-04: $productive-heading-04,\n  productive-heading-05: $productive-heading-05,\n  productive-heading-06: $productive-heading-06,\n  productive-heading-07: $productive-heading-07,\n  expressive-paragraph-01: $expressive-paragraph-01,\n  expressive-heading-01: $expressive-heading-01,\n  expressive-heading-02: $expressive-heading-02,\n  expressive-heading-03: $expressive-heading-03,\n  expressive-heading-04: $expressive-heading-04,\n  expressive-heading-05: $expressive-heading-05,\n  expressive-heading-06: $expressive-heading-06,\n  quotation-01: $quotation-01,\n  quotation-02: $quotation-02,\n  display-01: $display-01,\n  display-02: $display-02,\n  display-03: $display-03,\n  display-04: $display-04,\n  // V11 Tokens\n  legal-01: $legal-01,\n  legal-02: $legal-02,\n  body-compact-01: $body-compact-01,\n  body-compact-02: $body-compact-02,\n  heading-compact-01: $heading-compact-01,\n  heading-compact-02: $heading-compact-02,\n  body-01: $body-01,\n  body-02: $body-02,\n  heading-03: $heading-03,\n  heading-04: $heading-04,\n  heading-05: $heading-05,\n  heading-06: $heading-06,\n  heading-07: $heading-07,\n  fluid-heading-03: $fluid-heading-03,\n  fluid-heading-04: $fluid-heading-04,\n  fluid-heading-05: $fluid-heading-05,\n  fluid-heading-06: $fluid-heading-06,\n  fluid-paragraph-01: $fluid-paragraph-01,\n  fluid-quotation-01: $fluid-quotation-01,\n  fluid-quotation-02: $fluid-quotation-02,\n  fluid-display-01: $fluid-display-01,\n  fluid-display-02: $fluid-display-02,\n  fluid-display-03: $fluid-display-03,\n  fluid-display-04: $fluid-display-04,\n) !default;\n\n/// @param {Map} $map\n/// @access public\n/// @group @carbon/type\n@mixin properties($map) {\n  @each $name, $value in $map {\n    #{$name}: $value;\n  }\n}\n\n/// @param {Number} $value - Number with units\n/// @return {Number} Without units\n/// @access public\n/// @group @carbon/type\n@function strip-unit($value) {\n  @return math.div($value, $value * 0 + 1);\n}\n\n/// This helper includes fluid type styles for the given token value. Fluid type\n/// means that the `font-size` is computed using `calc()` in order to be\n/// determined by the screen size instead of a breakpoint. As a result, fluid\n/// styles should be used with caution in fixed width contexts.\n///\n/// In addition, we make use of %-based line-heights so that the line-height of\n/// each type style is computed correctly due to the dynamic nature of the\n/// `font-size`.\n///\n/// Most of the logic for this work comes from CSS Tricks:\n/// https://css-tricks.com/snippets/css/fluid-typography/\n///\n/// @param {Map} $type-styles - The value of a given type token\n/// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type($type-styles, $breakpoints: gridconfig.$grid-breakpoints) {\n  // Include the initial styles for the given token by default without any\n  // media query guard. This includes `font-size` as a fallback in the case\n  // that a browser does not support `calc()`\n  @include properties(map.remove($type-styles, breakpoints));\n  // We also need to include the `sm` styles by default since they don't\n  // appear in the fluid styles for tokens\n  @include fluid-type-size($type-styles, sm, $breakpoints);\n\n  // Finally, we need to go through all the breakpoints defined in the type\n  // token and apply the properties and fluid type size for that given\n  // breakpoint\n  @each $name, $values in map.get($type-styles, breakpoints) {\n    @include grid.breakpoint($name) {\n      @include properties($values);\n      @include fluid-type-size($type-styles, $name, $breakpoints);\n    }\n  }\n}\n\n/// Computes the fluid `font-size` for a given type style and breakpoint\n/// @param {Map} $type-styles - The styles for a given token\n/// @param {String} $name - The name of the breakpoint to which we apply the fluid\n/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints for the grid system\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type-size(\n  $type-styles,\n  $name,\n  $breakpoints: gridconfig.$grid-breakpoints\n) {\n  // Get the information about the breakpoint we're currently working in. Useful\n  // for getting initial width information\n  $breakpoint: map.get($breakpoints, $name);\n\n  // Our fluid styles are captured under the 'breakpoints' property in our type\n  // styles map. These define what values to treat as `max-` variables below\n  $fluid-sizes: map.get($type-styles, breakpoints);\n  $fluid-breakpoint: ();\n  // Special case for `sm` because the styles for small are on the type style\n  // directly\n  @if $name == sm {\n    $fluid-breakpoint: map.remove($type-styles, breakpoints);\n  } @else {\n    $fluid-breakpoint: map.get($fluid-sizes, $name);\n  }\n\n  // Initialize our font-sizes to the default size for the type style\n  $max-font-size: map.get($type-styles, font-size);\n  $min-font-size: map.get($type-styles, font-size);\n  @if map.has-key($fluid-breakpoint, font-size) {\n    $min-font-size: map.get($fluid-breakpoint, font-size);\n  }\n\n  // Initialize our min and max width to the width of the current breakpoint\n  $max-vw: map.get($breakpoint, width);\n  $min-vw: map.get($breakpoint, width);\n\n  // We can use `breakpoint-next` to see if there is another breakpoint we can\n  // use to update `max-font-size` and `max-vw` with larger values\n  $next-breakpoint-available: grid.breakpoint-next($name, $breakpoints);\n  $next-fluid-breakpoint-name: null;\n\n  // We need to figure out what the next available fluid breakpoint is for our\n  // given $type-styles. In this loop we try and iterate through breakpoints\n  // until we either manually set $next-breakpoint-available to null or\n  // `breakpoint-next` returns null.\n  @while $next-breakpoint-available {\n    @if map.has-key($fluid-sizes, $next-breakpoint-available) {\n      $next-fluid-breakpoint-name: $next-breakpoint-available;\n      $next-breakpoint-available: null;\n    } @else {\n      $next-breakpoint-available: grid.breakpoint-next(\n        $next-breakpoint-available,\n        $breakpoints\n      );\n    }\n  }\n\n  // If we have found the next available fluid breakpoint name, then we know\n  // that we have values that we can use to set max-font-size and max-vw as both\n  // values derive from the next breakpoint\n  @if $next-fluid-breakpoint-name {\n    $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);\n    $max-font-size: map.get(\n      map.get($fluid-sizes, $next-fluid-breakpoint-name),\n      font-size\n    );\n    $max-vw: map.get($next-fluid-breakpoint, width);\n\n    // prettier-ignore\n    font-size: calc(#{$min-font-size} +\n      #{strip-unit($max-font-size - $min-font-size)} *\n      ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})\n    );\n  } @else {\n    // Otherwise, just default to setting the font size found from the type\n    // style or the given fluid breakpoint in the type style\n    font-size: $min-font-size;\n  }\n}\n\n// TODO move following variable and `custom-property` mixin into shared file for\n// both `@carbon/type` and `@carbon/themes`\n\n/// @access private\n/// @group @carbon/type\n@mixin custom-properties($name, $value) {\n  @each $property, $value in $value {\n    #{$property}: var(\n      --#{$custom-property-prefix}-#{$name}-#{$property},\n      #{$value}\n    );\n  }\n}\n\n/// Helper mixin to include the styles for a given token in any selector in your\n/// project. Also includes an optional fluid option that will enable fluid\n/// styles for the token if they are defined. Fluid styles will cause the\n/// token's font-size to be computed based on the viewport size. As a result, use\n/// with caution in fixed contexts.\n/// @param {String} $name - The name of the token to get the styles for\n/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the\n/// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use\n/// @access public\n/// @group @carbon/type\n@mixin type-style(\n  $name,\n  $fluid: false,\n  $breakpoints: gridconfig.$grid-breakpoints\n) {\n  @if not map.has-key($tokens, $name) {\n    @error 'Unable to find a token with the name: `#{$name}`';\n  }\n\n  $token: map.get($tokens, $name);\n\n  // If $fluid is set to true and the token has breakpoints defined for fluid\n  // styles, delegate to the fluid-type helper for the given token\n  @if $fluid == true and map.has-key($token, 'breakpoints') {\n    @include fluid-type($token, $breakpoints);\n  } @else {\n    @include custom-properties($name, $token);\n  }\n}\n","// Code generated by @carbon/colors. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$black: #000000 !default;\n$white: #ffffff !default;\n\n$black-100: #000000 !default;\n$blue-10: #edf5ff !default;\n$blue-20: #d0e2ff !default;\n$blue-30: #a6c8ff !default;\n$blue-40: #78a9ff !default;\n$blue-50: #4589ff !default;\n$blue-60: #0f62fe !default;\n$blue-70: #0043ce !default;\n$blue-80: #002d9c !default;\n$blue-90: #001d6c !default;\n$blue-100: #001141 !default;\n$cool-gray-10: #f2f4f8 !default;\n$cool-gray-20: #dde1e6 !default;\n$cool-gray-30: #c1c7cd !default;\n$cool-gray-40: #a2a9b0 !default;\n$cool-gray-50: #878d96 !default;\n$cool-gray-60: #697077 !default;\n$cool-gray-70: #4d5358 !default;\n$cool-gray-80: #343a3f !default;\n$cool-gray-90: #21272a !default;\n$cool-gray-100: #121619 !default;\n$cyan-10: #e5f6ff !default;\n$cyan-20: #bae6ff !default;\n$cyan-30: #82cfff !default;\n$cyan-40: #33b1ff !default;\n$cyan-50: #1192e8 !default;\n$cyan-60: #0072c3 !default;\n$cyan-70: #00539a !default;\n$cyan-80: #003a6d !default;\n$cyan-90: #012749 !default;\n$cyan-100: #061727 !default;\n$gray-10: #f4f4f4 !default;\n$gray-20: #e0e0e0 !default;\n$gray-30: #c6c6c6 !default;\n$gray-40: #a8a8a8 !default;\n$gray-50: #8d8d8d !default;\n$gray-60: #6f6f6f !default;\n$gray-70: #525252 !default;\n$gray-80: #393939 !default;\n$gray-90: #262626 !default;\n$gray-100: #161616 !default;\n$green-10: #defbe6 !default;\n$green-20: #a7f0ba !default;\n$green-30: #6fdc8c !default;\n$green-40: #42be65 !default;\n$green-50: #24a148 !default;\n$green-60: #198038 !default;\n$green-70: #0e6027 !default;\n$green-80: #044317 !default;\n$green-90: #022d0d !default;\n$green-100: #071908 !default;\n$magenta-10: #fff0f7 !default;\n$magenta-20: #ffd6e8 !default;\n$magenta-30: #ffafd2 !default;\n$magenta-40: #ff7eb6 !default;\n$magenta-50: #ee5396 !default;\n$magenta-60: #d02670 !default;\n$magenta-70: #9f1853 !default;\n$magenta-80: #740937 !default;\n$magenta-90: #510224 !default;\n$magenta-100: #2a0a18 !default;\n$orange-10: #fff2e8 !default;\n$orange-20: #ffd9be !default;\n$orange-30: #ffb784 !default;\n$orange-40: #ff832b !default;\n$orange-50: #eb6200 !default;\n$orange-60: #ba4e00 !default;\n$orange-70: #8a3800 !default;\n$orange-80: #5e2900 !default;\n$orange-90: #3e1a00 !default;\n$orange-100: #231000 !default;\n$purple-10: #f6f2ff !default;\n$purple-20: #e8daff !default;\n$purple-30: #d4bbff !default;\n$purple-40: #be95ff !default;\n$purple-50: #a56eff !default;\n$purple-60: #8a3ffc !default;\n$purple-70: #6929c4 !default;\n$purple-80: #491d8b !default;\n$purple-90: #31135e !default;\n$purple-100: #1c0f30 !default;\n$red-10: #fff1f1 !default;\n$red-20: #ffd7d9 !default;\n$red-30: #ffb3b8 !default;\n$red-40: #ff8389 !default;\n$red-50: #fa4d56 !default;\n$red-60: #da1e28 !default;\n$red-70: #a2191f !default;\n$red-80: #750e13 !default;\n$red-90: #520408 !default;\n$red-100: #2d0709 !default;\n$teal-10: #d9fbfb !default;\n$teal-20: #9ef0f0 !default;\n$teal-30: #3ddbd9 !default;\n$teal-40: #08bdba !default;\n$teal-50: #009d9a !default;\n$teal-60: #007d79 !default;\n$teal-70: #005d5d !default;\n$teal-80: #004144 !default;\n$teal-90: #022b30 !default;\n$teal-100: #081a1c !default;\n$warm-gray-10: #f7f3f2 !default;\n$warm-gray-20: #e5e0df !default;\n$warm-gray-30: #cac5c4 !default;\n$warm-gray-40: #ada8a8 !default;\n$warm-gray-50: #8f8b8b !default;\n$warm-gray-60: #726e6e !default;\n$warm-gray-70: #565151 !default;\n$warm-gray-80: #3c3838 !default;\n$warm-gray-90: #272525 !default;\n$warm-gray-100: #171414 !default;\n$white-0: #ffffff !default;\n$yellow-10: #fcf4d6 !default;\n$yellow-20: #fddc69 !default;\n$yellow-30: #f1c21b !default;\n$yellow-40: #d2a106 !default;\n$yellow-50: #b28600 !default;\n$yellow-60: #8e6a00 !default;\n$yellow-70: #684e00 !default;\n$yellow-80: #483700 !default;\n$yellow-90: #302400 !default;\n$yellow-100: #1c1500 !default;\n\n$white-hover: #e8e8e8 !default;\n$black-hover: #212121 !default;\n$blue-10-hover: #dbebff !default;\n$blue-20-hover: #b8d3ff !default;\n$blue-30-hover: #8ab6ff !default;\n$blue-40-hover: #5c97ff !default;\n$blue-50-hover: #1f70ff !default;\n$blue-60-hover: #0050e6 !default;\n$blue-70-hover: #0053ff !default;\n$blue-80-hover: #0039c7 !default;\n$blue-90-hover: #00258a !default;\n$blue-100-hover: #001f75 !default;\n$cool-gray-10-hover: #e4e9f1 !default;\n$cool-gray-20-hover: #cdd3da !default;\n$cool-gray-30-hover: #adb5bd !default;\n$cool-gray-40-hover: #9199a1 !default;\n$cool-gray-50-hover: #757b85 !default;\n$cool-gray-60-hover: #585e64 !default;\n$cool-gray-70-hover: #5d646a !default;\n$cool-gray-80-hover: #434a51 !default;\n$cool-gray-90-hover: #2b3236 !default;\n$cool-gray-100-hover: #222a2f !default;\n$cyan-10-hover: #cceeff !default;\n$cyan-20-hover: #99daff !default;\n$cyan-30-hover: #57beff !default;\n$cyan-40-hover: #059fff !default;\n$cyan-50-hover: #0f7ec8 !default;\n$cyan-60-hover: #005fa3 !default;\n$cyan-70-hover: #0066bd !default;\n$cyan-80-hover: #00498a !default;\n$cyan-90-hover: #013360 !default;\n$cyan-100-hover: #0b2947 !default;\n$gray-10-hover: #e8e8e8 !default;\n$gray-20-hover: #d1d1d1 !default;\n$gray-30-hover: #b5b5b5 !default;\n$gray-40-hover: #999999 !default;\n$gray-50-hover: #7a7a7a !default;\n$gray-60-hover: #5e5e5e !default;\n$gray-70-hover: #636363 !default;\n$gray-80-hover: #474747 !default;\n$gray-90-hover: #333333 !default;\n$gray-100-hover: #292929 !default;\n$green-10-hover: #b6f6c8 !default;\n$green-20-hover: #74e792 !default;\n$green-30-hover: #36ce5e !default;\n$green-40-hover: #3bab5a !default;\n$green-50-hover: #208e3f !default;\n$green-60-hover: #166f31 !default;\n$green-70-hover: #11742f !default;\n$green-80-hover: #05521c !default;\n$green-90-hover: #033b11 !default;\n$green-100-hover: #0d300f !default;\n$magenta-10-hover: #ffe0ef !default;\n$magenta-20-hover: #ffbdda !default;\n$magenta-30-hover: #ff94c3 !default;\n$magenta-40-hover: #ff57a0 !default;\n$magenta-50-hover: #e3176f !default;\n$magenta-60-hover: #b0215f !default;\n$magenta-70-hover: #bf1d63 !default;\n$magenta-80-hover: #8e0b43 !default;\n$magenta-90-hover: #68032e !default;\n$magenta-100-hover: #53142f !default;\n$orange-10-hover: #ffe2cc !default;\n$orange-20-hover: #ffc69e !default;\n$orange-30-hover: #ff9d57 !default;\n$orange-40-hover: #fa6800 !default;\n$orange-50-hover: #cc5500 !default;\n$orange-60-hover: #9e4200 !default;\n$orange-70-hover: #a84400 !default;\n$orange-80-hover: #753300 !default;\n$orange-90-hover: #522200 !default;\n$orange-100-hover: #421e00 !default;\n$purple-10-hover: #ede5ff !default;\n$purple-20-hover: #dcc7ff !default;\n$purple-30-hover: #c5a3ff !default;\n$purple-40-hover: #ae7aff !default;\n$purple-50-hover: #9352ff !default;\n$purple-60-hover: #7822fb !default;\n$purple-70-hover: #7c3dd6 !default;\n$purple-80-hover: #5b24ad !default;\n$purple-90-hover: #40197b !default;\n$purple-100-hover: #341c59 !default;\n$red-10-hover: #ffe0e0 !default;\n$red-20-hover: #ffc2c5 !default;\n$red-30-hover: #ff99a0 !default;\n$red-40-hover: #ff6168 !default;\n$red-50-hover: #ee0713 !default;\n$red-60-hover: #b81922 !default;\n$red-70-hover: #c21e25 !default;\n$red-80-hover: #921118 !default;\n$red-90-hover: #66050a !default;\n$red-100-hover: #540d11 !default;\n$teal-10-hover: #acf6f6 !default;\n$teal-20-hover: #57e5e5 !default;\n$teal-30-hover: #25cac8 !default;\n$teal-40-hover: #07aba9 !default;\n$teal-50-hover: #008a87 !default;\n$teal-60-hover: #006b68 !default;\n$teal-70-hover: #007070 !default;\n$teal-80-hover: #005357 !default;\n$teal-90-hover: #033940 !default;\n$teal-100-hover: #0f3034 !default;\n$warm-gray-10-hover: #f0e8e6 !default;\n$warm-gray-20-hover: #d8d0cf !default;\n$warm-gray-30-hover: #b9b3b1 !default;\n$warm-gray-40-hover: #9c9696 !default;\n$warm-gray-50-hover: #7f7b7b !default;\n$warm-gray-60-hover: #605d5d !default;\n$warm-gray-70-hover: #696363 !default;\n$warm-gray-80-hover: #4c4848 !default;\n$warm-gray-90-hover: #343232 !default;\n$warm-gray-100-hover: #2c2626 !default;\n$yellow-10-hover: #f8e6a0 !default;\n$yellow-20-hover: #fccd27 !default;\n$yellow-30-hover: #ddb00e !default;\n$yellow-40-hover: #bc9005 !default;\n$yellow-50-hover: #9e7700 !default;\n$yellow-60-hover: #755800 !default;\n$yellow-70-hover: #806000 !default;\n$yellow-80-hover: #5c4600 !default;\n$yellow-90-hover: #3d2e00 !default;\n$yellow-100-hover: #332600 !default;\n\n/// Colors from the IBM Design Language\n/// @access public\n/// @group @carbon/colors\n$colors: (\n  black: (\n    100: #000000,\n  ),\n  blue: (\n    10: #edf5ff,\n    20: #d0e2ff,\n    30: #a6c8ff,\n    40: #78a9ff,\n    50: #4589ff,\n    60: #0f62fe,\n    70: #0043ce,\n    80: #002d9c,\n    90: #001d6c,\n    100: #001141,\n  ),\n  cool-gray: (\n    10: #f2f4f8,\n    20: #dde1e6,\n    30: #c1c7cd,\n    40: #a2a9b0,\n    50: #878d96,\n    60: #697077,\n    70: #4d5358,\n    80: #343a3f,\n    90: #21272a,\n    100: #121619,\n  ),\n  cyan: (\n    10: #e5f6ff,\n    20: #bae6ff,\n    30: #82cfff,\n    40: #33b1ff,\n    50: #1192e8,\n    60: #0072c3,\n    70: #00539a,\n    80: #003a6d,\n    90: #012749,\n    100: #061727,\n  ),\n  gray: (\n    10: #f4f4f4,\n    20: #e0e0e0,\n    30: #c6c6c6,\n    40: #a8a8a8,\n    50: #8d8d8d,\n    60: #6f6f6f,\n    70: #525252,\n    80: #393939,\n    90: #262626,\n    100: #161616,\n  ),\n  green: (\n    10: #defbe6,\n    20: #a7f0ba,\n    30: #6fdc8c,\n    40: #42be65,\n    50: #24a148,\n    60: #198038,\n    70: #0e6027,\n    80: #044317,\n    90: #022d0d,\n    100: #071908,\n  ),\n  magenta: (\n    10: #fff0f7,\n    20: #ffd6e8,\n    30: #ffafd2,\n    40: #ff7eb6,\n    50: #ee5396,\n    60: #d02670,\n    70: #9f1853,\n    80: #740937,\n    90: #510224,\n    100: #2a0a18,\n  ),\n  orange: (\n    10: #fff2e8,\n    20: #ffd9be,\n    30: #ffb784,\n    40: #ff832b,\n    50: #eb6200,\n    60: #ba4e00,\n    70: #8a3800,\n    80: #5e2900,\n    90: #3e1a00,\n    100: #231000,\n  ),\n  purple: (\n    10: #f6f2ff,\n    20: #e8daff,\n    30: #d4bbff,\n    40: #be95ff,\n    50: #a56eff,\n    60: #8a3ffc,\n    70: #6929c4,\n    80: #491d8b,\n    90: #31135e,\n    100: #1c0f30,\n  ),\n  red: (\n    10: #fff1f1,\n    20: #ffd7d9,\n    30: #ffb3b8,\n    40: #ff8389,\n    50: #fa4d56,\n    60: #da1e28,\n    70: #a2191f,\n    80: #750e13,\n    90: #520408,\n    100: #2d0709,\n  ),\n  teal: (\n    10: #d9fbfb,\n    20: #9ef0f0,\n    30: #3ddbd9,\n    40: #08bdba,\n    50: #009d9a,\n    60: #007d79,\n    70: #005d5d,\n    80: #004144,\n    90: #022b30,\n    100: #081a1c,\n  ),\n  warm-gray: (\n    10: #f7f3f2,\n    20: #e5e0df,\n    30: #cac5c4,\n    40: #ada8a8,\n    50: #8f8b8b,\n    60: #726e6e,\n    70: #565151,\n    80: #3c3838,\n    90: #272525,\n    100: #171414,\n  ),\n  white: (\n    0: #ffffff,\n  ),\n  yellow: (\n    10: #fcf4d6,\n    20: #fddc69,\n    30: #f1c21b,\n    40: #d2a106,\n    50: #b28600,\n    60: #8e6a00,\n    70: #684e00,\n    80: #483700,\n    90: #302400,\n    100: #1c1500,\n  ),\n) !default;\n"],sourceRoot:""}]),l.locals={container:"-esm-appointments__metrics-card__container___G+nC8",tileContainer:"-esm-appointments__metrics-card__tileContainer___ifQ6K",tileHeader:"-esm-appointments__metrics-card__tileHeader___nIOp1",headerLabel:"-esm-appointments__metrics-card__headerLabel___UesNK",totalsLabel:"-esm-appointments__metrics-card__totalsLabel___bPWb1",totalsValue:"-esm-appointments__metrics-card__totalsValue___Vfhkt",headerLabelContainer:"-esm-appointments__metrics-card__headerLabelContainer___Y4yw8",link:"-esm-appointments__metrics-card__link___Irh0L",metricsGrid:"-esm-appointments__metrics-card__metricsGrid___+184M",countGrid:"-esm-appointments__metrics-card__countGrid___6cfiB"};const i=l},31118:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79;--bottom-nav-height: 4rem;--workspace-header-height: 3rem;--tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));--desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height))}.-esm-appointments__metrics-header__metricsContainer___OG6Ft{display:flex;background-color:#fff;height:4rem;align-items:center;padding:0 1rem}.-esm-appointments__metrics-header__link___IyBdE{text-decoration:none;display:flex;align-items:center}.-esm-appointments__metrics-header__viewListBtn___wSvwo{margin:0 0 0 .5rem}.-esm-appointments__metrics-header__metricsContent___2Gebb{display:flex;align-items:center;gap:1rem;margin-left:auto}","",{version:3,sources:["webpack://./../../node_modules/@openmrs/esm-styleguide/src/_vars.scss","webpack://./src/metrics/metrics-header.scss","webpack://./../../node_modules/@carbon/layout/scss/generated/_spacing.scss"],names:[],mappings:"AAsDA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,yBAAA,CACA,+BAAA,CACA,oGAAA,CACA,2GAAA,CCzDF,6DACE,YAAA,CACA,qBDHM,CCIN,WCiDW,CDhDX,kBAAA,CACA,cAAA,CAGF,iDACE,oBAAA,CACA,YAAA,CACA,kBAAA,CAGF,wDACE,kBAAA,CAGF,2DACE,YAAA,CACA,kBAAA,CACA,QCMW,CDLX,gBAAA",sourcesContent:["@use '@carbon/layout';\n\n$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n$brand-primary-10: #d9fbfb;\n$brand-primary-20: #9ef0f0;\n$brand-primary-30: #3ddbd9;\n$brand-primary-40: #08bdba;\n$brand-primary-50: #009d9a;\n\n/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */\n\n$brand-primary-90: #022b30;\n$brand-primary-100: #081a1c;\n\n@mixin brand-01($property) {\n  #{$property}: #005d5d;\n  #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n  #{$property}: #004144;\n  #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n  #{$property}: #007d79;\n  #{$property}: var(--brand-03);\n}\n\n:root {\n  --brand-01: #005d5d;\n  --brand-02: #004144;\n  --brand-03: #007d79;\n  --bottom-nav-height: #{layout.$spacing-10};\n  --workspace-header-height: #{layout.$spacing-09};\n  --tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));\n  --desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height));\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1023px;\n$breakpoint-small-desktop-min: 1024px;\n$breakpoint-small-desktop-max: 1439px;\n$breakpoint-large-desktop-min: 1440px;\n$breakpoint-large-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n","@use '@carbon/layout';\n@use '@carbon/type';\n@use '@openmrs/esm-styleguide/src/vars' as *;\n\n.metricsContainer {\n  display: flex;\n  background-color: $ui-02;\n  height: layout.$spacing-10;\n  align-items: center;\n  padding: 0 layout.$spacing-05;\n}\n\n.link {\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n}\n\n.viewListBtn {\n  margin: 0 0 0 layout.$spacing-03;\n}\n\n.metricsContent {\n  display: flex;\n  align-items: center;\n  gap: layout.$spacing-05;\n  margin-left: auto;\n}\n","// Code generated by @carbon/layout. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-01: 0.125rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-02: 0.25rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-03: 0.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-04: 0.75rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-05: 1rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-06: 1.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-07: 2rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-08: 2.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-09: 3rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-10: 4rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-11: 5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-12: 6rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-13: 10rem !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/layout\n$spacing: (\n  spacing-01: $spacing-01,\n  spacing-02: $spacing-02,\n  spacing-03: $spacing-03,\n  spacing-04: $spacing-04,\n  spacing-05: $spacing-05,\n  spacing-06: $spacing-06,\n  spacing-07: $spacing-07,\n  spacing-08: $spacing-08,\n  spacing-09: $spacing-09,\n  spacing-10: $spacing-10,\n  spacing-11: $spacing-11,\n  spacing-12: $spacing-12,\n  spacing-13: $spacing-13,\n);\n"],sourceRoot:""}]),l.locals={metricsContainer:"-esm-appointments__metrics-header__metricsContainer___OG6Ft",link:"-esm-appointments__metrics-header__link___IyBdE",viewListBtn:"-esm-appointments__metrics-header__viewListBtn___wSvwo",metricsContent:"-esm-appointments__metrics-header__metricsContent___2Gebb"};const i=l},47331:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79;--bottom-nav-height: 4rem;--workspace-header-height: 3rem;--tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));--desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height))}.-esm-appointments__appointments-header__header___9TDaZ{background-color:#fff;border:1px solid #e0e0e0;border-left:0;display:flex;justify-content:space-between;align-items:center;padding-right:.5rem}.-esm-appointments__appointments-header__rightJustifiedItems___WVWV2{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;margin:0 .5rem;row-gap:.125rem}html[dir=rtl] .-esm-appointments__appointments-header__date-and-location___Fstmf>svg{order:-1}html[dir=rtl] .-esm-appointments__appointments-header__date-and-location___Fstmf>span:nth-child(2){order:-2}","",{version:3,sources:["webpack://./../../node_modules/@openmrs/esm-styleguide/src/_vars.scss","webpack://./src/header/appointments-header.scss","webpack://./../../node_modules/@carbon/layout/scss/generated/_spacing.scss"],names:[],mappings:"AAsDA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,yBAAA,CACA,+BAAA,CACA,oGAAA,CACA,2GAAA,CCxDF,wDACE,qBDHM,CCIN,wBAAA,CACA,aAAA,CACA,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,mBCSW,CDNb,qEACE,YAAA,CACA,qBAAA,CACA,oBAAA,CACA,wBAAA,CACA,cAAA,CACA,eCVW,CDgBT,qFACE,QAAA,CAEF,mGACE,QAAA",sourcesContent:["@use '@carbon/layout';\n\n$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n$brand-primary-10: #d9fbfb;\n$brand-primary-20: #9ef0f0;\n$brand-primary-30: #3ddbd9;\n$brand-primary-40: #08bdba;\n$brand-primary-50: #009d9a;\n\n/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */\n\n$brand-primary-90: #022b30;\n$brand-primary-100: #081a1c;\n\n@mixin brand-01($property) {\n  #{$property}: #005d5d;\n  #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n  #{$property}: #004144;\n  #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n  #{$property}: #007d79;\n  #{$property}: var(--brand-03);\n}\n\n:root {\n  --brand-01: #005d5d;\n  --brand-02: #004144;\n  --brand-03: #007d79;\n  --bottom-nav-height: #{layout.$spacing-10};\n  --workspace-header-height: #{layout.$spacing-09};\n  --tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));\n  --desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height));\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1023px;\n$breakpoint-small-desktop-min: 1024px;\n$breakpoint-small-desktop-max: 1439px;\n$breakpoint-large-desktop-min: 1440px;\n$breakpoint-large-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n","@use '@carbon/colors';\n@use '@carbon/layout';\n@use '@carbon/type';\n@use '@openmrs/esm-styleguide/src/vars' as *;\n\n.header {\n  background-color: $ui-02;\n  border: 1px solid $ui-03;\n  border-left: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: layout.$spacing-03;\n}\n\n.rightJustifiedItems {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: flex-end;\n  margin: 0 layout.$spacing-03;\n  row-gap: layout.$spacing-01;\n}\n\n// Overriding styles for RTL support\nhtml[dir='rtl'] {\n  .date-and-location {\n    & > svg {\n      order: -1;\n    }\n    & > span:nth-child(2) {\n      order: -2;\n    }\n  }\n}\n","// Code generated by @carbon/layout. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-01: 0.125rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-02: 0.25rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-03: 0.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-04: 0.75rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-05: 1rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-06: 1.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-07: 2rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-08: 2.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-09: 3rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-10: 4rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-11: 5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-12: 6rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-13: 10rem !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/layout\n$spacing: (\n  spacing-01: $spacing-01,\n  spacing-02: $spacing-02,\n  spacing-03: $spacing-03,\n  spacing-04: $spacing-04,\n  spacing-05: $spacing-05,\n  spacing-06: $spacing-06,\n  spacing-07: $spacing-07,\n  spacing-08: $spacing-08,\n  spacing-09: $spacing-09,\n  spacing-10: $spacing-10,\n  spacing-11: $spacing-11,\n  spacing-12: $spacing-12,\n  spacing-13: $spacing-13,\n);\n"],sourceRoot:""}]),l.locals={header:"-esm-appointments__appointments-header__header___9TDaZ",rightJustifiedItems:"-esm-appointments__appointments-header__rightJustifiedItems___WVWV2","date-and-location":"-esm-appointments__appointments-header__date-and-location___Fstmf"};const i=l},47781:(e,n,a)=>{a.d(n,{A:()=>B});var t=a(1343),r=a.n(t),o=a(23464),l=a.n(o),i=a(93150),s=a(56766),c=a(38254),d=a(57691),p=a(71123),u=a(84243),f=a(72591),g=a.n(f),m=a(1740),b=a.n(m),h=a(88128),y=a.n(h),$=a(30855),v=a.n($),A=a(93051),_=a.n(A),w=a(73656),C=a.n(w),k=a(47331),x={};x.styleTagTransform=C(),x.setAttributes=v(),x.insert=y().bind(null,"head"),x.domAPI=b(),x.insertStyleElement=_(),g()(k.A,x);const E=k.A&&k.A.locals?k.A.locals:void 0;function N(e,n){(null==n||n>e.length)&&(n=e.length);for(var a=0,t=new Array(n);a<n;a++)t[a]=e[a];return t}const B=function(e){var n,a,o,f,g,m,b,h=e.title,y=e.onChange,$=(0,i.useTranslation)().t,v=(0,u.SI)(),A=v.selectedDate,_=v.setSelectedDate,w=(a=(0,p.Ay)("".concat(c.restBaseUrl,"/appointmentService/all/default"),c.openmrsFetch),o=a.data,f=a.error,g=a.isLoading,{serviceTypes:null!==(n=null==o?void 0:o.data)&&void 0!==n?n:[],isLoading:g,error:f}).serviceTypes,C=(m=(0,t.useState)([]),b=2,function(e){if(Array.isArray(e))return e}(m)||function(e,n){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var t,r,o=[],l=!0,i=!1;try{for(a=a.call(e);!(l=(t=a.next()).done)&&(o.push(t.value),!n||o.length!==n);l=!0);}catch(e){i=!0,r=e}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(m,b)||function(e,n){if(e){if("string"==typeof e)return N(e,n);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(a):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?N(e,n):void 0}}(m,b)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),k=(C[0],C[1]),x=(0,t.useCallback)(function(e){var n=e.selectedItems.map(function(e){return e.id});k(n),null==y||y(n)},[y]),B=(0,t.useMemo)(function(){var e;return null!==(e=null==w?void 0:w.map(function(e){return{id:e.uuid,label:e.name}}))&&void 0!==e?e:[]},[w]);return r().createElement(c.PageHeader,{className:E.header,"data-testid":"appointments-header"},r().createElement(c.PageHeaderContent,{illustration:r().createElement(c.AppointmentsPictogram,null),title:h}),r().createElement("div",{className:E.rightJustifiedItems},r().createElement(c.OpenmrsDatePicker,{"data-testid":"appointment-date-picker",id:"appointment-date-picker",labelText:"",onChange:function(e){return _(l()(e).startOf("day").format(d.BC))},value:l()(A).toDate()}),"function"==typeof y&&r().createElement(s.KFt,{id:"serviceTypeMultiSelect",items:B,itemToString:function(e){return e?e.label:""},label:$("filterAppointmentsByServiceType","Filter appointments by service type"),onChange:x,type:"inline"})))}},71293:(e,n,a)=>{a.r(n),a.d(n,{default:()=>we});var t=a(1343),r=a.n(t),o=a(23464),l=a.n(o),i=a(93150),s=a(8877),c=a(57691),d=a(84243),p=a(56766),u=a(38254),f=a(40515),g=a.n(f),m=a(72591),b=a.n(m),h=a(1740),y=a.n(h),$=a(88128),v=a.n($),A=a(30855),_=a.n(A),w=a(93051),C=a.n(w),k=a(73656),x=a.n(k),E=a(4120),N={};N.styleTagTransform=x(),N.setAttributes=_(),N.insert=v().bind(null,"head"),N.domAPI=y(),N.insertStyleElement=C(),b()(E.A,N);const B=E.A&&E.A.locals?E.A.locals:void 0;function z(e,n){(null==n||n>e.length)&&(n=e.length);for(var a=0,t=new Array(n);a<n;a++)t[a]=e[a];return t}function D(e,n,a){return n in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}function T(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var t,r,o=[],l=!0,i=!1;try{for(a=a.call(e);!(l=(t=a.next()).done)&&(o.push(t.value),!n||o.length!==n);l=!0);}catch(e){i=!0,r=e}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(e,n)||function(e,n){if(e){if("string"==typeof e)return z(e,n);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(a):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?z(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function M(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}l().extend(g());var S="scheduled-appointments-panels-slot";function I(e){var n,a,o=e.extension,l=e.currentTab,i=e.appointmentServiceTypes,s=e.date,c=e.dateType,d=e.showExtensionTab,p=e.hideExtensionTab,f=(0,t.useRef)(null),g=(0,t.useRef)(c);return(0,t.useEffect)(function(){(null===f.current||null!==f.current&&!function(e,n){if(Object.is(e,n))return!0;if("object"!==(void 0===e?"undefined":M(e))||null===e||"object"!==(void 0===n?"undefined":M(n))||null===n)return!1;var a=Object.getOwnPropertyNames(e),t=Object.getOwnPropertyNames(n);return a.length===t.length&&a.every(function(a){return e[a]===n[a]})}(f.current,o.config)||g.current!==c)&&(f.current=o.config,g.current=c,function(e,n){if(!e)return!1;switch(n){case"futureDate":var a;return null!==(a=e.showForFutureDate)&&void 0!==a&&a;case"pastDate":var t;return null!==(t=e.showForPastDate)&&void 0!==t&&t;case"today":var r;return null!==(r=e.showForToday)&&void 0!==r&&r}}(null==o?void 0:o.config,c)?d(o.name):p(o.name))},[o,c,d,p]),r().createElement("div",{key:o.name,className:B.container,style:{display:l===o.name?"block":"none"}},r().createElement(u.Extension,{state:{date:s,appointmentServiceTypes:i,status:null===(n=o.config)||void 0===n?void 0:n.status,title:null===(a=o.config)||void 0===a?void 0:a.title}}))}const L=function(e){var n=e.appointmentServiceTypes,a=(0,i.useTranslation)().t,o=(0,d.SI)().selectedDate,s=(0,u.useLayoutType)(),c=(0,u.isDesktop)(s)?"sm":"md",f=T((0,t.useState)(null),2),g=f[0],m=f[1],b=T((0,t.useState)("today"),2),h=b[0],y=b[1],$=(0,u.useConnectedExtensions)(S),v=function(){var e=T((0,t.useReducer)(function(e,n){var a={};switch(n.type){case"show_extension":a[n.extension]=!0;break;case"hide_extension":a[n.extension]=!1}return function(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{},t=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(a).filter(function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),t.forEach(function(n){D(e,n,a[n])})}return e}({},e,a)},{}),2),n=e[0],a=e[1];return{allowedExtensions:n,showExtension:function(e){return a({type:"show_extension",extension:e})},hideExtension:function(e){return a({type:"hide_extension",extension:e})}}}(),A=v.allowedExtensions,_=v.showExtension,w=v.hideExtension,C=(0,t.useCallback)(function(e){var n;return null!==(n=A[e.name])&&void 0!==n&&n},[A]);(0,t.useEffect)(function(){var e=l()(o),n=l()();e.isBefore(n,"date")?y("pastDate"):e.isAfter(n,"date")?y("futureDate"):y("today")},[o]),(0,t.useEffect)(function(){if(A&&(null===g||!A[g])){var e=!0,n=!1,a=void 0;try{for(var t,r=Object.getOwnPropertyNames(A)[Symbol.iterator]();!(e=(t=r.next()).done);e=!0){var o=t.value;if(A[o]){m(o);break}}}catch(e){n=!0,a=e}finally{try{e||null==r.return||r.return()}finally{if(n)throw a}}}},[A,g]);var k,x=$.filter(C);return r().createElement(r().Fragment,null,r().createElement(p.Tps,{className:B.switcher,size:c,onChange:function(e){var n=e.name;return m(n)},selectedIndex:null!==(k=x.findIndex(function(e){return e.name==g}))&&void 0!==k?k:0,selectionMode:"manual"},x.map(function(e){return r().createElement(p.dOG,{key:"panel-".concat(e.name),name:e.name,text:a(e.config.title)})})),r().createElement(u.ExtensionSlot,{name:S},function(e){return r().createElement(I,{appointmentServiceTypes:n,currentTab:g,date:o,dateType:h,extension:e,hideExtensionTab:w,showExtensionTab:_})}))};var O=a(68622),P=a(71123),j=a(95008);var F=a(13219),G=a(70197),W=a(82168);function V(e,n){(null==n||n>e.length)&&(n=e.length);for(var a=0,t=new Array(n);a<n;a++)t[a]=e[a];return t}function q(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var t,r,o=[],l=!0,i=!1;try{for(a=a.call(e);!(l=(t=a.next()).done)&&(o.push(t.value),!n||o.length!==n);l=!0);}catch(e){i=!0,r=e}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(e,n)||function(e,n){if(e){if("string"==typeof e)return V(e,n);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(a):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?V(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}const Y=function(){var e,n,a=(0,i.useTranslation)().t,o=q((0,t.useState)(25),2),l=o[0],s=o[1],c=q((0,t.useState)(""),2),f=c[0],g=c[1],m=function(){var e,n=(0,d.SI)().selectedDate,a="".concat(u.restBaseUrl,"/appointment/unScheduledAppointment?forDate=").concat(n),t=(0,P.Ay)(a,u.openmrsFetch,{errorRetryCount:2}),r=t.data,o=t.error,l=t.isLoading,i=null==r||null===(e=r.data)||void 0===e?void 0:e.map(function(e){return function(e){var n;return{name:e.name,identifier:null==e||null===(n=e.identifiers)||void 0===n?void 0:n.find(function(e){return e.identifierName===j.Q.patientIdentifierType._default}).identifier,dateTime:null==e?void 0:e.visit.startDateTime,gender:e.gender,phoneNumber:e.phoneNumber,age:e.age,uuid:e.uuid}}(e)});return{isLoading:l,data:null!=i?i:[],error:o}}(),b=m.data,h=m.isLoading,y=(m.error,(0,W.WB)(b,f)),$=(0,u.useConfig)().customPatientChartUrl,v=(0,u.usePagination)(y,l),A=v.results,_=v.currentPage,w=v.goTo,C=null==A?void 0:A.map(function(e){return{id:"".concat(e.uuid),name:r().createElement(u.ConfigurableLink,{style:{textDecoration:"none"},to:$,templateParams:{patientUuid:e.uuid}},e.name),gender:"F"===e.gender?"Female":"Male",phoneNumber:""===e.phoneNumber?"--":e.phoneNumber,identifier:null==e?void 0:e.identifier}});return h?r().createElement(p.OOb,null):(null==b?void 0:b.length)?r().createElement("div",null,r().createElement(p.bQt,{rows:C,headers:[{header:"Patient Name",key:"name"},{header:"Identifier",key:"identifier"},{header:"Gender",key:"gender"},{header:"Phone Number",key:"phoneNumber"}],isSortable:!0},function(e){var n,t=e.rows,o=e.headers,l=e.getHeaderProps,i=e.getTableProps;return r().createElement(p.K3K,{title:"".concat(a("unscheduledAppointments","Unscheduled appointments")," ").concat(b.length),description:"".concat(a("Total ".concat(null!==(n=b.length)&&void 0!==n?n:0)))},r().createElement(p.e1U,null,r().createElement(p.VbH,null,r().createElement(p.w6V,{style:{backgroundColor:"#f4f4f4"},tabIndex:0,onChange:function(e){return g(e.target.value)}}),r().createElement(p.$nd,{size:"lg",kind:"tertiary",renderIcon:O.f5,onClick:function(){return(0,F.K)(b)}},a("download","Download")))),r().createElement(p.XIK,i(),r().createElement(p.ndF,null,r().createElement(p.Hjg,null,o.map(function(e){return r().createElement(p.A0N,l({header:e}),e.header)}))),r().createElement(p.BFY,null,t.map(function(e){return r().createElement(p.Hjg,{key:e.id},e.cells.map(function(e){return r().createElement(p.nA6,{key:e.id},e.value)}))}))))}),r().createElement(p.dKS,{backwardText:"Previous page",forwardText:"Next page",page:_,pageNumberText:"Page Number",pageSize:l,onChange:function(e){var n=e.page,a=e.pageSize;w(n),s(a)},pageSizes:null!==(e=(0,W.uB)(b,l))&&void 0!==e?e:[],totalItems:null!==(n=b.length)&&void 0!==n?n:0})):r().createElement(G.p,{displayText:a("unscheduledAppointments_lower","unscheduled appointments"),headerTitle:a("unscheduledAppointments","Unscheduled appointments")})};var H=a(87228),U={};U.styleTagTransform=x(),U.setAttributes=_(),U.insert=v().bind(null,"head"),U.domAPI=y(),U.insertStyleElement=C(),b()(H.A,U);const K=H.A&&H.A.locals?H.A.locals:void 0;function R(e,n){(null==n||n>e.length)&&(n=e.length);for(var a=0,t=new Array(n);a<n;a++)t[a]=e[a];return t}const Q=function(e){var n,a,o=e.appointmentServiceTypes,l=(0,i.useTranslation)().t,s=(0,u.useConfig)().showUnscheduledAppointmentsTab,c=(n=(0,t.useState)(0),a=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var t,r,o=[],l=!0,i=!1;try{for(a=a.call(e);!(l=(t=a.next()).done)&&(o.push(t.value),!n||o.length!==n);l=!0);}catch(e){i=!0,r=e}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(n,a)||function(e,n){if(e){if("string"==typeof e)return R(e,n);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(a):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?R(e,n):void 0}}(n,a)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),d=c[0],f=c[1];return r().createElement("div",{className:K.appointmentList,"data-testid":"appointment-list"},s?r().createElement(p.tUM,{selectedIndex:d,onChange:function(e){var n=e.selectedIndex;f(n)},className:K.tabs},r().createElement(p.wbY,{style:{paddingLeft:"1rem"},"aria-label":"Appointment tabs",contained:!0},r().createElement(p.ozo,{className:K.tab},l("scheduled","Scheduled")),r().createElement(p.ozo,{className:K.tab},l("unscheduled","Unscheduled"))),r().createElement(p.T2N,null,r().createElement(p.KpK,{className:K.tabPanel},r().createElement(L,{appointmentServiceTypes:o})),r().createElement(p.KpK,{className:K.tabPanel},r().createElement(Y,null)))):r().createElement(L,{appointmentServiceTypes:o}))};var X=a(47781),J=a(81797),Z=a(91831),ee=function(){var e=(0,d.SI)().selectedDate,n=e?"".concat(u.restBaseUrl,"/appointment/all?forDate=").concat(e):null,a=(0,P.Ay)(n,u.openmrsFetch);return{data:a.data,error:a.error,isLoading:a.isLoading,isValidating:a.isValidating,mutate:a.mutate}},ne=a(32341),ae=a(75992),te=a(15089),re={};re.styleTagTransform=x(),re.setAttributes=_(),re.insert=v().bind(null,"head"),re.domAPI=y(),re.insertStyleElement=C(),b()(te.A,re);const oe=te.A&&te.A.locals?te.A.locals:void 0;l().extend(g());const le=function(e){var n,a,o=e.label,s=e.value,c=e.headerLabel,p=e.count,u=(0,i.useTranslation)().t,f=(0,d.SI)().selectedDate,g=(0,t.useMemo)(function(){return l()(f).isBefore(l()(),"date")},[f]);return r().createElement("article",{className:oe.container},r().createElement("div",{className:oe.tileContainer},r().createElement("div",{className:oe.tileHeader},r().createElement("div",{className:oe.headerLabelContainer},r().createElement("span",{className:oe.headerLabel},c))),r().createElement("div",{className:oe.metricsGrid},r().createElement("div",null,r().createElement("span",{className:oe.totalsLabel},o),r().createElement("p",{className:oe.totalsValue},s)),!(0,ae.A)(p)&&r().createElement("div",{className:oe.countGrid},r().createElement("span",null,u("checkedIn","Checked in")),r().createElement("span",null,g?u("missed","Missed"):u("notArrived","Not arrived")),r().createElement("p",{style:{color:"#22651B"}},null===(n=p.arrivedAppointments)||void 0===n?void 0:n.length),r().createElement("p",{style:{color:"#da1e28"}},null===(a=p.pendingAppointments)||void 0===a?void 0:a.length)))))};var ie=a(85602),se=a.n(ie),ce=a(49007),de=a(78285),pe=a(31118),ue={};ue.styleTagTransform=x(),ue.setAttributes=_(),ue.insert=v().bind(null,"head"),ue.domAPI=y(),ue.insertStyleElement=C(),b()(pe.A,ue);const fe=pe.A&&pe.A.locals?pe.A.locals:void 0;function ge(e,n,a){return n in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}function me(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{},t=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(a).filter(function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),t.forEach(function(n){ge(e,n,a[n])})}return e}l().extend(se());const be=function(){var e=(0,i.useTranslation)().t,n=(0,d.SI)().selectedDate,a=(0,u.useLayoutType)(),t=(0,u.isDesktop)(a)?"sm":"md";return r().createElement("div",{className:fe.metricsContainer},r().createElement("div",{className:fe.metricsContent},r().createElement(p.$nd,{kind:"tertiary",renderIcon:ce.Vv,size:t,onClick:function(){return(0,u.navigate)({to:"".concat(c.lw,"/appointments/calendar/").concat(l()(n).format("YYYY-MM-DD"))})}},e("appointmentsCalendar","Appointments calendar")),r().createElement(u.ExtensionSlot,{name:"patient-search-button-slot",state:{selectPatientAction:function(e){var n={patientUuid:e,context:"creating",mutate:function(){}};(0,u.launchWorkspace)("appointments-form-workspace",me({},n))},buttonText:e("createNewAppointment","Create new appointment"),overlayHeader:e("createNewAppointment","Create new appointment"),buttonProps:{kind:"primary",renderIcon:function(e){return r().createElement(de.vg,me({size:32},e))},size:t}}})))};var he=a(7253),ye={};ye.styleTagTransform=x(),ye.setAttributes=_(),ye.insert=v().bind(null,"head"),ye.domAPI=y(),ye.insertStyleElement=C(),b()(he.A,ye);const $e=he.A&&he.A.locals?he.A.locals:void 0,ve=function(e){var n,a,o,s,p=e.appointmentServiceTypes,f=(0,i.useTranslation)().t,g=function(){var e,n,a,t=(0,d.SI)().selectedDate,r=l()(new Date(t).setHours(23,59,59,59)).format(c.BC),o="".concat(u.restBaseUrl,"/appointment/appointmentSummary?startDate=").concat(t,"&endDate=").concat(r),i=(0,P.Ay)(o,u.openmrsFetch),s=i.data,p=i.error,f=i.isLoading,g=(0,Z.dc)(null!==(e=null==s?void 0:s.data)&&void 0!==e?e:[],"allAppointmentsCount"),m=(0,Z.dc)(null!==(n=null==s?void 0:s.data)&&void 0!==n?n:[],"missedAppointmentsCount"),b=(0,Z.u3)(null!==(a=null==s?void 0:s.data)&&void 0!==a?a:[]);return{isLoading:f,error:p,totalAppointments:g,missedAppointments:m,highestServiceLoad:(0,Z.xK)(b)}}(),m=g.highestServiceLoad,b=g.error,h=function(){var e,n,a=ee(),t=a.data,r=a.error,o=a.isLoading,l=a.isValidating,i=a.mutate,s=(null!==(n=null==t||null===(e=t.data)||void 0===e?void 0:e.flatMap(function(e){var n=e.providers;return null!=n?n:[]}))&&void 0!==n?n:[]).filter(function(e){return"ACCEPTED"===e.response});return{error:r,isLoading:o,isValidating:l,mutate:i,totalProviders:(0,J.A)(s,function(e){return e.uuid}).length||0}}().totalProviders,y=(n=p,a=ee(),o=a.data,{error:a.error,isLoading:a.isLoading,totalScheduledAppointments:(0,t.useMemo)(function(){var e,a=null!==(e=null==o?void 0:o.data)&&void 0!==e?e:[];return 0===n.length?a.length:a.filter(function(e){return e.service&&n.includes(e.service.uuid)}).length},[null==o?void 0:o.data,n])}).totalScheduledAppointments,$=(0,d.SI)().selectedDate,v=(0,u.formatDate)((0,u.parseDate)($),{mode:"standard",time:!1}),A=(0,ne.H)("CheckedIn").appointmentList,_=(0,ne.H)("Scheduled").appointmentList,w=p?A.filter(function(e){var n=e.service;return p.includes(n.uuid)}):A,C=p?_.filter(function(e){var n=e.service;return p.includes(n.uuid)}):_;return b?r().createElement("div",{className:$e.errorContainer},r().createElement(u.ErrorState,{headerTitle:f("appointmentMetricsLoadError","Metrics load error"),error:b})):r().createElement(r().Fragment,null,r().createElement(be,null),r().createElement("section",{className:$e.cardContainer},r().createElement(le,{count:{pendingAppointments:C,arrivedAppointments:w},headerLabel:f("scheduledAppointments","Scheduled appointments"),label:f("appointments","Appointments"),value:y}),r().createElement(le,{headerLabel:f("highestServiceVolume","Highest volume service: {{time}}",{time:v}),label:0!==(null==m?void 0:m.count)?f(null==m?void 0:m.serviceName):f("serviceName","Service name"),value:null!==(s=null==m?void 0:m.count)&&void 0!==s?s:"--"}),r().createElement(le,{headerLabel:f("providersBooked","Providers booked: {{time}}",{time:v}),label:f("providers","Providers"),value:h})))};function Ae(e,n){(null==n||n>e.length)&&(n=e.length);for(var a=0,t=new Array(n);a<n;a++)t[a]=e[a];return t}function _e(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var t,r,o=[],l=!0,i=!1;try{for(a=a.call(e);!(l=(t=a.next()).done)&&(o.push(t.value),!n||o.length!==n);l=!0);}catch(e){i=!0,r=e}finally{try{l||null==a.return||a.return()}finally{if(i)throw r}}return o}}(e,n)||function(e,n){if(e){if("string"==typeof e)return Ae(e,n);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(a):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?Ae(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}const we=function(){var e=(0,i.useTranslation)().t,n=_e((0,t.useState)([]),2),a=n[0],o=n[1],p=_e((0,t.useState)(l()().startOf("day").format(c.BC)),2),u=p[0],f=p[1],g=(0,s.useParams)();return(0,t.useEffect)(function(){g.date&&f(l()(g.date).startOf("day").format(c.BC))},[g.date]),(0,t.useEffect)(function(){g.serviceType&&o([g.serviceType])},[g.serviceType]),r().createElement(d.Em,{value:{selectedDate:u,setSelectedDate:f}},r().createElement(X.A,{appointmentServiceTypes:a,onChange:o,title:e("appointments","Appointments")}),r().createElement(ve,{appointmentServiceTypes:a}),r().createElement(Q,{appointmentServiceTypes:a}))}},87228:(e,n,a)=>{a.d(n,{A:()=>i});var t=a(30977),r=a.n(t),o=a(95924),l=a.n(o)()(r());l.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79;--bottom-nav-height: 4rem;--workspace-header-height: 3rem;--tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));--desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height))}.-esm-appointments__appointment-tabs__appointmentList___V\\+34V{margin:1rem}.-esm-appointments__appointment-tabs__appointmentList___V\\+34V>div{background-color:#fff}.-esm-appointments__appointment-tabs__tabs___YRM5u{grid-column:span 2}.-esm-appointments__appointment-tabs__tab___cVfyB{min-width:12rem}.-esm-appointments__appointment-tabs__tab___cVfyB:active,.-esm-appointments__appointment-tabs__tab___cVfyB:focus{outline:2px solid var(--brand-03) !important}.-esm-appointments__appointment-tabs__tab___cVfyB[aria-selected=true]{box-shadow:inset 0 2px 0 0 var(--brand-03) !important}.-esm-appointments__appointment-tabs__tabPanel___Zcoyj{padding:0;margin:1rem}.-esm-appointments__appointment-tabs__calendarButton___pQ803{float:right;position:absolute;right:0;height:3rem;min-height:0}.-esm-appointments__appointment-tabs__downloadButton___33-7W{margin:1rem}.-esm-appointments__appointment-tabs__downloadButton___33-7W>button{border:1px solid #0f62fe}.-esm-appointments__appointment-tabs__downloadLink___vfa-q{text-decoration:none;color:inherit}","",{version:3,sources:["webpack://./../../node_modules/@openmrs/esm-styleguide/src/_vars.scss","webpack://./src/appointments/appointment-tabs.scss","webpack://./../../node_modules/@carbon/layout/scss/generated/_spacing.scss"],names:[],mappings:"AAsDA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,yBAAA,CACA,+BAAA,CACA,oGAAA,CACA,2GAAA,CCzDF,+DACE,WC0BW,CDxBX,mEACE,qBDLI,CCSR,mDACE,kBAAA,CAGF,kDACE,eAAA,CAEA,iHAEE,4CAAA,CAGF,sEACE,qDAAA,CAIJ,uDACE,SAAA,CACA,WAAA,CAGF,6DACE,WAAA,CACA,iBAAA,CACA,OAAA,CACA,WCaW,CDZX,YAAA,CAGF,6DACE,WCZW,CDaX,oEACE,wBAAA,CAGJ,2DACE,oBAAA,CACA,aAAA",sourcesContent:["@use '@carbon/layout';\n\n$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n$brand-primary-10: #d9fbfb;\n$brand-primary-20: #9ef0f0;\n$brand-primary-30: #3ddbd9;\n$brand-primary-40: #08bdba;\n$brand-primary-50: #009d9a;\n\n/* 60,70 and 80 are already declared as brand-01, 02 and 03 respectively */\n\n$brand-primary-90: #022b30;\n$brand-primary-100: #081a1c;\n\n@mixin brand-01($property) {\n  #{$property}: #005d5d;\n  #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n  #{$property}: #004144;\n  #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n  #{$property}: #007d79;\n  #{$property}: var(--brand-03);\n}\n\n:root {\n  --brand-01: #005d5d;\n  --brand-02: #004144;\n  --brand-03: #007d79;\n  --bottom-nav-height: #{layout.$spacing-10};\n  --workspace-header-height: #{layout.$spacing-09};\n  --tablet-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--bottom-nav-height));\n  --desktop-workspace-window-height: calc(100vh - var(--omrs-navbar-height) - var(--workspace-header-height));\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1023px;\n$breakpoint-small-desktop-min: 1024px;\n$breakpoint-small-desktop-max: 1439px;\n$breakpoint-large-desktop-min: 1440px;\n$breakpoint-large-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n","@use '@carbon/colors';\n@use '@carbon/layout';\n@use '@openmrs/esm-styleguide/src/vars' as *;\n\n.appointmentList {\n  margin: layout.$spacing-05;\n\n  & > div {\n    background-color: $ui-02;\n  }\n}\n\n.tabs {\n  grid-column: span 2;\n}\n\n.tab {\n  min-width: 12rem;\n\n  &:active,\n  &:focus {\n    outline: 2px solid var(--brand-03) !important;\n  }\n\n  &[aria-selected='true'] {\n    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;\n  }\n}\n\n.tabPanel {\n  padding: 0;\n  margin: layout.$spacing-05;\n}\n\n.calendarButton {\n  float: right;\n  position: absolute;\n  right: 0;\n  height: layout.$spacing-09;\n  min-height: 0;\n}\n\n.downloadButton {\n  margin: layout.$spacing-05;\n  & > button {\n    border: 1px solid colors.$blue-60;\n  }\n}\n.downloadLink {\n  text-decoration: none;\n  color: inherit;\n}\n","// Code generated by @carbon/layout. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2023\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-01: 0.125rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-02: 0.25rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-03: 0.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-04: 0.75rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-05: 1rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-06: 1.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-07: 2rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-08: 2.5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-09: 3rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-10: 4rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-11: 5rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-12: 6rem !default;\n\n/// @type Number\n/// @access public\n/// @group @carbon/layout\n$spacing-13: 10rem !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/layout\n$spacing: (\n  spacing-01: $spacing-01,\n  spacing-02: $spacing-02,\n  spacing-03: $spacing-03,\n  spacing-04: $spacing-04,\n  spacing-05: $spacing-05,\n  spacing-06: $spacing-06,\n  spacing-07: $spacing-07,\n  spacing-08: $spacing-08,\n  spacing-09: $spacing-09,\n  spacing-10: $spacing-10,\n  spacing-11: $spacing-11,\n  spacing-12: $spacing-12,\n  spacing-13: $spacing-13,\n);\n"],sourceRoot:""}]),l.locals={appointmentList:"-esm-appointments__appointment-tabs__appointmentList___V+34V",tabs:"-esm-appointments__appointment-tabs__tabs___YRM5u",tab:"-esm-appointments__appointment-tabs__tab___cVfyB",tabPanel:"-esm-appointments__appointment-tabs__tabPanel___Zcoyj",calendarButton:"-esm-appointments__appointment-tabs__calendarButton___pQ803",downloadButton:"-esm-appointments__appointment-tabs__downloadButton___33-7W",downloadLink:"-esm-appointments__appointment-tabs__downloadLink___vfa-q"};const i=l}}]);