@thecb/components 5.7.0 → 5.8.0-beta.0

package/dist/index.esm.js

@@ -4620,14 +4620,21 @@ var fontFamily = {
 }; // Text uses the same variants as paragraph
 // Use a Paragraph if you want a block level element
 // Use a Text if you want an inline element
+// Comments assume base font size of 16px
 
 var fontSize = {
   p: "1rem",
+  // 16px
   pL: "1.125rem",
+  // 18px
   pS: "0.875rem",
+  // 14px
   pXS: "0.75rem",
+  // 12px
   pXXS: "0.65rem",
-  pXL: "1.5rem"
+  // 10px
+  pXL: "1.5rem" // 24px
+
 };
 var fallbackValues = {
   fontFamily: fontFamily,
@@ -15840,10 +15847,10 @@ var Alert = function Alert(_ref) {
 
 var Alert$1 = themeComponent(Alert, "Alert", fallbackValues$4, "info");
 
-var HeadingText = styled.h1.withConfig({
-  displayName: "Headingstyled__HeadingText",
-  componentId: "sc-1a3jd28-0"
-})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
+var TitleText = styled.h1.withConfig({
+  displayName: "Titlestyled__TitleText",
+  componentId: "sc-11lhluq-0"
+})(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
   var fontSize = _ref.fontSize;
   return fontSize;
 }, function (_ref2) {
@@ -15866,26 +15873,63 @@ var HeadingText = styled.h1.withConfig({
   return extraStyles;
 });
 
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+var fontSize$1 = {
+  large: "1.5rem",
+  // 24px (at base font size of 16px)
+  small: "1.25rem" // 20px
+
+};
 var fontFamily$1 = {
-  primary: "Public Sans",
-  secondary: "Open Sans"
+  large: "Public Sans",
+  small: "Public Sans"
 };
-var fontSize$1 = {
-  h1: "2.25rem",
-  h2: "2rem",
-  h3: "1.75rem",
-  h4: "1.5rem",
-  h5: "1.375rem",
-  h6: "1.25rem"
+var mobileFontSize = {
+  large: "1.5rem",
+  // 21px (at base font size of 14px)
+  small: "1.2142rem" // 17px
+
 };
 var fallbackValues$5 = {
   fontFamily: fontFamily$1,
   fontSize: fontSize$1
 };
+var mobileFallbackValues = {
+  fontFamily: fontFamily$1,
+  fontSize: mobileFontSize
+};
+var MOBILE_BREAKPOINT = 768;
 
 var _excluded$i = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+/*
+  New responsive text component for Title elements
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
 
-var Heading = function Heading(_ref) {
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Title.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice$1;
+var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$5;
+
+var Title = function Title(_ref) {
   var themeValues = _ref.themeValues,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
@@ -15898,14 +15942,14 @@ var Heading = function Heading(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       className = _ref.className,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "h1" : _ref$variant,
+      variant = _ref$variant === void 0 ? "large" : _ref$variant,
       _ref$as = _ref.as,
-      as = _ref$as === void 0 ? variant : _ref$as,
+      as = _ref$as === void 0 ? "h1" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$i);
 
-  return /*#__PURE__*/React.createElement(HeadingText, _extends({
+  return /*#__PURE__*/React.createElement(TitleText, _extends({
     variant: variant,
     as: as,
     weight: weight,
@@ -15920,23 +15964,11 @@ var Heading = function Heading(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$5, "h1");
+var Title$1 = themeComponent(Title, "Title", fallbacks, "large");
 
-var fontSize$2 = {
-  large: "1.5rem",
-  medium: "1.25rem",
-  small: "1.094rem"
-};
 var color$3 = "#15749D";
-var lineHeight = {
-  large: "2rem",
-  medium: "1.875rem",
-  small: "1.641rem"
-};
 var fallbackValues$6 = {
-  fontSize: fontSize$2,
-  color: color$3,
-  lineHeight: lineHeight
+  color: color$3
 };
 
 var AmountCallout = function AmountCallout(_ref) {
@@ -15946,16 +15978,15 @@ var AmountCallout = function AmountCallout(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     textAlign: textAlign
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    variant: "small",
     weight: FONT_WEIGHT_SEMIBOLD,
-    fontSize: themeValues.fontSize,
     color: themeValues.color,
-    lineHeight: themeValues.lineHeight
+    as: "p"
   }, amount));
 };
 
-var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6, "medium");
+var AmountCallout$1 = themeComponent(AmountCallout, "AmountCallout", fallbackValues$6);
 
 function _extends$1() {
   _extends$1 = Object.assign || function (target) {
@@ -16810,8 +16841,8 @@ var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackVal
 var color$4 = "".concat(MATISSE_BLUE);
 var activeColor$2 = "".concat(STORM_GREY);
 var activeBreadcrumbColor = "".concat(STORM_GREY);
-var fontSize$3 = "0.875rem";
-var lineHeight$1 = "1.25rem";
+var fontSize$2 = "0.875rem";
+var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: none;";
@@ -16819,8 +16850,8 @@ var fallbackValues$8 = {
   color: color$4,
   activeColor: activeColor$2,
   activeBreadcrumbColor: activeBreadcrumbColor,
-  fontSize: fontSize$3,
-  lineHeight: lineHeight$1,
+  fontSize: fontSize$2,
+  lineHeight: lineHeight,
   fontWeight: fontWeight$1,
   margin: margin,
   hover: hover
@@ -18671,18 +18702,25 @@ var fontFamily$3 = {
   pXS: "Public Sans",
   pXXS: "Public Sans",
   pXL: "Public Sans"
-};
-var fontSize$4 = {
+}; // Comments assume base font size of 16px
+
+var fontSize$3 = {
   p: "1rem",
+  // 16px
   pL: "1.125rem",
+  // 18px
   pS: "0.875rem",
+  // 14px
   pXS: "0.75rem",
+  // 12px
   pXXS: "0.65rem",
-  pXL: "1.5rem"
+  // 10px
+  pXL: "1.5rem" // 24px
+
 };
 var fallbackValues$a = {
   fontFamily: fontFamily$3,
-  fontSize: fontSize$4
+  fontSize: fontSize$3
 };
 
 var ParagraphText = styled.p.withConfig({
@@ -19655,11 +19693,11 @@ var borderColor = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
-var lineHeight$2 = {
+var lineHeight$1 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$5 = {
+var fontSize$4 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
@@ -19682,8 +19720,8 @@ var fallbackValues$f = {
   color: color$5,
   labelColor: labelColor,
   borderColor: borderColor,
-  lineHeight: lineHeight$2,
-  fontSize: fontSize$5,
+  lineHeight: lineHeight$1,
+  fontSize: fontSize$4,
   errorFontSize: errorFontSize,
   fontWeight: fontWeight$2,
   hoverFocusStyles: hoverFocusStyles
@@ -20560,11 +20598,16 @@ var DetailText = styled.p.withConfig({
   return extraStyles;
 });
 
-var fontSize$6 = {
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+var fontSize$5 = {
   large: "1.125rem",
+  // 18px (at base font size of 16)
   regular: "1rem",
+  // 16px
   small: "0.875rem",
-  extraSmall: "0.75rem"
+  // 14px
+  extraSmall: "0.75rem" // 12px
+
 };
 var fontFamily$4 = {
   large: "Public Sans",
@@ -20572,21 +20615,25 @@ var fontFamily$4 = {
   small: "Public Sans",
   extraSmall: "Public Sans"
 };
-var mobileFontSize = {
+var mobileFontSize$1 = {
   large: "1.14285rem",
+  // 16px (at base font size of 14)
   regular: "1",
+  // 14px
   small: "0.85714rem",
-  extraSmall: "0.71428rem"
+  // 12px
+  extraSmall: "0.71428rem" // 10px
+
 };
 var fallbackValues$g = {
   fontFamily: fontFamily$4,
-  fontSize: fontSize$6
+  fontSize: fontSize$5
 };
-var mobileFallbackValues = {
+var mobileFallbackValues$1 = {
   fontFamily: fontFamily$4,
-  fontSize: mobileFontSize
+  fontSize: mobileFontSize$1
 };
-var MOBILE_BREAKPOINT = 768;
+var MOBILE_BREAKPOINT$1 = 768;
 
 var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 /*
@@ -20615,10 +20662,10 @@ var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "ext
   If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
 */
 
-var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
-var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
-var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice$1;
-var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$g;
+var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
+var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$g;
 
 var Detail = function Detail(_ref) {
   var themeValues = _ref.themeValues,
@@ -20655,7 +20702,7 @@ var Detail = function Detail(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Detail$1 = themeComponent(Detail, "Detail", fallbacks, "regular");
+var Detail$1 = themeComponent(Detail, "Detail", fallbacks$1, "regular");
 
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
@@ -21033,11 +21080,11 @@ var borderColor$1 = {
   "default": "".concat(GREY_CHATEAU),
   disabled: "".concat(GREY_CHATEAU)
 };
-var lineHeight$3 = {
+var lineHeight$2 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$7 = {
+var fontSize$6 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
@@ -21063,8 +21110,8 @@ var fallbackValues$i = {
   color: color$6,
   labelColor: labelColor$1,
   borderColor: borderColor$1,
-  lineHeight: lineHeight$3,
-  fontSize: fontSize$7,
+  lineHeight: lineHeight$2,
+  fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
   fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles$1,
@@ -21343,7 +21390,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
 
 var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$i, "default");
 
-var fontSize$8 = {
+var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
 };
@@ -21356,7 +21403,7 @@ var color$7 = {
   radio: "".concat(MINESHAFT_GREY)
 };
 var fallbackValues$j = {
-  fontSize: fontSize$8,
+  fontSize: fontSize$7,
   padding: padding$1,
   color: color$7
 };
@@ -21512,10 +21559,10 @@ var HamburgerButton = function HamburgerButton(_ref4) {
   })));
 };
 
-var TitleText = styled.h1.withConfig({
-  displayName: "Titlestyled__TitleText",
-  componentId: "sc-11lhluq-0"
-})(["font-size:", ";line-height:1.5;color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
+var HeadingText = styled.h1.withConfig({
+  displayName: "Headingstyled__HeadingText",
+  componentId: "sc-1a3jd28-0"
+})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));color:", ";font-weight:", ";margin:", ";text-align:", ";font-family:", ";", ";"], function (_ref) {
   var fontSize = _ref.fontSize;
   return fontSize;
 }, function (_ref2) {
@@ -21538,58 +21585,26 @@ var TitleText = styled.h1.withConfig({
   return extraStyles;
 });
 
-var fontSize$9 = {
-  large: "1.5rem",
-  small: "1.25rem"
-};
 var fontFamily$5 = {
-  large: "Public Sans",
-  small: "Public Sans"
+  primary: "Public Sans",
+  secondary: "Open Sans"
 };
-var mobileFontSize$1 = {
-  large: "1.5rem",
-  small: "1.2142rem"
+var fontSize$8 = {
+  h1: "2.25rem",
+  h2: "2rem",
+  h3: "1.75rem",
+  h4: "1.5rem",
+  h5: "1.375rem",
+  h6: "1.25rem"
 };
 var fallbackValues$l = {
   fontFamily: fontFamily$5,
-  fontSize: fontSize$9
-};
-var mobileFallbackValues$1 = {
-  fontFamily: fontFamily$5,
-  fontSize: mobileFontSize$1
+  fontSize: fontSize$8
 };
-var MOBILE_BREAKPOINT$1 = 768;
 
 var _excluded$t = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
-/*
-  New responsive text component for Title elements
-  Size is decoupled from tag
-  Comes with two variants - "large" and "small"
-  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
-  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
-  
-  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
-  
-  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
-  If you need an inline text element (span), use the <Text /> atom
-  The "as" value should be dictated by the structure of your page, not what font-size you want
-
-  Title / Detail both use slightly different desktop/mobile scales
-  (Mobile scale is different to allow for design-friendly px values)
-  Both atoms detect the presence of a mobile device on their own
-  and apply the corresponding scale
 
-  Mobile breakpoint value is specified in Title.theme.js
-
-  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
-*/
-
-var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
-var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
-var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
-var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$l;
-
-var Title = function Title(_ref) {
+var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
@@ -21602,14 +21617,14 @@ var Title = function Title(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       className = _ref.className,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "large" : _ref$variant,
+      variant = _ref$variant === void 0 ? "h1" : _ref$variant,
       _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
+      as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$t);
 
-  return /*#__PURE__*/React.createElement(TitleText, _extends({
+  return /*#__PURE__*/React.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
     weight: weight,
@@ -21624,7 +21639,7 @@ var Title = function Title(_ref) {
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
 };
 
-var Title$1 = themeComponent(Title, "Title", fallbacks$1, "large");
+var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$l, "h1");
 
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
@@ -38950,7 +38965,7 @@ var Modal$1 = function Modal(_ref) {
   })))))))), children);
 };
 
-var fontSize$a = {
+var fontSize$9 = {
   "default": "1.375rem",
   largeTitle: "1.75rem",
   small: "1.25rem"
@@ -38965,7 +38980,7 @@ var fontColor = {
   largeTitle: CHARADE_GREY,
   small: CHARADE_GREY
 };
-var lineHeight$4 = {
+var lineHeight$3 = {
   "default": "2rem",
   largeTitle: "2rem",
   small: "2rem"
@@ -39001,10 +39016,10 @@ var backgroundColor$6 = {
   small: WHITE
 };
 var fallbackValues$x = {
-  fontSize: fontSize$a,
+  fontSize: fontSize$9,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
-  lineHeight: lineHeight$4,
+  lineHeight: lineHeight$3,
   textAlign: textAlign,
   titleType: titleType,
   titleSpacing: titleSpacing,
@@ -39203,14 +39218,17 @@ var TitleModule = function TitleModule(_ref) {
     padding: "0"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    variant: "small",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: titleColor,
-    as: "h2"
-  }, title), /*#__PURE__*/React.createElement(Text$1, {
-    variant: "pS",
-    color: subtitleColor
+    as: "h4",
+    id: "obligation-title"
+  }, title), /*#__PURE__*/React.createElement(Detail$1, {
+    variant: "small",
+    color: subtitleColor,
+    as: "h5",
+    id: "obligation-subtitle"
   }, subtitle)));
 };
 
@@ -39482,6 +39500,92 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   }))));
 };
 
+var InactiveControlsModule = function InactiveControlsModule(_ref) {
+  var autoPayEnabled = _ref.autoPayEnabled,
+      autoPaySchedule = _ref.autoPaySchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      isMobile = _ref.isMobile,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
+      isPaymentPlan = _ref.isPaymentPlan,
+      nextAutopayDate = _ref.nextAutopayDate,
+      obligationAssocID = _ref.obligationAssocID,
+      actions = _ref.actions;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalOpen = _useState2[0],
+      toggleModal = _useState2[1];
+
+  var removeAccount = actions.removeAccount;
+
+  var handleRemoveAccount = function handleRemoveAccount() {
+    return removeAccount(obligationAssocID);
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: isMobile ? "18px 0 0 0" : "0",
+    border: isMobile ? "1px solid ".concat(GHOST_GREY) : "0px",
+    borderWidthOverride: isMobile ? "1px 0 0 0" : "0px"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    childGap: isMobile ? "8px" : "18px"
+  }, autoPayEnabled && /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "flex-grow: 1;"
+  }, /*#__PURE__*/React.createElement(AutopayModalModule, {
+    autoPayActive: autoPayEnabled,
+    autoPaySchedule: autoPaySchedule,
+    toggleModal: toggleModal,
+    modalOpen: modalOpen,
+    navigateToSettings: navigateToSettings,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    buttonLinkType: true,
+    isMobile: isMobile,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan,
+    nextAutopayDate: nextAutopayDate,
+    obligationAssocID: obligationAssocID
+  })), /*#__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%;"
+  }))));
+};
+
+var InactiveTitleModule = function InactiveTitleModule(_ref) {
+  var title = _ref.title,
+      subtitle = _ref.subtitle,
+      autoPayEnabled = _ref.autoPayEnabled;
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "0"
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    variant: "small",
+    as: "h4",
+    color: CHARADE_GREY,
+    weight: FONT_WEIGHT_SEMIBOLD
+  }, title), /*#__PURE__*/React.createElement(Detail$1, {
+    variant: "small",
+    as: "h5",
+    color: CHARADE_GREY
+  }, subtitle), /*#__PURE__*/React.createElement(Detail$1, {
+    variant: "small",
+    as: "p",
+    color: ZEST_ORANGE,
+    weight: FONT_WEIGHT_SEMIBOLD
+  }, "Unable to load account details"), /*#__PURE__*/React.createElement(Detail$1, {
+    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." : ""))));
+};
+
 var Obligation = function Obligation(_ref) {
   var config = _ref.config,
       obligations = _ref.obligations,
@@ -39495,13 +39599,25 @@ var Obligation = function Obligation(_ref) {
       navigateToSettings = _ref.navigateToSettings,
       isMobile = _ref.isMobile,
       isPaymentPlan = _ref.isPaymentPlan,
-      nextAutopayDate = _ref.nextAutopayDate;
+      nextAutopayDate = _ref.nextAutopayDate,
+      obligationAssocID = _ref.obligationAssocID,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? true : _ref$isActive,
+      _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;
-  return /*#__PURE__*/React.createElement(Box, {
+  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: "0px 0px 5px 0px ".concat(GHOST_GREY)
+    boxShadow: boxShadowValue,
+    as: "section",
+    "aria-label": "".concat(obligation.description, " ").concat(obligation.subDescription)
   }, /*#__PURE__*/React.createElement(Box, {
     background: WHITE
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -39572,6 +39688,66 @@ var Obligation = function Obligation(_ref) {
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate
   }));
+  var inactiveObligation = /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    borderRadius: "4px",
+    boxShadow: boxShadowValue,
+    as: "section",
+    "aria-label": "".concat(inactiveLookupTitle, " ").concat(inactiveLookupInput, ": ").concat(inactiveLookupValue)
+  }, /*#__PURE__*/React.createElement(Box, {
+    background: ATHENS_GREY
+  }, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "14px"
+  }, /*#__PURE__*/React.createElement(Box, {
+    key: "".concat(obligations[0].id, "-top"),
+    padding: "0 8px",
+    minWidth: "100%"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    childGap: "4px",
+    nowrap: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Cluster, {
+    justify: "flex-start",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(IconsModule, {
+    icon: config.icon,
+    iconDefault: config.iconDefault,
+    configIconMap: config.iconMap,
+    iconValue: config.iconValue,
+    customAttributes: customAttributes
+  }), /*#__PURE__*/React.createElement(InactiveTitleModule, {
+    title: inactiveLookupTitle,
+    subtitle: "".concat(inactiveLookupInput, ": ").concat(inactiveLookupValue),
+    titleColor: BRIGHT_GREY,
+    autoPayEnabled: autoPayEnabled,
+    isMobile: isMobile
+  }))), !isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    config: config,
+    actions: actions,
+    isMobile: isMobile,
+    nextAutopayDate: nextAutopayDate,
+    obligationAssocID: obligationAssocID
+  }))), isMobile && /*#__PURE__*/React.createElement(InactiveControlsModule, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    config: config,
+    actions: actions,
+    isMobile: isMobile,
+    nextAutopayDate: nextAutopayDate,
+    obligationAssocID: obligationAssocID
+  }))));
+  return isActive ? activeObligation : inactiveObligation;
 };
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
@@ -40064,10 +40240,10 @@ var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallback
 var linkColor$4 = {
   "default": "#357fb8"
 };
-var fontSize$b = {
+var fontSize$a = {
   "default": "1rem"
 };
-var lineHeight$5 = {
+var lineHeight$4 = {
   "default": "1.5rem"
 };
 var fontWeight$7 = {
@@ -40078,8 +40254,8 @@ var modalLinkHoverFocus$1 = {
 };
 var fallbackValues$B = {
   linkColor: linkColor$4,
-  fontSize: fontSize$b,
-  lineHeight: lineHeight$5,
+  fontSize: fontSize$a,
+  lineHeight: lineHeight$4,
   fontWeight: fontWeight$7,
   modalLinkHoverFocus: modalLinkHoverFocus$1
 };
@@ -41223,11 +41399,11 @@ var border$3 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
-var fontSize$c = {
+var fontSize$b = {
   "default": "1rem",
   footer: "0.875rem"
 };
-var lineHeight$6 = {
+var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
@@ -41244,8 +41420,8 @@ var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
   border: border$3,
-  fontSize: fontSize$c,
-  lineHeight: lineHeight$6,
+  fontSize: fontSize$b,
+  lineHeight: lineHeight$5,
   fontWeight: fontWeight$8,
   modalLinkHoverFocus: modalLinkHoverFocus$2
 };