@thecb/components 3.4.0 → 3.5.0

package/dist/index.cjs.js

@@ -13630,6 +13630,149 @@ var IconAdd = function IconAdd() {
   }))))));
 };
 
+var TimeoutImage = function TimeoutImage() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "458",
+    height: "308",
+    viewBox: "0 0 458 308"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-492 -168)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(492 168)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#EAF4EB",
+    d: "M286.327 294.916c0 7.133-26.041 12.916-58.164 12.916-32.123 0-58.163-5.783-58.163-12.916S196.04 282 228.163 282s58.164 5.783 58.164 12.916"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8.362",
+    transform: "translate(204 268)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.817 -2.13162821e-14L15.817 24.795 3.55271368e-15 24.795"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M31.3102 -2.30926389e-14L31.3102 25.574 47.1272 25.574"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FEFEFE",
+    d: "M107.968 73h239.721a6.969 6.969 0 016.969 6.968v178.398a6.969 6.969 0 01-6.969 6.968H107.968a6.968 6.968 0 01-6.968-6.968V79.968A6.968 6.968 0 01107.968 73"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4E6EB",
+    d: "M101 99L355 99 355 73 101 73z"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "5.575",
+    transform: "translate(197.811 141.913)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    strokeLinejoin: "round",
+    d: "M0 5.575C1.168 2.317 4.16 0 7.666 0c3.505 0 6.497 2.317 7.665 5.575"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    strokeLinejoin: "round",
+    d: "M46 5.575C47.168 2.317 50.16 0 53.666 0c3.505 0 6.497 2.317 7.665 5.575"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M50.38 44.087h0a6.886 6.886 0 01-6.886 6.886h-26.42a6.886 6.886 0 01-6.885-6.886",
+    transform: "matrix(1 0 0 -1 0 95.06)"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#3B414D",
+    d: "M124 83a3 3 0 110 6 3 3 0 010-6zm-10 0a3 3 0 110 6 3 3 0 010-6zm20 0a3 3 0 110 6 3 3 0 010-6z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8",
+    d: "M99.441 205.181L77.181 224.512"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8",
+    d: "M412.8955 190.764648L381.126953 224.790039 356 205.267859"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeWidth: "8",
+    d: "M396.5 189.5L429.5 189.5"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8",
+    d: "M137.079 231.103a7.605 7.605 0 000 15.211h6.644"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(377 63)"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#E4F4FD",
+    d: "M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "6"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M66.669 116.462H5.122a5.122 5.122 0 110-10.243h61.547a5.122 5.122 0 110 10.243z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.126 71.521l20.77-13.29 20.769 13.29a19.123 19.123 0 018.815 16.106v18.591H6.311v-18.59c0-6.52 3.323-12.592 8.815-16.107z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M56.665 44.94l-20.77 13.292L15.126 44.94a19.12 19.12 0 01-8.815-16.106V10.244H65.48v18.59a19.12 19.12 0 01-8.815 16.107z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M66.669 10.244H5.122A5.122 5.122 0 115.122 0h61.547a5.122 5.122 0 110 10.244z"
+  }))), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeLinecap: "round",
+    strokeWidth: "8",
+    d: "M27.663 247.376l-15.18.348M401 248l-44.96-.276m-256.445-.348l-52.372.348M454 248h-34"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#3B414D",
+    strokeWidth: "6",
+    d: "M107.969 73H347.69a6.969 6.969 0 016.968 6.969v178.397a6.968 6.968 0 01-6.968 6.968H107.969a6.969 6.969 0 01-6.969-6.968V79.969A6.969 6.969 0 01107.969 73zM104 99h248"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    stroke: "#45B770",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "8",
+    d: "M77.181 224.512L127.905 236.375"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#B8E4F4",
+    d: "M95.74 141.218c5.753 0 10.652 3.602 12.599 8.67a5.733 5.733 0 016.092 1.987 8.512 8.512 0 013.505-.757 8.557 8.557 0 110 17.114H81.002a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.069 13.049-10.069zM365.823 82c9.17 0 16.7 7.01 17.532 15.963a10.567 10.567 0 016.175-1.99c5.868 0 10.625 4.757 10.625 10.625 0 5.869-4.757 10.625-10.625 10.625h-48.094c-6.868 0-12.435-5.566-12.435-12.434 0-6.868 5.567-12.435 12.435-12.435 2.791 0 5.36.931 7.435 2.484C350.952 87.432 357.75 82 365.822 82zM23.296 75.456c5.752 0 10.651 3.602 12.598 8.669a5.733 5.733 0 011.559-.22c1.84 0 3.476.866 4.532 2.208a8.52 8.52 0 013.506-.757 8.557 8.557 0 110 17.114H8.557a8.557 8.557 0 111.69-16.945c1.523-5.792 6.78-10.07 13.049-10.07zM170.219 8.845c10.946 0 19.935 8.367 20.927 19.054a12.618 12.618 0 017.372-2.375c7.004 0 12.683 5.679 12.683 12.684 0 7.004-5.68 12.683-12.683 12.683h-57.41c-8.197 0-14.843-6.646-14.843-14.844 0-8.197 6.646-14.843 14.843-14.843 3.333 0 6.398 1.112 8.876 2.966 2.485-8.841 10.599-15.325 20.235-15.325zM297.892 0c5.752 0 10.651 3.602 12.598 8.669a5.728 5.728 0 011.56-.219c1.84 0 3.475.865 4.531 2.207a8.516 8.516 0 013.506-.757 8.557 8.557 0 110 17.114h-36.935a8.557 8.557 0 01-8.556-8.557 8.557 8.557 0 0110.248-8.388C286.366 4.277 291.622 0 297.892 0z"
+  })))));
+};
+
+var AutopayOnIcon = function AutopayOnIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "13",
+    viewBox: "0 0 12 13"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    className: "autopayIcon",
+    fill: themeValues.primaryColor,
+    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 color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -30416,6 +30559,21 @@ validatorFns[NUMBER_LESS_THAN] = (value, args, form) => {
   return Number(value) < args[0];
 };
 
