npm - @thecb/components - Versions diffs - 4.1.14 → 4.1.16 - Mend

@thecb/components 4.1.14 → 4.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -6121,10 +6121,11 @@ var Text = function Text(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
       onClick = _ref.onClick,
+      onKeyPress = _ref.onKeyPress,
       as = _ref.as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "as", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"]);
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
@@ -6135,6 +6136,7 @@ var Text = function Text(_ref) {
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
     onClick: onClick,
+    onKeyPress: onKeyPress,
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
@@ -14180,181 +14182,43 @@ var WalletIcon = function WalletIcon(_ref) {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "299",
-    height: "150",
-    viewBox: "0 0 299 150"
+    height: "151",
+    viewBox: "0 0 299 151"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke: "none",
     strokeWidth: "1"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(-154 -340)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(132 261)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(22 79)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    stroke: "#3B414D",
-    strokeLinecap: "round",
-    strokeWidth: "4.08",
-    transform: "translate(52.686 118.445)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M208.2 0.375L175.611 0.776"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M233.568 0.375L218.318 0.776"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M44.527 0.375L17.757 0.776"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M7.759 0.375L0 0.776"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#B8E4F4",
-    d: "M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4.08",
-    transform: "translate(150.58 129.154)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4.08",
-    d: "M97.135 97.043L85.756 106.925"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4.08",
-    d: "M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeWidth: "4.08",
-    d: "M257.527 89.028L274.395 89.028"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(255.032 47.73)"
-  }, /*#__PURE__*/React__default.createElement("rect", {
-    width: "40.703",
-    height: "25.03",
-    x: "1.02",
-    y: "1.02",
-    fill: "#E8FFEF",
-    stroke: "#45B770",
-    strokeWidth: "2.04",
-    rx: "2.72"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#45B770",
-    d: "M0 6.411H42.743V12.11H0z"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(249.333 54.141)"
-  }, /*#__PURE__*/React__default.createElement("rect", {
-    width: "40.703",
-    height: "25.03",
-    x: "1.02",
-    y: "1.02",
-    fill: "#CACED8",
-    stroke: "#3B414D",
-    strokeWidth: "2.04",
-    rx: "2.72"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#3B414D",
-    d: "M0 6.411H42.743V12.11H0z"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.subIconColor,
+    d: "M154.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM38.894 88.746c5.595 0 10.19 4.277 10.697 9.74a6.45 6.45 0 013.768-1.214 6.484 6.484 0 010 12.966H24.014a7.588 7.588 0 010-15.175c1.704 0 3.27.569 4.537 1.516 1.27-4.519 5.418-7.833 10.343-7.833zM287.055 55.73a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM61.817 54.048c2.554 0 4.73 1.6 5.594 3.85a2.545 2.545 0 012.705.883 3.778 3.778 0 011.557-.336 3.8 3.8 0 010 7.603h-16.4a3.8 3.8 0 11.75-7.528 5.995 5.995 0 015.794-4.472zM191.964 28c6.009 0 10.88 4.871 10.88 10.88v1.48L91 42.324V35.48A7.48 7.48 0 0198.48 28h93.484zM38.38 22.048a6.9 6.9 0 016.44 4.43 2.93 2.93 0 013.114 1.017 4.35 4.35 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.864-8.662c.779-2.96 3.466-5.146 6.67-5.146zM242.193 8a6.9 6.9 0 016.44 4.431 2.928 2.928 0 013.113 1.016 4.353 4.353 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.866-8.661c.778-2.96 3.464-5.147 6.67-5.147z",
+    opacity: "0.302"
   }), /*#__PURE__*/React__default.createElement("rect", {
-    width: "9.973",
-    height: "2.85",
-    x: "27.163",
-    y: "18.367",
-    fill: "#3B414D",
-    rx: "1.36"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(237.223 59.128)"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "8.905",
-    cy: "8.905",
-    r: "8.905",
-    fill: themeValues.subIconColor
-  }), /*#__PURE__*/React__default.createElement("g", {
+    width: "132",
+    height: "97",
+    x: "91",
+    y: "40.398",
     fill: "#FFF",
-    transform: "translate(4.274 4.274)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M3.562 0H5.699V9.261H3.562z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M0 3.562H9.261V5.699H0z"
-  }))), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#B8E4F4",
-    stroke: "#3B414D",
-    strokeWidth: "4.08",
-    d: "M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
+    rx: "10.88"
   }), /*#__PURE__*/React__default.createElement("rect", {
-    width: "32.964",
-    height: "11.592",
-    x: "97.499",
-    y: "22.699",
-    stroke: "#3B414D",
-    strokeWidth: "4.08",
-    rx: "5.796"
+    width: "42.743",
+    height: "27.07",
+    x: "241.333",
+    y: "62.141",
+    fill: "#CACED8",
+    rx: "2.72"
   }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#B8E4F4",
-    d: "M121.817 24.933H141.051V32.057H121.817z"
-  }), /*#__PURE__*/React__default.createElement("rect", {
-    width: "133.928",
-    height: "98.309",
-    x: "95.459",
-    y: "32.057",
-    fill: "#FFF",
-    rx: "10.88"
+    fill: "#3B414D",
+    fillRule: "nonzero",
+    d: "M278.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-192.675 0a2.04 2.04 0 01.103 4.076l-.153.004H62.418a2.04 2.04 0 01-.103-4.076l.153-.004h23.057zm-31.043 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H44.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zm167.441-1.758l31.106.006c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007L221.97 129c-1.075.012-1.958-.793-1.971-1.799-.012-.96.771-1.756 1.778-1.837l.145-.006zm62.153-56.806v5.7h-42.743v-5.7h42.743zM145.815 71c2.575 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.069 1.427l-.066.167a1.896 1.896 0 01-3.568-1.28c.874-2.437 3.126-4.105 5.703-4.105zm23.513 0c2.576 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.068 1.427l-.066.167a1.895 1.895 0 11-3.57-1.28c.875-2.437 3.128-4.105 5.704-4.105zm23.636-45.04c7.032 0 12.752 5.618 12.916 12.61l.004.31-.001 1.12h7.165c6.008 0 10.88 4.871 10.88 10.88v76.549c0 6.008-4.872 10.88-10.88 10.88H100.88c-6.009 0-10.88-4.872-10.88-10.88V45.325h-.04V35.48a9.52 9.52 0 019.249-9.516l.271-.004h93.484zm20.084 18.12l-118.968.001v83.348a6.8 6.8 0 006.561 6.795l.239.005h112.168a6.8 6.8 0 006.796-6.562l.004-.238V50.88a6.8 6.8 0 00-6.562-6.796l-.238-.004zm-45.4 49.455c1.047 0 1.895.849 1.895 1.896a5.415 5.415 0 01-5.197 5.41l-.218.005h-13.505a5.415 5.415 0 01-5.414-5.415 1.896 1.896 0 013.785-.148l.006.148c0 .847.648 1.543 1.476 1.617l.147.007h13.505c.847 0 1.543-.649 1.618-1.476l.006-.148c0-1.047.85-1.896 1.896-1.896zm113.708-31.394a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303zm0 2.04h-37.303a.68.68 0 00-.672.58l-.008.1v21.63a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-21.63a.68.68 0 00-.58-.673l-.1-.007zm-4.246 16.327c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM192.964 30.04H99.48a5.44 5.44 0 00-5.436 5.221l-.004.219V40h107.763v-1.12a8.84 8.84 0 00-8.579-8.836l-.26-.004z"
   }), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#3B414D",
-    strokeWidth: "4.08",
-    d: "M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
+    fill: themeValues.subIconColor,
+    fillRule: "nonzero",
+    d: "M160.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm-62.7-34.592c-.008.004-.01.642-.012 1.477v2.665l-.002.408c-.001.507-.004.846-.01.851l-6.626 5.754 15.406 5.409a5.925 5.925 0 015.126-2.95 2.04 2.04 0 01.153 4.074l-.153.006a1.847 1.847 0 00-.144 3.69l.144.005h3.396a2.04 2.04 0 01.153 4.075l-.153.005h-3.396a5.93 5.93 0 01-5.825-4.828l-18.716-6.567a2.037 2.037 0 01-1.286-1.363 2.04 2.04 0 01.237-2.558l.122-.115 11.378-9.88c.042-.037.14-.109.191-.145l.016-.013zm176.39-8.358a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.007-.015-.415-.018-1.224v-.344V107.728v-.789l.004-1.53 9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zm-28.267-27.86a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005-3.306-.005v-2l3.306.005c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v3.691h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303z"
   }), /*#__PURE__*/React__default.createElement("path", {
     fill: "#FFF",
-    d: "M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4.08",
-    d: "M85.756 106.925L111.684 112.988"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    stroke: "#45B770",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "4.08",
-    transform: "translate(112.486 110.241)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M3.887.053a3.887 3.887 0 000 7.775h3.396"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    stroke: "#3B414D",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "3.791",
-    transform: "translate(147.003 64.237)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "#3B414D",
-    strokeLinecap: "round",
-    strokeWidth: "3.791",
-    d: "M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    fill: "#B8E4F4"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
-  })))))));
+    d: "M239.196 71.402v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
+  }))));
 };
 var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
@@ -14761,6 +14625,44 @@ var CarrotIcon = function CarrotIcon(_ref) {
 var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
+var ProfileIcon = function ProfileIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "299",
+    height: "151",
+    viewBox: "0 0 299 151"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.subIconColor,
+    d: "M162.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM123.899 25.659a4 4 0 013.988 3.688l.539 6.892h85.445c3.396 0 6.293 2.78 6.47 6.207l4.31 83.776c.177 3.427-2.434 6.205-5.83 6.205H100.945c-3.397 0-6.293-2.778-6.47-6.205l-4.31-83.776c-.177-3.428 2.434-6.206 5.83-6.206h2.05l-.16-3.103a4.117 4.117 0 01.077-1.039l-.165-2.127a4 4 0 013.987-4.312H123.9zm-80.672 76.579c2.836 0 5.164 2.189 5.42 4.985a3.247 3.247 0 011.91-.621c1.814 0 3.285 1.485 3.285 3.318 0 1.832-1.47 3.318-3.285 3.318h-14.87c-2.123 0-3.845-1.739-3.845-3.883 0-2.145 1.722-3.884 3.845-3.884.863 0 1.657.291 2.3.776.643-2.313 2.744-4.009 5.24-4.009zm30.478-53.79c.369 0 .668.398.668.89v39.11h-28v-39.11c0-.492.3-.89.668-.89zm221.35 7.282a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM31.403 20.856c3.193 0 5.912 2 6.993 4.814a3.181 3.181 0 013.381 1.103 4.723 4.723 0 011.946-.42 4.75 4.75 0 014.75 4.751 4.75 4.75 0 01-4.75 4.752h-20.5a4.75 4.75 0 01-4.75-4.752 4.75 4.75 0 015.687-4.657c.846-3.216 3.764-5.591 7.243-5.591zM237.078 10c3.406 0 6.306 2.133 7.46 5.135a3.39 3.39 0 013.605 1.177 5.04 5.04 0 012.076-.448 5.067 5.067 0 015.066 5.068c0 2.799-2.268 5.068-5.066 5.068h-21.868a5.067 5.067 0 01-5.066-5.068 5.067 5.067 0 016.068-4.968c.901-3.43 4.013-5.964 7.725-5.964z",
+    opacity: "0.302"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M143.096 33.659a4 4 0 013.985 4.347l-.094 1.098c.057.288.083.588.072.896l-.104 3h79.1c3.397 0 6.057 2.686 5.941 6l-2.817 81c-.115 3.314-2.962 6-6.358 6H104.945c-3.397 0-6.057-2.686-5.941-6l2.817-81c.115-3.314 2.962-6 6.358-6l4.468-.001.494-5.686a4 4 0 013.985-3.654h25.97z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#CACED8",
+    d: "M80.846 54.267c.369 0 .668.233.668.52v36.48h-28v-36.48c0-.287.3-.52.669-.52zm208.51 7.874a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#3B414D",
+    fillRule: "nonzero",
+    d: "M123.298 25c3.333 0 6.138 2.69 6.312 6.075l.017.584h14.276a5.993 5.993 0 014.931 2.58h65.037c4.01 0 7.46 2.918 8.288 6.761h3.896c4.434 0 7.962 3.48 7.945 7.823l-.005.247-2.653 76.287 29.687.007c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007-29.862-.008-.037 1.07c-.15 4.318-3.754 7.798-8.106 7.927l-.251.004H104.945c-3.077 0-5.719-1.677-7.04-4.155a8.665 8.665 0 01-4.734-4.585H70.418a2.04 2.04 0 01-.103-4.075l.153-.004 21.95-.001-4.25-82.632c-.232-4.482 3.154-8.172 7.58-8.304l.234-.005-.094-3c-.172-3.346 2.354-6.114 5.658-6.235l.227-.004h21.525zm20.605 10.659h-25.932a2 2 0 00-1.983 1.741l-.99 7.599-6.819.001c-2.329 0-4.282 1.843-4.36 4.07l-2.817 81c-.075 2.17 1.667 3.93 3.943 3.93h117.876c2.329 0 4.282-1.843 4.36-4.07l2.817-81c.075-2.17-1.667-3.93-3.943-3.93l-81.093-.001.925-7.081a2 2 0 00-1.984-2.259zM286.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-223.718 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H52.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zM123.298 29h-21.525c-1.066 0-1.876.812-1.891 1.922l.002.153.225 7.165h-4.114c-2.178 0-3.847 1.706-3.839 3.896l.006.207 4.31 83.776c.038.717.25 1.398.595 1.998l2.755-79.187c.153-4.4 3.893-7.93 8.357-7.93l3.305-.001.538-4.116a6 6 0 015.712-5.22l.237-.004h7.655l-.013-.42c-.06-1.172-1.03-2.15-2.16-2.233l-.155-.006zm53.072 64.344l.148.003a1.895 1.895 0 011.77 2.014c-.185 2.865-2.567 5.172-5.413 5.289l-.226.004h-13.504c-3.04 0-5.38-2.502-5.184-5.537a1.896 1.896 0 013.787.096l-.004.148c-.052.805.487 1.43 1.262 1.496l.139.006h13.504c.894 0 1.705-.717 1.84-1.598l.015-.148a1.896 1.896 0 011.866-1.773zM81.514 53.018v.374c.573.225 1 .734 1 1.396v36.479a1 1 0 01-1 1h-28a1 1 0 01-1-1v-36.48c0-.661.427-1.17 1-1.395v-.374h28zm-1 4.807h-26v32.441h26V57.825zm211.562 28.666a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303a2.72 2.72 0 012.72 2.72v21.63zM67.158 83.647c.57 0 1.032.462 1.032 1.032v2.177c0 .57-.462 1.032-1.032 1.032h-7.886c-.57 0-1.033-.462-1.033-1.032v-2.177c0-.57.463-1.032 1.033-1.032zm222.878-9.396h-38.663v12.24a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-12.24zM66.124 85.711h-5.82v.111h5.82v-.111zm218.986-5.203c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM77 74.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm80.015-5.442c2.612 0 4.82 1.717 5.553 4.21a1.895 1.895 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 11-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zm23.513 0c2.613 0 4.82 1.717 5.553 4.21a1.896 1.896 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 01-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zM77 65.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm213.356-3.069h-37.303a.68.68 0 00-.672.58l-.008.1v3.691h38.663v-3.691a.68.68 0 00-.58-.673l-.1-.007zM67.12 60.839a1.033 1.033 0 01.113 2.059l-.113.006h-9.038a1.033 1.033 0 01-.113-2.06l.113-.005h9.038zm146.75-22.6h-63.996l-.021.196-.335 2.564 68.458.001c-.674-1.547-2.188-2.669-3.895-2.755l-.21-.005z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: themeValues.subIconColor,
+    fillRule: "nonzero",
+    d: "M168.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm113.69-42.95a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.008-.017-.531-.018-1.568v-1.543c0-.602.002-1.29.004-2.067l9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zM80.5 96.46a2.04 2.04 0 01.152 4.074l-.152.006h-4.092l11.455 11.59 9.934-8.627c.042-.036.14-.108.191-.144l.016-.012-.001.014c-.006.096-.008.588-.01 1.24v2.431l-.001.667a25.458 25.458 0 01-.01 1.048l-8.888 7.718-.017.014-.017.015-.06.048.094-.077a2.066 2.066 0 01-.811.43c-.037.01-.074.02-.111.027l-.03.006a1.966 1.966 0 01-.577.028 2 2 0 01-.686-.189 2.032 2.032 0 01-.304-.179l-.037-.027a1.865 1.865 0 01-.095-.075l-.008-.007-.042-.036a2.05 2.05 0 01-.077-.073l-.01-.011-14.257-14.425a2.033 2.033 0 01-.589-1.394H62.5a2.04 2.04 0 01-.152-4.074l.152-.006h18zm-6.795-49.011c.944 0 1.6.81 1.663 1.741l.005.148v3.68s-.5.017-1 .026v.07H53.098v1.907h-5.725v17.54a8.885 8.885 0 012.492-.43l.263-.003a8.905 8.905 0 11-2.914 17.322l-.84-.001a1 1 0 01-.994-.882 8.898 8.898 0 01-4.157-7.535 8.898 8.898 0 014.15-7.53V49.338c0-.942.609-1.8 1.522-1.883l.146-.006h26.664zm172.423 19.679a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005h-3.818v-2h3.818c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v4.728h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303zm-241.54 9.649v1l-3.351-.001v2.834h3.35v1h-4.35V64.38h4.35zm-.519-6.025v1h-2.832v2.834h2.832v1h-3.832v-4.834h3.832z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "#FFF",
+    d: "M51.196 76.402v3.56l3.562.002V82.1h-3.562v3.562H49.06V82.1h-3.562v-2.137l3.561-.001.001-3.561h2.137zm196-5v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
+  }))));
+};
+var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$2, "info");
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -18575,17 +18477,38 @@ var Checkbox = function Checkbox(_ref4) {
       onChange = _ref4$onChange === void 0 ? noop : _ref4$onChange,
       _ref4$disabled = _ref4.disabled,
       disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _ref4$focused = _ref4.focused,
-      focused = _ref4$focused === void 0 ? false : _ref4$focused,
       themeValues = _ref4.themeValues,
       _ref4$hidden = _ref4.hidden,
       hidden = _ref4$hidden === void 0 ? false : _ref4$hidden,
       _ref4$error = _ref4.error,
       error = _ref4$error === void 0 ? false : _ref4$error;
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+  var handleClick = function handleClick(e, func) {
+    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+      func();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onKeyDown: function onKeyDown(e) {
+      return handleClick(e, onChange);
+    },
     hiddenStyles: hidden,
-    background: themeValues.backgroundColor
+    background: themeValues.backgroundColor,
+    extraStyles: "outline: none;"
   }, /*#__PURE__*/React__default.createElement(CheckboxLabelContainer, null, /*#__PURE__*/React__default.createElement(CheckboxContainer, {
     "data-qa": "Checkbox"
   }, /*#__PURE__*/React__default.createElement(HiddenCheckbox, {
@@ -19108,7 +19031,6 @@ var Dropdown = function Dropdown(_ref9) {
   return /*#__PURE__*/React__default.createElement(Box, {
     onKeyDown: onKeyDown,
     onClick: onClick,
-    tabIndex: 0,
     padding: "0",
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
@@ -19122,7 +19044,8 @@ var Dropdown = function Dropdown(_ref9) {
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
     borderRadius: "2px",
-    extraStyles: "tabindex: 0; height: 48px;",
+    tabIndex: 0,
+    extraStyles: "height: 48px;",
     dataQa: placeholder
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
@@ -34293,17 +34216,6 @@ var formats = /*#__PURE__*/Object.freeze({
   moneyFormat: moneyFormat
 });
-function _templateObject$x() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject$x = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var CheckboxWrapper = styled__default.div(_templateObject$x());
 var AddressForm = function AddressForm(_ref) {
   var _zipErrorMessages;
@@ -34319,17 +34231,6 @@ var AddressForm = function AddressForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkboxFocused = _useState2[0],
-      focusCheckbox = _useState2[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -34417,24 +34318,12 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, saveToWallet);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 var formConfig = {
@@ -34737,16 +34626,16 @@ function _templateObject2$j() {
   return data;
 }
-function _templateObject$y() {
+function _templateObject$x() {
   var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
-  _templateObject$y = function _templateObject() {
+  _templateObject$x = function _templateObject() {
     return data;
   };
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$y(), WHITE, function (_ref) {
+var EditableListItem = styled__default.div(_templateObject$x(), WHITE, function (_ref) {
   var listItemSize = _ref.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
@@ -34931,16 +34820,16 @@ function _templateObject2$k() {
   return data;
 }
-function _templateObject$z() {
+function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"]);
-  _templateObject$z = function _templateObject() {
+  _templateObject$y = function _templateObject() {
     return data;
   };
   return data;
 }
-var EditableTableContainer = styled__default.div(_templateObject$z(), function (_ref) {
+var EditableTableContainer = styled__default.div(_templateObject$y(), function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
@@ -35052,17 +34941,6 @@ var TableListItem = function TableListItem(_ref) {
   }, "Edit")) : /*#__PURE__*/React__default.createElement(React.Fragment, null))));
 };
-function _templateObject$A() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject$A = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var CheckboxWrapper$1 = styled__default.div(_templateObject$A());
 var EmailForm = function EmailForm(_ref) {
   var _emailFieldErrorMessa;
@@ -35079,17 +34957,6 @@ var EmailForm = function EmailForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkboxFocused = _useState2[0],
-      focusCheckbox = _useState2[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -35115,24 +34982,12 @@ var EmailForm = function EmailForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$1, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, saveToWallet);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "email checkbox",
     title: "Save email address to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 var formConfig$3 = {
@@ -36476,8 +36331,7 @@ var getApplicationNode = function getApplicationNode() {
 };
 var Modal$1 = function Modal(_ref) {
-  var ModalLink = _ref.ModalLink,
-      hideModal = _ref.hideModal,
+  var hideModal = _ref.hideModal,
       continueAction = _ref.continueAction,
       cancelAction = _ref.cancelAction,
       modalOpen = _ref.modalOpen,
@@ -36499,12 +36353,13 @@ var Modal$1 = function Modal(_ref) {
       onlyCloseButton = _ref$onlyCloseButton === void 0 ? false : _ref$onlyCloseButton,
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
-      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi;
+      underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+      children = _ref.children;
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModalLink, null), modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, modalOpen && /*#__PURE__*/React__default.createElement(reactAriaModal, {
     onExit: hideModal,
     getApplicationNode: getApplicationNode,
     titleText: modalHeaderText,
@@ -36576,7 +36431,7 @@ var Modal$1 = function Modal(_ref) {
     variant: "primary",
     text: "Close",
     dataQa: "Close"
-  })))))))));
+  })))))))), children);
 };
 var fontSize$8 = {
@@ -36713,10 +36568,10 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
 var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$v, "profile");
-function _templateObject$B() {
+function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
-  _templateObject$B = function _templateObject() {
+  _templateObject$z = function _templateObject() {
     return data;
   };
@@ -36752,7 +36607,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu)(_templateObject$B());
+var ImposterMenu = styled__default(menu)(_templateObject$z());
 var NavMenuMobile = function NavMenuMobile(_ref) {
   var id = _ref.id,
@@ -38275,10 +38130,16 @@ var TitleModule = function TitleModule(_ref) {
 var color$a = "#15749D";
 var hoverColor$4 = "#116285";
 var activeColor$5 = "#0E506D";
+var linkColor$3 = "#357fb8";
+var fontWeight$6 = FONT_WEIGHT_REGULAR;
+var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #357fb8;";
 var fallbackValues$w = {
   color: color$a,
   hoverColor: hoverColor$4,
-  activeColor: activeColor$5
+  activeColor: activeColor$5,
+  linkColor: linkColor$3,
+  fontWeight: fontWeight$6,
+  modalLinkHoverFocus: modalLinkHoverFocus
 };
 var AutopayModal = function AutopayModal(_ref) {
@@ -38308,34 +38169,6 @@ var AutopayModal = function AutopayModal(_ref) {
   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 ".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__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: "".concat(planType, " 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);
     },
@@ -38343,7 +38176,43 @@ var AutopayModal = function AutopayModal(_ref) {
       return toggleModal(false);
     },
     modalOpen: modalOpen
-  }, modalExtraProps));
+  }, modalExtraProps), buttonLinkType ? /*#__PURE__*/React__default.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__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(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: themeValues.linkColor,
+    weight: themeValues.fontWeight,
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    extraStyles: "padding: 0 0 0 6px;"
+  }, "".concat(planType, " On")))));
 };
 var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$w);
@@ -39081,32 +38950,27 @@ var PaymentDetails = function PaymentDetails(_ref4) {
 var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$x, "default");
-var linkColor$3 = {
-  "default": "#357fb8",
-  footer: "#ffffff"
+var linkColor$4 = {
+  "default": "#357fb8"
 };
 var fontSize$9 = {
-  "default": "1rem",
-  footer: "0.875rem"
+  "default": "1rem"
 };
 var lineHeight$5 = {
-  "default": "1.5rem",
-  footer: "1.25rem"
+  "default": "1.5rem"
 };
-var fontWeight$6 = {
-  "default": FONT_WEIGHT_REGULAR,
-  footer: FONT_WEIGHT_SEMIBOLD
+var fontWeight$7 = {
+  "default": FONT_WEIGHT_REGULAR
 };
-var modalLinkHoverFocus = {
-  "default": "",
-  footer: "outline: none; text-decoration: underline;"
+var modalLinkHoverFocus$1 = {
+  "default": "outline: none; text-decoration: underline;"
 };
 var fallbackValues$y = {
-  linkColor: linkColor$3,
+  linkColor: linkColor$4,
   fontSize: fontSize$9,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$6,
-  modalLinkHoverFocus: modalLinkHoverFocus
+  fontWeight: fontWeight$7,
+  modalLinkHoverFocus: modalLinkHoverFocus$1
 };
 var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
@@ -39118,25 +38982,8 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       acceptText = _ref.acceptText,
       content = _ref.content,
       imageType = _ref.imageType,
-      variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
-    ModalLink: function ModalLink() {
-      return /*#__PURE__*/React__default.createElement(Text$1, {
-        variant: variant === "default" ? "pS" : "pXS",
-        onClick: function onClick() {
-          return toggleOpen(true);
-        },
-        color: themeValues.linkColor,
-        weight: themeValues.fontWeight,
-        hoverStyles: themeValues.modalLinkHoverFocus,
-        extraStyles: "cursor: pointer;",
-        tabIndex: "0",
-        onKeyPress: function onKeyPress(e) {
-          return e.key === "Enter" && toggleOpen(true);
-        }
-      }, link);
-    },
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -39161,33 +39008,24 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  });
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    onClick: function onClick() {
+      return toggleOpen(true);
+    },
+    onKeyPress: function onKeyPress(e) {
+      return e.key === "Enter" && toggleOpen(true);
+    },
+    tabIndex: "0",
+    color: themeValues.linkColor,
+    weight: themeValues.fontWeight,
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    extraStyles: "cursor: pointer;"
+  }, link));
 };
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$y, "default");
-function _templateObject2$l() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject2$l = function _templateObject2() {
-    return data;
-  };
-  return data;
-}
-function _templateObject$C() {
-  var data = _taggedTemplateLiteral([""]);
-  _templateObject$C = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var ModalWrapper = styled__default.div(_templateObject$C());
-var CheckboxWrapper$2 = styled__default.div(_templateObject2$l());
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -39208,17 +39046,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkboxFocused = _useState2[0],
-      focusCheckbox = _useState2[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -39227,15 +39054,15 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     }, []);
   }
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showRouting = _useState2[0],
+      toggleShowRouting = _useState2[1];
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      showRouting = _useState4[0],
-      toggleShowRouting = _useState4[1];
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      showAccount = _useState6[0],
-      toggleShowAccount = _useState6[1];
+      showAccount = _useState4[0],
+      toggleShowAccount = _useState4[1];
   var nameErrors = _defineProperty({}, required.error, "Name is required");
@@ -39269,19 +39096,14 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.routingNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
-        tabIndex: "0",
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Enter" && toggleShowAccount(!showRouting);
-        }
-      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
         title: "Where is my routing number?",
         content: "Your routing number is the 9-digit number in the bottom left corner of your check.",
         imageType: "Routing",
         isOpen: showRouting,
         toggleOpen: toggleShowRouting
-      }));
+      });
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39302,19 +39124,14 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     fieldActions: actions.fields.accountNumber,
     showErrors: showErrors,
     helperModal: function helperModal() {
-      return /*#__PURE__*/React__default.createElement(ModalWrapper, {
-        tabIndex: "0",
-        onKeyDown: function onKeyDown(e) {
-          return e.key === "Enter" && toggleShowAccount(!showAccount);
-        }
-      }, /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
+      return /*#__PURE__*/React__default.createElement(AccountAndRoutingModal$1, {
         link: "What is this?",
         title: "Where is my account number?",
         content: "Your account number is usually the 10-digit number in the bottom of your check to the right of the routing number.",
         imageType: "Account",
         isOpen: showAccount,
         toggleOpen: toggleShowAccount
-      }));
+      });
     },
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
@@ -39350,24 +39167,12 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$2, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, saveToWallet);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "bank checkbox",
     title: "Save bank account to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 var formConfig$6 = {
@@ -39407,17 +39212,6 @@ PaymentFormACH.mapDispatchToProps = mapDispatchToProps$6;
 var _creditCardNumberErro, _expirationDateErrors, _cvvErrors, _zipCodeErrors;
-function _templateObject$D() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject$D = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var CheckboxWrapper$3 = styled__default.div(_templateObject$D());
 var nameOnCardErrors = _defineProperty({}, required.error, "Name is required");
 var creditCardNumberErrors = (_creditCardNumberErro = {}, _defineProperty(_creditCardNumberErro, required.error, "Credit card number is required"), _defineProperty(_creditCardNumberErro, hasLength.error, "Credit card number is invalid"), _creditCardNumberErro);
@@ -39442,18 +39236,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       showWalletCheckbox = _ref.showWalletCheckbox,
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkboxFocused = _useState2[0],
-      focusCheckbox = _useState2[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   React.useEffect(function () {
     if (clearOnDismount) {
       return function () {
@@ -39534,24 +39316,12 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$3, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, saveToWallet);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  })), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "credit card checkbox",
     title: "Save credit card to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 var formConfig$7 = {
@@ -39589,17 +39359,6 @@ PaymentFormCard.reducer = reducer$7;
 PaymentFormCard.mapStateToProps = mapStateToProps$8;
 PaymentFormCard.mapDispatchToProps = mapDispatchToProps$7;
-function _templateObject$E() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject$E = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var CheckboxWrapper$4 = styled__default.div(_templateObject$E());
 var PhoneForm = function PhoneForm(_ref) {
   var _phoneErrorMessage;
@@ -39615,17 +39374,6 @@ var PhoneForm = function PhoneForm(_ref) {
       saveToWallet = _ref.saveToWallet,
       walletCheckboxMarked = _ref.walletCheckboxMarked;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      checkboxFocused = _useState2[0],
-      focusCheckbox = _useState2[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     React.useEffect(function () {
       return function () {
@@ -39649,24 +39397,12 @@ var PhoneForm = function PhoneForm(_ref) {
     onKeyUp: function onKeyUp(e) {
       return e.key === "Enter" && handleSubmit(e);
     }
-  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(CheckboxWrapper$4, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, saveToWallet);
-    }
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "phone checkbox",
     title: "Save phone number to wallet",
     checked: walletCheckboxMarked,
-    onChange: saveToWallet,
-    focused: checkboxFocused
-  }))));
+    onChange: saveToWallet
+  })));
 };
 var formConfig$8 = {
@@ -39698,10 +39434,10 @@ var fallbackValues$z = {
   focusStyles: focusStyles
 };
-function _templateObject$F() {
+function _templateObject$A() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
-  _templateObject$F = function _templateObject() {
+  _templateObject$A = function _templateObject() {
     return data;
   };
@@ -39771,7 +39507,7 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
   var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img(_templateObject$F(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$A(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -40232,7 +39968,7 @@ var backgroundColor$9 = {
   "default": "#ffffff",
   footer: "#ffffff"
 };
-var linkColor$4 = {
+var linkColor$5 = {
   "default": "#357fb8",
   footer: "#ffffff"
 };
@@ -40248,22 +39984,22 @@ var lineHeight$6 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$7 = {
+var fontWeight$8 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
-var modalLinkHoverFocus$1 = {
-  "default": "",
+var modalLinkHoverFocus$2 = {
+  "default": "outline: none; text-decoration: underline;",
   footer: "outline: none; text-decoration: underline;"
 };
 var fallbackValues$B = {
   backgroundColor: backgroundColor$9,
-  linkColor: linkColor$4,
+  linkColor: linkColor$5,
   border: border$2,
   fontSize: fontSize$a,
   lineHeight: lineHeight$6,
-  fontWeight: fontWeight$7,
-  modalLinkHoverFocus: modalLinkHoverFocus$1
+  fontWeight: fontWeight$8,
+  modalLinkHoverFocus: modalLinkHoverFocus$2
 };
 var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
@@ -40278,22 +40014,6 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
-    ModalLink: function ModalLink() {
-      return /*#__PURE__*/React__default.createElement(Text$1, {
-        variant: variant === "default" ? "pS" : "pXS",
-        onClick: function onClick() {
-          return toggleOpen(true);
-        },
-        color: themeValues.linkColor,
-        weight: themeValues.fontWeight,
-        hoverStyles: themeValues.modalLinkHoverFocus,
-        extraStyles: "cursor: pointer;",
-        tabIndex: "0",
-        onKeyPress: function onKeyPress(e) {
-          return e.key === "Enter" && toggleOpen(true);
-        }
-      }, link);
-    },
     modalOpen: isOpen,
     hideModal: function hideModal() {
       return toggleOpen(false);
@@ -40317,33 +40037,24 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       toggleAccepted(true);
       toggleOpen(false);
     }
-  });
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: variant === "default" ? "pS" : "pXS",
+    onClick: function onClick() {
+      return toggleOpen(true);
+    },
+    onKeyPress: function onKeyPress(e) {
+      return e.key === "Enter" && toggleOpen(true);
+    },
+    tabIndex: "0",
+    color: themeValues.linkColor,
+    weight: themeValues.fontWeight,
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    extraStyles: "cursor: pointer;"
+  }, link));
 };
 var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$B, "default");
-function _templateObject2$m() {
-  var data = _taggedTemplateLiteral([""]);
-  _templateObject2$m = function _templateObject2() {
-    return data;
-  };
-  return data;
-}
-function _templateObject$G() {
-  var data = _taggedTemplateLiteral(["\n  outline: none;\n"]);
-  _templateObject$G = function _templateObject() {
-    return data;
-  };
-  return data;
-}
-var CheckboxWrapper$5 = styled__default.div(_templateObject$G());
-var ModalWrapper$1 = styled__default.div(_templateObject2$m());
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
       isChecked = _ref.isChecked,
@@ -40357,54 +40068,24 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
       showTerms = _useState2[0],
       toggleShowTerms = _useState2[1];
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      checkboxFocused = _useState4[0],
-      focusCheckbox = _useState4[1];
-  var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
-      func();
-    }
-  };
   return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
-  }, /*#__PURE__*/React__default.createElement(CheckboxWrapper$5, {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return focusCheckbox(true);
-    },
-    onBlur: function onBlur() {
-      return focusCheckbox(false);
-    },
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, onCheck);
-    }
   }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "terms",
     error: error,
     checked: isChecked,
-    onChange: onCheck,
-    focused: checkboxFocused
-  })), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
+    onChange: onCheck
+  }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     fontWeight: FONT_WEIGHT_BOLD
   }, "Terms and Conditions"), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, html), terms && /*#__PURE__*/React__default.createElement(ModalWrapper$1, {
-    tabIndex: "0",
-    onKeyDown: function onKeyDown(e) {
-      return handleClick(e, function () {
-        return toggleShowTerms(!showTerms);
-      });
-    }
-  }, /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
+  }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
     link: "Learn More",
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms
-  })))));
+  }))));
 };
 var Timeout = function Timeout(_ref) {
@@ -40444,29 +40125,29 @@ var Timeout = function Timeout(_ref) {
 var Timeout$1 = withWindowSize(Timeout);
-var fontWeight$8 = "600";
+var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
 var fallbackValues$C = {
-  fontWeight: fontWeight$8,
+  fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor,
   imageBackgroundColor: imageBackgroundColor
 };
-function _templateObject$H() {
+function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
-  _templateObject$H = function _templateObject() {
+  _templateObject$B = function _templateObject() {
     return data;
   };
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$H());
+var WelcomeImage = styled__default.img(_templateObject$B());
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,
@@ -40917,6 +40598,7 @@ exports.PendingIcon = PendingIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;
 exports.ProcessingFee = ProcessingFee$1;
+exports.ProfileIcon = ProfileIcon$1;
 exports.ProfileIconSmall = ProfileIconSmall$1;
 exports.PropertiesAddIcon = PropertiesAddIcon$1;
 exports.PropertiesIconSmall = PropertiesIconSmall$1;