@thecb/components 3.0.0 → 3.1.1

package/dist/index.cjs.js

@@ -814,18 +814,8 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
+  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -835,7 +825,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -845,7 +835,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n        ", "\n        ", "\n      "]);
+  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -885,7 +875,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover, &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -905,7 +895,6 @@ function _templateObject() {
 
 var BoxWrapper = styled__default(function (_ref) {
   var activeStyles = _ref.activeStyles,
-      focusStyles = _ref.focusStyles,
       hoverStyles = _ref.hoverStyles,
       disabledStyles = _ref.disabledStyles,
       extraStyles = _ref.extraStyles,
@@ -919,7 +908,7 @@ var BoxWrapper = styled__default(function (_ref) {
       minWidth = _ref.minWidth,
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "focusStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding"]);
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding"]);
 
   return /*#__PURE__*/React__default.createElement("div", props);
 })(_templateObject(), function (_ref2) {
@@ -968,29 +957,25 @@ var BoxWrapper = styled__default(function (_ref) {
       as = _ref15.as;
   return styled.css(_templateObject2(), hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref16) {
-  var focusStyles = _ref16.focusStyles,
+  var activeStyles = _ref16.activeStyles,
       as = _ref16.as;
-  return styled.css(_templateObject3(), focusStyles, as === "button" ? "> * > span {\n          ".concat(focusStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return styled.css(_templateObject3(), activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
-  var activeStyles = _ref17.activeStyles,
+  var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return styled.css(_templateObject4(), activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return styled.css(_templateObject4(), disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref18) {
-  var disabledStyles = _ref18.disabledStyles,
-      as = _ref18.as;
-  return styled.css(_templateObject5(), disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
-}, function (_ref19) {
-  var color = _ref19.color;
+  var color = _ref18.color;
   return color;
+}, function (_ref19) {
+  var hiddenStyles = _ref19.hiddenStyles;
+  return hiddenStyles && styled.css(_templateObject5());
 }, function (_ref20) {
-  var hiddenStyles = _ref20.hiddenStyles;
-  return hiddenStyles && styled.css(_templateObject6());
+  var extraStyles = _ref20.extraStyles;
+  return styled.css(_templateObject6(), extraStyles);
 }, function (_ref21) {
-  var extraStyles = _ref21.extraStyles;
-  return styled.css(_templateObject7(), extraStyles);
-}, function (_ref22) {
-  var hiddenStyles = _ref22.hiddenStyles;
-  return hiddenStyles && styled.css(_templateObject8());
+  var hiddenStyles = _ref21.hiddenStyles;
+  return hiddenStyles && styled.css(_templateObject7());
 });
 /* eslint-enable no-unused-vars */
 
@@ -2097,7 +2082,6 @@ var Box = function Box(_ref) {
       border = _ref.border,
       textAlign = _ref.textAlign,
       hoverStyles = _ref.hoverStyles,
-      focusStyles = _ref.focusStyles,
       activeStyles = _ref.activeStyles,
       disabledStyles = _ref.disabledStyles,
       variant = _ref.variant,
@@ -2114,7 +2098,7 @@ var Box = function Box(_ref) {
       extraStyles = _ref.extraStyles,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "focusStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(BoxWrapper, _extends({
     padding: padding,
@@ -2131,7 +2115,6 @@ var Box = function Box(_ref) {
     borderWidthOverride: borderWidthOverride,
     border: border,
     hoverStyles: hoverStyles,
-    focusStyles: focusStyles,
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
     variant: variant,
@@ -9380,7 +9363,7 @@ if (typeof window !== "undefined") {
 }
 
 function _templateObject$a() {
-  var data = _taggedTemplateLiteral(["\n  position: ", ";\n  display: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  border-color: ", ";\n  border-size: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  text-align: ", ";\n  margin: ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  &:active {\n    ", ";\n  }\n\n  &:focus {\n    ", ";\n  }\n\n  &:disabled {\n    ", ";\n  }\n\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: ", ";\n  display: ", ";\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  border-color: ", ";\n  border-size: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  text-align: ", ";\n  margin: ", ";\n\n  &:hover,\n  &:focus {\n    ", ";\n  }\n\n  &:active {\n    ", ";\n  }\n\n  &:disabled {\n    ", ";\n  }\n\n  ", ";\n"]);
 
   _templateObject$a = function _templateObject() {
     return data;
@@ -9446,13 +9429,10 @@ var MotionWrapper = styled__default(motion.div)(_templateObject$a(), function (_
   var activeStyles = _ref19.activeStyles;
   return activeStyles;
 }, function (_ref20) {
-  var focusStyles = _ref20.focusStyles;
-  return focusStyles;
-}, function (_ref21) {
-  var disabledStyles = _ref21.disabledStyles;
+  var disabledStyles = _ref20.disabledStyles;
   return disabledStyles;
-}, function (_ref22) {
-  var extraStyles = _ref22.extraStyles;
+}, function (_ref21) {
+  var extraStyles = _ref21.extraStyles;
   return extraStyles;
 });
 
@@ -9733,18 +9713,8 @@ var style_constants = /*#__PURE__*/Object.freeze({
   FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD
 });
 
-function _templateObject4$1() {
-  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
-
-  _templateObject4$1 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteral(["\n        ", "\n      "]);
+  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
   _templateObject3$2 = function _templateObject3() {
     return data;
@@ -9764,7 +9734,7 @@ function _templateObject2$4() {
 }
 
 function _templateObject$c() {
-  var data = _taggedTemplateLiteral(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n\n  &:hover,\n  &:focus {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject$c = function _templateObject() {
     return data;
@@ -9788,14 +9758,11 @@ var TextSpan = styled__default.span(_templateObject$c(), function (_ref) {
   var hoverStyles = _ref5.hoverStyles;
   return styled.css(_templateObject2$4(), hoverStyles);
 }, function (_ref6) {
-  var focusStyles = _ref6.focusStyles;
-  return styled.css(_templateObject3$2(), focusStyles);
+  var disabled = _ref6.disabled,
+      disabledStyles = _ref6.disabledStyles;
+  return disabled && styled.css(_templateObject3$2(), disabledStyles);
 }, function (_ref7) {
-  var disabled = _ref7.disabled,
-      disabledStyles = _ref7.disabledStyles;
-  return disabled && styled.css(_templateObject4$1(), disabledStyles);
-}, function (_ref8) {
-  var extraStyles = _ref8.extraStyles;
+  var extraStyles = _ref7.extraStyles;
   return extraStyles;
 });
 
@@ -9808,11 +9775,10 @@ var Text = function Text(_ref) {
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       hoverStyles = _ref.hoverStyles,
-      focusStyles = _ref.focusStyles,
       onClick = _ref.onClick,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "focusStyles", "onClick", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(TextSpan, _extends({
     fontSize: themeValues.fontSize,
@@ -9821,7 +9787,6 @@ var Text = function Text(_ref) {
     fontFamily: themeValues.fontFamily,
     extraStyles: extraStyles,
     hoverStyles: hoverStyles,
-    focusStyles: focusStyles,
     onClick: onClick,
     "data-qa": dataQa
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
@@ -10083,12 +10048,16 @@ var fontFamily$2 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
+var hoverColor = "#116285";
+var activeColor$1 = "#0E506D";
 var fallbackValues$5 = {
-  fontFamily: fontFamily$2
+  fontFamily: fontFamily$2,
+  hoverColor: hoverColor,
+  activeColor: activeColor$1
 };
 
 function _templateObject$e() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$e = function _templateObject() {
     return data;
@@ -10105,8 +10074,9 @@ function _templateObject$e() {
 
 var StyledExternalLink = styled__default(function (_ref) {
   var hoverColor = _ref.hoverColor,
+      activeColor = _ref.activeColor,
       extraStyles = _ref.extraStyles,
-      props = _objectWithoutProperties(_ref, ["hoverColor", "extraStyles"]);
+      props = _objectWithoutProperties(_ref, ["hoverColor", "activeColor", "extraStyles"]);
 
   return /*#__PURE__*/React__default.createElement("a", props);
 })(_templateObject$e(), function (_ref2) {
@@ -10128,7 +10098,10 @@ var StyledExternalLink = styled__default(function (_ref) {
   var hovercolor = _ref7.hovercolor;
   return hovercolor;
 }, function (_ref8) {
-  var extrastyles = _ref8.extrastyles;
+  var activeColor = _ref8.activeColor;
+  return activeColor;
+}, function (_ref9) {
+  var extrastyles = _ref9.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -10146,8 +10119,6 @@ var ExternalLink = function ExternalLink(_ref) {
       lineHeight = _ref$lineHeight === void 0 ? "1.5rem" : _ref$lineHeight,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
-      _ref$hoverColor = _ref.hoverColor,
-      hoverColor = _ref$hoverColor === void 0 ? SCIENCE_BLUE : _ref$hoverColor,
       _ref$extraStyles = _ref.extraStyles,
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
       _ref$variant = _ref.variant,
@@ -10164,7 +10135,8 @@ var ExternalLink = function ExternalLink(_ref) {
     size: size,
     lineheight: lineHeight,
     weight: weight,
-    hovercolor: hoverColor,
+    hovercolor: themeValues.hoverColor,
+    activeColor: themeValues.activeColor,
     fontFamily: themeValues.fontFamily,
     tabIndex: tabIndex,
     extrastyles: extraStyles,
@@ -10172,28 +10144,8 @@ var ExternalLink = function ExternalLink(_ref) {
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 };
 
-function _templateObject3$3() {
-  var data = _taggedTemplateLiteral(["\n      ", "\n      cursor: default;\n      pointer-events: none;\n    "]);
-
-  _templateObject3$3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$5() {
-  var data = _taggedTemplateLiteral(["\n        ", "\n      "]);
-
-  _templateObject2$5 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject$f() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n  text-decoration: ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$f = function _templateObject() {
     return data;
@@ -10209,15 +10161,17 @@ function _templateObject$f() {
 /* eslint-disable no-unused-vars */
 
 var StyledInternalLink = styled__default(function (_ref) {
-  var hoverStyles = _ref.hoverStyles,
-      activeStyles = _ref.activeStyles,
+  var hoverColor = _ref.hoverColor,
+      activeColor = _ref.activeColor,
       active = _ref.active,
-      props = _objectWithoutProperties(_ref, ["hoverStyles", "activeStyles", "active"]);
+      props = _objectWithoutProperties(_ref, ["hoverColor", "activeColor", "active"]);
 
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, props);
 })(_templateObject$f(), function (_ref2) {
-  var color = _ref2.color;
-  return color;
+  var color = _ref2.color,
+      active = _ref2.active,
+      activeColor = _ref2.activeColor;
+  return active === true ? activeColor : color;
 }, function (_ref3) {
   var fontWeight = _ref3.fontWeight;
   return fontWeight;
@@ -10234,14 +10188,16 @@ var StyledInternalLink = styled__default(function (_ref) {
   var margin = _ref7.margin;
   return margin;
 }, function (_ref8) {
-  var hoverStyles = _ref8.hoverStyles;
-  return styled.css(_templateObject2$5(), hoverStyles);
+  var active = _ref8.active;
+  return active === true ? "underline" : "none";
 }, function (_ref9) {
-  var activeStyles = _ref9.activeStyles,
-      active = _ref9.active;
-  return active === "true" && styled.css(_templateObject3$3(), activeStyles);
+  var hovercolor = _ref9.hovercolor;
+  return hovercolor;
 }, function (_ref10) {
-  var extrastyles = _ref10.extrastyles;
+  var activeColor = _ref10.activeColor;
+  return activeColor;
+}, function (_ref11) {
+  var extrastyles = _ref11.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -10251,7 +10207,6 @@ var InternalLink = function InternalLink(_ref) {
       to = _ref$to === void 0 ? "" : _ref$to,
       color = _ref.color,
       children = _ref.children,
-      activeStyles = _ref.activeStyles,
       active = _ref.active,
       fontSize = _ref.fontSize,
       lineheight = _ref.lineheight,
@@ -10259,7 +10214,6 @@ var InternalLink = function InternalLink(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       margin = _ref.margin,
-      hoverStyles = _ref.hoverStyles,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? "0" : _ref$tabIndex,
       _ref$extraStyles = _ref.extraStyles,
@@ -10270,13 +10224,13 @@ var InternalLink = function InternalLink(_ref) {
     to: to,
     color: color,
     lineheight: lineheight,
-    activeStyles: activeStyles,
     active: active,
     fontWeight: fontWeight,
     fontSize: fontSize,
     fontFamily: themeValues.fontFamily,
     margin: margin,
-    hoverStyles: hoverStyles,
+    hoverColor: themeValues.hoverColor,
+    activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
     extrastyles: extraStyles
   }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
@@ -10304,12 +10258,10 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
-      activeStyles: themeValues.activeColor,
       fontSize: themeValues.fontSize,
       lineheight: themeValues.lineHeight,
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
-      hoverStyles: themeValues.hover,
       extraStyles: "\n                          text-transform: uppercase;\n                          &:first-child {\n                            margin-left: 0;\n                          }"
     }, linkText), index < breadcrumbsList.length - 1 && /*#__PURE__*/React__default.createElement(IconChevron, null));
   })));
@@ -13319,7 +13271,7 @@ var hoverBorderColor = {
   smallGhost: "transparent",
   danger: "#BA002C"
 };
-var hoverColor = {
+var hoverColor$1 = {
   primary: "#FFFFFF",
   secondary: "#116285",
   back: "#116285",
@@ -13349,7 +13301,7 @@ var activeBorderColor = {
   smallGhost: "transparent",
   danger: "#870000"
 };
-var activeColor$1 = {
+var activeColor$2 = {
   primary: "#FFFFFF",
   secondary: "#0E506D",
   back: "#0E506D",
@@ -13370,16 +13322,16 @@ var fallbackValues$6 = {
   border: border$1,
   hoverBackgroundColor: hoverBackgroundColor,
   hoverBorderColor: hoverBorderColor,
-  hoverColor: hoverColor,
+  hoverColor: hoverColor$1,
   activeBackgroundColor: activeBackgroundColor,
   activeBorderColor: activeBorderColor,
-  activeColor: activeColor$1
+  activeColor: activeColor$2
 };
 
-function _templateObject2$6() {
+function _templateObject2$5() {
   var data = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n"]);
 
-  _templateObject2$6 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
   };
 
@@ -13411,7 +13363,7 @@ var rotate = posed.div({
   }
 });
 var SpinnerContainer = styled__default.div(_templateObject$g());
-var SpinnerIconWrapper = styled__default(rotate)(_templateObject2$6(), function (_ref) {
+var SpinnerIconWrapper = styled__default(rotate)(_templateObject2$5(), function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -13455,10 +13407,10 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
   }))))));
 };
 
-function _templateObject2$7() {
+function _templateObject2$6() {
   var data = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"]);
 
-  _templateObject2$7 = function _templateObject2() {
+  _templateObject2$6 = function _templateObject2() {
     return data;
   };
 
@@ -13490,7 +13442,7 @@ var rotate$1 = posed.div({
   }
 });
 var SpinnerContainer$1 = styled__default.div(_templateObject$h());
-var SpinnerIconWrapper$1 = styled__default(rotate$1)(_templateObject2$7());
+var SpinnerIconWrapper$1 = styled__default(rotate$1)(_templateObject2$6());
 
 var Spinner = function Spinner() {
   return /*#__PURE__*/React__default.createElement(SpinnerContainer$1, null, /*#__PURE__*/React__default.createElement(SpinnerIconWrapper$1, {
@@ -13534,8 +13486,8 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$6, "Button", variant);
   var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem;");
-  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n  ");
-  var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n  ");
+  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
+  var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-clor: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
   return /*#__PURE__*/React__default.createElement(Box, {
     variant: variant,
@@ -13545,7 +13497,6 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
     background: themeValues.backgroundColor,
     border: themeValues.border,
     hoverStyles: hoverStyles,
-    focusStyles: hoverStyles,
     activeStyles: activeStyles,
     disabledStyles: disabledStyles,
     as: "button",
@@ -13685,10 +13636,10 @@ function _templateObject9() {
   return data;
 }
 
-function _templateObject8$1() {
+function _templateObject8() {
   var data = _taggedTemplateLiteral(["\n          ", " ", "\n        "]);
 
-  _templateObject8$1 = function _templateObject8() {
+  _templateObject8 = function _templateObject8() {
     return data;
   };
 
@@ -13725,30 +13676,30 @@ function _templateObject5$1() {
   return data;
 }
 
-function _templateObject4$2() {
+function _templateObject4$1() {
   var data = _taggedTemplateLiteral(["\n          ", "\n        "]);
 
-  _templateObject4$2 = function _templateObject4() {
+  _templateObject4$1 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$4() {
+function _templateObject3$3() {
   var data = _taggedTemplateLiteral(["\n  fill: none;\n  stroke-width: 2px;\n  stroke: ", ";\n"]);
 
-  _templateObject3$4 = function _templateObject3() {
+  _templateObject3$3 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$8() {
+function _templateObject2$7() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);
 
-  _templateObject2$8 = function _templateObject2() {
+  _templateObject2$7 = function _templateObject2() {
     return data;
   };
 
@@ -13765,12 +13716,12 @@ function _templateObject$i() {
   return data;
 }
 var CheckboxContainer = styled__default.div(_templateObject$i());
-var CheckboxLabelContainer = styled__default.label(_templateObject2$8());
-var CheckboxIcon = styled__default.svg(_templateObject3$4(), function (_ref) {
+var CheckboxLabelContainer = styled__default.label(_templateObject2$7());
+var CheckboxIcon = styled__default.svg(_templateObject3$3(), function (_ref) {
   var disabled = _ref.disabled,
       disabledCheckColor = _ref.disabledCheckColor,
       checkColor = _ref.checkColor;
-  return disabled ? styled.css(_templateObject4$2(), disabledCheckColor) : styled.css(_templateObject5$1(), checkColor);
+  return disabled ? styled.css(_templateObject4$1(), disabledCheckColor) : styled.css(_templateObject5$1(), checkColor);
 });
 var HiddenCheckbox = styled__default.input.attrs({
   type: "checkbox"
@@ -13788,7 +13739,7 @@ var StyledCheckbox = styled__default.div(_templateObject7$1(), CheckboxIcon, fun
       focusedStyles = _ref3.focusedStyles,
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles;
-  return error ? styled.css(_templateObject8$1(), errorStyles, focused && focusedStyles) : disabled ? styled.css(_templateObject9(), disabledStyles) : checked ? styled.css(_templateObject10(), checkedStyles, focused && focusedStyles) : styled.css(_templateObject11(), defaultStyles, focused && focusedStyles);
+  return error ? styled.css(_templateObject8(), errorStyles, focused && focusedStyles) : disabled ? styled.css(_templateObject9(), disabledStyles) : checked ? styled.css(_templateObject10(), checkedStyles, focused && focusedStyles) : styled.css(_templateObject11(), defaultStyles, focused && focusedStyles);
 });
 
 var Checkbox = function Checkbox(_ref4) {
@@ -13888,10 +13839,10 @@ to the one generated by name-that-color.
 var PEWTER_GREY$1 = "#DFE1E4";
 var MARINER_BLUE$1 = "#2E75D2";
 
-function _templateObject2$9() {
+function _templateObject2$8() {
   var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
 
-  _templateObject2$9 = function _templateObject2() {
+  _templateObject2$8 = function _templateObject2() {
     return data;
   };
 
@@ -13919,7 +13870,7 @@ var RadioButtonBorder = styled__default.div(_templateObject$j(), function (_ref)
   return isSelected ? theme.accentColor : theme.inactiveColor;
 });
 RadioButtonBorder.defaultProps = defaultTheme;
-var RadioButtonCenter = styled__default.div(_templateObject2$9(), function (_ref2) {
+var RadioButtonCenter = styled__default.div(_templateObject2$8(), function (_ref2) {
   var theme = _ref2.theme;
   return theme.accentColor;
 });
@@ -13934,20 +13885,20 @@ var RadioButton = function RadioButton(_ref3) {
   }, isSelected && /*#__PURE__*/React__default.createElement(RadioButtonCenter, null));
 };
 
-function _templateObject3$5() {
+function _templateObject3$4() {
   var data = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: 5;\n  &:focus {\n    outline: none;\n  }\n"]);
 
-  _templateObject3$5 = function _templateObject3() {
+  _templateObject3$4 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$a() {
+function _templateObject2$9() {
   var data = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n  z-index: -2;\n  cursor: pointer;\n"]);
 
-  _templateObject2$a = function _templateObject2() {
+  _templateObject2$9 = function _templateObject2() {
     return data;
   };
 
@@ -13964,8 +13915,8 @@ function _templateObject$k() {
   return data;
 }
 var CheckboxItemIcon = styled__default.img(_templateObject$k());
-var HiddenCheckboxInput = styled__default.input(_templateObject2$a());
-var CheckboxLabel = styled__default.label(_templateObject3$5());
+var HiddenCheckboxInput = styled__default.input(_templateObject2$9());
+var CheckboxLabel = styled__default.label(_templateObject3$4());
 
 var CheckboxListItem = function CheckboxListItem(_ref) {
   var text = _ref.text,
@@ -26989,36 +26940,36 @@ var DropdownIcon = function DropdownIcon() {
 };
 
 var selectedColor = "".concat(MATISSE_BLUE);
-var hoverColor$1 = "".concat(HOVER_LIGHT_BLUE);
+var hoverColor$2 = "".concat(HOVER_LIGHT_BLUE);
 var fallbackValues$9 = {
   selectedColor: selectedColor,
-  hoverColor: hoverColor$1
+  hoverColor: hoverColor$2
 };
 
-function _templateObject4$3() {
+function _templateObject4$2() {
   var data = _taggedTemplateLiteral(["\n  border: none;\n  background-color: ", ";\n  font-size: 16px;\n  height: 24px;\n"]);
 
-  _templateObject4$3 = function _templateObject4() {
+  _templateObject4$2 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$6() {
+function _templateObject3$5() {
   var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  text-align: start;\n  border-size: 0px;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 1rem;\n  box-sizing: border-box;\n  width: 100%;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n"]);
 
-  _templateObject3$6 = function _templateObject3() {
+  _templateObject3$5 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$b() {
+function _templateObject2$a() {
   var data = _taggedTemplateLiteral(["\n  transform-origin: 0 0;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 8px 0 8px;\n  position: absolute;\n  width: 100%;\n  max-height: 400px;\n  overflow-y: scroll;\n  z-index: 1;\n  box-sizing: border-box;\n  &:focus {\n    outline: none;\n  }\n"]);
 
-  _templateObject2$b = function _templateObject2() {
+  _templateObject2$a = function _templateObject2() {
     return data;
   };
 
@@ -27038,8 +26989,8 @@ var IconWrapper = styled__default.div(_templateObject$l(), function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
-var DropdownContentWrapper = styled__default.div(_templateObject2$b(), GREY_CHATEAU, WHITE);
-var DropdownItemWrapper = styled__default.div(_templateObject3$6(), function (_ref2) {
+var DropdownContentWrapper = styled__default.div(_templateObject2$a(), GREY_CHATEAU, WHITE);
+var DropdownItemWrapper = styled__default.div(_templateObject3$5(), function (_ref2) {
   var selected = _ref2.selected,
       themeValues = _ref2.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
@@ -27054,7 +27005,7 @@ var DropdownItemWrapper = styled__default.div(_templateObject3$6(), function (_r
       themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled__default.input(_templateObject4$3(), function (_ref5) {
+var SearchInput = styled__default.input(_templateObject4$2(), function (_ref5) {
   var themeValues = _ref5.themeValues;
   return themeValues.hoverColor && themeValues.hoverColor;
 });
@@ -27265,30 +27216,30 @@ var Dropdown = function Dropdown(_ref6) {
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$9);
 
-function _templateObject4$4() {
+function _templateObject4$3() {
   var data = _taggedTemplateLiteral([""]);
 
-  _templateObject4$4 = function _templateObject4() {
+  _templateObject4$3 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$7() {
+function _templateObject3$6() {
   var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
 
-  _templateObject3$7 = function _templateObject3() {
+  _templateObject3$6 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$c() {
+function _templateObject2$b() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: ", ";\n  margin-bottom: 4px;\n  font-family: Public Sans;\n\n  &::first-letter {\n    text-transform: uppercase;\n  }\n"]);
 
-  _templateObject2$c = function _templateObject2() {
+  _templateObject2$b = function _templateObject2() {
     return data;
   };
 
@@ -27305,12 +27256,12 @@ function _templateObject$m() {
   return data;
 }
 var SelectContainer = styled__default.div(_templateObject$m());
-var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
+var SelectLabel = styled__default.label(_templateObject2$b(), function (_ref) {
   var field = _ref.field,
       showErrors = _ref.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : STORM_GREY$1;
 }, FONT_WEIGHT_REGULAR);
-var SelectField = styled__default.select(_templateObject3$7(), function (_ref2) {
+var SelectField = styled__default.select(_templateObject3$6(), function (_ref2) {
   var field = _ref2.field,
       showErrors = _ref2.showErrors;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
@@ -27321,7 +27272,7 @@ var SelectField = styled__default.select(_templateObject3$7(), function (_ref2)
   var disabled = _ref4.disabled;
   return disabled ? DUSTY_GREY : MINESHAFT_GREY;
 }, MATISSE_BLUE);
-var SelectOption = styled__default.option(_templateObject4$4());
+var SelectOption = styled__default.option(_templateObject4$3());
 
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
@@ -28638,10 +28589,10 @@ var fallbackValues$c = {
   hoverFocusStyles: hoverFocusStyles
 };
 
-function _templateObject2$d() {
+function _templateObject2$c() {
   var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"]);
 
-  _templateObject2$d = function _templateObject2() {
+  _templateObject2$c = function _templateObject2() {
     return data;
   };
 
@@ -28679,7 +28630,7 @@ var FormattedInputField = styled__default(function (_ref5) {
       props = _objectWithoutProperties(_ref5, ["showErrors"]);
 
   return /*#__PURE__*/React__default.createElement(src_1, props);
-})(_templateObject2$d(), function (_ref6) {
+})(_templateObject2$c(), function (_ref6) {
   var field = _ref6.field,
       showErrors = _ref6.showErrors,
       themeValues = _ref6.themeValues;
@@ -29024,10 +28975,10 @@ var fallbackValues$e = {
   autopayTextColor: autopayTextColor
 };
 
-function _templateObject2$e() {
+function _templateObject2$d() {
   var data = _taggedTemplateLiteral(["\n  margin-right: 16px;\n  width: 30px;\n  height: auto;\n  display: flex;\n"]);
 
-  _templateObject2$e = function _templateObject2() {
+  _templateObject2$d = function _templateObject2() {
     return data;
   };
 
@@ -29044,7 +28995,7 @@ function _templateObject$p() {
   return data;
 }
 var CreditCardWrapper = styled__default.div(_templateObject$p());
-var CCIconWrapper = styled__default.div(_templateObject2$e());
+var CCIconWrapper = styled__default.div(_templateObject2$d());
 
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
@@ -29067,20 +29018,20 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
 
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$e, "default");
 
-function _templateObject3$8() {
+function _templateObject3$7() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
 
-  _templateObject3$8 = function _templateObject3() {
+  _templateObject3$7 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$f() {
+function _templateObject2$e() {
   var data = _taggedTemplateLiteral(["\n  width: 34px;\n  height: 34px;\n  display: inline-block;\n  position: relative;\n"]);
 
-  _templateObject2$f = function _templateObject2() {
+  _templateObject2$e = function _templateObject2() {
     return data;
   };
 
@@ -29097,8 +29048,8 @@ function _templateObject$q() {
   return data;
 }
 var Hamburger = styled__default.button(_templateObject$q());
-var HamburgerBox = styled__default.span(_templateObject2$f());
-var HamburgerInner = styled__default.span(_templateObject3$8(), function (_ref) {
+var HamburgerBox = styled__default.span(_templateObject2$e());
+var HamburgerInner = styled__default.span(_templateObject3$7(), function (_ref) {
   var inactiveColor = _ref.inactiveColor;
   return inactiveColor;
 }, function (_ref2) {
@@ -29976,10 +29927,10 @@ var BankIcon = function BankIcon() {
   }))))))))));
 };
 
-function _templateObject2$g() {
+function _templateObject2$f() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5rem;\n  text-align: left;\n  margin-right: 0.5rem;\n  display: inline-block;\n"]);
 
-  _templateObject2$g = function _templateObject2() {
+  _templateObject2$f = function _templateObject2() {
     return data;
   };
 
@@ -29996,7 +29947,7 @@ function _templateObject$r() {
   return data;
 }
 var BankItemWrapper = styled__default.div(_templateObject$r());
-var BankAccountText = styled__default.h4(_templateObject2$g(), CHARADE_GREY);
+var BankAccountText = styled__default.h4(_templateObject2$f(), CHARADE_GREY);
 var CHECKING = "CHECKING";
 var SAVINGS = "SAVINGS";
 
@@ -30144,10 +30095,10 @@ var fallbackValues$i = {
   color: color$6
 };
 
-function _templateObject2$h() {
+function _templateObject2$g() {
   var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n"]);
 
-  _templateObject2$h = function _templateObject2() {
+  _templateObject2$g = function _templateObject2() {
     return data;
   };
 
@@ -30173,7 +30124,7 @@ var SpinnerSvgAnimation = styled__default.svg(_templateObject$s(), function (_re
   var color = _ref3.color;
   return color;
 });
-var SpinnerContainer$2 = styled__default.div(_templateObject2$h());
+var SpinnerContainer$2 = styled__default.div(_templateObject2$g());
 
 var Spinner$1 = function Spinner(_ref4) {
   var _ref4$size = _ref4.size,
@@ -30367,10 +30318,10 @@ function _templateObject9$1() {
   return data;
 }
 
-function _templateObject8$2() {
+function _templateObject8$1() {
   var data = _taggedTemplateLiteral(["", " needs a lowercase letter"]);
 
-  _templateObject8$2 = function _templateObject8() {
+  _templateObject8$1 = function _templateObject8() {
     return data;
   };
 
@@ -30407,30 +30358,30 @@ function _templateObject5$2() {
   return data;
 }
 
-function _templateObject4$5() {
+function _templateObject4$4() {
   var data = _taggedTemplateLiteral(["", " is not a valid length"]);
 
-  _templateObject4$5 = function _templateObject4() {
+  _templateObject4$4 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["", " is not the right length"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$8 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$i() {
+function _templateObject2$h() {
   var data = _taggedTemplateLiteral(["", " is too long"]);
 
-  _templateObject2$i = function _templateObject2() {
+  _templateObject2$h = function _templateObject2() {
     return data;
   };
 
@@ -30486,7 +30437,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$i(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$8(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -30661,7 +30612,8 @@ var Placeholder = function Placeholder(_ref2) {
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(STORM_GREY$1, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;")
+    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(STORM_GREY$1, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(STORM_GREY$1, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(GRECIAN_GREY, ";")
   }, /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
@@ -30731,10 +30683,10 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$k, "default");
 
-var activeColor$2 = "".concat(MATISSE_BLUE);
+var activeColor$3 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$l = {
-  activeColor: activeColor$2,
+  activeColor: activeColor$3,
   inactiveColor: inactiveColor
 };
 
@@ -41444,30 +41396,30 @@ var fallbackValues$n = {
   leftLabelStyles: leftLabelStyles
 };
 
-function _templateObject4$6() {
+function _templateObject4$5() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  top: 3px;\n  left: 3px;\n  right: 3px;\n  bottom: 3px;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject4$6 = function _templateObject4() {
+  _templateObject4$5 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$a() {
+function _templateObject3$9() {
   var data = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 50%;\n  box-sizing: border-box;\n"]);
 
-  _templateObject3$a = function _templateObject3() {
+  _templateObject3$9 = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$j() {
+function _templateObject2$i() {
   var data = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 24px;\n  border-radius: 48px;\n  border: none;\n  position: relative;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: inline-block;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);\n  }\n\n  ", "\n"]);
 
-  _templateObject2$j = function _templateObject2() {
+  _templateObject2$i = function _templateObject2() {
     return data;
   };
 
@@ -41490,7 +41442,7 @@ var HiddenToggleSwitchBox = styled__default.input(_templateObject$v(), function
   var isMobile = _ref2.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var VisibleSwitchComponent = styled__default.label(_templateObject2$j(), function (_ref3) {
+var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref4) {
@@ -41500,8 +41452,8 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$j(), functio
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
-var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
+var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$9());
+var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
 
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
@@ -41602,7 +41554,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles,
-    focusStyles: "outline: ".concat(themeValues.onBackground, " auto 5px")
+    hoverStyles: "outline: ".concat(themeValues.onBackground, " auto 5px")
   }, /*#__PURE__*/React__default.createElement(Center, null, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "stretch",
     align: "center"
@@ -43448,7 +43400,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     padding: "0",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    focusStyles: themeValues.focusStyles,
+    hoverStyles: themeValues.focusStyles,
     animate: isOpen ? "open" : "closed",
     positionTransition: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -43554,10 +43506,10 @@ EditNameForm.reducer = reducer$2;
 EditNameForm.mapStateToProps = mapStateToProps$3;
 EditNameForm.mapDispatchToProps = mapDispatchToProps$2;
 
-function _templateObject2$k() {
+function _templateObject2$j() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"]);
 
-  _templateObject2$k = function _templateObject2() {
+  _templateObject2$j = function _templateObject2() {
     return data;
   };
 
@@ -43577,7 +43529,7 @@ var EditableListItem = styled__default.div(_templateObject$w(), WHITE, function
   var listItemSize = _ref.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
-var EditableListItemControls = styled__default.div(_templateObject2$k());
+var EditableListItemControls = styled__default.div(_templateObject2$j());
 
 var EditableList = function EditableList(_ref) {
   var _ref$title = _ref.title,
@@ -43684,10 +43636,10 @@ function _templateObject9$2() {
   return data;
 }
 
-function _templateObject8$3() {
+function _templateObject8$2() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"]);
 
-  _templateObject8$3 = function _templateObject8() {
+  _templateObject8$2 = function _templateObject8() {
     return data;
   };
 
@@ -43724,30 +43676,30 @@ function _templateObject5$3() {
   return data;
 }
 
-function _templateObject4$7() {
+function _templateObject4$6() {
   var data = _taggedTemplateLiteral(["\n  color: ", ";\n  align-items: center;\n  font-size: 1rem;\n  padding-right: 1rem;\n  cursor: pointer;\n  display: ", ";\n"]);
 
-  _templateObject4$7 = function _templateObject4() {
+  _templateObject4$6 = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$b() {
+function _templateObject3$a() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n"]);
 
-  _templateObject3$b = function _templateObject3() {
+  _templateObject3$a = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$l() {
+function _templateObject2$k() {
   var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  ", ";\n  align-items: ", ";\n  flex-direction: ", ";\n  flex: 1;\n  ", ";\n"]);
 
-  _templateObject2$l = function _templateObject2() {
+  _templateObject2$k = function _templateObject2() {
     return data;
   };
 
@@ -43767,7 +43719,7 @@ var EditableTableContainer = styled__default.div(_templateObject$x(), function (
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
-var EditableTableListItem = styled__default.div(_templateObject2$l(), function (_ref2) {
+var EditableTableListItem = styled__default.div(_templateObject2$k(), function (_ref2) {
   var isMobile = _ref2.isMobile;
   return isMobile && "justify-content: center";
 }, function (_ref3) {
@@ -43780,8 +43732,8 @@ var EditableTableListItem = styled__default.div(_templateObject2$l(), function (
   var isMobile = _ref5.isMobile;
   return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
 });
-var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
-var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
+var EditableListItemControls$1 = styled__default.div(_templateObject3$a());
+var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
   var hide = _ref6.hide;
   return hide ? "none" : "flex";
 });
@@ -43803,7 +43755,7 @@ var TableItemKey = styled__default.div(_templateObject7$3(), function (_ref8) {
   var isMobile = _ref11.isMobile;
   return isMobile ? "1rem" : "1.125rem";
 }, STORM_GREY$1);
-var TableItemValue = styled__default.div(_templateObject8$3(), function (_ref12) {
+var TableItemValue = styled__default.div(_templateObject8$2(), function (_ref12) {
   var isMobile = _ref12.isMobile;
   return !isMobile && "flex: 1";
 }, function (_ref13) {
@@ -47557,7 +47509,6 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
         color: themeValues.linkColor,
         weight: themeValues.fontWeight,
         hoverStyles: themeValues.modalLinkHoverFocus,
-        focusStyles: themeValues.modalLinkHoverFocus,
         extraStyles: "cursor: pointer;",
         tabIndex: "0",
         onKeyPress: function onKeyPress(e) {
@@ -48102,7 +48053,7 @@ var RadioSection = function RadioSection(_ref) {
       onBlur: function onBlur() {
         return setFocused(null);
       },
-      focusStyles: themeValues.focusStyles,
+      hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
       initial: initiallyOpen ? "open" : "closed",
       key: "item-".concat(section.id),
@@ -48487,7 +48438,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React__default.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      hoverStyles: active ? "> * {background-color: ".concat(themeValues.activeTabHover, ";}") : "> * {background-color: rgba(8, 27, 43, 0.05);}"
+      extraStyles: "&:hover, &:focus { \n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -48574,7 +48525,6 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
         color: themeValues.linkColor,
         weight: themeValues.fontWeight,
         hoverStyles: themeValues.modalLinkHoverFocus,
-        focusStyles: themeValues.modalLinkHoverFocus,
         extraStyles: "cursor: pointer;",
         tabIndex: "0",
         onKeyPress: function onKeyPress(e) {
@@ -48610,10 +48560,10 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
 
 var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$w, "default");
 
-function _templateObject2$m() {
+function _templateObject2$l() {
   var data = _taggedTemplateLiteral([""]);
 
-  _templateObject2$m = function _templateObject2() {
+  _templateObject2$l = function _templateObject2() {
     return data;
   };
 
@@ -48630,7 +48580,7 @@ function _templateObject$B() {
   return data;
 }
 var CheckboxWrapper = styled__default.div(_templateObject$B());
-var ModalWrapper$1 = styled__default.div(_templateObject2$m());
+var ModalWrapper$1 = styled__default.div(_templateObject2$l());
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,