@thecb/components 4.1.29 → 4.1.31-beta.0

package/dist/index.cjs.js

@@ -4846,7 +4846,8 @@ var CELLO_BLUE = "#214566";
 var BOSTON_BLUE = "#357fb8";
 var INFO_BLUE = "#E4F4FD";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
-var MATISSE_BLUE = "#15749D"; // GREEN
+var MATISSE_BLUE = "#15749D";
+var ROYAL_BLUE = "#3181E3"; // GREEN
 
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -4949,6 +4950,7 @@ var colors = /*#__PURE__*/Object.freeze({
   BOSTON_BLUE: BOSTON_BLUE,
   HOVER_LIGHT_BLUE: HOVER_LIGHT_BLUE,
   MATISSE_BLUE: MATISSE_BLUE,
+  ROYAL_BLUE: ROYAL_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -4994,7 +4996,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  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"]);
+  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    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -5017,7 +5019,7 @@ var TextSpan = styled__default.span(_templateObject(), function (_ref) {
 }, function (_ref5) {
   var hoverStyles = _ref5.hoverStyles;
   return styled.css(_templateObject2(), hoverStyles);
-}, function (_ref6) {
+}, ROYAL_BLUE, function (_ref6) {
   var disabled = _ref6.disabled,
       disabledStyles = _ref6.disabledStyles;
   return disabled && styled.css(_templateObject3(), disabledStyles);
@@ -6143,9 +6145,19 @@ var Text = function Text(_ref) {
 
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-function _templateObject6() {
+function _templateObject7() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
+
   _templateObject6 = function _templateObject6() {
     return data;
   };
@@ -6154,7 +6166,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
+  var data = _taggedTemplateLiteral(["\n        ", "\n        ", "\n      "]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -6174,7 +6186,7 @@ function _templateObject4() {
 }
 
 function _templateObject3$1() {
-  var data = _taggedTemplateLiteral(["\n        ", "\n        ", "\n      "]);
+  var data = _taggedTemplateLiteral(["\n        outline: 3px solid ", ";\n        outline-offset: 2px;\n        ", "\n      "]);
 
   _templateObject3$1 = function _templateObject3() {
     return data;
@@ -6194,7 +6206,7 @@ function _templateObject2$1() {
 }
 
 function _templateObject$1() {
-  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"]);
+  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"]);
 
   _templateObject$1 = function _templateObject() {
     return data;
@@ -6282,22 +6294,25 @@ var BoxWrapper = styled__default(function (_ref) {
       as = _ref15.as;
   return styled.css(_templateObject2$1(), hoverStyles, as === "button" ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref16) {
-  var activeStyles = _ref16.activeStyles,
-      as = _ref16.as;
-  return styled.css(_templateObject3$1(), activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  var as = _ref16.as;
+  return styled.css(_templateObject3$1(), ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref17) {
-  var disabledStyles = _ref17.disabledStyles,
+  var activeStyles = _ref17.activeStyles,
       as = _ref17.as;
-  return styled.css(_templateObject4(), disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return styled.css(_templateObject4(), activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref18) {
-  var color = _ref18.color;
-  return color;
+  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 hiddenStyles = _ref19.hiddenStyles;
-  return hiddenStyles && styled.css(_templateObject5());
+  var color = _ref19.color;
+  return color;
 }, function (_ref20) {
-  var extraStyles = _ref20.extraStyles;
-  return styled.css(_templateObject6(), extraStyles);
+  var hiddenStyles = _ref20.hiddenStyles;
+  return hiddenStyles && styled.css(_templateObject6());
+}, function (_ref21) {
+  var extraStyles = _ref21.extraStyles;
+  return styled.css(_templateObject7(), extraStyles);
 });
 /* eslint-enable no-unused-vars */
 
@@ -12281,15 +12296,15 @@ var Reel = function Reel(_ref) {
   for colors/values that should be used here instead
 */
 var padding = {
-  primary: "1rem 1.25rem",
-  secondary: "1rem 1.25rem",
-  back: "1rem 1.25rem",
+  primary: "0.75rem 1.5rem",
+  secondary: "0.75rem 1.5rem",
+  back: "0.75rem 1.5rem",
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
   smallGhost: "0",
-  tertiary: "1rem 1.25rem",
+  tertiary: "0.75rem 1.5rem",
   ghost: "0.65rem 0",
-  danger: "1rem 1.25rem",
+  danger: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
   whitePrimary: "1.125rem 0.75rem"
 };
@@ -12490,7 +12505,7 @@ function _templateObject2$5() {
 }
 
 function _templateObject$d() {
-  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"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n"]);
 
   _templateObject$d = function _templateObject() {
     return data;
@@ -12515,21 +12530,20 @@ var rotate = posed.div({
 });
 var SpinnerContainer = styled__default.div(_templateObject$d());
 var SpinnerIconWrapper = styled__default(rotate)(_templateObject2$5(), function (_ref) {
-  var size = _ref.size;
-  return size;
+  var isMobile = _ref.isMobile;
+  return isMobile ? "18" : "21";
 }, function (_ref2) {
-  var size = _ref2.size;
-  return size;
+  var isMobile = _ref2.isMobile;
+  return isMobile ? "18" : "21";
 });
 
 var SpinnerIcon = function SpinnerIcon(_ref3) {
   var color = _ref3.color,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 24 : _ref3$size;
+      isMobile = _ref3.isMobile;
   return /*#__PURE__*/React__default.createElement(SpinnerContainer, null, /*#__PURE__*/React__default.createElement(SpinnerIconWrapper, {
     initialPose: "fixed",
     pose: "rotate",
-    size: size
+    isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24",
     height: "100%",
@@ -12559,7 +12573,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
 };
 
 function _templateObject2$6() {
-  var data = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"]);
+  var data = _taggedTemplateLiteral([""]);
 
   _templateObject2$6 = function _templateObject2() {
     return data;
@@ -12569,7 +12583,7 @@ function _templateObject2$6() {
 }
 
 function _templateObject$e() {
-  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"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n"]);
 
   _templateObject$e = function _templateObject() {
     return data;
@@ -12595,11 +12609,14 @@ var rotate$1 = posed.div({
 var SpinnerContainer$1 = styled__default.div(_templateObject$e());
 var SpinnerIconWrapper$1 = styled__default(rotate$1)(_templateObject2$6());
 
-var Spinner = function Spinner() {
+var Spinner = function Spinner(_ref) {
+  var isMobile = _ref.isMobile;
   return /*#__PURE__*/React__default.createElement(SpinnerContainer$1, null, /*#__PURE__*/React__default.createElement(SpinnerIconWrapper$1, {
     initialPose: "fixed",
     pose: "rotate"
-  }, /*#__PURE__*/React__default.createElement(SpinnerIcon, null)));
+  }, /*#__PURE__*/React__default.createElement(SpinnerIcon, {
+    isMobile: isMobile
+  })));
 };
 /* Most of the time, to use this button you'll only need to specify:
   - A variant (if different than primary)
@@ -12618,25 +12635,26 @@ var Spinner = function Spinner() {
 */
 
 
-var ButtonWithAction = function ButtonWithAction(_ref) {
-  var _ref$action = _ref.action,
-      action = _ref$action === void 0 ? noop : _ref$action,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-      text = _ref.text,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-      textExtraStyles = _ref.textExtraStyles,
-      _ref$contentOverride = _ref.contentOverride,
-      contentOverride = _ref$contentOverride === void 0 ? false : _ref$contentOverride,
-      _ref$extraStyles = _ref.extraStyles,
-      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-      children = _ref.children;
+var ButtonWithAction = function ButtonWithAction(_ref2) {
+  var _ref2$action = _ref2.action,
+      action = _ref2$action === void 0 ? noop : _ref2$action,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
+      text = _ref2.text,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
+      _ref2$dataQa = _ref2.dataQa,
+      dataQa = _ref2$dataQa === void 0 ? null : _ref2$dataQa,
+      textExtraStyles = _ref2.textExtraStyles,
+      _ref2$contentOverride = _ref2.contentOverride,
+      contentOverride = _ref2$contentOverride === void 0 ? false : _ref2$contentOverride,
+      _ref2$extraStyles = _ref2.extraStyles,
+      extraStyles = _ref2$extraStyles === void 0 ? "" : _ref2$extraStyles,
+      tabIndex = _ref2.tabIndex,
+      children = _ref2.children;
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
-  var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
+  var isMobile = themeContext.isMobile;
   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    cursor: pointer;\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-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
@@ -12654,11 +12672,14 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
     onClick: !isLoading && action,
     borderRadius: "2px",
     theme: themeContext,
-    extraStyles: isLoading ? loadingExtraStyles : extraStyles,
-    dataQa: dataQa
+    extraStyles: "margin: 0.5rem; ".concat(extraStyles),
+    dataQa: dataQa,
+    tabIndex: tabIndex
   }, contentOverride ? children : /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
-  }, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, null) : /*#__PURE__*/React__default.createElement(Text$1, {
+  }, isLoading ? /*#__PURE__*/React__default.createElement(Spinner, {
+    isMobile: isMobile
+  }) : /*#__PURE__*/React__default.createElement(Text$1, {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
@@ -14712,14 +14733,15 @@ var AddObligation = function AddObligation(_ref) {
       textExtraStyles = _ref.textExtraStyles;
   var hoverStyles = "\n  &:hover {\n    .fill { fill: ".concat(themeValues.hoverColor, "; }\n    .stroke { stroke: ").concat(themeValues.hoverColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.hoverColor, "; }\n    span { color: ").concat(themeValues.hoverColor, "; }\n  }");
   var activeStyles = "\n   &:active {\n     .fill { fill: ".concat(themeValues.activeColor, "; }\n     .stroke { stroke: ").concat(themeValues.activeColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.activeColor, "; }\n    span { color: ").concat(themeValues.activeColor, "; }\n    }");
-  var defaultStyles = "\n      min-height: 0;\n      .fill { fill: ".concat(themeValues.color, "; }\n      .stroke { stroke: ").concat(themeValues.color, "; }\n     ");
+  var defaultStyles = "\n      min-height: 0;\n      .fill { fill: ".concat(themeValues.color, "; }\n      .stroke { stroke: ").concat(themeValues.color, "; }\n      &:focus {\n        outline: 3px solid ").concat(ROYAL_BLUE, ";\n        outline-offset: 2px;\n      }\n     ");
   return /*#__PURE__*/React__default.createElement(Box, {
     className: "button",
-    padding: "0.5rem 0",
+    padding: "0",
     hoverStyles: hoverStyles,
     activeStyles: activeStyles,
     extraStyles: defaultStyles,
-    onClick: action
+    onClick: action,
+    tabIndex: "0"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     singleChild: true,
     minHeight: "100%"
@@ -14734,7 +14756,8 @@ var AddObligation = function AddObligation(_ref) {
     text: text,
     variant: "smallGhost",
     extraStyles: "min-height: 0; ".concat(extraStyles),
-    textExtraStyles: "padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ".concat(FONT_WEIGHT_SEMIBOLD, "; ").concat(textExtraStyles)
+    textExtraStyles: "padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ".concat(FONT_WEIGHT_SEMIBOLD, "; ").concat(textExtraStyles),
+    tabIndex: "-1"
   })))));
 };
 
@@ -16184,7 +16207,7 @@ var activeBreadcrumbColor = "".concat(STORM_GREY);
 var fontSize$3 = "0.875rem";
 var lineHeight$1 = "1.25rem";
 var fontWeight$1 = "400";
-var margin = "0 0.5rem";
+var margin = "0.5rem";
 var hover = "text-decoration: none;";
 var fallbackValues$8 = {
   color: color$4,
@@ -16212,7 +16235,7 @@ var fallbackValues$9 = {
 };
 
 function _templateObject$h() {
-  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"]);
+  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    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$h = function _templateObject() {
     return data;
@@ -16252,7 +16275,7 @@ var StyledExternalLink = styled__default(function (_ref) {
 }, function (_ref7) {
   var hoverColor = _ref7.hoverColor;
   return hoverColor;
-}, function (_ref8) {
+}, ROYAL_BLUE, function (_ref8) {
   var activeColor = _ref8.activeColor;
   return activeColor;
 }, function (_ref9) {
@@ -16298,7 +16321,7 @@ var ExternalLink = function ExternalLink(_ref) {
 };
 
 function _templateObject$i() {
-  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  &:focus {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\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\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"]);
 
   _templateObject$i = function _templateObject() {
     return data;
@@ -16345,7 +16368,7 @@ var StyledInternalLink = styled__default(function (_ref) {
 }, function (_ref8) {
   var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, function (_ref9) {
+}, ROYAL_BLUE, function (_ref9) {
   var activeColor = _ref9.activeColor;
   return activeColor;
 }, function (_ref10) {
@@ -18405,10 +18428,10 @@ function _templateObject8() {
   return data;
 }
 
-function _templateObject7() {
+function _templateObject7$1() {
   var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 16px;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
 
-  _templateObject7 = function _templateObject7() {
+  _templateObject7$1 = function _templateObject7() {
     return data;
   };
 
@@ -18485,7 +18508,7 @@ var CheckboxIcon = styled__default.svg(_templateObject3$3(), function (_ref) {
 var HiddenCheckbox = styled__default.input.attrs({
   type: "checkbox"
 })(_templateObject6$1());
-var StyledCheckbox = styled__default.div(_templateObject7(), CheckboxIcon, function (_ref2) {
+var StyledCheckbox = styled__default.div(_templateObject7$1(), CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -20513,7 +20536,7 @@ function _templateObject4$3() {
 }
 
 function _templateObject3$7() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\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\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\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    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"]);
 
   _templateObject3$7 = function _templateObject3() {
     return data;
@@ -20533,7 +20556,7 @@ function _templateObject2$d() {
 }
 
 function _templateObject$p() {
-  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\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  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\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  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"]);
 
   _templateObject$p = function _templateObject() {
     return data;
@@ -20559,7 +20582,7 @@ var InputField = styled__default.input(_templateObject$p(), function (_ref) {
   var background = _ref5.background,
       themeValues = _ref5.themeValues;
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
-}, MATISSE_BLUE, function (_ref6) {
+}, ROYAL_BLUE, function (_ref6) {
   var extraStyles = _ref6.extraStyles;
   return styled.css(_templateObject2$d(), extraStyles);
 }); // eslint-disable-next-line no-unused-vars
@@ -20584,7 +20607,7 @@ var FormattedInputField = styled__default(function (_ref7) {
 }, function (_ref11) {
   var themeValues = _ref11.themeValues;
   return themeValues.color && themeValues.color;
-}, MATISSE_BLUE, function (_ref12) {
+}, ROYAL_BLUE, function (_ref12) {
   var extraStyles = _ref12.extraStyles;
   return styled.css(_templateObject4$3(), extraStyles);
 });
@@ -20657,7 +20680,7 @@ var FormInput = function FormInput(_ref13) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "cursor: pointer;",
+    extraStyles: "cursor: pointer; &:focus { outline-offset: -2px; }",
     onClick: function onClick() {
       return setShowPassword(!showPassword);
     },
@@ -20780,7 +20803,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     background: themeValues.formFooterPanel,
     minWidth: "100%",
-    padding: isMobile ? "1.5rem" : "2rem"
+    padding: isMobile ? "1rem" : "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
@@ -21199,7 +21222,7 @@ var NavFooter = function NavFooter(_ref) {
     breakpoint: isMobile ? "999px" : "700px",
     largeChild: largeSide === "right" ? "2" : "1",
     largeChildSize: largeSideSize,
-    childGap: "0.25rem"
+    childGap: "0.5rem"
   }, leftContent, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: isMobile ? "flex-start" : "flex-end",
     align: "center",
@@ -21337,10 +21360,10 @@ function _templateObject8$1() {
   return data;
 }
 
-function _templateObject7$1() {
+function _templateObject7$2() {
   var data = _taggedTemplateLiteral(["", " needs an uppercase letter"]);
 
-  _templateObject7$1 = function _templateObject7() {
+  _templateObject7$2 = function _templateObject7() {
     return data;
   };
 
@@ -21446,7 +21469,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$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "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$1(), "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
+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$9(), "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
@@ -21584,7 +21607,8 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
       dataQa = _ref.dataQa;
   return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
-    dataQa: dataQa
+    dataQa: dataQa,
+    tabIndex: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
@@ -21594,7 +21618,8 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     padding: "0",
     minHeight: "100%",
     extraStyles: "cursor: pointer;",
-    dataQa: dataQa
+    dataQa: dataQa,
+    tabIndex: "0"
   }, children);
 };
 
@@ -34575,7 +34600,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
     key: "header",
-    hoverStyles: "cursor: pointer;"
+    hoverStyles: "cursor: pointer;",
+    tabIndex: "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -34812,10 +34838,10 @@ function _templateObject8$2() {
   return data;
 }
 
-function _templateObject7$2() {
+function _templateObject7$3() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"]);
 
-  _templateObject7$2 = function _templateObject7() {
+  _templateObject7$3 = function _templateObject7() {
     return data;
   };
 
@@ -34908,7 +34934,7 @@ var ActionWrapper = styled__default.div(_templateObject6$3(), function (_ref7) {
   var isMobile = _ref7.isMobile;
   return isMobile && "display: none";
 });
-var TableItemKey = styled__default.div(_templateObject7$2(), function (_ref8) {
+var TableItemKey = styled__default.div(_templateObject7$3(), function (_ref8) {
   var isMobile = _ref8.isMobile;
   return !isMobile && "flex: 1";
 }, function (_ref9) {
@@ -36469,8 +36495,7 @@ var Modal$1 = function Modal(_ref) {
     variant: "secondary",
     action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
-    dataQa: cancelButtonText,
-    extraStyles: "width: 100%;"
+    dataQa: cancelButtonText
   })), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem",
     extraStyles: isMobile ? "flex-grow: 1" : ""
@@ -36478,8 +36503,7 @@ var Modal$1 = function Modal(_ref) {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
     text: continueButtonText,
-    dataQa: continueButtonText,
-    extraStyles: "width: 100%;"
+    dataQa: continueButtonText
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -38392,7 +38416,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     align: "center",
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0 8px 0 0" : "8px",
+    padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "tertiary",
@@ -38401,7 +38425,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     dataQa: "Account Details",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0 8px 0 0" : "8px",
+    padding: isMobile ? "0 8px 0 0" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "tertiary",
@@ -38425,7 +38449,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     isPaymentPlan: isPaymentPlan,
     nextAutopayDate: nextAutopayDate
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
-    padding: isMobile ? "0 0 0 8px" : "8px",
+    padding: isMobile ? "0 0 0 8px" : "0",
     extraStyles: isMobile && "flex-grow: 1;"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     isLoading: isLoading,
@@ -38820,8 +38844,7 @@ var PaymentButtonBar = function PaymentButtonBar(_ref) {
     padding: "2.5rem 0 3.125rem 0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: buttonFlexOverride ? buttonFlexOverride : !!backButton ? "space-between" : "flex-end",
-    align: "center",
-    childGap: "0.75rem"
+    align: "center"
   }, backButton, !hideForwardButton && /*#__PURE__*/React__default.createElement(React.Fragment, null, forwardButton))));
 };
 
@@ -40014,7 +40037,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React__default.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "&:hover, &:focus {\n            text-decoration: none; \n            ".concat(active ? "> * {\n                background-color: ".concat(themeValues.activeTabHover, ";\n              }") : "> * { \n                background-color: rgba(8, 27, 43, 0.05);\n              }", "}")
+      extraStyles: "&:hover {\n            text-decoration: none; \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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.29",
+  "version": "4.1.31-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/add-obligation/AddObligation.js

@@ -5,6 +5,7 @@ import { IconAdd } from "../icons";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { fallbackValues } from "./AddObligation.theme";
 import { themeComponent } from "../../../util/themeUtils";
+import { ROYAL_BLUE } from "../../../constants/colors";
 
 const AddObligation = ({
   text,
@@ -33,15 +34,20 @@ const AddObligation = ({
       min-height: 0;
       .fill { fill: ${themeValues.color}; }
       .stroke { stroke: ${themeValues.color}; }
+      &:focus {
+        outline: 3px solid ${ROYAL_BLUE};
+        outline-offset: 2px;
+      }
      `;
   return (
     <Box
       className="button"
-      padding="0.5rem 0"
+      padding="0"
       hoverStyles={hoverStyles}
       activeStyles={activeStyles}
       extraStyles={defaultStyles}
       onClick={action}
+      tabIndex="0"
     >
       <Cover singleChild minHeight="100%">
         <Cluster justify="center" align="center" minHeight="100%">
@@ -53,6 +59,7 @@ const AddObligation = ({
               variant="smallGhost"
               extraStyles={`min-height: 0; ${extraStyles}`}
               textExtraStyles={`padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ${FONT_WEIGHT_SEMIBOLD}; ${textExtraStyles}`}
+              tabIndex="-1"
             />
           </Center>
         </Cluster>

package/src/components/atoms/breadcrumb/Breadcrumb.theme.js

@@ -12,7 +12,7 @@ const activeBreadcrumbColor = `${STORM_GREY}`;
 const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
-const margin = "0 0.5rem";
+const margin = "0.5rem";
 const hover = `text-decoration: none;`;
 
 export const fallbackValues = {

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -32,18 +32,14 @@ const SpinnerContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  line-height: 1;
 `;
 
-const SpinnerIconWrapper = styled(rotate)`
-  width: 24px;
-  height: 24px;
-`;
+const SpinnerIconWrapper = styled(rotate)``;
 
-const Spinner = () => (
+const Spinner = ({ isMobile }) => (
   <SpinnerContainer>
     <SpinnerIconWrapper initialPose="fixed" pose="rotate">
-      <SpinnerIcon />
+      <SpinnerIcon isMobile={isMobile} />
     </SpinnerIconWrapper>
   </SpinnerContainer>
 );
@@ -73,6 +69,7 @@ const ButtonWithAction = ({
   textExtraStyles,
   contentOverride = false,
   extraStyles = "",
+  tabIndex,
   children
 }) => {
   const themeContext = useContext(ThemeContext);
@@ -82,9 +79,8 @@ const ButtonWithAction = ({
     "Button",
     variant
   );
-  const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ${
-    themeContext.isMobile ? "50px" : "57px"
-  } `;
+  const { isMobile } = themeContext;
+
   const hoverStyles = `
     outline: none;
     background-color: ${themeValues.hoverBackgroundColor};
@@ -129,15 +125,16 @@ const ButtonWithAction = ({
       onClick={!isLoading && action}
       borderRadius="2px"
       theme={themeContext}
-      extraStyles={isLoading ? loadingExtraStyles : extraStyles}
+      extraStyles={`margin: 0.5rem; ${extraStyles}`}
       dataQa={dataQa}
+      tabIndex={tabIndex}
     >
       {contentOverride ? (
         children
       ) : (
         <Center intrinsic>
           {isLoading ? (
-            <Spinner />
+            <Spinner isMobile={isMobile} />
           ) : (
             <Text
               weight={themeValues.fontWeight}

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -4,15 +4,15 @@
 */
 
 const padding = {
-  primary: "1rem 1.25rem",
-  secondary: "1rem 1.25rem",
-  back: "1rem 1.25rem",
+  primary: "0.75rem 1.5rem",
+  secondary: "0.75rem 1.5rem",
+  back: "0.75rem 1.5rem",
   smallPrimary: "0.75rem 1rem",
   smallSecondary: "0.75rem 1rem",
   smallGhost: "0",
-  tertiary: "1rem 1.25rem",
+  tertiary: "0.75rem 1.5rem",
   ghost: "0.65rem 0",
-  danger: "1rem 1.25rem",
+  danger: "0.75rem 1.5rem",
   whiteSecondary: "0.75rem 2rem",
   whitePrimary: "1.125rem 0.75rem"
 };

package/src/components/atoms/form-layouts/FormFooterPanel.js

@@ -12,7 +12,7 @@ const FormFooterPanel = ({ themeValues, link, linkText }) => {
     <Box
       background={themeValues.formFooterPanel}
       minWidth="100%"
-      padding={isMobile ? "1.5rem" : "2rem"}
+      padding={isMobile ? "1rem" : "1.5rem"}
     >
       <Cluster justify="center" align="center">
         <ButtonWithLink url={link} variant="smallGhost" text={linkText} />

package/src/components/atoms/form-layouts/FormInput.js

@@ -6,7 +6,7 @@ import { themeComponent } from "../../../util/themeUtils";
 import Text from "../text";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { MATISSE_BLUE, ERROR_COLOR } from "../../../constants/colors";
+import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
 
 const InputField = styled.input`
   border: 1px solid
@@ -36,7 +36,8 @@ const InputField = styled.input`
   transition: background 0.3s ease;
 
   &:focus {
-    border: 1px solid ${MATISSE_BLUE};
+    outline: 3px solid ${ROYAL_BLUE};
+    outline-offset: 2px;
   }
 
   ${({ extraStyles }) =>
@@ -71,7 +72,8 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
   box-shadow: none;
 
   &:focus {
-    border: 1px solid ${MATISSE_BLUE};
+    outline: 3px solid ${ROYAL_BLUE};
+    outline-offset: 2px;
   }
 
   ${({ extraStyles }) =>
@@ -151,7 +153,7 @@ const FormInput = ({
                   color={themeValues.linkColor}
                   weight={themeValues.fontWeight}
                   hoverStyles={themeValues.hoverFocusStyles}
-                  extraStyles={`cursor: pointer;`}
+                  extraStyles={`cursor: pointer; &:focus { outline-offset: -2px; }`}
                   onClick={() => setShowPassword(!showPassword)}
                   aria-label="Show password"
                   tabIndex="0"

package/src/components/atoms/layouts/Box.styled.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-
+import { ROYAL_BLUE } from "../../../constants/colors";
 /*
   The child span selector on hover styles targets the text inside of buttons when a button is hovered,
   as long as the box wrapper has an "as" prop equal to "button"
@@ -50,7 +50,7 @@ export const BoxWrapper = styled(
   border: ${({ border }) => border};
   text-align: ${({ textAlign }) => textAlign};
 
-  &:hover, &:focus {
+  &:hover {
     ${({ hoverStyles, as }) =>
       css`
         ${hoverStyles}
@@ -65,6 +65,21 @@ export const BoxWrapper = styled(
       `}
   }
 
+   &:focus {
+    ${({ as }) =>
+      css`
+        outline: 3px solid ${ROYAL_BLUE};
+        outline-offset: 2px;
+        ${as === "button" &&
+          `
+          > * > span {
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }`}
+      `}
+  }
+
   &:active {
     ${({ activeStyles, as }) =>
       css`

package/src/components/atoms/link/ExternalLink.styled.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-
+import { ROYAL_BLUE } from "../../../constants/colors";
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -17,12 +17,16 @@ export const StyledExternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;
   }
 
+  &:focus {
+    outline: 3px solid ${ROYAL_BLUE};
+    outline-offset: 2px;
+  }
+
   &:active {
     text-decoration: underline;
     color: ${({ activeColor }) => activeColor};

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-
+import { ROYAL_BLUE } from "../../../constants/colors";
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -22,12 +22,16 @@ export const StyledInternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: ${({ hoverColor }) => hoverColor};
     text-decoration: underline;
   }
 
+  &:focus {
+    outline: 3px solid ${ROYAL_BLUE};
+    outline-offset: 2px;
+  }
+
   &:active {
     text-decoration: underline;
     color: ${({ activeColor }) => activeColor};

package/src/components/atoms/nav-footer/NavFooter.js

@@ -32,7 +32,7 @@ const NavFooter = ({
             breakpoint={isMobile ? "999px" : "700px"}
             largeChild={largeSide === "right" ? "2" : "1"}
             largeChildSize={largeSideSize}
-            childGap="0.25rem"
+            childGap="0.5rem"
           >
             {leftContent}
             <Cluster

package/src/components/atoms/placeholder/Placeholder.js

@@ -21,7 +21,7 @@ const PlaceholderContentWrapper = ({
   dataQa
 }) =>
   isLink ? (
-    <Link to={destination} dataQa={dataQa}>
+    <Link to={destination} dataQa={dataQa} tabIndex="0">
       <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
@@ -33,6 +33,7 @@ const PlaceholderContentWrapper = ({
       minHeight="100%"
       extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
+      tabIndex="0"
     >
       {children}
     </Box>

package/src/components/atoms/text/Text.styled.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { ROYAL_BLUE } from "../../../constants/colors";
 
 export const TextSpan = styled.span`
   --font-size: ${({ fontSize }) => fontSize};
@@ -8,14 +9,18 @@ export const TextSpan = styled.span`
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
 
-  &:hover,
-  &:focus {
+  &:hover {
     ${({ hoverStyles }) =>
       css`
         ${hoverStyles}
       `}
   }
 
+  &:focus {
+    outline: 3px solid ${ROYAL_BLUE};
+    outline-offset: 2px;
+  }
+
   ${({ disabled, disabledStyles }) =>
     disabled &&
     css`

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -79,6 +79,7 @@ const CollapsibleSection = ({
           onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
           key="header"
           hoverStyles={`cursor: pointer;`}
+          tabIndex="0"
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (

package/src/components/molecules/modal/Modal.js

@@ -100,7 +100,6 @@ const Modal = ({
                             action={cancelAction ? cancelAction : hideModal}
                             text={cancelButtonText}
                             dataQa={cancelButtonText}
-                            extraStyles="width: 100%;"
                           />
                         </Box>
                         <Box
@@ -112,7 +111,6 @@ const Modal = ({
                             action={continueAction}
                             text={continueButtonText}
                             dataQa={continueButtonText}
-                            extraStyles="width: 100%;"
                           />
                         </Box>
                       </Fragment>

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -82,7 +82,7 @@ const PaymentDetailsActions = ({
           childGap="0"
         >
           <Box
-            padding={isMobile ? "0 8px 0 0" : "8px"}
+            padding={isMobile ? "0 8px 0 0" : "0"}
             extraStyles={isMobile && `flex-grow: 1;`}
           >
             <ButtonWithAction
@@ -98,7 +98,7 @@ const PaymentDetailsActions = ({
             />
           </Box>
           <Box
-            padding={isMobile ? "0 8px 0 0" : "8px"}
+            padding={isMobile ? "0 8px 0 0" : "0"}
             extraStyles={isMobile && `flex-grow: 1;`}
           >
             {autoPayAvailable && !autoPayEnabled ? (
@@ -130,7 +130,7 @@ const PaymentDetailsActions = ({
           </Box>
           {!isMobile && (
             <Box
-              padding={isMobile ? "0 0 0 8px" : "8px"}
+              padding={isMobile ? "0 0 0 8px" : "0"}
               extraStyles={isMobile && `flex-grow: 1;`}
             >
               <ButtonWithAction

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -78,7 +78,6 @@ const PaymentButtonBar = ({
               : "flex-end"
           }
           align="center"
-          childGap="0.75rem"
         >
           {backButton}
           {!hideForwardButton && <Fragment>{forwardButton}</Fragment>}

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -34,7 +34,7 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
         <InternalLink
           to={route}
           key={`${route}-${index}`}
-          extraStyles={`&:hover, &:focus {
+          extraStyles={`&:hover {
             text-decoration: none; 
             ${
               active

package/src/constants/colors.js

@@ -51,6 +51,7 @@ const BOSTON_BLUE = "#357fb8";
 const INFO_BLUE = "#E4F4FD";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
+const ROYAL_BLUE = "#3181E3";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -154,6 +155,7 @@ export {
   BOSTON_BLUE,
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
+  ROYAL_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,

package/src/deprecated/colors.js

@@ -40,6 +40,7 @@ const ONAHAU_BLUE = "#D1ECFF";
 const PICKLED_BLUE = "#2C3E50";
 const CERULEAN_BLUE = "#0D8DC4";
 const FOAM_BLUE = "#EFF4FD";
+const ROYAL_BLUE = "#3181E3";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -130,6 +131,7 @@ export {
   PICKLED_BLUE,
   CERULEAN_BLUE,
   FOAM_BLUE,
+  ROYAL_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,

package/src/deprecated/spinner/Spinner.js

@@ -25,17 +25,16 @@ export const SpinnerContainer = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  line-height: 1;
 `;
 
 export const SpinnerIconWrapper = styled(rotate)`
-  width: ${({ size }) => size}px;
-  height: ${({ size }) => size}px;
+  width: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
+  height: ${({ isMobile }) => (isMobile ? "18" : "21")}px;
 `;
 
-const SpinnerIcon = ({ color, size = 24 }) => (
+const SpinnerIcon = ({ color, isMobile }) => (
   <SpinnerContainer>
-    <SpinnerIconWrapper initialPose="fixed" pose="rotate" size={size}>
+    <SpinnerIconWrapper initialPose="fixed" pose="rotate" isMobile={isMobile}>
       <svg
         viewBox={`0 0 24 24`}
         height="100%"