@thecb/components 4.1.14 → 4.1.16

package/dist/index.cjs.js

@@ -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;