@thecb/components 5.8.1-beta.3 → 5.8.1-beta.6

package/dist/index.esm.js

@@ -40367,7 +40367,7 @@ var AutopayModal = function AutopayModal(_ref) {
               toggleModal(true);
             },
             dataQa: "Turn off Autopay",
-            extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+            extraStyles: isMobile ? "flex-grow: 1; width: 100%;" : "margin: 0px"
           });
         }
 
@@ -40639,7 +40639,8 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     border: isMobile ? "1px solid ".concat(GHOST_GREY) : "0px",
     borderWidthOverride: isMobile ? "1px 0 0 0" : "0px"
   }, /*#__PURE__*/React.createElement(Cluster, {
-    childGap: isMobile ? "8px" : "18px"
+    childGap: isMobile ? "8px" : "16px",
+    nowrap: true
   }, autoPayEnabled && /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
@@ -40664,7 +40665,7 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     text: "Remove",
     action: handleRemoveAccount,
     dataQa: "Remove Account",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    extraStyles: isMobile ? "flex-grow: 1; width: 100%;" : "margin: 0px;"
   }))));
 };
 
@@ -40698,7 +40699,7 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
 };
 
 var Obligation = function Obligation(_ref) {
-  var _obligation$customAtt;
+  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
 
   var config = _ref.config,
       obligations = _ref.obligations,
@@ -40722,21 +40723,31 @@ 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.description, " ").concat(obligation.subDescription)
+    "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
+    background: WHITE,
+    padding: "24px 16px"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(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,12 +40767,12 @@ var Obligation = function Obligation(_ref) {
     iconValue: config.iconValue,
     customAttributes: customAttributes
   }), /*#__PURE__*/React.createElement(TitleModule, {
-    title: obligation.description,
-    subtitle: 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, {
-    totalAmountDue: obligations.reduce(function (acc, curr) {
+    totalAmountDue: obligations === null || obligations === void 0 ? void 0 : obligations.reduce(function (acc, curr) {
       return acc + curr.amountDue;
     }, 0),
     autoPayEnabled: autoPayEnabled,
@@ -40812,7 +40823,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(obligations[0].id, "-top"),
+    key: "".concat(obligationAssocID, "-top"),
     padding: "0 8px",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {