@cc-openmrs/cc-esm-active-prescriptions 1.0.55 → 1.0.56

package/dist/openmrs-esm-template-app.js.buildmanifest.json

@@ -1,29 +1,5 @@
 {
   "chunks": [
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 61649,
-      "sizes": {
-        "javascript": 61649
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@cc-openmrs/cc-esm-active-prescriptions",
-        "main"
-      ],
-      "files": [
-        "11.js"
-      ],
-      "auxiliaryFiles": [
-        "11.js.map"
-      ],
-      "hash": "add31f0c3fc094bc",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -379,7 +355,7 @@
       "auxiliaryFiles": [
         "499.js.map"
       ],
-      "hash": "096ce8685a946497",
+      "hash": "18fd701fd0bcbb5c",
       "childrenByOrder": {}
     },
     {
@@ -499,7 +475,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "b928bde2fb58cae4",
+      "hash": "fe28e32959133b2b",
       "childrenByOrder": {}
     },
     {
@@ -529,6 +505,30 @@
       "hash": "31524ae59d310e8c",
       "childrenByOrder": {}
     },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 50636,
+      "sizes": {
+        "javascript": 50636
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@cc-openmrs/cc-esm-active-prescriptions",
+        "main"
+      ],
+      "files": [
+        "845.js"
+      ],
+      "auxiliaryFiles": [
+        "845.js.map"
+      ],
+      "hash": "5b6d91661952d7c1",
+      "childrenByOrder": {}
+    },
     {
       "rendered": true,
       "initial": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cc-openmrs/cc-esm-active-prescriptions",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
   "browser": "dist/openmrs-esm-template-app.js",

package/src/root.component.tsx

@@ -10,6 +10,8 @@
 
 import React, { useMemo, useState } from 'react';
 import { PrescriptionService, PrescriptionPayload } from './prescriptions.service';
+import useSWR from 'swr';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import {
   Checkbox,
   ComboBox,
@@ -32,128 +34,166 @@ interface RootProps {
   patient?: { uuid: string }; // Alguns workspaces passam assim
 }
 
-const Root: React.FC<RootProps> = (props) => {
-  console.log('Root props:', props); // 👈 ADICIONE para debug
 
-  // Tenta pegar patientUuid de diferentes formas
-  const patientUuid = props.patientUuid || props.patient?.uuid;
-  
-  const { t } = useTranslation();
-  if (!patientUuid) {
-    return (
-      <InlineNotification
-        lowContrast
-        kind="warning"
-        title={t('ordersMissingPatientTitle', 'Select a patient to continue')}
-      />
-    );
-  }
 
+
+// Hook para buscar ConceptDrugs do OpenMRS
+function useConceptDrugs(query: string) {
+  const url = query ? `${restBaseUrl}/drug?q=${encodeURIComponent(query)}&v=custom:(uuid,name,display)` : null;
+  const swr = useSWR<any>(url, openmrsFetch);
+  return {
+    drugs: swr.data?.data?.results || [],
+    error: swr.error,
+    isLoading: swr.isValidating,
+  };
+}
+
+
+// Tipo para dados do medicamento
+type MedicationFormData = {
+  drugName: string;
+  dosage: string;
+  unit: string;
+  route: string;
+  frequency: string;
+  patientInstructions?: string;
+  asNeeded?: boolean;
+  asNeededCondition?: string;
+  startDate?: string;
+  duration?: string;
+  durationUnit?: string;
+  indication?: string;
+};
+
+const MOCK_UNITS = [
+  { value: 'mg' },
+  { value: 'ml' },
+  { value: 'g' },
+];
+const MOCK_FREQUENCIES = [
+  { value: '1x ao dia' },
+  { value: '2x ao dia' },
+  { value: '8/8h' },
+  { value: '12/12h' },
+];
+
+type MedicationFormProps = {
+  initialData?: MedicationFormData;
+  onSubmit: (data: MedicationFormData) => void;
+  onCancel: () => void;
+  t: any;
+};
+
+const MedicationForm: React.FC<MedicationFormProps> = ({ initialData, onSubmit, onCancel, t }) => {
+  const [drugName, setDrugName] = useState(initialData?.drugName || '');
+  const [dosage, setDosage] = useState(initialData?.dosage || '');
+  const [unit, setUnit] = useState(initialData?.unit || '');
+  const [route, setRoute] = useState(initialData?.route || '');
+  const [frequency, setFrequency] = useState(initialData?.frequency || '');
+  const [patientInstructions, setPatientInstructions] = useState(initialData?.patientInstructions || '');
+  const [asNeeded, setAsNeeded] = useState(initialData?.asNeeded || false);
+  const [asNeededCondition, setAsNeededCondition] = useState(initialData?.asNeededCondition || '');
+  const [indication, setIndication] = useState(initialData?.indication || '');
+
+  // Busca ConceptDrugs conforme digitação
+  const { drugs, isLoading } = useConceptDrugs(drugName);
+  const drugOptions = drugs.map((d: any) => ({ value: d.name, uuid: d.uuid, display: d.display }));
+
+  const handleDrugInput = (input: string) => {
+    setDrugName(input);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!drugName || !dosage || !unit || !frequency) return;
+    onSubmit({
+      drugName,
+      dosage,
+      unit,
+      route,
+      frequency,
+      patientInstructions,
+      asNeeded,
+      asNeededCondition,
+      indication,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* ...restante do formulário, já corrigido acima... */}
+    </form>
+  );
+};
+
+const Root: React.FC<RootProps> = ({ patientUuid, patient }) => {
+  const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<'new' | 'past'>('new');
   const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
   const [policyNumber, setPolicyNumber] = useState('');
-  const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
   const [digitallySigned, setDigitallySigned] = useState(false);
   const [printRequested, setPrintRequested] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const locations = useLocations();
-  const { orders, isLoading, error } = usePatientOrders(patientUuid);
+  const [medications, setMedications] = useState<MedicationFormData[]>([]);
+  const [showAddMedication, setShowAddMedication] = useState(false);
+  const [editIndex, setEditIndex] = useState<number | null>(null);
 
+  const locations = useLocations();
   const locationItems = useMemo(() => locations ?? [], [locations]);
-  const selectedOrdersLabel =
-    selectedOrders.size > 0
-      ? t('selectedOrdersCount', {
-          count: selectedOrders.size,
-        })
-      : null;
 
-  const toggleOrderSelection = (orderUuid: string) => {
-    setSelectedOrders((prev) => {
-      const updated = new Set(prev);
-      if (updated.has(orderUuid)) {
-        updated.delete(orderUuid);
-      } else {
-        updated.add(orderUuid);
-      }
-      return updated;
-    });
+  // Adiciona novo medicamento
+  const handleAddMedication = (med: MedicationFormData) => {
+    setMedications((prev) => [...prev, med]);
+    setShowAddMedication(false);
   };
 
-  const renderOrdersSection = () => {
-    if (!patientUuid) {
-      return null;
-    }
-
-    if (error) {
-      return (
-        <InlineNotification
-          lowContrast
-          kind="error"
-          title={t('ordersErrorTitle', 'Unable to load orders')}
-          subtitle={t('ordersErrorSubtitle', 'Try again or refresh the patient chart.')}
-        />
-      );
+  // Edita medicamento existente
+  const handleEditMedication = (med: MedicationFormData) => {
+    if (editIndex !== null) {
+      setMedications((prev) => prev.map((m, idx) => (idx === editIndex ? med : m)));
+      setEditIndex(null);
+      setShowAddMedication(false);
     }
+  };
 
-    if (isLoading) {
-      return <InlineLoading description={`${t('loading', 'Loading')}...`} />;
-    }
+  // Remove medicamento
+  const handleRemoveMedication = (idx: number) => {
+    setMedications((prev) => prev.filter((_, i) => i !== idx));
+  };
 
-    if (!orders.length) {
-      return (
-        <InlineNotification
-          lowContrast
-          kind="info"
-          title={t('ordersEmptyState', 'There are no orders for this patient yet.')}
-        />
-      );
-    }
+  // Abre tela de adicionar
+  const openAddMedication = () => {
+    setEditIndex(null);
+    setShowAddMedication(true);
+  };
 
-    return (
-      <>
-        <div className={styles.ordersList} role="group" aria-label={t('visitTypeHeading', 'Visit type')}>
-          {orders.map((order) => (
-            <Checkbox
-              key={order.uuid}
-              id={`order-${order.uuid}`}
-              labelText={
-                <span className={styles.orderLabel}>
-                  <span className={styles.orderName}>{order.conceptName}</span>
-                  {order.display && <span className={styles.orderMeta}>{order.display}</span>}
-                  {!order.display && order.orderNumber && <span className={styles.orderMeta}>{order.orderNumber}</span>}
-                </span>
-              }
-              checked={selectedOrders.has(order.uuid)}
-              onChange={() => toggleOrderSelection(order.uuid)}
-            />
-          ))}
-        </div>
-        {selectedOrdersLabel ? <p className={styles.selectionSummary}>{selectedOrdersLabel}</p> : null}
-      </>
-    );
+  // Abre tela de editar
+  const openEditMedication = (idx: number) => {
+    setEditIndex(idx);
+    setShowAddMedication(true);
   };
 
   return (
     <div className={styles.workspace}>
       <div className={styles.header}>
-        <h2>{t('activePrescriptionsWorkspaceTitle', 'Active prescriptions')}</h2>
+        <h2>{t('activePrescriptionsWorkspaceTitle', 'Prescrições ativas')}</h2>
         <p className={styles.subtitle}>
           {t(
             'activePrescriptionsHelper',
-            'Review the patient context, choose the visit details, and add the matching orders to the prescription.',
+            'Revise o contexto do paciente, escolha os detalhes da visita e adicione os medicamentos à prescrição.'
           )}
         </p>
       </div>
 
       <section className={styles.section}>
-        <p className={styles.fieldLabel}>{t('visitTimingLabel', 'The visit is')}</p>
+        <p className={styles.fieldLabel}>{t('visitTimingLabel', 'A visita é')}</p>
         <Tabs
           selectedIndex={activeTab === 'new' ? 0 : 1}
           onChange={({ selectedIndex }) => setActiveTab(selectedIndex === 0 ? 'new' : 'past')}
         >
-          <TabList aria-label={t('visitTimingLabel', 'The visit is')}>
-            <Tab>{t('visitTimingNew', 'New')}</Tab>
-            <Tab>{t('visitTimingPast', 'In the past')}</Tab>
+          <TabList aria-label={t('visitTimingLabel', 'A visita é')}>
+            <Tab>{t('visitTimingNew', 'Nova')}</Tab>
+            <Tab>{t('visitTimingPast', 'No passado')}</Tab>
           </TabList>
           <TabPanels>
             <TabPanel className={styles.tabContent}>
@@ -164,25 +204,17 @@ const Root: React.FC<RootProps> = (props) => {
                   itemToString={(item) => item?.display ?? ''}
                   selectedItem={selectedLocation}
                   onChange={({ selectedItem }) => setSelectedLocation((selectedItem as Location) ?? null)}
-                  placeholder={t('visitLocationPlaceholder', 'Select a location')}
-                  titleText={t('visitLocationHeading', 'Visit location')}
-                  helperText={t('visitLocationHelper', 'Select where the visit will take place.')}
+                  placeholder={t('visitLocationPlaceholder', 'Selecione o local')}
+                  titleText={t('visitLocationHeading', 'Local da visita')}
+                  helperText={t('visitLocationHelper', 'Selecione onde a visita ocorrerá.')}
                 />
               </div>
 
-              <div className={styles.fieldGroup}>
-                <p className={styles.fieldLabel}>{t('visitTypeHeading', 'Visit type')}</p>
-                <p className={styles.helperText}>
-                  {t('visitTypeHelper', 'Select the orders that should be included in this prescription.')}
-                </p>
-                {renderOrdersSection()}
-              </div>
-
               <div className={styles.fieldGroup}>
                 <TextInput
                   id="insurance-policy"
-                  labelText={t('insurancePolicyNumberLabel', 'Insurance Policy Number (optional)')}
-                  placeholder={t('insurancePolicyNumberPlaceholder', 'Enter the policy number')}
+                  labelText={t('insurancePolicyNumberLabel', 'Número da apólice (opcional)')}
+                  placeholder={t('insurancePolicyNumberPlaceholder', 'Digite o número da apólice')}
                   value={policyNumber}
                   onChange={(event) => setPolicyNumber(event.target.value)}
                 />
@@ -190,81 +222,65 @@ const Root: React.FC<RootProps> = (props) => {
               <div className={styles.fieldGroup}>
                 <Checkbox
                   id="sign-prescription-checkbox"
-                  labelText={t('signPrescriptionLabel', 'Digitally sign the prescription')}
+                  labelText={t('signPrescriptionLabel', 'Assinar digitalmente a prescrição')}
                   checked={digitallySigned}
                   onChange={() => setDigitallySigned((prev) => !prev)}
                 />
                 <Checkbox
                   id="print-prescription-checkbox"
-                  labelText={t('printPrescriptionLabel', 'Print the prescription')}
+                  labelText={t('printPrescriptionLabel', 'Imprimir a prescrição')}
                   checked={printRequested}
                   onChange={() => setPrintRequested((prev) => !prev)}
                 />
               </div>
-              <div className={styles.fieldGroup} style={{ flexDirection: 'row', gap: '1rem' }}>
-                <button
-                  type="button"
-                  id="discard-prescription-btn"
-                  onClick={() => {
-                    setSelectedLocation(null);
-                    setPolicyNumber('');
-                    setSelectedOrders(new Set());
-                    setDigitallySigned(false);
-                    setPrintRequested(false);
-                  }}
-                  disabled={isSubmitting}
-                >
-                  {t('discardButtonLabel', 'Discard')}
-                </button>
-                <button
-                  type="button"
-                  id="create-prescription-btn"
-                  onClick={async () => {
-                    if (!patientUuid || !selectedLocation || selectedOrders.size === 0) return;
-                    setIsSubmitting(true);
-                    // TODO: obter dados reais do paciente e do médico
-                    const payload: PrescriptionPayload = {
-                      patient: {
-                        uuid: patientUuid,
-                      },
-                      provider: {
-                        uuid: 'provider-uuid', // Substituir pelo uuid real do médico
-                      },
-                      location: {
-                        uuid: selectedLocation.uuid,
-                        name: selectedLocation.display,
-                      },
-                      policyNumber,
-                      orderUuids: Array.from(selectedOrders),
-                      digitallySigned,
-                      printRequested,
-                    };
-                    try {
-                      await PrescriptionService.createPrescription(payload);
-                      // Limpar formulário após sucesso
-                      setSelectedLocation(null);
-                      setPolicyNumber('');
-                      setSelectedOrders(new Set());
-                      setDigitallySigned(false);
-                      setPrintRequested(false);
-                    } catch (e) {
-                      // TODO: tratar erro
-                    } finally {
-                      setIsSubmitting(false);
-                    }
-                  }}
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? t('loading', 'Loading') : t('createPrescriptionButtonLabel', 'Create Prescription')}
+
+              {/* Lista de medicamentos adicionados */}
+              <div className={styles.fieldGroup}>
+                <h3>{t('medicationsList', 'Medicamentos adicionados')}</h3>
+                {medications.length === 0 ? (
+                  <p>{t('noMedicationsAdded', 'Nenhum medicamento adicionado ainda.')}</p>
+                ) : (
+                  <ul className={styles.medicationsList}>
+                    {medications.map((med, idx) => (
+                      <li key={idx} className={styles.medicationItem}>
+                        <span>
+                          <b>{med.drugName}</b> - {med.dosage} {med.unit} - {med.frequency}
+                        </span>
+                        <button type="button" onClick={() => openEditMedication(idx)}>{t('edit', 'Editar')}</button>
+                        <button type="button" onClick={() => handleRemoveMedication(idx)}>{t('remove', 'Remover')}</button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                <button type="button" onClick={openAddMedication} className={styles.addMedicationBtn}>
+                  {t('addMedication', '+ Adicionar medicamento')}
                 </button>
               </div>
+
+              {/* Tela sobreposta para adicionar/editar medicamento */}
+              {showAddMedication && (
+                <div className={styles.overlayForm}>
+                  <div className={styles.overlayContent}>
+                    <h3>{editIndex === null ? t('addMedication', 'Adicionar medicamento') : t('editMedication', 'Editar medicamento')}</h3>
+                    <MedicationForm
+                      initialData={editIndex !== null ? medications[editIndex] : undefined}
+                      onSubmit={editIndex === null ? handleAddMedication : handleEditMedication}
+                      onCancel={() => {
+                        setShowAddMedication(false);
+                        setEditIndex(null);
+                      }}
+                      t={t}
+                    />
+                  </div>
+                </div>
+              )}
             </TabPanel>
             <TabPanel className={styles.tabContent}>
               <InlineNotification
                 lowContrast
                 kind="info"
-                title={t('inPastTabPlaceholderTitle', 'Historic prescriptions will be available soon')}
-                subtitle={t('inPastTabPlaceholderSubtitle', 'Switch back to the New tab to manage current orders.')}
+                title={t('inPastTabPlaceholderTitle', 'Receitas históricas em breve')}
+                subtitle={t('inPastTabPlaceholderSubtitle', 'Volte para Nova para gerenciar medicamentos atuais.')}
               />
             </TabPanel>
           </TabPanels>

package/dist/11.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_cc_openmrs_cc_esm_active_prescriptions=globalThis.webpackChunk_cc_openmrs_cc_esm_active_prescriptions||[]).push([[11],{6052(e,n,t){t.d(n,{A:()=>s});var a=t(2996),i=t.n(a),o=t(159),r=t.n(o)()(i());r.push([e.id,".-cc-esm-active-prescriptions__root__workspace___\\+xqk5{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;background-color:var(--cds-layer, #ffffff);min-height:100%}.-cc-esm-active-prescriptions__root__header___G1X3T{display:flex;flex-direction:column;gap:.5rem}.-cc-esm-active-prescriptions__root__subtitle___kRieu{font-size:var(--cds-body-01-font-size, 0.875rem);font-weight:var(--cds-body-01-font-weight, 400);line-height:var(--cds-body-01-line-height, 1.42857);letter-spacing:var(--cds-body-01-letter-spacing, 0.16px);color:var(--cds-text-secondary, #525252);margin:0;max-width:48rem}.-cc-esm-active-prescriptions__root__section___61mCr{background-color:var(--cds-layer-accent, #f4f4f4);padding:1rem;border-radius:.25rem;box-shadow:0 1px 2px rgba(0,0,0,.08)}.-cc-esm-active-prescriptions__root__fieldLabel___F2zAd{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);margin-bottom:.5rem}.-cc-esm-active-prescriptions__root__tabContent___DnbmQ{padding:1rem 0 0;display:flex;flex-direction:column;gap:1.5rem}.-cc-esm-active-prescriptions__root__fieldGroup___3aiba{display:flex;flex-direction:column;gap:.5rem}.-cc-esm-active-prescriptions__root__helperText___sr2T2{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:var(--cds-text-secondary, #525252);margin:0}.-cc-esm-active-prescriptions__root__ordersList___jcCvy{border:1px solid var(--cds-border-subtle, #e0e0e0);border-radius:.25rem;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;background-color:var(--cds-layer, #ffffff)}.-cc-esm-active-prescriptions__root__orderLabel___3oBY3{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}.-cc-esm-active-prescriptions__root__orderName___QGKUy{font-size:var(--cds-body-compact-01-font-size, 0.875rem);font-weight:var(--cds-body-compact-01-font-weight, 400);line-height:var(--cds-body-compact-01-line-height, 1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing, 0.16px);font-weight:600}.-cc-esm-active-prescriptions__root__orderMeta___S7cGO{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:var(--cds-text-secondary, #525252)}.-cc-esm-active-prescriptions__root__selectionSummary___TD9ka{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:var(--cds-text-secondary, #525252);margin:.25rem 0 0}","",{version:3,sources:["webpack://./src/root.scss","webpack://./node_modules/@carbon/layout/scss/generated/_spacing.scss","webpack://./node_modules/@carbon/type/scss/_styles.scss"],names:[],mappings:"AAGA,wDACE,YCqCW,CDpCX,YAAA,CACA,qBAAA,CACA,UC6BW,CD5BX,0CAAA,CACA,eAAA,CAGF,oDACE,YAAA,CACA,qBAAA,CACA,SCMW,CDHb,sDEg1BI,gDAAA,CAAA,+CAAA,CAAA,mDAAA,CAAA,wDAAA,CF90BF,wCAAA,CACA,QAAA,CACA,eAAA,CAGF,qDACE,iDAAA,CACA,YCIW,CDHX,oBCZW,CDaX,oCAAA,CAGF,wDEk0BI,2DAAA,CAAA,0DAAA,CAAA,8DAAA,CAAA,mEAAA,CFh0BF,mBCbW,CDgBb,wDACE,gBAAA,CACA,YAAA,CACA,qBAAA,CACA,UCLW,CDQb,wDACE,YAAA,CACA,qBAAA,CACA,SC1BW,CD6Bb,wDEgzBI,gDAAA,CAAA,gDAAA,CAAA,oDAAA,CAAA,yDAAA,CF9yBF,wCAAA,CACA,QAAA,CAGF,wDACE,kDAAA,CACA,oBC1CW,CD2CX,cCjCW,CDkCX,YAAA,CACA,qBAAA,CACA,SCzCW,CD0CX,0CAAA,CAGF,wDACE,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,WC3DW,CD8Db,uDEyxBI,wDAAA,CAAA,uDAAA,CAAA,2DAAA,CAAA,gEAAA,CFvxBF,eAAA,CAGF,uDEoxBI,gDAAA,CAAA,gDAAA,CAAA,oDAAA,CAAA,yDAAA,CFlxBF,wCAAA,CAGF,8DE+wBI,gDAAA,CAAA,gDAAA,CAAA,oDAAA,CAAA,yDAAA,CF7wBF,wCAAA,CACA,iBAAA",sourcesContent:["@use '@carbon/layout';\n@use '@carbon/type';\n\n.workspace {\n  padding: layout.$spacing-07;\n  display: flex;\n  flex-direction: column;\n  gap: layout.$spacing-06;\n  background-color: var(--cds-layer, #ffffff);\n  min-height: 100%;\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n  gap: layout.$spacing-03;\n}\n\n.subtitle {\n  @include type.type-style('body-01');\n  color: var(--cds-text-secondary, #525252);\n  margin: 0;\n  max-width: 48rem;\n}\n\n.section {\n  background-color: var(--cds-layer-accent, #f4f4f4);\n  padding: layout.$spacing-05;\n  border-radius: layout.$spacing-02;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.fieldLabel {\n  @include type.type-style('heading-compact-01');\n  margin-bottom: layout.$spacing-03;\n}\n\n.tabContent {\n  padding: layout.$spacing-05 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: layout.$spacing-06;\n}\n\n.fieldGroup {\n  display: flex;\n  flex-direction: column;\n  gap: layout.$spacing-03;\n}\n\n.helperText {\n  @include type.type-style('label-01');\n  color: var(--cds-text-secondary, #525252);\n  margin: 0;\n}\n\n.ordersList {\n  border: 1px solid var(--cds-border-subtle, #e0e0e0);\n  border-radius: layout.$spacing-02;\n  padding: layout.$spacing-04;\n  display: flex;\n  flex-direction: column;\n  gap: layout.$spacing-03;\n  background-color: var(--cds-layer, #ffffff);\n}\n\n.orderLabel {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: layout.$spacing-01;\n}\n\n.orderName {\n  @include type.type-style('body-compact-01');\n  font-weight: 600;\n}\n\n.orderMeta {\n  @include type.type-style('label-01');\n  color: var(--cds-text-secondary, #525252);\n}\n\n.selectionSummary {\n  @include type.type-style('label-01');\n  color: var(--cds-text-secondary, #525252);\n  margin: layout.$spacing-02 0 0;\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"],sourceRoot:""}]),r.locals={workspace:"-cc-esm-active-prescriptions__root__workspace___+xqk5",header:"-cc-esm-active-prescriptions__root__header___G1X3T",subtitle:"-cc-esm-active-prescriptions__root__subtitle___kRieu",section:"-cc-esm-active-prescriptions__root__section___61mCr",fieldLabel:"-cc-esm-active-prescriptions__root__fieldLabel___F2zAd",tabContent:"-cc-esm-active-prescriptions__root__tabContent___DnbmQ",fieldGroup:"-cc-esm-active-prescriptions__root__fieldGroup___3aiba",helperText:"-cc-esm-active-prescriptions__root__helperText___sr2T2",ordersList:"-cc-esm-active-prescriptions__root__ordersList___jcCvy",orderLabel:"-cc-esm-active-prescriptions__root__orderLabel___3oBY3",orderName:"-cc-esm-active-prescriptions__root__orderName___QGKUy",orderMeta:"-cc-esm-active-prescriptions__root__orderMeta___S7cGO",selectionSummary:"-cc-esm-active-prescriptions__root__selectionSummary___TD9ka"};const s=r},4011(e,n,t){t.r(n),t.d(n,{default:()=>T});var a=t(6072);function i(e,n,t,a,i,o,r){try{var s=e[o](r),l=s.value}catch(e){return void t(e)}s.done?n(l):Promise.resolve(l).then(a,i)}function o(e,n){for(var t=0;t<n.length;t++){var a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var r=function(){function e(){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e)}var n,t;return n=e,t=[{key:"createPrescription",value:function(e){return(n=function(){return function(e,n){var t,a,i,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},r=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),s=Object.defineProperty;return s(r,"next",{value:l(0)}),s(r,"throw",{value:l(1)}),s(r,"return",{value:l(2)}),"function"==typeof Symbol&&s(r,Symbol.iterator,{value:function(){return this}}),r;function l(s){return function(l){return function(s){if(t)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(o=0)),o;)try{if(t=1,a&&(i=2&s[0]?a.return:s[0]?a.throw||((i=a.return)&&i.call(a),0):a.next)&&!(i=i.call(a,s[1])).done)return i;switch(a=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,a=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((i=(i=o.trys).length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){o.label=s[1];break}if(6===s[0]&&o.label<i[1]){o.label=i[1],i=s;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(s);break}i[2]&&o.ops.pop(),o.trys.pop();continue}s=n.call(e,o)}catch(e){s=[6,e],a=0}finally{t=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}(this,function(n){return[2,fetch("/api/prescriptions",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})]})},function(){var e=this,t=arguments;return new Promise(function(a,o){var r=n.apply(e,t);function s(e){i(r,a,o,s,l,"next",e)}function l(e){i(r,a,o,s,l,"throw",e)}s(void 0)})})();var n}}],null&&o(n.prototype,null),t&&o(n,t),e}(),s=t(4520),l=t(2076),c=t(5987),p=t(9324),u=encodeURIComponent("custom:(uuid,display,orderNumber,concept:(uuid,display),careSetting:(uuid,display),dateActivated)"),d=t(5072),f=t.n(d),g=t(7825),h=t.n(g),y=t(7659),b=t.n(y),m=t(5056),$=t.n(m),v=t(540),A=t.n(v),w=t(1113),x=t.n(w),_=t(6052),k={};k.styleTagTransform=x(),k.setAttributes=$(),k.insert=b().bind(null,"head"),k.domAPI=h(),k.insertStyleElement=A(),f()(_.A,k);const C=_.A&&_.A.locals?_.A.locals:void 0;function z(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,a=new Array(n);t<n;t++)a[t]=e[t];return a}function M(e,n,t,a,i,o,r){try{var s=e[o](r),l=s.value}catch(e){return void t(e)}s.done?n(l):Promise.resolve(l).then(a,i)}function E(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var a,i,o=[],r=!0,s=!1;try{for(t=t.call(e);!(r=(a=t.next()).done)&&(o.push(a.value),!n||o.length!==n);r=!0);}catch(e){s=!0,i=e}finally{try{r||null==t.return||t.return()}finally{if(s)throw i}}return o}}(e,n)||function(e,n){if(e){if("string"==typeof e)return z(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?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.")}()}const T=function(e){var n;console.log("Root props:",e);var t=e.patientUuid||(null===(n=e.patient)||void 0===n?void 0:n.uuid),i=(0,l.useTranslation)().t;if(!t)return a.createElement(s.jeF,{lowContrast:!0,kind:"warning",title:i("ordersMissingPatientTitle","Select a patient to continue")});var o=E((0,a.useState)("new"),2),d=o[0],f=o[1],g=E((0,a.useState)(null),2),h=g[0],y=g[1],b=E((0,a.useState)(""),2),m=b[0],$=b[1],v=E((0,a.useState)(new Set),2),A=v[0],w=v[1],x=E((0,a.useState)(!1),2),_=x[0],k=x[1],z=E((0,a.useState)(!1),2),T=z[0],N=z[1],D=E((0,a.useState)(!1),2),S=D[0],B=D[1],L=(0,c.useLocations)(),I=function(e){var n,t,a,i=e?"".concat(c.restBaseUrl,"/order?patient=").concat(e,"&status=active&v=").concat(u):null,o=(0,p.Ay)(i,c.openmrsFetch),r=o.data,s=o.error,l=o.isLoading,d=o.mutate;return{orders:null!==(n=null==r||null===(a=r.data)||void 0===a||null===(t=a.results)||void 0===t?void 0:t.map(function(e){var n,t,a,i;return{uuid:e.uuid,conceptName:null!==(n=null!==(t=null!==(a=null===(i=e.concept)||void 0===i?void 0:i.display)&&void 0!==a?a:e.display)&&void 0!==t?t:e.orderNumber)&&void 0!==n?n:e.uuid,orderNumber:e.orderNumber,display:e.display}}))&&void 0!==n?n:[],isLoading:l,error:s,refresh:d}}(t),F=I.orders,P=I.isLoading,q=I.error,G=(0,a.useMemo)(function(){return null!=L?L:[]},[L]),O=A.size>0?i("selectedOrdersCount",{count:A.size}):null;return a.createElement("div",{className:C.workspace},a.createElement("div",{className:C.header},a.createElement("h2",null,i("activePrescriptionsWorkspaceTitle","Active prescriptions")),a.createElement("p",{className:C.subtitle},i("activePrescriptionsHelper","Review the patient context, choose the visit details, and add the matching orders to the prescription."))),a.createElement("section",{className:C.section},a.createElement("p",{className:C.fieldLabel},i("visitTimingLabel","The visit is")),a.createElement(s.tUM,{selectedIndex:"new"===d?0:1,onChange:function(e){var n=e.selectedIndex;return f(0===n?"new":"past")}},a.createElement(s.wbY,{"aria-label":i("visitTimingLabel","The visit is")},a.createElement(s.ozo,null,i("visitTimingNew","New")),a.createElement(s.ozo,null,i("visitTimingPast","In the past"))),a.createElement(s.T2N,null,a.createElement(s.KpK,{className:C.tabContent},a.createElement("div",{className:C.fieldGroup},a.createElement(s.a32,{id:"visit-location",items:G,itemToString:function(e){var n;return null!==(n=null==e?void 0:e.display)&&void 0!==n?n:""},selectedItem:h,onChange:function(e){var n=e.selectedItem;return y(null!=n?n:null)},placeholder:i("visitLocationPlaceholder","Select a location"),titleText:i("visitLocationHeading","Visit location"),helperText:i("visitLocationHelper","Select where the visit will take place.")})),a.createElement("div",{className:C.fieldGroup},a.createElement("p",{className:C.fieldLabel},i("visitTypeHeading","Visit type")),a.createElement("p",{className:C.helperText},i("visitTypeHelper","Select the orders that should be included in this prescription.")),t?q?a.createElement(s.jeF,{lowContrast:!0,kind:"error",title:i("ordersErrorTitle","Unable to load orders"),subtitle:i("ordersErrorSubtitle","Try again or refresh the patient chart.")}):P?a.createElement(s.OuH,{description:"".concat(i("loading","Loading"),"...")}):F.length?a.createElement(a.Fragment,null,a.createElement("div",{className:C.ordersList,role:"group","aria-label":i("visitTypeHeading","Visit type")},F.map(function(e){return a.createElement(s.Sc0,{key:e.uuid,id:"order-".concat(e.uuid),labelText:a.createElement("span",{className:C.orderLabel},a.createElement("span",{className:C.orderName},e.conceptName),e.display&&a.createElement("span",{className:C.orderMeta},e.display),!e.display&&e.orderNumber&&a.createElement("span",{className:C.orderMeta},e.orderNumber)),checked:A.has(e.uuid),onChange:function(){return n=e.uuid,void w(function(e){var t=new Set(e);return t.has(n)?t.delete(n):t.add(n),t});var n}})})),O?a.createElement("p",{className:C.selectionSummary},O):null):a.createElement(s.jeF,{lowContrast:!0,kind:"info",title:i("ordersEmptyState","There are no orders for this patient yet.")}):null),a.createElement("div",{className:C.fieldGroup},a.createElement(s.ksK,{id:"insurance-policy",labelText:i("insurancePolicyNumberLabel","Insurance Policy Number (optional)"),placeholder:i("insurancePolicyNumberPlaceholder","Enter the policy number"),value:m,onChange:function(e){return $(e.target.value)}})),a.createElement("div",{className:C.fieldGroup},a.createElement(s.Sc0,{id:"sign-prescription-checkbox",labelText:i("signPrescriptionLabel","Digitally sign the prescription"),checked:_,onChange:function(){return k(function(e){return!e})}}),a.createElement(s.Sc0,{id:"print-prescription-checkbox",labelText:i("printPrescriptionLabel","Print the prescription"),checked:T,onChange:function(){return N(function(e){return!e})}})),a.createElement("div",{className:C.fieldGroup,style:{flexDirection:"row",gap:"1rem"}},a.createElement("button",{type:"button",id:"discard-prescription-btn",onClick:function(){y(null),$(""),w(new Set),k(!1),N(!1)},disabled:S},i("discardButtonLabel","Discard")),a.createElement("button",{type:"button",id:"create-prescription-btn",onClick:function(){return(e=function(){var e;return function(e,n){var t,a,i,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},r=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),s=Object.defineProperty;return s(r,"next",{value:l(0)}),s(r,"throw",{value:l(1)}),s(r,"return",{value:l(2)}),"function"==typeof Symbol&&s(r,Symbol.iterator,{value:function(){return this}}),r;function l(s){return function(l){return function(s){if(t)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(o=0)),o;)try{if(t=1,a&&(i=2&s[0]?a.return:s[0]?a.throw||((i=a.return)&&i.call(a),0):a.next)&&!(i=i.call(a,s[1])).done)return i;switch(a=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,a=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!((i=(i=o.trys).length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){o=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){o.label=s[1];break}if(6===s[0]&&o.label<i[1]){o.label=i[1],i=s;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(s);break}i[2]&&o.ops.pop(),o.trys.pop();continue}s=n.call(e,o)}catch(e){s=[6,e],a=0}finally{t=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}(this,function(n){switch(n.label){case 0:if(!t||!h||0===A.size)return[2];B(!0),e={patient:{uuid:t},provider:{uuid:"provider-uuid"},location:{uuid:h.uuid,name:h.display},policyNumber:m,orderUuids:Array.from(A),digitallySigned:_,printRequested:T},n.label=1;case 1:return n.trys.push([1,3,4,5]),[4,r.createPrescription(e)];case 2:return n.sent(),y(null),$(""),w(new Set),k(!1),N(!1),[3,5];case 3:return n.sent(),[3,5];case 4:return B(!1),[7];case 5:return[2]}})},function(){var n=this,t=arguments;return new Promise(function(a,i){var o=e.apply(n,t);function r(e){M(o,a,i,r,s,"next",e)}function s(e){M(o,a,i,r,s,"throw",e)}r(void 0)})})();var e},disabled:S},S?i("loading","Loading"):i("createPrescriptionButtonLabel","Create Prescription")))),a.createElement(s.KpK,{className:C.tabContent},a.createElement(s.jeF,{lowContrast:!0,kind:"info",title:i("inPastTabPlaceholderTitle","Historic prescriptions will be available soon"),subtitle:i("inPastTabPlaceholderSubtitle","Switch back to the New tab to manage current orders.")}))))))}}}]);