@thecb/components 5.9.1 → 5.10.0

package/dist/index.esm.js

@@ -5892,25 +5892,34 @@ var AQUA_HAZE_WHITE = "#F7F9FA";
 var BLEACH_WHITE = "#FEF4d7";
 var CATSKILL_WHITE = "#EAF2F6"; // GREY
 
-var ATHENS_GREY = "#F6F6F9";
+var ATHENS_GREY = "#F6F6F9"; // CBS-100
+
 var ALTO_GREY = "#d1d1d1";
 var SILVER_GREY = "#cdcdcd";
 var PEWTER_GREY = "#DFE1E4";
 var ASH_GREY = "#979797";
 var IRON_GREY = "#d5d8dc";
-var GHOST_GREY = "#CACED8";
+var GHOST_GREY = "#CACED8"; // CBS-300
+
 var DUSTY_GREY = "#9B9B9B";
 var REGENT_GREY = "#959EA7";
-var STORM_GREY = "#6D717E";
+var STORM_GREY = "#6D717E"; // CBS-700
+
 var TROUT_GREY = "#515660";
 var MINESHAFT_GREY = "#333333";
 var SOOT_GREY = "#999999";
 var FIREFLY_GREY = "#091325";
-var BRIGHT_GREY = "#3B414D";
-var CHARADE_GREY = "#292A33";
-var GRECIAN_GREY = "#E5E7EC";
+var BRIGHT_GREY = "#3B414D"; // CBS-800
+
+var CHARADE_GREY = "#292A33"; // CBS-900
+
+var GRECIAN_GREY = "#E5E7EC"; // CBS-200
+
 var BLACK_SQUEEZE = "#EAF2F7";
-var GREY_CHATEAU = "#959CA8"; // BLUE
+var GREY_CHATEAU = "#959CA8"; // CBS-500
+
+var COOL_GREY_05 = "#fbfcfd"; // CBS-050
+// BLUE
 
 var CLOUDBURST_BLUE = "#26395c";
 var ZODIAC_BLUE = "#14284b";
@@ -5944,7 +5953,7 @@ var MUSTARD_YELLOW = "#FFD459";
 var FIRE_YELLOW = "#B34A00"; // ORANGE
 
 var CARROT_ORANGE = "#ED9620";
-var ZEST_ORANGE = "#F47820";
+var ZEST_ORANGE = "#B84A00";
 var APRICOT_ORANGE = "#FFE8D8"; // RED
 
 var RED = "#FF0000";
@@ -6014,6 +6023,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BRIGHT_GREY: BRIGHT_GREY,
   CHARADE_GREY: CHARADE_GREY,
   GRECIAN_GREY: GRECIAN_GREY,
+  COOL_GREY_05: COOL_GREY_05,
   BLACK_SQUEEZE: BLACK_SQUEEZE,
   GREY_CHATEAU: GREY_CHATEAU,
   CLOUDBURST_BLUE: CLOUDBURST_BLUE,
@@ -6061,7 +6071,7 @@ var colors = /*#__PURE__*/Object.freeze({
 var TextSpan = qe.span.withConfig({
   displayName: "Textstyled__TextSpan",
   componentId: "sc-1oy97we-0"
-})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
+})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
   var fontSize = _ref.fontSize;
   return fontSize;
 }, function (_ref2) {
@@ -6074,14 +6084,17 @@ var TextSpan = qe.span.withConfig({
   var color = _ref4.color;
   return color;
 }, function (_ref5) {
-  var hoverStyles = _ref5.hoverStyles;
+  var $textWrap = _ref5.$textWrap;
+  return $textWrap ? "initial" : "nowrap";
+}, function (_ref6) {
+  var hoverStyles = _ref6.hoverStyles;
   return Ae(["", ""], hoverStyles);
-}, ROYAL_BLUE, function (_ref6) {
-  var disabled = _ref6.disabled,
-      disabledStyles = _ref6.disabledStyles;
+}, ROYAL_BLUE, function (_ref7) {
+  var disabled = _ref7.disabled,
+      disabledStyles = _ref7.disabledStyles;
   return disabled && Ae(["", ""], disabledStyles);
-}, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
+}, function (_ref8) {
+  var extraStyles = _ref8.extraStyles;
   return extraStyles;
 });
 
@@ -7207,7 +7220,7 @@ var general = /*#__PURE__*/Object.freeze({
   screenReaderOnlyStyle: screenReaderOnlyStyle
 });
 