+const NUMBER_LESS_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_LESS_THAN_OR_EQUAL_TO";
+const numberLessThanOrEqualTo = createValidator(
+  NUMBER_LESS_THAN_OR_EQUAL_TO,
+  NUMBER_LESS_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_LESS_THAN_OR_EQUAL_TO] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  return Number(value) <= args[0];
+};
+
 const NUMBER_GREATER_THAN = "validator/NUMBER_GREATER_THAN";
 const NUMBER_GREATER_THAN_ERROR = "error/NUMBER_GREATER_THAN";
 const numberGreaterThan = createValidator(
@@ -30429,6 +30587,21 @@ validatorFns[NUMBER_GREATER_THAN] = (value, args, form) => {
   return Number(value) > args[0];
 };
 
+const NUMBER_GREATER_THAN_OR_EQUAL_TO =
+  "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR =
+  "error/NUMBER_GREATER_THAN_OR_EQUAL_TO";
+const numberGreaterThanOrEqualTo = createValidator(
+  NUMBER_GREATER_THAN_OR_EQUAL_TO,
+  NUMBER_GREATER_THAN_OR_EQUAL_TO_ERROR
+);
+validatorFns[NUMBER_GREATER_THAN_OR_EQUAL_TO] = (value, args, form) => {
+  if (value === "") {
+    return true;
+  }
+  return Number(value) >= args[0];
+};
+
 const MATCHES_FIELD = "validator/MATCHES_FIELD";
 const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
 const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
@@ -30706,11 +30879,14 @@ function isDraft(value) {
   return !!value && !!value[DRAFT_STATE];
 }
 function isDraftable(value) {
+  if (!value) { return false; }
+  return isPlainObject(value) || !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
+}
+function isPlainObject(value) {
   if (!value || typeof value !== "object") { return false; }
   if (Array.isArray(value)) { return true; }
   var proto = Object.getPrototypeOf(value);
-  if (!proto || proto === Object.prototype) { return true; }
-  return !!value[DRAFTABLE] || !!value.constructor[DRAFTABLE];
+  return !proto || proto === Object.prototype;
 }
 var assign = Object.assign || function assign(target, value) {
   for (var key in value) {
@@ -30777,6 +30953,15 @@ function is(x, y) {
     return x !== x && y !== y;
   }
 }
+function clone(obj) {
+  if (!isDraftable(obj)) { return obj; }
+  if (Array.isArray(obj)) { return obj.map(clone); }
+  var cloned = Object.create(Object.getPrototypeOf(obj));
+
+  for (var key in obj) { cloned[key] = clone(obj[key]); }
+
+  return cloned;
+}
 
 /** Each scope represents a `produce` call. */
 
@@ -31085,8 +31270,8 @@ function createHiddenProperty(target, prop, value) {
 }
 
 var legacyProxy = /*#__PURE__*/Object.freeze({
-    willFinalize: willFinalize,
-    createProxy: createProxy
+	willFinalize: willFinalize,
+	createProxy: createProxy
 });
 
 function willFinalize$1() {}
@@ -31234,6 +31419,9 @@ function deleteProperty(state, prop) {
   if (peek$1(state.base, prop) !== undefined || prop in state.base) {
     state.assigned[prop] = false;
     markChanged$1(state);
+  } else if (state.assigned[prop]) {
+    // if an originally not assigned property was deleted
+    delete state.assigned[prop];
   }
 
   if (state.copy) { delete state.copy[prop]; }
@@ -31264,8 +31452,8 @@ function markChanged$1(state) {
 }
 
 var modernProxy = /*#__PURE__*/Object.freeze({
-    willFinalize: willFinalize$1,
-    createProxy: createProxy$1
+	willFinalize: willFinalize$1,
+	createProxy: createProxy$1
 });
 
 function generatePatches(state, basePath, patches, inversePatches) {
@@ -31316,7 +31504,6 @@ function generateArrayPatches(state, basePath, patches, inversePatches) {
     }
   }
 
-  var useRemove = end != base.length;
   var replaceCount = patches.length; // Process added indices.
 
   for (var i$1 = end + delta - 1; i$1 >= end; --i$1) {
@@ -31326,21 +31513,9 @@ function generateArrayPatches(state, basePath, patches, inversePatches) {
       path: path$1,
       value: copy[i$1]
     };
-
-    if (useRemove) {
-      inversePatches.push({
-        op: "remove",
-        path: path$1
-      });
-    }
-  } // One "replace" patch reverses all non-splicing "add" patches.
-
-
-  if (!useRemove) {
     inversePatches.push({
-      op: "replace",
-      path: basePath.concat(["length"]),
-      value: base.length
+      op: "remove",
+      path: path$1
     });
   }
 }
@@ -31377,55 +31552,58 @@ function generateObjectPatches(state, basePath, patches, inversePatches) {
   });
 }
 
