@thecb/components 5.8.1-beta.4 → 5.8.1-beta.5

package/dist/index.esm.js

@@ -40698,7 +40698,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var Obligation = function Obligation(_ref) {
-  var _obligation$customAtt, _obligation$descripti, _obligation$subDescri;
+  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
 
   var config = _ref.config,
       obligations = _ref.obligations,
@@ -40722,21 +40722,30 @@ var Obligation = function Obligation(_ref) {
       inactiveLookupInput = _ref$inactiveLookupIn === void 0 ? "Account" : _ref$inactiveLookupIn,
       _ref$inactiveLookupVa = _ref.inactiveLookupValue,
       inactiveLookupValue = _ref$inactiveLookupVa === void 0 ? "" : _ref$inactiveLookupVa;
-  var obligation = obligations[0];
-  var customAttributes = (_obligation$customAtt = obligation === null || obligation === void 0 ? void 0 : obligation.customAttributes) !== null && _obligation$customAtt !== void 0 ? _obligation$customAtt : {};
+
+  /*
+    The value of obligations is always an array. It can contain:
+      - A single obligation
+      - A group of obligations (a "collection")
+    
+    The top level desc/subdesc for all obligations in a collection is the same
+    (Collection accounts look different in the Account Details page)
+  */
+  var firstObligation = obligations[0];
+  var customAttributes = (_firstObligation$cust = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.customAttributes) !== null && _firstObligation$cust !== void 0 ? _firstObligation$cust : {};
   var boxShadowValue = "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
   var activeObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     boxShadow: boxShadowValue,
     as: "section",
-    "aria-label": "".concat((_obligation$descripti = obligation === null || obligation === void 0 ? void 0 : obligation.description) !== null && _obligation$descripti !== void 0 ? _obligation$descripti : "account", " ").concat((_obligation$subDescri = obligation === null || obligation === void 0 ? void 0 : obligation.subDescription) !== null && _obligation$subDescri !== void 0 ? _obligation$subDescri : obligationAssocID)
+    "aria-label": "".concat((_firstObligation$desc = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description) !== null && _firstObligation$desc !== void 0 ? _firstObligation$desc : "account", " ").concat((_firstObligation$subD = firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription) !== null && _firstObligation$subD !== void 0 ? _firstObligation$subD : obligationAssocID)
   }, /*#__PURE__*/React.createElement(Box, {
     background: WHITE
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(obligations === null || obligations === void 0 ? void 0 : obligations[0].id, "-top"),
+    key: "".concat(firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.id, "-top"),
     padding: "0 8px",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {
@@ -40756,8 +40765,8 @@ var Obligation = function Obligation(_ref) {
     iconValue: config.iconValue,
     customAttributes: customAttributes
   }), /*#__PURE__*/React.createElement(TitleModule, {
-    title: obligation === null || obligation === void 0 ? void 0 : obligation.description,
-    subtitle: obligation === null || obligation === void 0 ? void 0 : obligation.subDescription,
+    title: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.description,
+    subtitle: firstObligation === null || firstObligation === void 0 ? void 0 : firstObligation.subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
   }))), !isMobile && /*#__PURE__*/React.createElement(AmountModule, {