-var _excluded$1 = ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
+var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
 
 var Text = function Text(_ref) {
   var themeValues = _ref.themeValues,
@@ -7215,6 +7228,8 @@ var Text = function Text(_ref) {
       weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
+      _ref$textWrap = _ref.textWrap,
+      textWrap = _ref$textWrap === void 0 ? true : _ref$textWrap,
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
@@ -7235,7 +7250,8 @@ var Text = function Text(_ref) {
     hoverStyles: hoverStyles,
     onClick: onClick,
     onKeyPress: onKeyPress,
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    $textWrap: textWrap
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
@@ -7279,13 +7295,14 @@ var BoxWrapper = qe(function (_ref) {
 }).withConfig({
   displayName: "Boxstyled__BoxWrapper",
   componentId: "sc-1f9ij0d-0"
-})(["position:relative;box-sizing:border-box;padding:", ";border:", ";box-shadow:", ";background-color:", ";min-height:", ";", " min-width:", ";max-width:", ";color:", ";border-radius:", ";border-width:", ";border:", ";text-align:", ";&:hover{", "}&:focus{", "}&:active{", "}&:disabled{", "}& *{color:", ";}", " ", ""], function (_ref2) {
+})(["position:relative;box-sizing:border-box;padding:", ";border:", ";box-shadow:", ";background-color:", ";min-height:", ";", " min-width:", ";max-width:", ";color:", ";border-radius:", ";border-width:", ";text-align:", ";&:hover{", "}&:focus{", "}&:active{", "}&:disabled{", "}& *{color:", ";}", " ", ""], function (_ref2) {
   var padding = _ref2.padding;
   return padding;
 }, function (_ref3) {
-  var borderSize = _ref3.borderSize,
+  var border = _ref3.border,
+      borderSize = _ref3.borderSize,
       borderColor = _ref3.borderColor;
-  return "".concat(borderSize, " solid ").concat(borderColor);
+  return border ? border : "".concat(borderSize, " solid ").concat(borderColor);
 }, function (_ref4) {
   var boxShadow = _ref4.boxShadow;
   return boxShadow;
@@ -7311,38 +7328,34 @@ var BoxWrapper = qe(function (_ref) {
   var borderRadius = _ref11.borderRadius;
   return borderRadius;
 }, function (_ref12) {
-  var borderWidthOverride = _ref12.borderWidthOverride,
-      borderSize = _ref12.borderSize;
-  return borderWidthOverride ? borderWidthOverride : borderSize;
+  var borderWidthOverride = _ref12.borderWidthOverride;
+  return borderWidthOverride;
 }, function (_ref13) {
-  var border = _ref13.border;
-  return border;
-}, function (_ref14) {
-  var textAlign = _ref14.textAlign;
+  var textAlign = _ref13.textAlign;
   return textAlign;
-}, function (_ref15) {
-  var hoverStyles = _ref15.hoverStyles,
-      as = _ref15.as;
+}, function (_ref14) {
+  var hoverStyles = _ref14.hoverStyles,
+      as = _ref14.as;
   return Ae(["", " ", ""], hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref16) {
-  var as = _ref16.as;
+}, function (_ref15) {
+  var as = _ref15.as;
   return Ae(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+}, function (_ref16) {
+  var activeStyles = _ref16.activeStyles,
+      as = _ref16.as;
+  return Ae(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
-  var activeStyles = _ref17.activeStyles,
+  var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return Ae(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref18) {
-  var disabledStyles = _ref18.disabledStyles,
-      as = _ref18.as;
   return Ae(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref19) {
-  var color = _ref19.color;
+}, function (_ref18) {
+  var color = _ref18.color;
   return color;
-}, function (_ref20) {
-  var hiddenStyles = _ref20.hiddenStyles;
+}, function (_ref19) {
+  var hiddenStyles = _ref19.hiddenStyles;
   return hiddenStyles && Ae(["display:none;"]);
-}, function (_ref21) {
-  var extraStyles = _ref21.extraStyles;
+}, function (_ref20) {
+  var extraStyles = _ref20.extraStyles;
   return Ae(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
@@ -7500,8 +7513,8 @@ var ClusterInnerWrapper = qe.div.withConfig({
   displayName: "Clusterstyled__ClusterInnerWrapper",
   componentId: "sc-1dkqsm7-1"
 })(["box-sizing:border-box;display:flex;flex-wrap:", ";justify-content:", ";align-items:", ";margin:calc(", " / 2 * -1);min-height:", ";min-width:", ";> *{margin:calc(", " / 2);}"], function (_ref7) {
-  var nowrap = _ref7.nowrap;
-  return nowrap ? "nowrap" : "wrap";
+  var $nowrap = _ref7.$nowrap;
+  return $nowrap ? "nowrap" : "wrap";
 }, function (_ref8) {
   var justify = _ref8.justify;
   return justify;
@@ -7561,7 +7574,7 @@ var Cluster = function Cluster(_ref) {
     childGap: childGap,
     minHeight: minHeight,
     minWidth: minWidth,
-    nowrap: nowrap
+    $nowrap: nowrap
   }, safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null))));
 };
 
@@ -13568,7 +13581,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
   }))))));
 };
 
-var _excluded$h = ["action", "variant", "text", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children"];
+var _excluded$h = ["action", "variant", "text", "textWrap", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children"];
 var rotate$1 = posed.div({
   fixed: {
     rotate: "0deg"
@@ -13625,6 +13638,8 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
       _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
       text = _ref2.text,
+      _ref2$textWrap = _ref2.textWrap,
+      textWrap = _ref2$textWrap === void 0 ? false : _ref2$textWrap,
       _ref2$isLoading = _ref2.isLoading,
       isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
       _ref2$dataQa = _ref2.dataQa,
@@ -13669,6 +13684,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
+    textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
 };
@@ -14849,8 +14865,7 @@ var TimeoutImage = function TimeoutImage() {
   })))));
 };
 
-var AutopayOnIcon = function AutopayOnIcon(_ref) {
-  var themeValues = _ref.themeValues;
+var AutopayOnIcon = function AutopayOnIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
@@ -14863,14 +14878,12 @@ var AutopayOnIcon = function AutopayOnIcon(_ref) {
     strokeWidth: "1"
   }, /*#__PURE__*/React.createElement("path", {
     className: "autopayIcon",
-    fill: themeValues.primaryColor,
+    fill: SEA_GREEN,
     fillRule: "nonzero",
     d: "M1.898 5.75c.079 0 .141-.02.188-.059a.281.281 0 00.094-.152 3.825 3.825 0 011.394-2.144A3.838 3.838 0 016 2.563c.5 0 .98.09 1.441.27.461.179.88.44 1.254.784l-.984.985A.542.542 0 007.547 5c0 .156.055.29.164.398.11.11.242.165.398.165h3.141c.156 0 .289-.055.398-.165A.542.542 0 0011.812 5V1.86a.542.542 0 00-.164-.399.542.542 0 00-.398-.164.542.542 0 00-.398.164l-.844.844A5.699 5.699 0 006 .688c-.938 0-1.809.207-2.613.62-.805.415-1.48.981-2.028 1.7A5.726 5.726 0 00.281 5.422a.265.265 0 00.059.223c.055.07.129.105.222.105h1.336zM6 12.312c.937 0 1.809-.207 2.613-.62a5.919 5.919 0 002.028-1.7 5.726 5.726 0 001.078-2.414.265.265 0 00-.059-.223.267.267 0 00-.223-.105h-1.335c-.079 0-.141.02-.188.059a.281.281 0 00-.094.152 3.825 3.825 0 01-1.394 2.144c-.711.555-1.52.833-2.426.833-.5 0-.98-.09-1.441-.27a3.985 3.985 0 01-1.254-.785l.984-.985A.542.542 0 004.453 8a.542.542 0 00-.164-.398.542.542 0 00-.398-.164H.75a.542.542 0 00-.398.164A.542.542 0 00.187 8v3.14c0 .157.055.29.165.4.109.108.242.163.398.163.156 0 .29-.055.398-.164l.844-.844A5.699 5.699 0 006 12.312z"
   })));
 };
 
-var AutopayOnIcon$1 = themeComponent(AutopayOnIcon, "Icons", fallbackValues$2, "primary");
-
 var NotFoundIcon = function NotFoundIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "548px",
@@ -17034,7 +17047,7 @@ var Title = function Title(_ref) {
 
 var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
 
-var color$3 = "#15749D";
+var color$3 = "#292A33";
 var fallbackValues$6 = {
   color: color$3
 };
@@ -18001,6 +18014,7 @@ var ExternalLink = function ExternalLink(_ref) {
       variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
+      dataQa = _ref.dataQa,
       children = _ref.children;
   var themeContext = useContext(Me);
   var themeValues = createThemeValues(themeContext, fallbackValues$9, "Link", variant);
@@ -18016,7 +18030,8 @@ var ExternalLink = function ExternalLink(_ref) {
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
     extrastyles: extraStyles,
-    rel: newTab ? "noopener" : ""
+    rel: newTab ? "noopener" : "",
+    "data-qa": dataQa
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
@@ -18086,6 +18101,7 @@ var InternalLink = function InternalLink(_ref) {
       margin = _ref.margin,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
+      dataQa = _ref.dataQa,
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
   var themeContext = useContext(Me);
@@ -18102,7 +18118,8 @@ var InternalLink = function InternalLink(_ref) {
     hoverColor: themeValues.hoverColor,
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
-    extrastyles: extraStyles
+    extrastyles: extraStyles,
+    "data-qa": dataQa
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
@@ -19715,7 +19732,7 @@ _curry2(function test(pattern, str) {
 
 var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
 
-var _excluded$m = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab"];
+var _excluded$m = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
@@ -19728,6 +19745,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       linkExtraStyles = _ref.linkExtraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
+      dataQa = _ref.dataQa,
       otherProps = _objectWithoutProperties(_ref, _excluded$m);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
@@ -19735,6 +19753,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
         url = _ref2.url,
         disabled = _ref2.disabled,
         newTab = _ref2.newTab,
+        dataQa = _ref2.dataQa,
         extraStyles = _ref2.extraStyles;
 
     if (disabled) {
@@ -19745,10 +19764,12 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       href: url,
       tabIndex: "-1",
       newTab: newTab,
-      extraStyles: extraStyles
+      extraStyles: extraStyles,
+      dataQa: dataQa
     }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))) : /*#__PURE__*/React.createElement(InternalLink, {
       to: url,
       tabIndex: "-1",
+      dataQa: dataQa,
       extraStyles: extraStyles
     }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
   };
@@ -19757,7 +19778,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     url: url,
     disabled: disabled,
     newTab: newTab,
-    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }")
+    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }"),
+    dataQa: dataQa
   }, /*#__PURE__*/React.createElement(ButtonWithAction, _extends({}, otherProps, {
     extraStyles: extraStyles
   })));
@@ -23169,7 +23191,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
       dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React.createElement(Link, {
     to: destination,
-    dataQa: dataQa
+    "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minHeight: "100%",
@@ -40323,15 +40345,19 @@ var AutopayModal = function AutopayModal(_ref) {
       modalOpen = _ref.modalOpen,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      buttonLinkType = _ref.buttonLinkType,
+      _ref$controlType = _ref.controlType,
+      controlType = _ref$controlType === void 0 ? "tertiary" : _ref$controlType,
       isMobile = _ref.isMobile,
       themeValues = _ref.themeValues,
       isPaymentPlan = _ref.isPaymentPlan,
-      nextAutopayDate = _ref.nextAutopayDate;
+      nextAutopayDate = _ref.nextAutopayDate,
+      dueDate = _ref.dueDate,
+      inactive = _ref.inactive;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  var nextDate = dueDate || nextAutopayDate;
   var modalExtraProps = {
     modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? You will need to manually make your next payment.") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
     continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
@@ -40342,6 +40368,67 @@ var AutopayModal = function AutopayModal(_ref) {
   var hoverStyles = "\n  &:hover {\n    .autopayIcon { fill: ".concat(themeValues.hoverColor, "; text-decoration: underline; cursor: pointer; }\n  }");
   var activeStyles = "\n   &:active {\n    .autopayIcon { fill: ".concat(themeValues.activeColor, "; text-decoration: underline; }\n    }");
   var defaultStyles = "\n    .autopayIcon { fill: ".concat(themeValues.color, "; text-decoration: underline; }\n     ");
+
+  var renderAutoPayControl = function renderAutoPayControl() {
+    switch (controlType) {
+      case "secondary":
+        {
+          return /*#__PURE__*/React.createElement(ButtonWithAction, {
+            text: autoPayActive ? "Turn off ".concat(planType) : "Set Up ".concat(planType),
+            variant: "secondary",
+            action: function action() {
+              toggleModal(true);
+            },
+            dataQa: "Turn off Autopay",
+            extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1; min-width: 165px;"
+          });
+        }
+
+      case "tertiary":
+        {
+          return /*#__PURE__*/React.createElement(ButtonWithAction, {
+            text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
+            variant: "tertiary",
+            action: function action() {
+              toggleModal(true);
+            },
+            dataQa: "Manage Autopay",
+            extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+          });
+        }
+
+      case "link":
+        {
+          return /*#__PURE__*/React.createElement(Box, {
+            padding: "0",
+            onClick: function onClick() {
+              toggleModal(true);
+            },
+            hoverStyles: hoverStyles,
+            activeStyles: activeStyles,
+            extraStyles: defaultStyles
+          }, /*#__PURE__*/React.createElement(Cluster, {
+            justify: isMobile ? "flex-start" : "flex-end",
+            align: "center"
+          }, /*#__PURE__*/React.createElement(AutopayOnIcon, null), /*#__PURE__*/React.createElement(Text$1, {
+            variant: "pS",
+            onClick: function onClick() {
+              return toggleModal(true);
+            },
+            onKeyPress: function onKeyPress(e) {
+              e.key === "Enter" && toggleModal(true);
+            },
+            tabIndex: "0",
+            dataQa: "".concat(planType, " On"),
+            color: SEA_GREEN,
+            weight: themeValues.fontWeight,
+            hoverStyles: themeValues.modalLinkHoverFocus,
+            extraStyles: "padding-left: 0.25rem;"
+          }, "".concat(planType, " ").concat(nextAutopayDate))));
+        }
+    }
+  };
+
   return /*#__PURE__*/React.createElement(Modal$1, _extends({
     showModal: function showModal() {
       return toggleModal(true);
@@ -40350,43 +40437,7 @@ var AutopayModal = function AutopayModal(_ref) {
       return toggleModal(false);
     },
     modalOpen: modalOpen
-  }, modalExtraProps), buttonLinkType ? /*#__PURE__*/React.createElement(ButtonWithAction, {
-    text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
-    variant: "tertiary",
-    action: function action() {
-      toggleModal(true);
-    },
-    dataQa: "Manage Autopay",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  }) : /*#__PURE__*/React.createElement(Box, {
-    padding: "0",
-    onClick: function onClick() {
-      toggleModal(true);
-    },
-    hoverStyles: hoverStyles,
-    activeStyles: activeStyles,
-    extraStyles: defaultStyles
-  }, /*#__PURE__*/React.createElement(Cluster, {
-    justify: isMobile ? "flex-start" : "flex-end",
-    align: "center"
-  }, /*#__PURE__*/React.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pS",
-    onClick: function onClick() {
-      return toggleModal(true);
-    },
-    onKeyPress: function onKeyPress(e) {
-      console.log({
-        e: e
-      });
-      e.key === "Enter" && toggleModal(true);
-    },
-    tabIndex: "0",
-    dataQa: "".concat(planType, " On"),
-    color: SEA_GREEN,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "padding-left: 0.25rem;"
-  }, "".concat(planType, " ").concat(nextAutopayDate)))));
+  }, modalExtraProps), renderAutoPayControl());
 };
 
 var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$z);
@@ -40428,7 +40479,8 @@ var AmountModule = function AmountModule(_ref) {
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    controlType: "link"
   })));
 };
 
@@ -40445,7 +40497,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       autoPaySchedule = _ref.autoPaySchedule,
       paymentPlanSchedule = _ref.paymentPlanSchedule,
       isPaymentPlan = _ref.isPaymentPlan,
-      nextAutopayDate = _ref.nextAutopayDate;
+      nextAutopayDate = _ref.nextAutopayDate,
+      obligationAssocID = _ref.obligationAssocID,
+      dueDate = _ref.dueDate;
   var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = useState(false),
@@ -40470,7 +40524,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   };
 
   var handleDetailsClick = function handleDetailsClick() {
-    setDetailedObligation(obligations, config);
+    setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
 
@@ -40536,14 +40590,14 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     modalOpen: modalOpen,
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
-    buttonLinkType: true,
+    controlType: "tertiary",
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    dueDate: dueDate
   })), !isMobile && /*#__PURE__*/React.createElement(Box, {
-    padding: isMobile ? "0 0 0 8px" : "0",
-    extraStyles: isMobile && "flex-grow: 1;"
+    padding: "0"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     isLoading: isLoading,
     action: function action() {
@@ -40551,8 +40605,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     },
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
-    dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    dataQa: "Pay Now"
   }))), isMobile && /*#__PURE__*/React.createElement(Box, {
     padding: "8px 0 0",
     width: "100%"
@@ -40564,10 +40617,61 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     text: "Pay Now",
     variant: isMobile ? "smallSecondary" : "secondary",
     dataQa: "Pay Now",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+    extraStyles: isMobile && "flex-grow: 1; width: 100%; margin: 0;"
   }))));
 };
 
+var RemoveAccountModalModule = function RemoveAccountModalModule(_ref) {
+  var agencyName = _ref.agencyName,
+      _ref$obligations = _ref.obligations,
+      obligations = _ref$obligations === void 0 ? [] : _ref$obligations,
+      removeAccount = _ref.removeAccount,
+      accountType = _ref.accountType,
+      isMobile = _ref.isMobile;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalIsOpen = _useState2[0],
+      setModalIsOpen = _useState2[1];
+
+  var lastItem = _toConsumableArray(obligations).pop();
+
+  var accounts = obligations.length ? obligations.reduce(function (acc, curr) {
+    var account = curr.details.description;
+    var formattedAccount = curr !== lastItem ? "".concat(account, " and ") : "".concat(account);
+    return formattedAccount === agencyName ? agencyName : acc + formattedAccount;
+  }, "".concat(agencyName, " - ")) : "";
+  var identifier = accountType === "Account" && obligations.length > 1 ? "accounts" : accountType === "Property" && obligations.length > 1 ? "properties" : accountType.toLowerCase();
+  return /*#__PURE__*/React.createElement(Modal$1, {
+    showModal: function showModal() {
+      return setModalIsOpen(true);
+    },
+    hideModal: function hideModal() {
+      return setModalIsOpen(false);
+    },
+    modalOpen: modalIsOpen,
+    modalHeaderText: "Remove ".concat(accountType),
+    modalBodyText: "Are you sure you want to remove the ".concat(identifier, " ").concat(accounts, " from your profile? Any autopay scheduled against ").concat(obligations.length > 1 ? "them" : "it", " will be deactivated."),
+    continueButtonText: "Remove",
+    continueAction: function continueAction() {
+      removeAccount();
+      setModalIsOpen(false);
+    },
+    useDangerButton: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "flex-grow: 1;"
+  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
+    text: "Remove",
+    variant: "secondary",
+    action: function action() {
+      return setModalIsOpen(true);
+    },
+    dataQa: "Remove Account",
+    extraStyles: isMobile ? "flex-grow: 1; width: 100%; margin: 0;" : "flex-grow: 1;"
+  })));
+};
+
 var InactiveControlsModule = function InactiveControlsModule(_ref) {
   var autoPayEnabled = _ref.autoPayEnabled,
       autoPaySchedule = _ref.autoPaySchedule,
@@ -40578,6 +40682,9 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       obligationAssocID = _ref.obligationAssocID,
+      dueDate = _ref.dueDate,
+      agencyName = _ref.agencyName,
+      configType = _ref.configType,
       actions = _ref.actions;
 
   var _useState = useState(false),
@@ -40585,10 +40692,10 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
       modalOpen = _useState2[0],
       toggleModal = _useState2[1];
 
-  var removeAccount = actions.removeAccount;
+  var deleteObligationAssoc = actions.deleteObligationAssoc;
 
   var handleRemoveAccount = function handleRemoveAccount() {
-    return removeAccount(obligationAssocID);
+    return deleteObligationAssoc(obligationAssocID);
   };
 
   return /*#__PURE__*/React.createElement(Box, {
@@ -40596,7 +40703,10 @@ 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: autoPayEnabled ? "8px" : "0",
+    nowrap: true,
+    justify: isMobile && autoPayEnabled && "center",
+    align: isMobile && autoPayEnabled && "center"
   }, autoPayEnabled && /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
@@ -40607,21 +40717,22 @@ var InactiveControlsModule = function InactiveControlsModule(_ref) {
     modalOpen: modalOpen,
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
-    buttonLinkType: true,
     isMobile: isMobile,
     paymentPlanSchedule: paymentPlanSchedule,
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    dueDate: dueDate,
+    controlType: "secondary",
+    inactive: true
   })), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "flex-grow: 1;"
-  }, /*#__PURE__*/React.createElement(ButtonWithAction, {
-    variant: "tertiary",
-    text: "Remove",
-    action: handleRemoveAccount,
-    dataQa: "Remove Account",
-    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  }, /*#__PURE__*/React.createElement(RemoveAccountModalModule, {
+    agencyName: agencyName,
+    removeAccount: handleRemoveAccount,
+    accountType: configType === "ACCOUNT" ? "Account" : "Property",
+    isMobile: isMobile
   }))));
 };
 
