@openmrs/esm-active-visits-app 3.1.1-pre.97 → 4.0.1-pre.340

package/src/visits-summary/visits-components/encounter-list.component.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   DataTable,
   TableContainer,
@@ -11,12 +12,11 @@ import {
   TableExpandRow,
   TableCell,
   TableExpandedRow,
-} from 'carbon-components-react';
+} from '@carbon/react';
+import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import { Observation } from '../visit.resource';
 import EncounterObservations from './encounter-observations.component';
 import styles from '../visit-detail-overview.scss';
-import { Observation } from '../visit.resource';
-import { useTranslation } from 'react-i18next';
-import { useLayoutType } from '@openmrs/esm-framework';
 
 interface EncounterListProps {
   encounters: Array<{
@@ -32,7 +32,6 @@ interface EncounterListProps {
 const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visitUuid }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
-  const isDesktop = layout === 'desktop';
   const [headerWidth, setHeaderWidth] = useState(0);
   const headerRef = useRef(null);
 
@@ -65,21 +64,21 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
   }, []);
 
   return encounters.length !== 0 ? (
-    <DataTable rows={encounters} headers={headerData}>
+    <DataTable rows={encounters} headers={headerData} size={!isDesktop(layout) ? 'md' : 'sm'}>
       {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => {
         return (
           <TableContainer>
-            <Table className={styles.customTable} {...getTableProps()} size={!isDesktop ? 'normal' : 'short'}>
+            <Table className={styles.customTable} {...getTableProps()}>
               <TableHead>
                 <TableRow>
                   <TableExpandHeader />
-                  {headers.map((header, ind) =>
-                    ind === 0 ? (
-                      <TableHeader id={`header_${visitUuid}_${ind}`} ref={headerRef} {...getHeaderProps({ header })}>
+                  {headers.map((header, i) =>
+                    i === 0 ? (
+                      <TableHeader id={`header_${visitUuid}_${i}`} ref={headerRef} {...getHeaderProps({ header })}>
                         {header.header}
                       </TableHeader>
                     ) : (
-                      <TableHeader id={`header_${visitUuid}_${ind}`} {...getHeaderProps({ header })}>
+                      <TableHeader id={`header_${visitUuid}_${i}`} {...getHeaderProps({ header })}>
                         {header.header}
                       </TableHeader>
                     ),
@@ -87,7 +86,7 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row, ind) => (
+                {rows.map((row, i) => (
                   <React.Fragment key={row.id}>
                     <TableExpandRow {...getRowProps({ row })}>
                       {row.cells.map((cell) => (
@@ -97,10 +96,10 @@ const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visi
                     {row.isExpanded && (
                       <TableExpandedRow
                         className={styles.expandedRow}
-                        style={{ paddingLeft: isDesktop ? '3rem' : '4rem' }}
+                        style={{ paddingLeft: isDesktop(layout) ? '3rem' : '4rem' }}
                         colSpan={headers.length + 2}>
                         <div style={{ marginLeft: headerWidth }}>
-                          <EncounterObservations observations={encounters[ind].obs} />
+                          <EncounterObservations observations={encounters[i].obs} />
                         </div>
                       </TableExpandedRow>
                     )}

package/src/visits-summary/visits-components/encounter-observations.component.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SkeletonText } from 'carbon-components-react';
+import { SkeletonText } from '@carbon/react';
 import { Observation } from '../visit.resource';
 import styles from '../visit-detail-overview.scss';
 

package/src/visits-summary/visits-components/visit-summary.component.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tab, Tabs } from 'carbon-components-react';
-import { Order, Encounter, Note, Observation, OrderItem } from '../visit.resource';
-import styles from '../visit-detail-overview.scss';
-import MedicationSummary from './medications-summary.component';
+import { Tab, Tabs, TabList, TabPanel, TabPanels, Tag } from '@carbon/react';
+import { OpenmrsResource, formatTime, parseDate } from '@openmrs/esm-framework';
 import NotesSummary from './notes-summary.component';
+import MedicationSummary from './medications-summary.component';
 import TestsSummary from './tests-summary.component';
-import { OpenmrsResource, formatTime, parseDate } from '@openmrs/esm-framework';
+import { Order, Encounter, Note, Observation, OrderItem } from '../visit.resource';
+import styles from '../visit-detail-overview.scss';
 
 interface DiagnosisItem {
   diagnosis: string;
@@ -71,46 +71,44 @@ const VisitSummary: React.FC<VisitSummaryProps> = ({ encounters, patientUuid })
 
   return (
     <div className={styles.summaryContainer}>
-      <p className={styles.productiveHeading01}>{t('diagnoses', 'Diagnoses')}</p>
-      <div className={`${styles.caption01} ${styles.diagnosesList}`}>
+      <p className={styles.diagnosisLabel}>{t('diagnoses', 'Diagnoses')}</p>
+
+      <div className={styles.diagnosesList}>
         {diagnoses.length > 0 ? (
-          diagnoses.map((d: DiagnosisItem, ind) => (
-            <span
-              key={ind}
-              className={`${styles.diagnosis} ${
-                d.order === 'Primary' ? styles.primaryDiagnose : styles.secondaryDiagnose
-              }`}>
-              {d.diagnosis}
-            </span>
+          diagnoses.map((diagnosis, i) => (
+            <Tag key={i} type={diagnosis.order === 'Primary' ? 'blue' : 'red'}>
+              {diagnosis.diagnosis}
+            </Tag>
           ))
         ) : (
-          <span className={`${styles.bodyLong01} ${styles.text02}`} style={{ marginBottom: '0.5rem' }}>
+          <p className={`${styles.bodyLong01} ${styles.text02}`} style={{ marginBottom: '0.5rem' }}>
             {t('noDiagnosesFound', 'No diagnoses found')}
-          </span>
+          </p>
         )}
       </div>
       <Tabs className={styles.verticalTabs}>
-        <Tab
-          className={`${styles.tab} ${styles.bodyLong01} ${tabSelected === 0 && styles.selectedTab}`}
-          onClick={() => setSelectedTab(0)}
-          id="notes-tab"
-          label={t('notes', 'Notes')}>
-          <NotesSummary notes={notes} />
-        </Tab>
-        <Tab
-          className={`${styles.tab} ${tabSelected === 1 && styles.selectedTab}`}
-          onClick={() => setSelectedTab(1)}
-          id="tests-tab"
-          label={t('tests', 'Tests')}>
-          <TestsSummary patientUuid={patientUuid} encounters={encounters as Array<Encounter>} />
-        </Tab>
-        <Tab
-          className={`${styles.tab} ${tabSelected === 2 && styles.selectedTab}`}
-          onClick={() => setSelectedTab(2)}
-          id="tab-3"
-          label={t('medications', 'Medications')}>
-          <MedicationSummary medications={medications} />
-        </Tab>
+        <TabList aria-label="Visit summary tabs" className={styles.tablist}>
+          <Tab className={`${styles.tab} ${styles.bodyLong01}`} onClick={() => setSelectedTab(0)} id="notes-tab">
+            {t('notes', 'Notes')}
+          </Tab>
+          <Tab className={styles.tab} onClick={() => setSelectedTab(1)} id="tests-tab">
+            {t('tests', 'Tests')}
+          </Tab>
+          <Tab className={styles.tab} onClick={() => setSelectedTab(2)} id="tab-3">
+            {t('medications', 'Medications')}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <NotesSummary notes={notes} />
+          </TabPanel>
+          <TabPanel>
+            <TestsSummary patientUuid={patientUuid} encounters={encounters as Array<Encounter>} />
+          </TabPanel>
+          <TabPanel>
+            <MedicationSummary medications={medications} />
+          </TabPanel>
+        </TabPanels>
       </Tabs>
     </div>
   );

package/dist/150.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"150.js","mappings":"4QAEaA,EAAe,CAC1BC,aAAc,CACZC,SAAU,CACRC,MAAOC,EAAAA,KAAAA,OACPC,aAAc,uDACdC,SAAU,IAEZC,UAAW,CACTJ,MAAOC,EAAAA,KAAAA,MACPC,aAAc,+CACdC,SAAU,CAAC,GAAI,GAAI,OCTnBE,EAAoBC,EAAAA,MAEpBC,EAAsB,CAC1B,mBAAoB,UAGhBC,EAAuB,CAC3B,yBAA0BC,iBAG5B,SAASC,IACP,IAAMC,EAAa,iCAEbC,EAAU,CACdC,YAAa,gBACbF,WAAAA,GAKF,OAFAG,EAAAA,EAAAA,oBAAmBH,EAAYd,GAExB,CACLkB,WAAY,CACV,CACEC,GAAI,uBACJC,KAAM,wBACNC,MAAMC,EAAAA,EAAAA,oBAAkB,W,OAAM,kFAA0DP,IAE1F,CACEI,GAAI,uBACJC,KAAM,qBACNC,MAAMC,EAAAA,EAAAA,oBAAkB,W,OAAM,kFAAmDP,Q,eCjCzF,IAAIQ,EAAM,CACT,YAAa,CACZ,KACA,KAED,YAAa,CACZ,KACA,MAGF,SAASC,EAAoBC,GAC5B,IAAIC,EAAoBC,EAAEJ,EAAKE,GAC9B,OAAOG,QAAQC,UAAUC,MAAK,KAC7B,IAAIC,EAAI,IAAIC,MAAM,uBAAyBP,EAAM,KAEjD,MADAM,EAAEE,KAAO,mBACHF,KAIR,IAAIG,EAAMX,EAAIE,GAAMN,EAAKe,EAAI,GAC7B,OAAOR,EAAoBK,EAAEG,EAAI,IAAIJ,MAAK,IAClCJ,EAAoBP,KAG7BK,EAAoBW,KAAO,IAAOC,OAAOD,KAAKZ,GAC9CC,EAAoBL,GAAK,KACzBkB,EAAOC,QAAUd","sources":["webpack://@openmrs/esm-active-visits-app/./src/config-schema.ts","webpack://@openmrs/esm-active-visits-app/./src/index.ts","webpack://@openmrs/esm-active-visits-app/./translations/ lazy nonrecursive .json$"],"sourcesContent":["import { Type } from '@openmrs/esm-framework';\n\nexport const configSchema = {\n  activeVisits: {\n    pageSize: {\n      _type: Type.Number,\n      _description: 'Count of active visits to be shown in a single page.',\n      _default: 10,\n    },\n    pageSizes: {\n      _type: Type.Array,\n      _description: 'Customizable page sizes that user can choose',\n      _default: [10, 20, 50],\n    },\n  },\n};\n","import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';\nimport { configSchema } from './config-schema';\n\nconst importTranslation = require.context('../translations', false, /.json$/, 'lazy');\n\nconst backendDependencies = {\n  'webservices.rest': '^2.2.0',\n};\n\nconst frontendDependencies = {\n  '@openmrs/esm-framework': process.env.FRAMEWORK_VERSION,\n};\n\nfunction setupOpenMRS() {\n  const moduleName = '@openmrs/esm-active-visits-app';\n\n  const options = {\n    featureName: 'active-visits',\n    moduleName,\n  };\n\n  defineConfigSchema(moduleName, configSchema);\n\n  return {\n    extensions: [\n      {\n        id: 'active-visits-widget',\n        slot: 'homepage-widgets-slot',\n        load: getAsyncLifecycle(() => import('./active-visits-widget/active-visits.component'), options),\n      },\n      {\n        id: 'visit-summary-widget',\n        slot: 'visit-summary-slot',\n        load: getAsyncLifecycle(() => import('./visits-summary/visit-detail.component'), options),\n      },\n    ],\n  };\n}\n\nexport { backendDependencies, frontendDependencies, importTranslation, setupOpenMRS };\n","var map = {\n\t\"./en.json\": [\n\t\t3574,\n\t\t574\n\t],\n\t\"./es.json\": [\n\t\t8319,\n\t\t319\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(() => {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(() => {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = () => (Object.keys(map));\nwebpackAsyncContext.id = 3979;\nmodule.exports = webpackAsyncContext;"],"names":["configSchema","activeVisits","pageSize","_type","Type","_description","_default","pageSizes","importTranslation","require","backendDependencies","frontendDependencies","process","setupOpenMRS","moduleName","options","featureName","defineConfigSchema","extensions","id","slot","load","getAsyncLifecycle","map","webpackAsyncContext","req","__webpack_require__","o","Promise","resolve","then","e","Error","code","ids","keys","Object","module","exports"],"sourceRoot":""}

package/dist/221.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_openmrs_esm_active_visits_app=self.webpackChunk_openmrs_esm_active_visits_app||[]).push([[221],{7935:(e,n,t)=>{t.d(n,{Z:()=>p});var i=t(1799),a=t.n(i),r=t(2609),o=t.n(r)()(a());o.push([e.id,':root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79}.-esm-active-visits__active-visits__productiveHeading01___5dzOt{font-size:.875rem;font-weight:600;line-height:1.29;letter-spacing:.16px}.-esm-active-visits__active-visits__productiveHeading02___-o9Tn{font-size:1rem;font-weight:600;line-height:1.375;letter-spacing:0}.-esm-active-visits__active-visits__bodyLong01___xwAEE{font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.16px}.-esm-active-visits__active-visits__caption01___e7sSC{font-size:.75rem;font-weight:400;line-height:1.34;letter-spacing:.32px}.-esm-active-visits__active-visits__bodyShort02___BiPkR{font-size:1rem;font-weight:400;line-height:1.375;letter-spacing:0}.-esm-active-visits__active-visits__text02___lkEHs{color:#525252}.-esm-active-visits__active-visits__text01___iTf3H{color:#161616}.-esm-active-visits__active-visits__activeVisitsContainer___XAE0K{background-color:#fff;border:1px solid #e0e0e0;width:100%;margin:0 auto;max-width:95vw}.-esm-active-visits__active-visits__activeVisitsDetailHeaderContainer___pjwhu{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0 .75rem 1rem;background-color:#fff}.-esm-active-visits__active-visits__backgroundDataFetchingIndicator___YszBc{align-items:center;display:flex;flex:1 1 0%;justify-content:center}.-esm-active-visits__active-visits__tableContainer___27wfu section{position:relative}.-esm-active-visits__active-visits__tableContainer___27wfu a{text-decoration:none}.-esm-active-visits__active-visits__pagination___h8NbE{overflow:hidden}.-esm-active-visits__active-visits__emptyRow___jKDsj{padding:0 1rem;display:flex;align-items:center}.-esm-active-visits__active-visits__visitSummaryContainer___mBkXn{width:100%;max-width:768px;margin:1rem auto}.-esm-active-visits__active-visits__expandedActiveVisitRow___ONSwO>td>div{max-height:max-content !important}.-esm-active-visits__active-visits__expandedActiveVisitRow___ONSwO td{padding:0 2rem}.-esm-active-visits__active-visits__expandedActiveVisitRow___ONSwO th[colspan] td[colspan]>div:first-child{padding:0 1rem}.-esm-active-visits__active-visits__action___Kn0CE{margin-bottom:.5rem}.-esm-active-visits__active-visits__content___hF3rN{font-size:.875rem;font-weight:600;line-height:1.29;letter-spacing:.16px;color:#525252;margin-top:1rem;margin-bottom:.5rem}.-esm-active-visits__active-visits__desktopHeading___3cKg8 h4{font-size:1rem;font-weight:600;line-height:1.375;letter-spacing:0;color:#525252}.-esm-active-visits__active-visits__tabletHeading___vrNoH h4{font-size:1.25rem;font-weight:400;line-height:1.4;letter-spacing:0;color:#525252}.-esm-active-visits__active-visits__desktopHeading___3cKg8,.-esm-active-visits__active-visits__tabletHeading___vrNoH{text-align:left;text-transform:capitalize;margin-bottom:1rem}.-esm-active-visits__active-visits__desktopHeading___3cKg8 h4:after,.-esm-active-visits__active-visits__tabletHeading___vrNoH h4:after{content:"";display:block;width:2rem;padding-top:3px;border-bottom:.375rem solid;border-bottom-color:#007d79;border-bottom-color:var(--brand-03)}.-esm-active-visits__active-visits__tile___OJ1Dy{text-align:center}',"",{version:3,sources:["webpack://./../../node_modules/@openmrs/esm-styleguide/src/_vars.scss","webpack://./src/root.scss","webpack://./../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss","webpack://./src/active-visits-widget/active-visits.scss","webpack://./../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss"],names:[],mappings:"AAyCA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CCzCF,gEC4gBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD7rB1B,gECwgBI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CDzrB1B,uDCogBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDrrB1B,sDCggBI,gBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDjrB1B,wDC4fI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CD7qB1B,mDACE,aAAA,CAGF,mDACE,aAAA,CE1BF,kEACE,qBHIc,CGHd,wBAAA,CACA,UAAA,CACA,aAAA,CACA,cAAA,CAGF,8EACE,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,4BAAA,CACA,qBHRc,CGWhB,4EACE,kBAAA,CACA,YAAA,CACA,WAAA,CACA,sBAAA,CAGF,mEACE,iBAAA,CAGF,6DACE,oBAAA,CAGF,uDACE,eAAA,CAGF,qDACE,cAAA,CACA,YAAA,CACA,kBAAA,CAGF,kEACE,UAAA,CACA,eAAA,CACA,gBAAA,CAGF,0EACE,iCAAA,CAGF,sEACE,cAAA,CAGF,2GACE,cAAA,CAGF,mDACE,mBCmFa,CDhFf,oDD8cI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CCjoBxB,aH9DQ,CG+DR,eC+Ea,CD9Eb,mBC4Ea,CDxEb,8DDscE,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CCznBtB,aHtEM,CG2ER,6DD+bE,iBAqLsB,CArLtB,eAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CClnBtB,aH7EM,CGiFV,qHAEE,eAAA,CACA,yBAAA,CACA,kBCyDa,CDvDb,uIACE,UAAA,CACA,aAAA,CACA,UAAA,CACA,eAAA,CACA,2BAAA,CH5DF,2BAAA,CACA,mCAAA,CGgEF,iDACE,iBAAA",sourcesContent:["$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@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}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1200px;\n$breakpoint-desktop-min: 1201px;\n$breakpoint-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","@import 'carbon-components/scss/globals/scss/typography.scss';\n@import '~@openmrs/esm-styleguide/src/vars';\n\n.productiveHeading01 {\n  @include carbon--type-style('productive-heading-01');\n}\n\n.productiveHeading02 {\n  @include carbon--type-style('productive-heading-02');\n}\n\n.bodyLong01 {\n  @include carbon--type-style('body-long-01');\n}\n\n.caption01 {\n  @include carbon--type-style('caption-01');\n}\n\n.bodyShort02 {\n  @include carbon--type-style('body-short-02');\n}\n\n.text02 {\n  color: #525252;\n}\n\n.text01 {\n  color: #161616;\n}\n","//\n// Copyright IBM Corp. 2018, 2018\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@import '../layout/breakpoint';\n@import 'font-family';\n@import 'scale';\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$caption-01: (\n  font-size: carbon--type-scale(1),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.34,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$label-01: (\n  font-size: carbon--type-scale(1),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.34,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$helper-text-01: (\n  font-size: carbon--type-scale(1),\n  line-height: 1.34,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-01: (\n  font-size: carbon--type-scale(2),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.29,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-01: (\n  font-size: carbon--type-scale(2),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.43,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-02: (\n  font-size: carbon--type-scale(3),\n  font-weight: carbon--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-long-02: (\n  font-size: carbon--type-scale(3),\n  font-weight: carbon--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$code-01: (\n  font-family: carbon--font-family('mono'),\n  font-size: carbon--type-scale(1),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.34,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-02: (\n  font-family: carbon--font-family('mono'),\n  font-size: carbon--type-scale(2),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.43,\n  letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-01: (\n  font-size: carbon--type-scale(2),\n  font-weight: carbon--font-weight('semibold'),\n  line-height: 1.29,\n  letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-01: $heading-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-02: (\n  font-size: carbon--type-scale(3),\n  font-weight: carbon--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$productive-heading-02: $heading-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-03: (\n  font-size: carbon--type-scale(5),\n  font-weight: carbon--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$productive-heading-04: (\n  font-size: carbon--type-scale(7),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.29,\n  letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-05: (\n  font-size: carbon--type-scale(8),\n  font-weight: carbon--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$productive-heading-06: (\n  font-size: carbon--type-scale(8),\n  font-weight: carbon--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$productive-heading-07: (\n  font-size: carbon--type-scale(10),\n  font-weight: carbon--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$expressive-heading-01: map-merge(\n  $heading-01,\n  (\n    line-height: 1.25,\n  )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-02: map-merge(\n  $heading-02,\n  (\n    line-height: 1.5,\n  )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-03: (\n  font-size: carbon--type-scale(5),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.4,\n  letter-spacing: 0,\n  breakpoints: (\n    xlg: (\n      font-size: carbon--type-scale(5),\n      line-height: 1.25,\n    ),\n    max: (\n      font-size: carbon--type-scale(6),\n      line-height: 1.334,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-04: (\n  font-size: carbon--type-scale(7),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.29,\n  letter-spacing: 0,\n  breakpoints: (\n    xlg: (\n      font-size: carbon--type-scale(7),\n      line-height: 1.25,\n    ),\n    max: (\n      font-size: carbon--type-scale(8),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-05: (\n  font-size: carbon--type-scale(8),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(9),\n      font-weight: carbon--font-weight('light'),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: carbon--type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: carbon--type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-06: (\n  font-size: carbon--type-scale(8),\n  font-weight: carbon--font-weight('semibold'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(9),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: carbon--type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: carbon--type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-paragraph-01: (\n  font-size: carbon--type-scale(6),\n  font-weight: carbon--font-weight('light'),\n  line-height: 1.334,\n  letter-spacing: 0,\n  breakpoints: (\n    lg: (\n      font-size: carbon--type-scale(7),\n      line-height: 1.29,\n    ),\n    max: (\n      font-size: carbon--type-scale(8),\n      line-height: 1.25,\n    ),\n  ),\n);\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-01: (\n  font-size: carbon--type-scale(5),\n  font-weight: carbon--font-weight('regular'),\n  line-height: 1.3,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(5),\n    ),\n    lg: (\n      font-size: carbon--type-scale(6),\n      line-height: 1.334,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(7),\n      line-height: 1.29,\n    ),\n    max: (\n      font-size: carbon--type-scale(8),\n      line-height: 1.25,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-02: (\n  font-size: carbon--type-scale(8),\n  font-weight: carbon--font-weight('light'),\n  line-height: 1.25,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(9),\n      line-height: 1.22,\n    ),\n    lg: (\n      font-size: carbon--type-scale(10),\n      line-height: 1.19,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(11),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: carbon--type-scale(13),\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-01: (\n  font-size: carbon--type-scale(10),\n  font-weight: carbon--font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(10),\n    ),\n    lg: (\n      font-size: carbon--type-scale(12),\n    ),\n    xlg: (\n      font-size: carbon--type-scale(13),\n      line-height: 1.17,\n    ),\n    max: (\n      font-size: carbon--type-scale(15),\n      line-height: 1.13,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-02: (\n  font-size: carbon--type-scale(10),\n  font-weight: carbon--font-weight('semibold'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(10),\n    ),\n    lg: (\n      font-size: carbon--type-scale(12),\n    ),\n    xlg: (\n      font-size: carbon--type-scale(13),\n      line-height: 1.16,\n    ),\n    max: (\n      font-size: carbon--type-scale(15),\n      line-height: 1.13,\n    ),\n  ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-03: (\n  font-size: carbon--type-scale(10),\n  font-weight: carbon--font-weight('light'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(14),\n      line-height: 1.15,\n    ),\n    lg: (\n      font-size: carbon--type-scale(17),\n      line-height: 1.11,\n      letter-spacing: -0.64px,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(20),\n      line-height: 1.07,\n      letter-spacing: -0.64px,\n    ),\n    max: (\n      font-size: carbon--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$display-04: (\n  font-size: carbon--type-scale(10),\n  font-weight: carbon--font-weight('semibold'),\n  line-height: 1.19,\n  letter-spacing: 0,\n  breakpoints: (\n    md: (\n      font-size: carbon--type-scale(14),\n      line-height: 1.15,\n    ),\n    lg: (\n      font-size: carbon--type-scale(17),\n      line-height: 1.11,\n      letter-spacing: -0.64px,\n    ),\n    xlg: (\n      font-size: carbon--type-scale(20),\n      line-height: 1.07,\n      letter-spacing: -0.64px,\n    ),\n    max: (\n      font-size: carbon--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$tokens: (\n  caption-01: $caption-01,\n  label-01: $label-01,\n  helper-text-01: $helper-text-01,\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);\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 $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 [$carbon--grid-breakpoints] - Custom breakpoints to use\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type($type-styles, $breakpoints: $carbon--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 carbon--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 [$carbon--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: $carbon--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: carbon--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: carbon--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$custom-property-prefix: 'cds' !default;\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 [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use\n/// @access public\n/// @group @carbon/type\n@mixin carbon--type-style(\n  $name,\n  $fluid: false,\n  $breakpoints: $carbon--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    @if global-variable-exists('feature-flags') and\n      map-get($feature-flags, 'enable-css-custom-properties')\n    {\n      @include custom-properties($name, $token);\n    } @else {\n      // Otherwise, we just include all the property declarations directly on the\n      // selector\n      @include properties(map-remove($token, 'breakpoints'));\n    }\n  }\n}\n","@import '../root.scss';\n\n.activeVisitsContainer {\n  background-color: $ui-background;\n  border: 1px solid $ui-03;\n  width: 100%;\n  margin: 0 auto;\n  max-width: 95vw;\n}\n\n.activeVisitsDetailHeaderContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: $spacing-04 0 $spacing-04 $spacing-05;\n  background-color: $ui-background;\n}\n\n.backgroundDataFetchingIndicator {\n  align-items: center;\n  display: flex;\n  flex: 1 1 0%;\n  justify-content: center;\n}\n\n.tableContainer section {\n  position: relative;\n}\n\n.tableContainer a {\n  text-decoration: none;\n}\n\n.pagination {\n  overflow: hidden;\n}\n\n.emptyRow {\n  padding: 0 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.visitSummaryContainer {\n  width: 100%;\n  max-width: 768px;\n  margin: 1rem auto;\n}\n\n.expandedActiveVisitRow > td > div {\n  max-height: max-content !important;\n}\n\n.expandedActiveVisitRow td {\n  padding: 0 2rem;\n}\n\n.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {\n  padding: 0 1rem;\n}\n\n.action {\n  margin-bottom: $spacing-03;\n}\n\n.content {\n  @include carbon--type-style('productive-heading-01');\n  color: $text-02;\n  margin-top: $spacing-05;\n  margin-bottom: $spacing-03;\n}\n\n.desktopHeading {\n  h4 {\n    @include carbon--type-style('productive-heading-02');\n    color: $text-02;\n  }\n}\n\n.tabletHeading {\n  h4 {\n    @include carbon--type-style('productive-heading-03');\n    color: $text-02;\n  }\n}\n\n.desktopHeading,\n.tabletHeading {\n  text-align: left;\n  text-transform: capitalize;\n  margin-bottom: $spacing-05;\n\n  h4:after {\n    content: '';\n    display: block;\n    width: 2rem;\n    padding-top: 3px;\n    border-bottom: 0.375rem solid;\n    @include brand-03(border-bottom-color);\n  }\n}\n\n.tile {\n  text-align: center;\n}\n","// Code generated by @carbon/themes. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2019\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@import './themes';\n\n/// Define theme variables from a map of tokens\n/// @access public\n/// @param {Map} $theme [$carbon--theme] - Map of theme tokens\n/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens\n/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.\n///\n/// @example scss\n///   // Default usage\n///   @include carbon--theme();\n///\n///   // Alternate styling (not white theme)\n///   @include carbon--theme($carbon--theme--g90) {\n///     // declarations...\n///   }\n///\n///   // Inline styling\n///   @include carbon--theme($carbon--theme--g90) {\n///     .my-dark-theme {\n///       // declarations...\n///     }\n///   }\n///\n/// @group @carbon/themes\n@mixin carbon--theme(\n  $theme: $carbon--theme,\n  $emit-custom-properties: false,\n  $emit-difference: false\n) {\n  $parent-carbon-theme: $carbon--theme;\n  $carbon--theme: $theme !global;\n  $interactive-01: map-get($theme, 'interactive-01') !global;\n  $interactive-02: map-get($theme, 'interactive-02') !global;\n  $interactive-03: map-get($theme, 'interactive-03') !global;\n  $interactive-04: map-get($theme, 'interactive-04') !global;\n  $ui-background: map-get($theme, 'ui-background') !global;\n  $ui-01: map-get($theme, 'ui-01') !global;\n  $ui-02: map-get($theme, 'ui-02') !global;\n  $ui-03: map-get($theme, 'ui-03') !global;\n  $ui-04: map-get($theme, 'ui-04') !global;\n  $ui-05: map-get($theme, 'ui-05') !global;\n  $text-01: map-get($theme, 'text-01') !global;\n  $text-02: map-get($theme, 'text-02') !global;\n  $text-03: map-get($theme, 'text-03') !global;\n  $text-04: map-get($theme, 'text-04') !global;\n  $text-05: map-get($theme, 'text-05') !global;\n  $text-error: map-get($theme, 'text-error') !global;\n  $icon-01: map-get($theme, 'icon-01') !global;\n  $icon-02: map-get($theme, 'icon-02') !global;\n  $icon-03: map-get($theme, 'icon-03') !global;\n  $link-01: map-get($theme, 'link-01') !global;\n  $link-02: map-get($theme, 'link-02') !global;\n  $inverse-link: map-get($theme, 'inverse-link') !global;\n  $field-01: map-get($theme, 'field-01') !global;\n  $field-02: map-get($theme, 'field-02') !global;\n  $inverse-01: map-get($theme, 'inverse-01') !global;\n  $inverse-02: map-get($theme, 'inverse-02') !global;\n  $support-01: map-get($theme, 'support-01') !global;\n  $support-02: map-get($theme, 'support-02') !global;\n  $support-03: map-get($theme, 'support-03') !global;\n  $support-04: map-get($theme, 'support-04') !global;\n  $inverse-support-01: map-get($theme, 'inverse-support-01') !global;\n  $inverse-support-02: map-get($theme, 'inverse-support-02') !global;\n  $inverse-support-03: map-get($theme, 'inverse-support-03') !global;\n  $inverse-support-04: map-get($theme, 'inverse-support-04') !global;\n  $overlay-01: map-get($theme, 'overlay-01') !global;\n  $danger-01: map-get($theme, 'danger-01') !global;\n  $danger-02: map-get($theme, 'danger-02') !global;\n  $focus: map-get($theme, 'focus') !global;\n  $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;\n  $hover-primary: map-get($theme, 'hover-primary') !global;\n  $active-primary: map-get($theme, 'active-primary') !global;\n  $hover-primary-text: map-get($theme, 'hover-primary-text') !global;\n  $hover-secondary: map-get($theme, 'hover-secondary') !global;\n  $active-secondary: map-get($theme, 'active-secondary') !global;\n  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;\n  $active-tertiary: map-get($theme, 'active-tertiary') !global;\n  $hover-ui: map-get($theme, 'hover-ui') !global;\n  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;\n  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;\n  $active-ui: map-get($theme, 'active-ui') !global;\n  $active-light-ui: map-get($theme, 'active-light-ui') !global;\n  $selected-ui: map-get($theme, 'selected-ui') !global;\n  $selected-light-ui: map-get($theme, 'selected-light-ui') !global;\n  $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;\n  $hover-danger: map-get($theme, 'hover-danger') !global;\n  $active-danger: map-get($theme, 'active-danger') !global;\n  $hover-row: map-get($theme, 'hover-row') !global;\n  $visited-link: map-get($theme, 'visited-link') !global;\n  $disabled-01: map-get($theme, 'disabled-01') !global;\n  $disabled-02: map-get($theme, 'disabled-02') !global;\n  $disabled-03: map-get($theme, 'disabled-03') !global;\n  $highlight: map-get($theme, 'highlight') !global;\n  $decorative-01: map-get($theme, 'decorative-01') !global;\n  $button-separator: map-get($theme, 'button-separator') !global;\n  $skeleton-01: map-get($theme, 'skeleton-01') !global;\n  $skeleton-02: map-get($theme, 'skeleton-02') !global;\n  $brand-01: map-get($theme, 'brand-01') !global;\n  $brand-02: map-get($theme, 'brand-02') !global;\n  $brand-03: map-get($theme, 'brand-03') !global;\n  $active-01: map-get($theme, 'active-01') !global;\n  $hover-field: map-get($theme, 'hover-field') !global;\n  $danger: map-get($theme, 'danger') !global;\n  $caption-01: map-get($theme, 'caption-01') !global;\n  $label-01: map-get($theme, 'label-01') !global;\n  $helper-text-01: map-get($theme, 'helper-text-01') !global;\n  $body-short-01: map-get($theme, 'body-short-01') !global;\n  $body-long-01: map-get($theme, 'body-long-01') !global;\n  $body-short-02: map-get($theme, 'body-short-02') !global;\n  $body-long-02: map-get($theme, 'body-long-02') !global;\n  $code-01: map-get($theme, 'code-01') !global;\n  $code-02: map-get($theme, 'code-02') !global;\n  $heading-01: map-get($theme, 'heading-01') !global;\n  $productive-heading-01: map-get($theme, 'productive-heading-01') !global;\n  $heading-02: map-get($theme, 'heading-02') !global;\n  $productive-heading-02: map-get($theme, 'productive-heading-02') !global;\n  $productive-heading-03: map-get($theme, 'productive-heading-03') !global;\n  $productive-heading-04: map-get($theme, 'productive-heading-04') !global;\n  $productive-heading-05: map-get($theme, 'productive-heading-05') !global;\n  $productive-heading-06: map-get($theme, 'productive-heading-06') !global;\n  $productive-heading-07: map-get($theme, 'productive-heading-07') !global;\n  $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global;\n  $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global;\n  $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global;\n  $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global;\n  $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global;\n  $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global;\n  $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global;\n  $quotation-01: map-get($theme, 'quotation-01') !global;\n  $quotation-02: map-get($theme, 'quotation-02') !global;\n  $display-01: map-get($theme, 'display-01') !global;\n  $display-02: map-get($theme, 'display-02') !global;\n  $display-03: map-get($theme, 'display-03') !global;\n  $display-04: map-get($theme, 'display-04') !global;\n  $spacing-01: map-get($theme, 'spacing-01') !global;\n  $spacing-02: map-get($theme, 'spacing-02') !global;\n  $spacing-03: map-get($theme, 'spacing-03') !global;\n  $spacing-04: map-get($theme, 'spacing-04') !global;\n  $spacing-05: map-get($theme, 'spacing-05') !global;\n  $spacing-06: map-get($theme, 'spacing-06') !global;\n  $spacing-07: map-get($theme, 'spacing-07') !global;\n  $spacing-08: map-get($theme, 'spacing-08') !global;\n  $spacing-09: map-get($theme, 'spacing-09') !global;\n  $spacing-10: map-get($theme, 'spacing-10') !global;\n  $spacing-11: map-get($theme, 'spacing-11') !global;\n  $spacing-12: map-get($theme, 'spacing-12') !global;\n  $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global;\n  $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global;\n  $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global;\n  $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global;\n  $layout-01: map-get($theme, 'layout-01') !global;\n  $layout-02: map-get($theme, 'layout-02') !global;\n  $layout-03: map-get($theme, 'layout-03') !global;\n  $layout-04: map-get($theme, 'layout-04') !global;\n  $layout-05: map-get($theme, 'layout-05') !global;\n  $layout-06: map-get($theme, 'layout-06') !global;\n  $layout-07: map-get($theme, 'layout-07') !global;\n  $container-01: map-get($theme, 'container-01') !global;\n  $container-02: map-get($theme, 'container-02') !global;\n  $container-03: map-get($theme, 'container-03') !global;\n  $container-04: map-get($theme, 'container-04') !global;\n  $container-05: map-get($theme, 'container-05') !global;\n  $icon-size-01: map-get($theme, 'icon-size-01') !global;\n  $icon-size-02: map-get($theme, 'icon-size-02') !global;\n\n  @if global-variable-exists('feature-flags') and\n    map-get($feature-flags, 'enable-css-custom-properties')\n  {\n    $interactive-01: var(\n      --#{$custom-property-prefix}-interactive-01,\n      map-get($theme, 'interactive-01')\n    ) !global;\n    $interactive-02: var(\n      --#{$custom-property-prefix}-interactive-02,\n      map-get($theme, 'interactive-02')\n    ) !global;\n    $interactive-03: var(\n      --#{$custom-property-prefix}-interactive-03,\n      map-get($theme, 'interactive-03')\n    ) !global;\n    $interactive-04: var(\n      --#{$custom-property-prefix}-interactive-04,\n      map-get($theme, 'interactive-04')\n    ) !global;\n    $ui-background: var(\n      --#{$custom-property-prefix}-ui-background,\n      map-get($theme, 'ui-background')\n    ) !global;\n    $ui-01: var(\n      --#{$custom-property-prefix}-ui-01,\n      map-get($theme, 'ui-01')\n    ) !global;\n    $ui-02: var(\n      --#{$custom-property-prefix}-ui-02,\n      map-get($theme, 'ui-02')\n    ) !global;\n    $ui-03: var(\n      --#{$custom-property-prefix}-ui-03,\n      map-get($theme, 'ui-03')\n    ) !global;\n    $ui-04: var(\n      --#{$custom-property-prefix}-ui-04,\n      map-get($theme, 'ui-04')\n    ) !global;\n    $ui-05: var(\n      --#{$custom-property-prefix}-ui-05,\n      map-get($theme, 'ui-05')\n    ) !global;\n    $text-01: var(\n      --#{$custom-property-prefix}-text-01,\n      map-get($theme, 'text-01')\n    ) !global;\n    $text-02: var(\n      --#{$custom-property-prefix}-text-02,\n      map-get($theme, 'text-02')\n    ) !global;\n    $text-03: var(\n      --#{$custom-property-prefix}-text-03,\n      map-get($theme, 'text-03')\n    ) !global;\n    $text-04: var(\n      --#{$custom-property-prefix}-text-04,\n      map-get($theme, 'text-04')\n    ) !global;\n    $text-05: var(\n      --#{$custom-property-prefix}-text-05,\n      map-get($theme, 'text-05')\n    ) !global;\n    $text-error: var(\n      --#{$custom-property-prefix}-text-error,\n      map-get($theme, 'text-error')\n    ) !global;\n    $icon-01: var(\n      --#{$custom-property-prefix}-icon-01,\n      map-get($theme, 'icon-01')\n    ) !global;\n    $icon-02: var(\n      --#{$custom-property-prefix}-icon-02,\n      map-get($theme, 'icon-02')\n    ) !global;\n    $icon-03: var(\n      --#{$custom-property-prefix}-icon-03,\n      map-get($theme, 'icon-03')\n    ) !global;\n    $link-01: var(\n      --#{$custom-property-prefix}-link-01,\n      map-get($theme, 'link-01')\n    ) !global;\n    $link-02: var(\n      --#{$custom-property-prefix}-link-02,\n      map-get($theme, 'link-02')\n    ) !global;\n    $inverse-link: var(\n      --#{$custom-property-prefix}-inverse-link,\n      map-get($theme, 'inverse-link')\n    ) !global;\n    $field-01: var(\n      --#{$custom-property-prefix}-field-01,\n      map-get($theme, 'field-01')\n    ) !global;\n    $field-02: var(\n      --#{$custom-property-prefix}-field-02,\n      map-get($theme, 'field-02')\n    ) !global;\n    $inverse-01: var(\n      --#{$custom-property-prefix}-inverse-01,\n      map-get($theme, 'inverse-01')\n    ) !global;\n    $inverse-02: var(\n      --#{$custom-property-prefix}-inverse-02,\n      map-get($theme, 'inverse-02')\n    ) !global;\n    $support-01: var(\n      --#{$custom-property-prefix}-support-01,\n      map-get($theme, 'support-01')\n    ) !global;\n    $support-02: var(\n      --#{$custom-property-prefix}-support-02,\n      map-get($theme, 'support-02')\n    ) !global;\n    $support-03: var(\n      --#{$custom-property-prefix}-support-03,\n      map-get($theme, 'support-03')\n    ) !global;\n    $support-04: var(\n      --#{$custom-property-prefix}-support-04,\n      map-get($theme, 'support-04')\n    ) !global;\n    $inverse-support-01: var(\n      --#{$custom-property-prefix}-inverse-support-01,\n      map-get($theme, 'inverse-support-01')\n    ) !global;\n    $inverse-support-02: var(\n      --#{$custom-property-prefix}-inverse-support-02,\n      map-get($theme, 'inverse-support-02')\n    ) !global;\n    $inverse-support-03: var(\n      --#{$custom-property-prefix}-inverse-support-03,\n      map-get($theme, 'inverse-support-03')\n    ) !global;\n    $inverse-support-04: var(\n      --#{$custom-property-prefix}-inverse-support-04,\n      map-get($theme, 'inverse-support-04')\n    ) !global;\n    $overlay-01: var(\n      --#{$custom-property-prefix}-overlay-01,\n      map-get($theme, 'overlay-01')\n    ) !global;\n    $danger-01: var(\n      --#{$custom-property-prefix}-danger-01,\n      map-get($theme, 'danger-01')\n    ) !global;\n    $danger-02: var(\n      --#{$custom-property-prefix}-danger-02,\n      map-get($theme, 'danger-02')\n    ) !global;\n    $focus: var(\n      --#{$custom-property-prefix}-focus,\n      map-get($theme, 'focus')\n    ) !global;\n    $inverse-focus-ui: var(\n      --#{$custom-property-prefix}-inverse-focus-ui,\n      map-get($theme, 'inverse-focus-ui')\n    ) !global;\n    $hover-primary: var(\n      --#{$custom-property-prefix}-hover-primary,\n      map-get($theme, 'hover-primary')\n    ) !global;\n    $active-primary: var(\n      --#{$custom-property-prefix}-active-primary,\n      map-get($theme, 'active-primary')\n    ) !global;\n    $hover-primary-text: var(\n      --#{$custom-property-prefix}-hover-primary-text,\n      map-get($theme, 'hover-primary-text')\n    ) !global;\n    $hover-secondary: var(\n      --#{$custom-property-prefix}-hover-secondary,\n      map-get($theme, 'hover-secondary')\n    ) !global;\n    $active-secondary: var(\n      --#{$custom-property-prefix}-active-secondary,\n      map-get($theme, 'active-secondary')\n    ) !global;\n    $hover-tertiary: var(\n      --#{$custom-property-prefix}-hover-tertiary,\n      map-get($theme, 'hover-tertiary')\n    ) !global;\n    $active-tertiary: var(\n      --#{$custom-property-prefix}-active-tertiary,\n      map-get($theme, 'active-tertiary')\n    ) !global;\n    $hover-ui: var(\n      --#{$custom-property-prefix}-hover-ui,\n      map-get($theme, 'hover-ui')\n    ) !global;\n    $hover-light-ui: var(\n      --#{$custom-property-prefix}-hover-light-ui,\n      map-get($theme, 'hover-light-ui')\n    ) !global;\n    $hover-selected-ui: var(\n      --#{$custom-property-prefix}-hover-selected-ui,\n      map-get($theme, 'hover-selected-ui')\n    ) !global;\n    $active-ui: var(\n      --#{$custom-property-prefix}-active-ui,\n      map-get($theme, 'active-ui')\n    ) !global;\n    $active-light-ui: var(\n      --#{$custom-property-prefix}-active-light-ui,\n      map-get($theme, 'active-light-ui')\n    ) !global;\n    $selected-ui: var(\n      --#{$custom-property-prefix}-selected-ui,\n      map-get($theme, 'selected-ui')\n    ) !global;\n    $selected-light-ui: var(\n      --#{$custom-property-prefix}-selected-light-ui,\n      map-get($theme, 'selected-light-ui')\n    ) !global;\n    $inverse-hover-ui: var(\n      --#{$custom-property-prefix}-inverse-hover-ui,\n      map-get($theme, 'inverse-hover-ui')\n    ) !global;\n    $hover-danger: var(\n      --#{$custom-property-prefix}-hover-danger,\n      map-get($theme, 'hover-danger')\n    ) !global;\n    $active-danger: var(\n      --#{$custom-property-prefix}-active-danger,\n      map-get($theme, 'active-danger')\n    ) !global;\n    $hover-row: var(\n      --#{$custom-property-prefix}-hover-row,\n      map-get($theme, 'hover-row')\n    ) !global;\n    $visited-link: var(\n      --#{$custom-property-prefix}-visited-link,\n      map-get($theme, 'visited-link')\n    ) !global;\n    $disabled-01: var(\n      --#{$custom-property-prefix}-disabled-01,\n      map-get($theme, 'disabled-01')\n    ) !global;\n    $disabled-02: var(\n      --#{$custom-property-prefix}-disabled-02,\n      map-get($theme, 'disabled-02')\n    ) !global;\n    $disabled-03: var(\n      --#{$custom-property-prefix}-disabled-03,\n      map-get($theme, 'disabled-03')\n    ) !global;\n    $highlight: var(\n      --#{$custom-property-prefix}-highlight,\n      map-get($theme, 'highlight')\n    ) !global;\n    $decorative-01: var(\n      --#{$custom-property-prefix}-decorative-01,\n      map-get($theme, 'decorative-01')\n    ) !global;\n    $button-separator: var(\n      --#{$custom-property-prefix}-button-separator,\n      map-get($theme, 'button-separator')\n    ) !global;\n    $skeleton-01: var(\n      --#{$custom-property-prefix}-skeleton-01,\n      map-get($theme, 'skeleton-01')\n    ) !global;\n    $skeleton-02: var(\n      --#{$custom-property-prefix}-skeleton-02,\n      map-get($theme, 'skeleton-02')\n    ) !global;\n    $brand-01: var(\n      --#{$custom-property-prefix}-brand-01,\n      map-get($theme, 'brand-01')\n    ) !global;\n    $brand-02: var(\n      --#{$custom-property-prefix}-brand-02,\n      map-get($theme, 'brand-02')\n    ) !global;\n    $brand-03: var(\n      --#{$custom-property-prefix}-brand-03,\n      map-get($theme, 'brand-03')\n    ) !global;\n    $active-01: var(\n      --#{$custom-property-prefix}-active-01,\n      map-get($theme, 'active-01')\n    ) !global;\n    $hover-field: var(\n      --#{$custom-property-prefix}-hover-field,\n      map-get($theme, 'hover-field')\n    ) !global;\n    $danger: var(\n      --#{$custom-property-prefix}-danger,\n      map-get($theme, 'danger')\n    ) !global;\n    $spacing-01: var(\n      --#{$custom-property-prefix}-spacing-01,\n      map-get($theme, 'spacing-01')\n    ) !global;\n    $spacing-02: var(\n      --#{$custom-property-prefix}-spacing-02,\n      map-get($theme, 'spacing-02')\n    ) !global;\n    $spacing-03: var(\n      --#{$custom-property-prefix}-spacing-03,\n      map-get($theme, 'spacing-03')\n    ) !global;\n    $spacing-04: var(\n      --#{$custom-property-prefix}-spacing-04,\n      map-get($theme, 'spacing-04')\n    ) !global;\n    $spacing-05: var(\n      --#{$custom-property-prefix}-spacing-05,\n      map-get($theme, 'spacing-05')\n    ) !global;\n    $spacing-06: var(\n      --#{$custom-property-prefix}-spacing-06,\n      map-get($theme, 'spacing-06')\n    ) !global;\n    $spacing-07: var(\n      --#{$custom-property-prefix}-spacing-07,\n      map-get($theme, 'spacing-07')\n    ) !global;\n    $spacing-08: var(\n      --#{$custom-property-prefix}-spacing-08,\n      map-get($theme, 'spacing-08')\n    ) !global;\n    $spacing-09: var(\n      --#{$custom-property-prefix}-spacing-09,\n      map-get($theme, 'spacing-09')\n    ) !global;\n    $spacing-10: var(\n      --#{$custom-property-prefix}-spacing-10,\n      map-get($theme, 'spacing-10')\n    ) !global;\n    $spacing-11: var(\n      --#{$custom-property-prefix}-spacing-11,\n      map-get($theme, 'spacing-11')\n    ) !global;\n    $spacing-12: var(\n      --#{$custom-property-prefix}-spacing-12,\n      map-get($theme, 'spacing-12')\n    ) !global;\n    $fluid-spacing-01: var(\n      --#{$custom-property-prefix}-fluid-spacing-01,\n      map-get($theme, 'fluid-spacing-01')\n    ) !global;\n    $fluid-spacing-02: var(\n      --#{$custom-property-prefix}-fluid-spacing-02,\n      map-get($theme, 'fluid-spacing-02')\n    ) !global;\n    $fluid-spacing-03: var(\n      --#{$custom-property-prefix}-fluid-spacing-03,\n      map-get($theme, 'fluid-spacing-03')\n    ) !global;\n    $fluid-spacing-04: var(\n      --#{$custom-property-prefix}-fluid-spacing-04,\n      map-get($theme, 'fluid-spacing-04')\n    ) !global;\n    $layout-01: var(\n      --#{$custom-property-prefix}-layout-01,\n      map-get($theme, 'layout-01')\n    ) !global;\n    $layout-02: var(\n      --#{$custom-property-prefix}-layout-02,\n      map-get($theme, 'layout-02')\n    ) !global;\n    $layout-03: var(\n      --#{$custom-property-prefix}-layout-03,\n      map-get($theme, 'layout-03')\n    ) !global;\n    $layout-04: var(\n      --#{$custom-property-prefix}-layout-04,\n      map-get($theme, 'layout-04')\n    ) !global;\n    $layout-05: var(\n      --#{$custom-property-prefix}-layout-05,\n      map-get($theme, 'layout-05')\n    ) !global;\n    $layout-06: var(\n      --#{$custom-property-prefix}-layout-06,\n      map-get($theme, 'layout-06')\n    ) !global;\n    $layout-07: var(\n      --#{$custom-property-prefix}-layout-07,\n      map-get($theme, 'layout-07')\n    ) !global;\n    $container-01: var(\n      --#{$custom-property-prefix}-container-01,\n      map-get($theme, 'container-01')\n    ) !global;\n    $container-02: var(\n      --#{$custom-property-prefix}-container-02,\n      map-get($theme, 'container-02')\n    ) !global;\n    $container-03: var(\n      --#{$custom-property-prefix}-container-03,\n      map-get($theme, 'container-03')\n    ) !global;\n    $container-04: var(\n      --#{$custom-property-prefix}-container-04,\n      map-get($theme, 'container-04')\n    ) !global;\n    $container-05: var(\n      --#{$custom-property-prefix}-container-05,\n      map-get($theme, 'container-05')\n    ) !global;\n    $icon-size-01: var(\n      --#{$custom-property-prefix}-icon-size-01,\n      map-get($theme, 'icon-size-01')\n    ) !global;\n    $icon-size-02: var(\n      --#{$custom-property-prefix}-icon-size-02,\n      map-get($theme, 'icon-size-02')\n    ) !global;\n  }\n  @if $emit-custom-properties == true {\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'interactive-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'interactive-01',\n        map-get($theme, 'interactive-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'interactive-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'interactive-02',\n        map-get($theme, 'interactive-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'interactive-03',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'interactive-03',\n        map-get($theme, 'interactive-03')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'interactive-04',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'interactive-04',\n        map-get($theme, 'interactive-04')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'ui-background',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'ui-background',\n        map-get($theme, 'ui-background')\n      );\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {\n      @include custom-property('ui-01', map-get($theme, 'ui-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {\n      @include custom-property('ui-02', map-get($theme, 'ui-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {\n      @include custom-property('ui-03', map-get($theme, 'ui-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {\n      @include custom-property('ui-04', map-get($theme, 'ui-04'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {\n      @include custom-property('ui-05', map-get($theme, 'ui-05'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {\n      @include custom-property('text-01', map-get($theme, 'text-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {\n      @include custom-property('text-02', map-get($theme, 'text-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {\n      @include custom-property('text-03', map-get($theme, 'text-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {\n      @include custom-property('text-04', map-get($theme, 'text-04'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {\n      @include custom-property('text-05', map-get($theme, 'text-05'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'text-error',\n      $emit-difference\n    )\n    {\n      @include custom-property('text-error', map-get($theme, 'text-error'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {\n      @include custom-property('icon-01', map-get($theme, 'icon-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {\n      @include custom-property('icon-02', map-get($theme, 'icon-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {\n      @include custom-property('icon-03', map-get($theme, 'icon-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {\n      @include custom-property('link-01', map-get($theme, 'link-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) {\n      @include custom-property('link-02', map-get($theme, 'link-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-link',\n      $emit-difference\n    )\n    {\n      @include custom-property('inverse-link', map-get($theme, 'inverse-link'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)\n    {\n      @include custom-property('field-01', map-get($theme, 'field-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)\n    {\n      @include custom-property('field-02', map-get($theme, 'field-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('inverse-01', map-get($theme, 'inverse-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('inverse-02', map-get($theme, 'inverse-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'support-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('support-01', map-get($theme, 'support-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'support-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('support-02', map-get($theme, 'support-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'support-03',\n      $emit-difference\n    )\n    {\n      @include custom-property('support-03', map-get($theme, 'support-03'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'support-04',\n      $emit-difference\n    )\n    {\n      @include custom-property('support-04', map-get($theme, 'support-04'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-support-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-support-01',\n        map-get($theme, 'inverse-support-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-support-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-support-02',\n        map-get($theme, 'inverse-support-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-support-03',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-support-03',\n        map-get($theme, 'inverse-support-03')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-support-04',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-support-04',\n        map-get($theme, 'inverse-support-04')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'overlay-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('overlay-01', map-get($theme, 'overlay-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)\n    {\n      @include custom-property('danger-01', map-get($theme, 'danger-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)\n    {\n      @include custom-property('danger-02', map-get($theme, 'danger-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {\n      @include custom-property('focus', map-get($theme, 'focus'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-focus-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-focus-ui',\n        map-get($theme, 'inverse-focus-ui')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-primary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-primary',\n        map-get($theme, 'hover-primary')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'active-primary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'active-primary',\n        map-get($theme, 'active-primary')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-primary-text',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-primary-text',\n        map-get($theme, 'hover-primary-text')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-secondary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-secondary',\n        map-get($theme, 'hover-secondary')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'active-secondary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'active-secondary',\n        map-get($theme, 'active-secondary')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-tertiary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-tertiary',\n        map-get($theme, 'hover-tertiary')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'active-tertiary',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'active-tertiary',\n        map-get($theme, 'active-tertiary')\n      );\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)\n    {\n      @include custom-property('hover-ui', map-get($theme, 'hover-ui'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-light-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-light-ui',\n        map-get($theme, 'hover-light-ui')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-selected-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'hover-selected-ui',\n        map-get($theme, 'hover-selected-ui')\n      );\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)\n    {\n      @include custom-property('active-ui', map-get($theme, 'active-ui'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'active-light-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'active-light-ui',\n        map-get($theme, 'active-light-ui')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'selected-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'selected-light-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'selected-light-ui',\n        map-get($theme, 'selected-light-ui')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'inverse-hover-ui',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'inverse-hover-ui',\n        map-get($theme, 'inverse-hover-ui')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-danger',\n      $emit-difference\n    )\n    {\n      @include custom-property('hover-danger', map-get($theme, 'hover-danger'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'active-danger',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'active-danger',\n        map-get($theme, 'active-danger')\n      );\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)\n    {\n      @include custom-property('hover-row', map-get($theme, 'hover-row'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'visited-link',\n      $emit-difference\n    )\n    {\n      @include custom-property('visited-link', map-get($theme, 'visited-link'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'disabled-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('disabled-01', map-get($theme, 'disabled-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'disabled-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('disabled-02', map-get($theme, 'disabled-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'disabled-03',\n      $emit-difference\n    )\n    {\n      @include custom-property('disabled-03', map-get($theme, 'disabled-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)\n    {\n      @include custom-property('highlight', map-get($theme, 'highlight'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'decorative-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'decorative-01',\n        map-get($theme, 'decorative-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'button-separator',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'button-separator',\n        map-get($theme, 'button-separator')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'skeleton-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'skeleton-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)\n    {\n      @include custom-property('brand-01', map-get($theme, 'brand-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)\n    {\n      @include custom-property('brand-02', map-get($theme, 'brand-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)\n    {\n      @include custom-property('brand-03', map-get($theme, 'brand-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)\n    {\n      @include custom-property('active-01', map-get($theme, 'active-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'hover-field',\n      $emit-difference\n    )\n    {\n      @include custom-property('hover-field', map-get($theme, 'hover-field'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {\n      @include custom-property('danger', map-get($theme, 'danger'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'caption-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('caption-01', map-get($theme, 'caption-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)\n    {\n      @include custom-property('label-01', map-get($theme, 'label-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'helper-text-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'helper-text-01',\n        map-get($theme, 'helper-text-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'body-short-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'body-short-01',\n        map-get($theme, 'body-short-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'body-long-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('body-long-01', map-get($theme, 'body-long-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'body-short-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'body-short-02',\n        map-get($theme, 'body-short-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'body-long-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('body-long-02', map-get($theme, 'body-long-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {\n      @include custom-property('code-01', map-get($theme, 'code-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {\n      @include custom-property('code-02', map-get($theme, 'code-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'heading-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('heading-01', map-get($theme, 'heading-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-01',\n        map-get($theme, 'productive-heading-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'heading-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('heading-02', map-get($theme, 'heading-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-02',\n        map-get($theme, 'productive-heading-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-03',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-03',\n        map-get($theme, 'productive-heading-03')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-04',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-04',\n        map-get($theme, 'productive-heading-04')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-05',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-05',\n        map-get($theme, 'productive-heading-05')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-06',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-06',\n        map-get($theme, 'productive-heading-06')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'productive-heading-07',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'productive-heading-07',\n        map-get($theme, 'productive-heading-07')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-01',\n        map-get($theme, 'expressive-heading-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-02',\n        map-get($theme, 'expressive-heading-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-03',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-03',\n        map-get($theme, 'expressive-heading-03')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-04',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-04',\n        map-get($theme, 'expressive-heading-04')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-05',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-05',\n        map-get($theme, 'expressive-heading-05')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-heading-06',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-heading-06',\n        map-get($theme, 'expressive-heading-06')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'expressive-paragraph-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'expressive-paragraph-01',\n        map-get($theme, 'expressive-paragraph-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'quotation-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('quotation-01', map-get($theme, 'quotation-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'quotation-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('quotation-02', map-get($theme, 'quotation-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'display-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('display-01', map-get($theme, 'display-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'display-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('display-02', map-get($theme, 'display-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'display-03',\n      $emit-difference\n    )\n    {\n      @include custom-property('display-03', map-get($theme, 'display-03'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'display-04',\n      $emit-difference\n    )\n    {\n      @include custom-property('display-04', map-get($theme, 'display-04'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-01', map-get($theme, 'spacing-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-02', map-get($theme, 'spacing-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-03',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-03', map-get($theme, 'spacing-03'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-04',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-04', map-get($theme, 'spacing-04'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-05',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-05', map-get($theme, 'spacing-05'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-06',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-06', map-get($theme, 'spacing-06'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-07',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-07', map-get($theme, 'spacing-07'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-08',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-08', map-get($theme, 'spacing-08'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-09',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-09', map-get($theme, 'spacing-09'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-10',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-10', map-get($theme, 'spacing-10'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-11',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-11', map-get($theme, 'spacing-11'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'spacing-12',\n      $emit-difference\n    )\n    {\n      @include custom-property('spacing-12', map-get($theme, 'spacing-12'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'fluid-spacing-01',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'fluid-spacing-01',\n        map-get($theme, 'fluid-spacing-01')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'fluid-spacing-02',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'fluid-spacing-02',\n        map-get($theme, 'fluid-spacing-02')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'fluid-spacing-03',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'fluid-spacing-03',\n        map-get($theme, 'fluid-spacing-03')\n      );\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'fluid-spacing-04',\n      $emit-difference\n    )\n    {\n      @include custom-property(\n        'fluid-spacing-04',\n        map-get($theme, 'fluid-spacing-04')\n      );\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)\n    {\n      @include custom-property('layout-01', map-get($theme, 'layout-01'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)\n    {\n      @include custom-property('layout-02', map-get($theme, 'layout-02'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)\n    {\n      @include custom-property('layout-03', map-get($theme, 'layout-03'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)\n    {\n      @include custom-property('layout-04', map-get($theme, 'layout-04'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)\n    {\n      @include custom-property('layout-05', map-get($theme, 'layout-05'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)\n    {\n      @include custom-property('layout-06', map-get($theme, 'layout-06'));\n    }\n\n    @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)\n    {\n      @include custom-property('layout-07', map-get($theme, 'layout-07'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'container-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('container-01', map-get($theme, 'container-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'container-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('container-02', map-get($theme, 'container-02'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'container-03',\n      $emit-difference\n    )\n    {\n      @include custom-property('container-03', map-get($theme, 'container-03'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'container-04',\n      $emit-difference\n    )\n    {\n      @include custom-property('container-04', map-get($theme, 'container-04'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'container-05',\n      $emit-difference\n    )\n    {\n      @include custom-property('container-05', map-get($theme, 'container-05'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'icon-size-01',\n      $emit-difference\n    )\n    {\n      @include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));\n    }\n\n    @if should-emit(\n      $theme,\n      $parent-carbon-theme,\n      'icon-size-02',\n      $emit-difference\n    )\n    {\n      @include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));\n    }\n  }\n\n  @content;\n\n  // Reset to default theme after apply in content\n  @if $carbon--theme != $parent-carbon-theme {\n    $carbon--theme: $parent-carbon-theme !global;\n\n    @include carbon--theme();\n  }\n}\n"],sourceRoot:""}]),o.locals={productiveHeading01:"-esm-active-visits__active-visits__productiveHeading01___5dzOt",productiveHeading02:"-esm-active-visits__active-visits__productiveHeading02___-o9Tn",bodyLong01:"-esm-active-visits__active-visits__bodyLong01___xwAEE",caption01:"-esm-active-visits__active-visits__caption01___e7sSC",bodyShort02:"-esm-active-visits__active-visits__bodyShort02___BiPkR",text02:"-esm-active-visits__active-visits__text02___lkEHs",text01:"-esm-active-visits__active-visits__text01___iTf3H",activeVisitsContainer:"-esm-active-visits__active-visits__activeVisitsContainer___XAE0K",activeVisitsDetailHeaderContainer:"-esm-active-visits__active-visits__activeVisitsDetailHeaderContainer___pjwhu",backgroundDataFetchingIndicator:"-esm-active-visits__active-visits__backgroundDataFetchingIndicator___YszBc",tableContainer:"-esm-active-visits__active-visits__tableContainer___27wfu",pagination:"-esm-active-visits__active-visits__pagination___h8NbE",emptyRow:"-esm-active-visits__active-visits__emptyRow___jKDsj",visitSummaryContainer:"-esm-active-visits__active-visits__visitSummaryContainer___mBkXn",expandedActiveVisitRow:"-esm-active-visits__active-visits__expandedActiveVisitRow___ONSwO",action:"-esm-active-visits__active-visits__action___Kn0CE",content:"-esm-active-visits__active-visits__content___hF3rN",desktopHeading:"-esm-active-visits__active-visits__desktopHeading___3cKg8",tabletHeading:"-esm-active-visits__active-visits__tabletHeading___vrNoH",tile:"-esm-active-visits__active-visits__tile___OJ1Dy"};const p=o},2221:(e,n,t)=>{t.r(n),t.d(n,{default:()=>X});var i=t(9902),a=t.n(i),r=t(8580),o=t(182),p=t(6069),s=t(160),c=t(9034),l=t(5746),m=t(4750),h=t(364),g=t(7500),d=t(8804),u=t(8117),$=t(1358),f=t(2427),b=t(318),v=t(3783),y=t(448),x=t(8306),_=t(3066),A=t(4924),k=function(e){var n=e.width,t=void 0===n?"61":n,i=e.height,r=void 0===i?"59":i;return a().createElement("svg",{width:t,height:r,viewBox:"0 0 61 59"},a().createElement("title",null,"Empty data illustration"),a().createElement("g",{fill:"none",fillRule:"evenodd"},a().createElement("path",{d:"M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z",fill:"#F4F4F4"}),a().createElement("path",{d:"M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z",fill:"#8D8D8D"}),a().createElement("path",{d:"M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z",fill:"#C6C6C6"}),a().createElement("circle",{fill:"#C6C6C6",cx:17.636,cy:2.314,r:1.855}),a().createElement("circle",{fill:"#FFF",fillRule:"nonzero",cx:17.636,cy:2.314,r:1.175}),a().createElement("path",{d:"M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z",fill:"#F4F4F4"}),a().createElement("path",{d:"M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z",fill:"#8D8D8D"}),a().createElement("path",{d:"M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z",fill:"#C6C6C6"}),a().createElement("circle",{fill:"#C6C6C6",cx:40.218,cy:9.755,r:1.855}),a().createElement("circle",{fill:"#FFF",fillRule:"nonzero",cx:40.218,cy:9.755,r:1.13})))},w=t(9857),C=t(3565),z=t.n(C),B=t(6824),E=t.n(B),L=t(6635);z().extend(E());var D=t(6062),H=t.n(D),M=t(4036),S=t.n(M),q=t(6793),T=t.n(q),F=t(7892),V=t.n(F),N=t(1173),I=t.n(N),O=t(2464),j=t.n(O),R=t(7935),Z={};Z.styleTagTransform=j(),Z.setAttributes=V(),Z.insert=T().bind(null,"head"),Z.domAPI=S(),Z.insertStyleElement=I(),H()(R.Z,Z);const P=R.Z&&R.Z.locals?R.Z.locals:void 0;function G(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=new Array(n);t<n;t++)i[t]=e[t];return i}function U(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function K(){return K=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},K.apply(this,arguments)}function Y(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 i,a,r=[],o=!0,p=!1;try{for(t=t.call(e);!(o=(i=t.next()).done)&&(r.push(i.value),!n||r.length!==n);o=!0);}catch(e){p=!0,a=e}finally{try{o||null==t.return||t.return()}finally{if(p)throw a}}return r}}(e,n)||function(e,n){if(e){if("string"==typeof e)return G(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)?G(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.")}()}var W=function(e){var n=e.from,t=e.to,i=e.children;return a().createElement("a",{onClick:function(e){return i=t,e.preventDefault(),(0,_.navigate)({to:i}),void localStorage.setItem("fromPage",n);var i},href:(0,_.interpolateUrl)(t)},i)};const X=function(){var e,n,t,C,B=(0,A.useTranslation)().t,E=(0,_.useConfig)(),D=(0,_.useLayoutType)(),H=function(){var e,n,t=(0,_.useSession)(),i=z()().format("YYYY-MM-DD"),a=null==t||null===(e=t.sessionLocation)||void 0===e?void 0:e.uuid,r="/ws/rest/v1/visit?includeInactive=false&v=".concat("custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime)&fromStartDate="+i+"&location="+a),o=(0,w.ZP)(a?r:null,_.openmrsFetch),p=o.data,s=o.error,c=o.isValidating;return{activeVisits:(null==p||null===(n=p.data)||void 0===n?void 0:n.results.length)?p.data.results.map((function(e){var n,t,i,a,r,o,p,s,c,l,m;return{age:null==e||null===(n=e.patient)||void 0===n||null===(t=n.person)||void 0===t?void 0:t.age,id:e.uuid,idNumber:null===(a=null==e||null===(i=e.patient)||void 0===i?void 0:i.identifiers[0])||void 0===a?void 0:a.identifier,gender:null==e||null===(r=e.patient)||void 0===r||null===(o=r.person)||void 0===o?void 0:o.gender,location:null==e||null===(p=e.location)||void 0===p?void 0:p.uuid,name:null==e||null===(s=e.patient)||void 0===s||null===(c=s.person)||void 0===c?void 0:c.display,patientUuid:null==e||null===(l=e.patient)||void 0===l?void 0:l.uuid,visitStartTime:null==e?void 0:e.startDatetime,visitType:null==e||null===(m=e.visitType)||void 0===m?void 0:m.display,visitUuid:e.uuid}})).filter((function(e){var n=e.visitStartTime;return z()(n).isToday()})):[],isLoading:!p&&!s,isError:s,isValidating:c}}(),M=H.activeVisits,S=(H.isError,H.isLoading),q=H.isValidating,T="desktop"===D,F=null!==(t=null==E||null===(e=E.activeVisits)||void 0===e?void 0:e.pageSizes)&&void 0!==t?t:[10,20,30,40,50],V=Y((0,i.useState)(null!==(C=null==E||null===(n=E.activeVisits)||void 0===n?void 0:n.pageSize)&&void 0!==C?C:10),2),N=V[0],I=V[1],O=Y((0,i.useState)(""),2),j=O[0],R=O[1],Z=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:"").split("/");return(0,L.last)(e)}(window.location.pathname),G=(0,i.useMemo)((function(){return[{id:0,header:B("visitStartTime","Visit Time"),key:"visitStartTime"},{id:1,header:B("idNumber","ID Number"),key:"idNumber"},{id:2,header:B("name","Name"),key:"name"},{id:3,header:B("gender","Gender"),key:"gender"},{id:4,header:B("age","Age"),key:"age"},{id:5,header:B("visitType","Visit Type"),key:"visitType"}]}),[B]),X=M.map((function(e){return function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(n){U(e,n,t[n])}))}return e}({},e,{visitStartTime:(0,_.formatDatetime)((0,_.parseDate)(e.visitStartTime))})})),J=(0,i.useMemo)((function(){if(j&&""!==j.trim()){var e=j.toLowerCase();return X.filter((function(n){return Object.keys(n).some((function(t){return"patientUuid"!==t&&"".concat(n[t]).toLowerCase().includes(e)}))}))}return X}),[j,X]),Q=(0,_.usePagination)(J,N),ee=Q.goTo,ne=Q.results,te=Q.currentPage,ie=(0,i.useCallback)((function(e){return R(e.target.value)}),[]);return(0,i.useEffect)((function(){1!==te&&ee(1)}),[j]),S?a().createElement(r.Z,{role:"progressbar"}):(null==M?void 0:M.length)?a().createElement("div",{className:P.activeVisitsContainer},a().createElement("div",{className:P.activeVisitsDetailHeaderContainer},a().createElement("div",{className:T?P.desktopHeading:P.tabletHeading},a().createElement("h4",null,B("activeVisits","Active Visits"))),a().createElement("div",{className:P.backgroundDataFetchingIndicator},a().createElement("span",null,q?a().createElement(o.Z,null):null))),a().createElement(p.ZP,{rows:ne,headers:G,size:T?"compact":"normal",useZebraStyles:!0},(function(e){var n=e.rows,t=e.headers,i=e.getHeaderProps,r=e.getTableProps,o=e.getBatchActionProps,p=e.getRowProps;return a().createElement(s.Z,{className:P.tableContainer},a().createElement(c.Z,null,a().createElement(l.Z,null,a().createElement(m.Z,{tabIndex:o().shouldShowBatchActions?-1:0,labelText:"",placeholder:B("filterTable","Filter table"),onChange:ie}))),a().createElement(h.Z,K({className:P.activeVisitsTable},r()),a().createElement(g.Z,null,a().createElement(d.Z,null,a().createElement(u.Z,null),t.map((function(e){return a().createElement($.Z,K({},i({header:e})),e.header)})))),a().createElement(f.Z,null,n.map((function(e,n){var i,r;return a().createElement(a().Fragment,{key:n},a().createElement(b.Z,K({},p({row:e})),e.cells.map((function(e){var t;return a().createElement(v.Z,{key:e.id},"name"===e.info.header?a().createElement(W,{from:Z,to:"${openmrsSpaBase}/patient/".concat(null==ne||null===(t=ne[n])||void 0===t?void 0:t.patientUuid,"/chart/")},e.value):e.value)}))),e.isExpanded?a().createElement(d.Z,{className:P.expandedActiveVisitRow},a().createElement("th",{colSpan:t.length+2},a().createElement(_.ExtensionSlot,{className:P.visitSummaryContainer,extensionSlotName:"visit-summary-slot",state:{visitUuid:null===(i=ne[n])||void 0===i?void 0:i.visitUuid,patientUuid:null===(r=ne[n])||void 0===r?void 0:r.patientUuid}}))):a().createElement("div",null))})))),0===n.length&&a().createElement("p",{style:{height:T?"2rem":"3rem",marginLeft:T?"2rem":"3rem"},className:"".concat(P.emptyRow," ").concat(P.bodyLong01)},B("noVisitsFound","No visits found")),a().createElement(y.Z,{forwardText:"Next page",backwardText:"Previous page",page:te,pageSize:N,pageSizes:F,totalItems:J.length,className:P.pagination,onChange:function(e){var n=e.pageSize,t=e.page;n!==N&&I(n),t!==te&&ee(t)}}))}))):a().createElement("div",{className:P.activeVisitsContainer},a().createElement(x.n9,{light:!0,className:P.tile},a().createElement("div",{className:T?P.desktopHeading:P.tabletHeading},a().createElement("h4",null,B("activeVisits","Active Visits"))),a().createElement(k,null),a().createElement("p",{className:P.content},B("noActiveVisitsForLocation","There are no active visits to display for this location."))))}}}]);
-//# sourceMappingURL=221.js.map