-function applyPatches(draft, patches) {
-  for (var i = 0; i < patches.length; i++) {
-    var patch = patches[i];
+var applyPatches = function (draft, patches) {
+  for (var i$1 = 0, list = patches; i$1 < list.length; i$1 += 1) {
+    var patch = list[i$1];
+
     var path = patch.path;
+    var op = patch.op;
+    var value = clone(patch.value); // used to clone patch to ensure original patch is not modified, see #411
 
-    if (path.length === 0 && patch.op === "replace") {
-      draft = patch.value;
-    } else {
-      var base = draft;
+    if (!path.length) { throw new Error("Illegal state"); }
+    var base = draft;
 
-      for (var i$1 = 0; i$1 < path.length - 1; i$1++) {
-        base = base[path[i$1]];
-        if (!base || typeof base !== "object") { throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/")); } // prettier-ignore
-      }
+    for (var i = 0; i < path.length - 1; i++) {
+      base = base[path[i]];
+      if (!base || typeof base !== "object") { throw new Error("Cannot apply patch, path doesn't resolve: " + path.join("/")); } // prettier-ignore
+    }
 
-      var key = path[path.length - 1];
+    var key = path[path.length - 1];
 
-      switch (patch.op) {
-        case "replace":
-          base[key] = patch.value;
-          break;
+    switch (op) {
+      case "replace":
+        // if value is an object, then it's assigned by reference
+        // in the following add or remove ops, the value field inside the patch will also be modifyed
+        // so we use value from the cloned patch
+        base[key] = value;
+        break;
 
-        case "add":
-          if (Array.isArray(base)) {
-            // TODO: support "foo/-" paths for appending to an array
-            base.splice(key, 0, patch.value);
-          } else {
-            base[key] = patch.value;
-          }
+      case "add":
+        if (Array.isArray(base)) {
+          // TODO: support "foo/-" paths for appending to an array
+          base.splice(key, 0, value);
+        } else {
+          base[key] = value;
+        }
 
-          break;
+        break;
 
-        case "remove":
-          if (Array.isArray(base)) {
-            base.splice(key, 1);
-          } else {
-            delete base[key];
-          }
+      case "remove":
+        if (Array.isArray(base)) {
+          base.splice(key, 1);
+        } else {
+          delete base[key];
+        }
 
-          break;
+        break;
 
-        default:
-          throw new Error("Unsupported patch operation: " + patch.op);
-      }
+      default:
+        throw new Error("Unsupported patch operation: " + op);
     }
   }
 
   return draft;
-}
+};
 
 function verifyMinified() {}
 
@@ -31504,6 +31682,28 @@ Immer.prototype.produce = function produce (base, recipe, patchListener) {
   }
 };
 
+Immer.prototype.produceWithPatches = function produceWithPatches (arg1, arg2, arg3) {
+    var this$1 = this;
+
+  if (typeof arg1 === "function") {
+    return function (state) {
+        var args = [], len = arguments.length - 1;
+        while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];
+
+        return this$1.produceWithPatches(state, function (draft) { return arg1.apply(void 0, [ draft ].concat( args )); });
+      };
+  } // non-curried form
+
+
+  if (arg3) { throw new Error("A patch listener cannot be passed to produceWithPatches"); }
+  var patches, inversePatches;
+  var nextState = this.produce(arg1, arg2, function (p, ip) {
+    patches = p;
+    inversePatches = ip;
+  });
+  return [nextState, patches, inversePatches];
+};
+
 Immer.prototype.createDraft = function createDraft (base) {
   if (!isDraftable(base)) {
     throw new Error("First argument to `createDraft` must be a plain object, an array, or an immerable object"); // prettier-ignore
@@ -31542,13 +31742,26 @@ Immer.prototype.setUseProxies = function setUseProxies (value) {
 };
 
 Immer.prototype.applyPatches = function applyPatches$1 (base, patches) {
-  // Mutate the base state when a draft is passed.
+  // If a patch replaces the entire state, take that replacement as base
+  // before applying patches
+  var i;
+
+  for (i = patches.length - 1; i >= 0; i--) {
+    var patch = patches[i];
+
+    if (patch.path.length === 0 && patch.op === "replace") {
+      base = patch.value;
+      break;
+    }
+  }
+
   if (isDraft(base)) {
+    // N.B: never hits if some patch a replacement, patches are never drafts
     return applyPatches(base, patches);
   } // Otherwise, produce a copy of the base state.
 
 
-  return this.produce(base, function (draft) { return applyPatches(draft, patches); });
+  return this.produce(base, function (draft) { return applyPatches(draft, patches.slice(i + 1)); });
 };
 /** @internal */
 
@@ -31747,6 +31960,12 @@ var immer = new Immer();
  */
 
 var produce = immer.produce;
+/**
+ * Like `produce`, but `produceWithPatches` always returns a tuple
+ * [nextState, patches, inversePatches] (instead of just the next state)
+ */
+
+var produceWithPatches = immer.produceWithPatches.bind(immer);
 /**
  * Pass true to automatically freeze all copies created by Immer.
  *
@@ -35771,10 +35990,92 @@ var TitleModule = function TitleModule(_ref) {
   }, subtitle)));
 };
 
+var color$9 = "#15749D";
+var hoverColor$4 = "#116285";
+var activeColor$5 = "#0E506D";
+var fallbackValues$t = {
+  color: color$9,
+  hoverColor: hoverColor$4,
+  activeColor: activeColor$5
+};
+
+var AutopayModal = function AutopayModal(_ref) {
+  var autoPayActive = _ref.autoPayActive,
+      autoPaySchedule = _ref.autoPaySchedule,
+      toggleModal = _ref.toggleModal,
+      modalOpen = _ref.modalOpen,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      buttonLinkType = _ref.buttonLinkType,
+      isMobile = _ref.isMobile,
+      themeValues = _ref.themeValues;
+  var modalExtraProps = {
+    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment." : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
+    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+    useDangerButton: autoPayActive,
+    continueAction: autoPayActive ? function () {
+      deactivatePaymentSchedule(autoPaySchedule);
+      toggleModal(false);
+    } : navigateToSettings
+  };
+  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     ");
+  return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
+    ModalLink: function ModalLink() {
+      return buttonLinkType ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        text: autoPayActive ? "Manage Autopay" : "Set Up Autopay",
+        variant: "tertiary",
+        action: function action() {
+          toggleModal(true);
+        },
+        dataQa: "Manage Autopay",
+        extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+      }) : /*#__PURE__*/React__default.createElement(Box, {
+        padding: "0",
+        onClick: function onClick() {
+          toggleModal(true);
+        },
+        hoverStyles: hoverStyles,
+        activeStyles: activeStyles,
+        extraStyles: defaultStyles
+      }, /*#__PURE__*/React__default.createElement(Cluster, {
+        justify: isMobile ? "flex-start" : "flex-end",
+        align: "center"
+      }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+        text: "Autopay On",
+        variant: "smallGhost",
+        dataQa: "Autopay On",
+        textExtraStyles: "font-size: 0.875rem; ",
+        extraStyles: "min-width: auto; padding: 0 0 0 6px;"
+      })));
+    },
+    showModal: function showModal() {
+      return toggleModal(true);
+    },
+    hideModal: function hideModal() {
+      return toggleModal(false);
+    },
+    modalOpen: modalOpen
+  }, modalExtraProps));
+};
+
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$t);
+
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
       autoPayEnabled = _ref.autoPayEnabled,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      autoPaySchedule = _ref.autoPaySchedule;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalOpen = _useState2[0],
+      toggleModal = _useState2[1];
+
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0.25rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -35782,29 +36083,43 @@ var AmountModule = function AmountModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     weight: FONT_WEIGHT_SEMIBOLD,
-    extraStyles: "text-align: right;"
+    extraStyles: isMobile ? "text-align: left;" : "text-align: right;"
   }, isMobile ? "Total Due" : "Total Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
-    textAlign: "right"
-  }), autoPayEnabled && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: "p",
-    weight: FONT_WEIGHT_REGULAR,
-    color: REGENT_GREY,
-    extraStyles: "font-style: italic; text-align: right;"
-  }, isMobile ? "Autopay On" : "Autopay Enabled")));
+    textAlign: isMobile ? "left" : "right"
+  }), autoPayEnabled && /*#__PURE__*/React__default.createElement(AutopayModalModule, {
+    autoPayActive: autoPayEnabled,
+    autoPaySchedule: autoPaySchedule,
+    toggleModal: toggleModal,
+    modalOpen: modalOpen,
+    navigateToSettings: navigateToSettings,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    isMobile: isMobile
+  })));
 };
 
 var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   var isMobile = _ref.isMobile,
       obligations = _ref.obligations,
       config = _ref.config,
-      actions = _ref.actions;
+      actions = _ref.actions,
+      autoPayEnabled = _ref.autoPayEnabled,
+      autoPayAvailable = _ref.autoPayAvailable,
+      handleAutopayAction = _ref.handleAutopayAction,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      navigateToSettings = _ref.navigateToSettings,
+      autoPaySchedule = _ref.autoPaySchedule;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isLoading = _useState2[0],
       setIsLoading = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      modalOpen = _useState4[0],
+      toggleModal = _useState4[1];
+
   var obligationSlug = config.obligationSlug;
   var createPaymentFromProfile = actions.createPaymentFromProfile,
       setDetailedObligation = actions.setDetailedObligation;
@@ -35820,12 +36135,47 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "16px 0 0",
+    padding: isMobile ? "0" : "16px 0 0",
     minWidth: "100%",
     borderSize: "1px",
     borderColor: GHOST_GREY,
     borderWidthOverride: "1px 0 0 0",
     key: "".concat(obligations[0].id, "-actions")
+  }, isMobile && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "16px 24px",
+    borderSize: "1px",
+    borderColor: GHOST_GREY,
+    borderWidthOverride: "0 0 1px 0"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center",
+    nowrap: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(AmountModule, {
+    totalAmountDue: obligations.reduce(function (acc, curr) {
+      return acc + curr.amountDue;
+    }, 0),
+    autoPayEnabled: autoPayEnabled,
+    isMobile: isMobile,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    navigateToSettings: navigateToSettings,
+    autoPaySchedule: autoPaySchedule
+  })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    isLoading: isLoading,
+    action: function action() {
+      return handleClick(obligations);
+    },
+    text: "Pay Now",
+    variant: isMobile ? "smallSecondary" : "secondary",
+    dataQa: "Pay Now",
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  })))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: isMobile ? "center" : "flex-end",
     align: "center",
@@ -35834,12 +36184,30 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     padding: isMobile ? "0 8px 0 0" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: isMobile ? "smallSecondary" : "secondary",
+    variant: "tertiary",
     text: config.type === "ACCOUNT" ? "Account Details" : "Property Details",
     action: handleDetailsClick,
     dataQa: "Account Details",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   })), /*#__PURE__*/React__default.createElement(Box, {
+    padding: isMobile ? "0 8px 0 0" : "8px",
+    extraStyles: isMobile && "flex-grow: 1;"
+  }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "tertiary",
+    text: "Set Up Autopay",
+    action: handleAutopayAction,
+    dataQa: "Set Up Autopay",
+    extraStyles: isMobile && "flex-grow: 1; width: 100%;"
+  }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {
+    autoPayActive: autoPayEnabled,
+    autoPaySchedule: autoPaySchedule,
+    toggleModal: toggleModal,
+    modalOpen: modalOpen,
+    navigateToSettings: navigateToSettings,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    buttonLinkType: true,
+    isMobile: isMobile
+  })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0 0 0 8px" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -35847,11 +36215,11 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     action: function action() {
       return handleClick(obligations);
     },
-    text: "Make Payment",
-    variant: isMobile ? "smallPrimary" : "primary",
-    dataQa: "Make Payment",
+    text: "Pay Now",
+    variant: isMobile ? "smallSecondary" : "secondary",
+    dataQa: "Pay Now",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
-  }))));
+  })))));
 };
 
 var Obligation = function Obligation(_ref) {
@@ -35859,13 +36227,20 @@ var Obligation = function Obligation(_ref) {
       obligations = _ref.obligations,
       actions = _ref.actions,
       autoPayEnabled = _ref.autoPayEnabled,
+      autoPayAvailable = _ref.autoPayAvailable,
+      handleAutopayAction = _ref.handleAutopayAction,
+      deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
+      autoPaySchedule = _ref.autoPaySchedule,
+      navigateToSettings = _ref.navigateToSettings,
       isMobile = _ref.isMobile;
   var obligation = obligations[0];
   var customAttributes = obligation.customAttributes;
   return /*#__PURE__*/React__default.createElement(Box, {
-    background: WHITE,
+    padding: "0",
     borderRadius: "4px",
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY)
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    background: WHITE
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "14px"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -35882,7 +36257,7 @@ var Obligation = function Obligation(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, !isMobile && /*#__PURE__*/React__default.createElement(IconsModule, {
+  }, /*#__PURE__*/React__default.createElement(IconsModule, {
     icon: config.icon,
     iconDefault: config.iconDefault,
     configIconMap: config.iconMap,
@@ -35893,18 +36268,38 @@ var Obligation = function Obligation(_ref) {
     subtitle: obligation.subDescription,
     titleColor: BRIGHT_GREY,
     isMobile: isMobile
-  }))), /*#__PURE__*/React__default.createElement(AmountModule, {
+  }))), !isMobile && /*#__PURE__*/React__default.createElement(AmountModule, {
     totalAmountDue: obligations.reduce(function (acc, curr) {
       return acc + curr.amountDue;
     }, 0),
     autoPayEnabled: autoPayEnabled,
+    isMobile: isMobile,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    navigateToSettings: navigateToSettings,
+    autoPaySchedule: autoPaySchedule
+  }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
+    obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    navigateToSettings: navigateToSettings,
+    config: config,
+    actions: actions,
     isMobile: isMobile
-  }))), /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
+  }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
+    autoPayEnabled: autoPayEnabled,
+    autoPayAvailable: autoPayAvailable,
+    handleAutopayAction: handleAutopayAction,
+    deactivatePaymentSchedule: deactivatePaymentSchedule,
+    autoPaySchedule: autoPaySchedule,
+    navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
     isMobile: isMobile
-  })));
+  }));
 };
 
 var PartialAmountForm = function PartialAmountForm(_ref) {
@@ -35930,7 +36325,7 @@ var PartialAmountForm = function PartialAmountForm(_ref) {
     }, []);
   }
 
-  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThan.error, "Your total payment must be greater than ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThan.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
+  var amountErrors = (_amountErrors = {}, _defineProperty(_amountErrors, required.error, "Amount is required"), _defineProperty(_amountErrors, numberGreaterThan.error, "Your total payment must be greater than ".concat(displayCurrency(minimum))), _defineProperty(_amountErrors, numberLessThanOrEqualTo.error, "Your total payment must be less than ".concat(displayCurrency(maximum))), _amountErrors);
   var lineItemsNew = Array.isArray(lineItems) ? lineItems : [];
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
@@ -35975,7 +36370,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
     }, []))];
 
     if (!!maximum) {
-      validators.push(validateSum(numberLessThan(maximum), lineItems.filter(function (lineItem) {
+      validators.push(validateSum(numberLessThanOrEqualTo(maximum), lineItems.filter(function (lineItem) {
         return lineItem != item;
       }).reduce(function (acc, curr) {
         return [].concat(_toConsumableArray(acc), [curr.id]);
@@ -36071,7 +36466,7 @@ var labeledAmountTotal = {
   "default": "h6",
   small: "pL"
 };
-var fallbackValues$t = {
+var fallbackValues$u = {
   backgroundColor: backgroundColor$7,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -36232,7 +36627,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$t, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$u, "default");
 
 var linkColor$1 = {
   "default": "#357fb8",
@@ -36254,7 +36649,7 @@ var modalLinkHoverFocus = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$u = {
+var fallbackValues$v = {
   linkColor: linkColor$1,
   fontSize: fontSize$8,
   lineHeight: lineHeight$4,
@@ -36317,7 +36712,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   });
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$u, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$v, "default");
 
 function _templateObject$z() {
   var data = _taggedTemplateLiteral([""]);
@@ -36703,7 +37098,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
 var focusStyles$1 = "outline: none;";
-var fallbackValues$v = {
+var fallbackValues$w = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -36890,7 +37285,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$v);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$w);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -37177,7 +37572,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$w = {
+var fallbackValues$x = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -37233,7 +37628,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$w);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$x);
 
 var backgroundColor$8 = {
   "default": "#ffffff",
@@ -37263,7 +37658,7 @@ var modalLinkHoverFocus$1 = {
   "default": "",
   footer: "outline: none; text-decoration: underline;"
 };
-var fallbackValues$x = {
+var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
   linkColor: linkColor$2,
   border: border$2,
@@ -37327,7 +37722,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   });
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$x, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$y, "default");
 
 function _templateObject2$l() {
   var data = _taggedTemplateLiteral([""]);
@@ -37414,6 +37809,37 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
   })))));
 };
 
+var Timeout = function Timeout(_ref) {
+  var onLogout = _ref.onLogout;
+  return /*#__PURE__*/React__default.createElement(Cover, null, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    maxWidth: "500px"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "32px",
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(TimeoutImage, null)), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+    textAlign: "center",
+    weight: FONT_WEIGHT_BOLD
+  }, "Request Timed Out"), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "pL",
+    extraStyles: "text-align: center;"
+  }, "That was taking longer than we expected and your request timed out. Please log out, log back in, and then try again.")), /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "primary",
+    text: "Log out",
+    action: onLogout
+  })))))));
+};
+
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
@@ -37457,7 +37883,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$y = {
+var fallbackValues$z = {
   pageBackground: pageBackground
 };
 
@@ -37504,7 +37930,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$y));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$z));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -37546,7 +37972,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$y));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$z));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -37586,7 +38012,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$y));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$z));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -37640,7 +38066,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$y));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$z));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -37711,7 +38137,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$y));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$z));
 
 
 
@@ -37738,6 +38164,7 @@ exports.AddObligation = AddObligation$1;
 exports.AddressForm = AddressForm;
 exports.Alert = Alert$1;
 exports.AmountCallout = AmountCallout$1;
+exports.AutopayOnIcon = AutopayOnIcon$1;
 exports.BankIcon = BankIcon;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumbs;
@@ -37834,6 +38261,8 @@ exports.TableListItem = TableListItem;
 exports.TermsAndConditions = TermsAndConditions;
 exports.TermsAndConditionsModal = TermsAndConditionsModal$1;
 exports.Text = Text$1;
+exports.Timeout = Timeout;
+exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.WorkflowTile = WorkflowTile;