@@ -40651,10 +40762,12 @@ var InactiveTitleModule = function InactiveTitleModule(_ref) {
     variant: "extraSmall",
     as: "p",
     color: BLACK
-  }, "This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.".concat(autoPayEnabled ? " You may disable Autopay for this account by pressing the Turn off Autopay button." : ""))));
+  }, "This may mean that the balance has been paid, or there was an error loading it.".concat(autoPayEnabled ? " You may disable autopay for this account by pressing the 'Turn off Autopay' button." : ""))));
 };
 
 var Obligation = function Obligation(_ref) {
+  var _firstObligation$cust, _firstObligation$desc, _firstObligation$subD;
+
   var config = _ref.config,
       obligations = _ref.obligations,
       actions = _ref.actions,
@@ -40669,29 +40782,43 @@ var Obligation = function Obligation(_ref) {
       isPaymentPlan = _ref.isPaymentPlan,
       nextAutopayDate = _ref.nextAutopayDate,
       obligationAssocID = _ref.obligationAssocID,
-      _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? true : _ref$isActive,
+      dueDate = _ref.dueDate,
+      agencyName = _ref.agencyName,
+      _ref$inactive = _ref.inactive,
+      inactive = _ref$inactive === void 0 ? false : _ref$inactive,
       _ref$inactiveLookupTi = _ref.inactiveLookupTitle,
       inactiveLookupTitle = _ref$inactiveLookupTi === void 0 ? "" : _ref$inactiveLookupTi,
       _ref$inactiveLookupIn = _ref.inactiveLookupInput,
       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.customAttributes;
-  var boxShadowValue = "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+
+  /*
+    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 2px 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),
+    border: "1px solid ".concat(GRECIAN_GREY),
+    borderWidthOverride: "1px 0 0 0"
   }, /*#__PURE__*/React.createElement(Box, {
-    background: WHITE
+    background: WHITE,
+    padding: isMobile ? "16px" : "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, {
@@ -40711,12 +40838,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,
@@ -40740,7 +40867,8 @@ var Obligation = function Obligation(_ref) {
     actions: actions,
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    obligationAssocID: obligationAssocID
   }))), isMobile && /*#__PURE__*/React.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -40754,7 +40882,8 @@ var Obligation = function Obligation(_ref) {
     actions: actions,
     isMobile: isMobile,
     isPaymentPlan: isPaymentPlan,
-    nextAutopayDate: nextAutopayDate
+    nextAutopayDate: nextAutopayDate,
+    obligationAssocID: obligationAssocID
   }));
   var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
     padding: "0",
@@ -40763,23 +40892,25 @@ var Obligation = function Obligation(_ref) {
     as: "section",
     "aria-label": "".concat(inactiveLookupTitle, " ").concat(inactiveLookupInput, ": ").concat(inactiveLookupValue)
   }, /*#__PURE__*/React.createElement(Box, {
-    background: ATHENS_GREY
+    background: ATHENS_GREY,
+    padding: isMobile ? "16px" : "24px"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React.createElement(Box, {
-    key: "".concat(obligations[0].id, "-top"),
-    padding: "0 8px",
+    key: "".concat(obligationAssocID, "-top"),
+    padding: "0",
     minWidth: "100%"
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center",
-    childGap: "4px",
+    childGap: "40px",
     nowrap: true
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
-    align: "center"
+    align: "center",
+    nowrap: true
   }, /*#__PURE__*/React.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
@@ -40802,7 +40933,10 @@ var Obligation = function Obligation(_ref) {
     actions: actions,
     isMobile: isMobile,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    dueDate: dueDate,
+    agencyName: agencyName,
+    configType: config.type
   }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -40813,9 +40947,12 @@ var Obligation = function Obligation(_ref) {
     actions: actions,
     isMobile: isMobile,
     nextAutopayDate: nextAutopayDate,
-    obligationAssocID: obligationAssocID
+    obligationAssocID: obligationAssocID,
+    dueDate: dueDate,
+    agencyName: agencyName,
+    configType: config.type
   }))));
-  return isActive ? activeObligation : inactiveObligation;
+  return inactive ? inactiveObligation : activeObligation;
 };
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
@@ -41131,10 +41268,49 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       subtotal = _ref.subtotal,
       total = _ref.total,
       variant = _ref.variant,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      hasVoidablePaymentsSection = _ref.hasVoidablePaymentsSection,
+      voidableTransactionDetails = _ref.voidableTransactionDetails,
+      voidableAmountPaid = _ref.voidableAmountPaid,
+      partialVoidAction = _ref.partialVoidAction;
   return /*#__PURE__*/React.createElement(Stack, {
     childGap: "16px"
-  }, lineItemElems, /*#__PURE__*/React.createElement(SolidDivider$1, null), /*#__PURE__*/React.createElement(Box, {
+  }, lineItemElems, hasVoidablePaymentsSection && /*#__PURE__*/React.createElement(Box, {
+    background: ATHENS_GREY
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    variant: "p",
+    color: themeValues.text,
+    weight: "400"
+  }, "Paid"), voidableTransactionDetails.map(function (t) {
+    return /*#__PURE__*/React.createElement(Cluster, {
+      key: t.id,
+      justify: "space-between",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Cluster, {
+      padding: "0",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Box, {
+      padding: "0"
+    }, t.voidText), /*#__PURE__*/React.createElement(ButtonWithAction, {
+      variant: "ghost",
+      action: function action() {
+        return partialVoidAction(t);
+      },
+      text: "Void",
+      extraStyles: "min-width: 75px; margin: 0px;",
+      textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 16px;")
+    })), /*#__PURE__*/React.createElement(Box, {
+      padding: "0",
+      key: t.id
+    }, displayCurrency(t.amount_given)));
+  }), /*#__PURE__*/React.createElement(Box, {
+    padding: "8px 0px 16px 0px"
+  }, /*#__PURE__*/React.createElement(SolidDivider$1, null)), /*#__PURE__*/React.createElement(LabeledAmount$1, {
+    fontWeight: FONT_WEIGHT_REGULAR,
+    label: "Amount paid",
+    amount: displayCurrency(voidableAmountPaid)
+  })), !hasVoidablePaymentsSection && !!lineItemElems.length && /*#__PURE__*/React.createElement(SolidDivider$1, null) // avoids duplicate dividers -> case of voidable payment section, that acts as divider
+  , /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
@@ -41143,7 +41319,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }), feeElems), /*#__PURE__*/React.createElement(SolidDivider$1, null), /*#__PURE__*/React.createElement(LabeledAmount$1, {
     as: "p",
     variant: themeValues.labeledAmountTotal,
-    label: "Total",
+    label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total",
     amount: displayCurrency(total),
     extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
   }));
@@ -41203,7 +41379,15 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       collapsibleOnMobile = _ref4$collapsibleOnMo === void 0 ? true : _ref4$collapsibleOnMo,
       isMobile = _ref4.isMobile,
       supportsTouch = _ref4.supportsTouch,
-      themeValues = _ref4.themeValues;
+      themeValues = _ref4.themeValues,
+      _ref4$hasVoidablePaym = _ref4.hasVoidablePaymentsSection,
+      hasVoidablePaymentsSection = _ref4$hasVoidablePaym === void 0 ? false : _ref4$hasVoidablePaym,
+      _ref4$voidableTransac = _ref4.voidableTransactionDetails,
+      voidableTransactionDetails = _ref4$voidableTransac === void 0 ? [] : _ref4$voidableTransac,
+      _ref4$partialVoidActi = _ref4.partialVoidAction,
+      partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
+      _ref4$voidableAmountP = _ref4.voidableAmountPaid,
+      voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP;
 
   var _useState = useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -41259,14 +41443,22 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     subtotal: subtotal,
     total: total,
     themeValues: themeValues,
-    variant: variant
+    variant: variant,
+    hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+    voidableTransactionDetails: voidableTransactionDetails,
+    voidableAmountPaid: voidableAmountPaid,
+    partialVoidAction: partialVoidAction
   })) : /*#__PURE__*/React.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
     themeValues: themeValues,
-    variant: variant
+    variant: variant,
+    hasVoidablePaymentsSection: hasVoidablePaymentsSection,
+    voidableTransactionDetails: voidableTransactionDetails,
+    voidableAmountPaid: voidableAmountPaid,
+    partialVoidAction: partialVoidAction
   });
   var title = hideTitle ? /*#__PURE__*/React.createElement(Fragment$1, null) : isCollapsible ? /*#__PURE__*/React.createElement(Box, {
     width: "100%",
@@ -42409,7 +42601,7 @@ var TabSidebar = function TabSidebar(_ref) {
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    background: ATHENS_GREY,
+    background: COOL_GREY_05,
     minHeight: "100%",
     role: "region",
     "aria-label": "Profile tabs",
@@ -42711,7 +42903,8 @@ var WorkflowTile = function WorkflowTile(_ref) {
     minWidth: "100%",
     url: "/service/".concat(slug),
     extraStyles: "width: 100%;",
-    linkExtraStyles: "justify-content: center;"
+    linkExtraStyles: "justify-content: center;",
+    dataQa: slug
   }))));
 };
 
@@ -42828,7 +43021,7 @@ var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
   }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
 };
 
-var pageBackground = "#F6F6F9";
+var pageBackground = "#FBFCFD";
 var fallbackValues$H = {
   pageBackground: pageBackground
 };
@@ -42852,7 +43045,7 @@ var CenterSingle = function CenterSingle(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     centerOverride: isMobile && !centeredMobileContent
@@ -42897,7 +43090,7 @@ var CenterStack = function CenterStack(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, null, header ? header : /*#__PURE__*/React.createElement(Box, {
     padding: "0"
@@ -42937,7 +43130,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     childGap: "0",
@@ -42988,7 +43181,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
     centerOverride: !sidebarVerticalCenter
@@ -43044,7 +43237,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
-    background: themeValues.pageBackground,
+    background: COOL_GREY_05,
     key: "page-bg",
     extraStyles: "flex-grow: 1;"
   }, /*#__PURE__*/React.createElement(Cover, {
@@ -43102,5 +43295,5 @@ var index$5 = /*#__PURE__*/Object.freeze({
   theme: themeUtils
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon$1 as AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map