@thecb/components 12.0.0-beta.1 → 12.0.0-beta.10

package/dist/index.esm.js

@@ -15091,7 +15091,8 @@ var AutopayOnIcon = function AutopayOnIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "13",
-    viewBox: "0 0 12 13"
+    viewBox: "0 0 12 13",
+    "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -21665,6 +21666,7 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 /* eslint-enable no-unused-vars */
 
+var _excluded$u = ["to", "color", "children", "active", "fontSize", "lineheight", "fontWeight", "variant", "margin", "tabIndex", "dataQa", "extraStyles", "isUnderlined", "hoverUnderline", "extraHoverStyles", "extraActiveStyles", "extraFocusStyles"];
 var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$to = _ref.to,
     to = _ref$to === void 0 ? "" : _ref$to,
@@ -21691,10 +21693,11 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$extraActiveStyle = _ref.extraActiveStyles,
     extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
     _ref$extraFocusStyles = _ref.extraFocusStyles,
-    extraFocusStyles = _ref$extraFocusStyles === void 0 ? "" : _ref$extraFocusStyles;
+    extraFocusStyles = _ref$extraFocusStyles === void 0 ? "" : _ref$extraFocusStyles,
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
-  return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
+  return /*#__PURE__*/React__default.createElement(StyledInternalLink, _extends({
     to: to,
     color: color,
     lineheight: lineheight,
@@ -21714,7 +21717,7 @@ var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     extraFocusStyles: extraFocusStyles,
     "data-qa": dataQa,
     ref: ref
-  }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
 });
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -21749,7 +21752,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   })));
 };
 
-var _excluded$u = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
+var _excluded$v = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
     url = _ref$url === void 0 ? "/" : _ref$url,
@@ -21764,7 +21767,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
-    otherProps = _objectWithoutProperties(_ref, _excluded$u);
+    otherProps = _objectWithoutProperties(_ref, _excluded$v);
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
       url = _ref2.url,
@@ -21852,7 +21855,7 @@ var ParagraphText = styled.p.withConfig({
   return extraStyles;
 });
 
-var _excluded$v = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
+var _excluded$w = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
 var Paragraph = function Paragraph(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -21866,7 +21869,7 @@ var Paragraph = function Paragraph(_ref) {
     dataQa = _ref.dataQa,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
     weight: weight,
     color: color,
@@ -22108,7 +22111,7 @@ var ENTER = 13;
 var ESCAPE = 27;
 var SPACEBAR = 32;
 
-var _excluded$w = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
+var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
 var CheckboxContainer = styled.span.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22178,7 +22181,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     _ref5$hasIconOverride = _ref5.hasIconOverride,
     hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
     Icon = _ref5.icon,
-    rest = _objectWithoutProperties(_ref5, _excluded$w);
+    rest = _objectWithoutProperties(_ref5, _excluded$x);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -22534,7 +22537,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
     extraStyles = _ref.extraStyles,
@@ -22544,7 +22547,7 @@ var TableRow = function TableRow(_ref) {
     hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
     onClick = _ref.onClick,
     themeValues = _ref.themeValues,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
     hoverEffect: hoverEffect,
@@ -25381,7 +25384,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$y = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
 var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
 var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$1;
@@ -25404,7 +25407,7 @@ var Detail = function Detail(_ref) {
     as = _ref$as === void 0 ? "p" : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
     as: as,
@@ -25794,7 +25797,7 @@ var fallbackValues$m = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$z = ["showErrors", "themeValues"],
+var _excluded$A = ["showErrors", "themeValues"],
   _excluded2 = ["ariaLabelledBy", "type", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
@@ -25829,7 +25832,7 @@ var InputField = styled.input.withConfig({
 var FormattedInputField = styled(function (_ref8) {
   var showErrors = _ref8.showErrors,
     themeValues = _ref8.themeValues,
-    props = _objectWithoutProperties(_ref8, _excluded$z);
+    props = _objectWithoutProperties(_ref8, _excluded$A);
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
   displayName: "FormInput__FormattedInputField",
@@ -26034,7 +26037,7 @@ var FormInput = function FormInput(_ref15) {
 };
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
 
-var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$B = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -26043,7 +26046,7 @@ var FormInputRow = function FormInputRow(_ref) {
     largeChild = _ref.largeChild,
     largeChildSize = _ref.largeChildSize,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
   }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -26054,24 +26057,24 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$B = ["childGap", "bottomItem", "children"];
+var _excluded$C = ["childGap", "bottomItem", "children"];
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
     childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
     bottomItem = _ref.bottomItem,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
     bottomItem: bottomItem
   }, rest), children);
 };
 
-var _excluded$C = ["themeValues", "children"];
+var _excluded$D = ["themeValues", "children"];
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -26103,7 +26106,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
 };
 var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$m, "default");
 
-var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
+var _excluded$E = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
 var TextareaField = styled.textarea.withConfig({
   displayName: "FormTextarea__TextareaField",
   componentId: "sc-94tlb0-0"
@@ -26166,7 +26169,7 @@ var FormTextarea = function FormTextarea(_ref8) {
     cols = _ref8.cols,
     placeholder = _ref8.placeholder,
     maxLength = _ref8.maxLength,
-    props = _objectWithoutProperties(_ref8, _excluded$D);
+    props = _objectWithoutProperties(_ref8, _excluded$E);
   var setValue = function setValue(value) {
     if (removeFromValue !== undefined) {
       return fieldActions.set(value.replace(removeFromValue, ""));
@@ -26306,9 +26309,13 @@ var BankItemWrapper = styled.div.withConfig({
   displayName: "FormattedBankAccount__BankItemWrapper",
   componentId: "sc-18hcgw4-0"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
+var BankIconWrapper = styled.div.withConfig({
+  displayName: "FormattedBankAccount__BankIconWrapper",
+  componentId: "sc-18hcgw4-1"
+})(["margin-right:8px;width:36px;height:auto;display:flex;"]);
 var BankAccountText = styled.h4.withConfig({
   displayName: "FormattedBankAccount__BankAccountText",
-  componentId: "sc-18hcgw4-1"
+  componentId: "sc-18hcgw4-2"
 })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
   var color = _ref.color;
   return color;
@@ -26320,10 +26327,7 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
     accountType = _ref2.accountType,
     autoPay = _ref2.autoPay,
     themeValues = _ref2.themeValues;
-  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.25rem 0 0 0",
-    extraStyles: "margin-right: 1rem;"
-  }, /*#__PURE__*/React__default.createElement(BankIcon, null)), /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(BankIconWrapper, null, /*#__PURE__*/React__default.createElement(BankIconLarge, null)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, accountType === CHECKING && /*#__PURE__*/React__default.createElement(BankAccountText, {
     color: themeValues.textColor
@@ -26378,7 +26382,7 @@ var CardType = function CardType(_ref) {
   var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
     label = _ref2.label,
     IconComponent = _ref2[size];
-  return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconComponent, null));
+  return /*#__PURE__*/React__default.createElement(IconComponent, null);
 };
 
 var textColor$2 = "".concat(CHARADE_GREY);
@@ -26455,7 +26459,7 @@ var CreditCardWrapper = styled.div.withConfig({
 var CCIconWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
-})(["margin-right:16px;width:36px;height:auto;display:flex;"]);
+})(["margin-right:8px;width:36px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
     type = _ref.type,
@@ -26570,7 +26574,7 @@ var fallbackValues$q = {
   fontSize: fontSize$8
 };
 
-var _excluded$E = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$F = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -26589,7 +26593,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -26869,11 +26873,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$F = ["version"];
+var _excluded$G = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -26951,7 +26955,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$G = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$H = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -26966,7 +26970,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -26997,7 +27001,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$H = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$I = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -27006,7 +27010,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$H);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -27564,7 +27568,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     borderWidth: "1px",
     borderStyle: "solid",
     borderRadius: "12px",
-    margin: "6px 14px 6px 6px",
+    margin: "6px 8px 6px 6px",
     height: "24px",
     width: "24px",
     variants: buttonBorder,
@@ -38867,7 +38871,7 @@ var LoadingPill = styled.span.withConfig({
   return backgroundColor;
 }, shineFrames);
 
-var _excluded$I = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
+var _excluded$J = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
 var LoadingLine = function LoadingLine(_ref) {
   var minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -38881,7 +38885,7 @@ var LoadingLine = function LoadingLine(_ref) {
     backgroundColor = _ref$backgroundColor === void 0 ? SEASHELL_WHITE : _ref$backgroundColor,
     _ref$foregroundColor = _ref.foregroundColor,
     foregroundColor = _ref$foregroundColor === void 0 ? ALABASTER_WHITE : _ref$foregroundColor,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var calculatedWidth = Math.floor(Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) + parseInt(minWidth));
   return /*#__PURE__*/React__default.createElement(LoadingPill, _extends({
     "aria-label": "loading",
@@ -40915,7 +40919,9 @@ var EditableList = function EditableList(_ref) {
     _ref$editItemAriaRole = _ref.editItemAriaRole,
     editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
     _ref$disablePlacehold = _ref.disablePlaceholder,
-    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
+    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold,
+    _ref$getEditHref = _ref.getEditHref,
+    getEditHref = _ref$getEditHref === void 0 ? null : _ref$getEditHref;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: listPadding,
@@ -40982,7 +40988,12 @@ var EditableList = function EditableList(_ref) {
       extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
       dataQa: qaPrefix + " Edit",
       key: "Edit ".concat(item.id)
-    }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    }, getEditHref ? /*#__PURE__*/React__default.createElement(InternalLink, {
+      to: getEditHref(item),
+      fontWeight: "400",
+      extraStyles: "margin: 0.5rem; min-width: 0;",
+      "aria-label": "Edit ".concat(ariaLabel || itemName)
+    }, "Edit") : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
       variant: "smallGhost",
       text: "Edit",
       action: function action() {
@@ -45280,11 +45291,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$J = ["version"];
+var _excluded$K = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$J);
+    rest = _objectWithoutProperties(_ref, _excluded$K);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -45806,7 +45817,7 @@ var disabledBorderColor$1 = GHOST_GREY;
 var disabledColor$2 = MANATEE_GREY;
 var activeBackgroundColor$1 = CORNFLOWER_BLUE;
 var backgroundColor$a = LINK_WATER;
-var borderColor$5 = MANATEE_GREY;
+var borderColor$5 = MOON_RAKER;
 var color$c = ROYAL_BLUE_VIVID;
 var textColor$5 = BRIGHT_GREY;
 var fallbackValues$L = {
@@ -45820,33 +45831,33 @@ var fallbackValues$L = {
   textColor: textColor$5
 };
 
-var Container = styled(Box).withConfig({
-  displayName: "LinkCardstyled__Container",
+var StyledAnchor = styled("a").withConfig({
+  displayName: "LinkCardstyled__StyledAnchor",
   componentId: "sc-l5q1h2-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;padding:", ";", " text-decoration:none;transition:all 0.2s ease-in-out;", ""], SPACING.MD, function (_ref) {
-  var disabled = _ref.disabled,
-    themeValues = _ref.themeValues;
-  return "\n    background-color: ".concat(disabled ? themeValues.disabledBackgroundColor : themeValues.backgroundColor, ";\n    border: 1px solid ").concat(disabled ? themeValues.disabledBorderColor : themeValues.borderColor, ";\n  ");
-}, function (_ref2) {
-  var disabled = _ref2.disabled,
-    themeValues = _ref2.themeValues;
-  return disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(themeValues.disabledBorderColor, ";\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n\n        &:hover:not(:active) {\n          border: 1px solid ".concat(themeValues.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(themeValues.activeBackgroundColor, ";\n          border: ").concat(BORDER_THIN, " solid ").concat(themeValues.borderColor, ";\n        }\n      ");
+})(["", ""], function (_ref) {
+  var disabled = _ref.$disabled,
+    theme = _ref.$theme,
+    extraStyles = _ref.$extraStyles,
+    disabledStyles = _ref.$disabledStyles,
+    hoverStyles = _ref.$hoverStyles,
+    activeStyles = _ref.$activeStyles;
+  return "\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 40px;\n  flex-shrink: 0;\n  padding: 24px;\n  align-self: stretch;\n  border-radius: 8px;\n  text-decoration: none;\n  background-color: ".concat(disabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n  border: 1px solid\n    ").concat(disabled ? theme.disabledBorderColor : theme.borderColor, ";\n  transition: all 0.2s ease-in-out;\n  ").concat(extraStyles || "", "\n\n  ").concat(disabled ? "\n        &:hover,\n        &:active {\n          cursor: default;\n          box-shadow: none;\n          border: 1px solid ".concat(theme.disabledBorderColor, ";\n          ").concat(disabledStyles || "", "\n        }\n      ") : "\n        &:hover,\n        &:active {\n          cursor: pointer;\n          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n            0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n            0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n            0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n            0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n            0px 80px 33px 0px rgba(41, 42, 51, 0);\n        }\n        ".concat(hoverStyles || "", "\n\n        &:hover:not(:active) {\n          border: 1px solid ").concat(theme.borderColor, ";\n        }\n\n        &:active {\n          background-color: ").concat(theme.activeBackgroundColor, ";\n          border: 1px solid ").concat(theme.borderColor, ";\n          ").concat(activeStyles || "", "\n        }\n      "), "\n  ");
 });
 var Title$2 = styled(Heading$1).withConfig({
   displayName: "LinkCardstyled__Title",
   componentId: "sc-l5q1h2-1"
-})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:", ";line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_SIZE.MD, FONT_WEIGHT_SEMIBOLD, function (_ref3) {
-  var disabled = _ref3.disabled,
-    themeValues = _ref3.themeValues;
-  return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.color, ";");
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";color:", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref2) {
+  var disabled = _ref2.$disabled,
+    theme = _ref2.$theme;
+  return disabled ? theme.disabledColor : theme.color;
 });
 var Subtitle = styled(Paragraph$1).withConfig({
   displayName: "LinkCardstyled__Subtitle",
   componentId: "sc-l5q1h2-2"
-})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:", ";line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_SIZE.SM, FONT_WEIGHT_REGULAR, function (_ref4) {
-  var disabled = _ref4.disabled,
-    themeValues = _ref4.themeValues;
-  return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.textColor, ";");
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";color:", ";"], FONT_WEIGHT_REGULAR, function (_ref3) {
+  var disabled = _ref3.$disabled,
+    theme = _ref3.$theme;
+  return disabled ? theme.disabledColor : theme.textColor;
 });
 var Footer = styled(Stack).withConfig({
   displayName: "LinkCardstyled__Footer",
@@ -45865,6 +45876,7 @@ var LinkCard = function LinkCard(_ref) {
     leftContent = _ref.leftContent,
     showRight = _ref.showRight,
     rightContent = _ref.rightContent,
+    href = _ref.href,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
     _ref$extraHoverStyles = _ref.extraHoverStyles,
@@ -45877,32 +45889,23 @@ var LinkCard = function LinkCard(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$isExternalLink = _ref.isExternalLink,
-    isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink,
-    _ref$href = _ref.href,
-    href = _ref$href === void 0 ? "" : _ref$href;
-  var _useContext = useContext(ThemeContext),
-    isMobile = _useContext.isMobile;
+    isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
   var regex = /\W/g;
   var locatorSlug = title === null || title === void 0 || (_title$toLowerCase = title.toLowerCase) === null || _title$toLowerCase === void 0 || (_title$toLowerCase = _title$toLowerCase.call(title)) === null || _title$toLowerCase === void 0 || (_title$toLowerCase$re = _title$toLowerCase.replaceAll) === null || _title$toLowerCase$re === void 0 ? void 0 : _title$toLowerCase$re.call(_title$toLowerCase, regex, "-");
-  return /*#__PURE__*/React__default.createElement(Container, {
-    as: "a",
-    role: "link",
+  return /*#__PURE__*/React__default.createElement(StyledAnchor, {
+    key: "link-card-".concat(locatorSlug),
     href: disabled ? undefined : href,
+    rel: isExternalLink ? "noopener noreferrer" : undefined,
+    target: isExternalLink ? "_blank" : undefined,
     tabIndex: disabled ? -1 : 0,
-    borderRadius: "8px",
-    dataQa: "link-card-".concat(locatorSlug),
-    width: "100%",
-    maxWidth: isMobile ? "100%" : "288px",
-    minWidth: isMobile ? "240px" : "288px",
-    minHeight: "141px",
-    padding: SPACING.MD,
-    themeValues: themeValues,
-    extraStyles: extraStyles,
-    hoverStyles: extraHoverStyles,
-    activeStyles: extraActiveStyles,
     "aria-disabled": disabled,
-    disabled: disabled,
-    "aria-label": "".concat(title, ", ").concat(subtitle)
+    $disabled: disabled,
+    "aria-label": "".concat(title, ", ").concat(subtitle),
+    "data-qa": "link-card-".concat(locatorSlug),
+    $theme: themeValues,
+    $extraStyles: disabled ? "pointer-events: none; ".concat(extraStyles) : extraStyles,
+    $hoverStyles: extraHoverStyles,
+    $activeStyles: extraActiveStyles
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -45917,9 +45920,9 @@ var LinkCard = function LinkCard(_ref) {
     extraStyles: "align-items: center;"
   }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: titleVariant,
-    themeValues: themeValues,
+    $theme: themeValues,
     margin: 0,
-    disabled: disabled
+    $disabled: disabled
   }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     linkColor: themeValues.color,
     text: locatorSlug,
@@ -45932,8 +45935,8 @@ var LinkCard = function LinkCard(_ref) {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    themeValues: themeValues,
-    disabled: disabled
+    $theme: themeValues,
+    $disabled: disabled
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
@@ -46130,7 +46133,8 @@ var IconsModule = function IconsModule(_ref) {
     Icon = iconsMap[icon];
   }
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 1rem 0 0"
+    padding: "0 1rem 0 0",
+    "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
@@ -46214,7 +46218,6 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
     } : navigateToSettings,
     isLoading: deactivatingSchedule
   };
-  var modalLinkHoverFocus = "\n    outline: none;\n    cursor: pointer;\n    text-decoration: underline;\n    text-decoration-color: #317D4F;\n  ";
   var hoverStyles = "text-decoration: underline;";
   var activeStyles = "text-decoration: underline;";
   var renderAutoPayControl = function renderAutoPayControl() {
@@ -46249,28 +46252,25 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
         {
           return /*#__PURE__*/React__default.createElement(Box, {
             padding: "0",
+            role: "button",
+            tabIndex: "0",
             onClick: onClick || function () {
               toggleModal(true);
             },
+            onKeyDown: onKeyPress || function (e) {
+              e.key === "Enter" && toggleModal(true);
+            },
             hoverStyles: hoverStyles,
             activeStyles: activeStyles,
-            extraStyles: "cursor: pointer;"
+            extraStyles: "cursor: pointer; margin-bottom: 5px;",
+            dataQa: "".concat(shortPlan, " On")
           }, /*#__PURE__*/React__default.createElement(Cluster, {
             justify: isMobile ? "flex-start" : "flex-end",
             align: "center"
           }, /*#__PURE__*/React__default.createElement(AutopayOnIcon, null), /*#__PURE__*/React__default.createElement(Text$1, {
             variant: "pS",
-            onClick: onClick || function () {
-              return toggleModal(true);
-            },
-            onKeyPress: onKeyPress || function (e) {
-              e.key === "Enter" && toggleModal(true);
-            },
-            tabIndex: "0",
-            dataQa: "".concat(shortPlan, " On"),
             color: SEA_GREEN,
             weight: FONT_WEIGHT_REGULAR,
-            hoverStyles: modalLinkHoverFocus,
             extraStyles: "padding-left: 0.25rem;",
             disabled: disableActions
           }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
@@ -47544,7 +47544,7 @@ var fallbackValues$Q = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$K = ["amount"],
+var _excluded$L = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47787,7 +47787,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$K);
+      rest = _objectWithoutProperties(_ref5, _excluded$L);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -48224,11 +48224,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$L = ["version"];
+var _excluded$M = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$L);
+    rest = _objectWithoutProperties(_ref, _excluded$M);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -49036,7 +49036,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$M = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$N = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -49086,7 +49086,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$groupedSections = _ref.groupedSections,
     groupedSections = _ref$groupedSections === void 0 ? [] : _ref$groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$N);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49642,7 +49642,7 @@ var Tab = function Tab(_ref) {
   }, label));
 };
 
-var _excluded$N = ["tabsConfig", "tabsDisplayMode", "tabsPadding", "contentPadding", "extraStyles"];
+var _excluded$O = ["tabsConfig", "tabsDisplayMode", "tabsPadding", "contentPadding", "extraStyles"];
 var HORIZONTAL = "horizontal";
 var Tabs = function Tabs(_ref) {
   var _tabsConfig$tabs$;
@@ -49655,7 +49655,7 @@ var Tabs = function Tabs(_ref) {
     contentPadding = _ref$contentPadding === void 0 ? "0" : _ref$contentPadding,
     _ref$extraStyles = _ref.extraStyles,
     extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var _useState = useState(((_tabsConfig$tabs$ = tabsConfig.tabs[0]) === null || _tabsConfig$tabs$ === void 0 ? void 0 : _tabsConfig$tabs$.label) || null),
     _useState2 = _slicedToArray(_useState, 2),
     activeTab = _useState2[0],
@@ -49808,7 +49808,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$O = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$P = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -49837,7 +49837,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$O);
+    rest = _objectWithoutProperties(_ref, _excluded$P);
   var screenReaderMessageRef = useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   useEffect$1(function () {
@@ -50020,7 +50020,7 @@ var PopupMenuItemContainer = styled(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$P = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$Q = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -50036,7 +50036,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$P);
+    rest = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -50275,7 +50275,7 @@ var ActionLinkButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$Q = ["width", "height", "color"];
+var _excluded$R = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50283,7 +50283,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     "aria-hidden": "true",
     width: width,
@@ -50431,7 +50431,7 @@ var SearchBox = function SearchBox(_ref) {
   }));
 };
 
-var _excluded$R = ["width", "height", "color"];
+var _excluded$S = ["width", "height", "color"];
 var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50439,7 +50439,7 @@ var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
     height = _ref$height === void 0 ? "18" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -50919,7 +50919,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
 var MultipleSelectFilter$1 = themeComponent(MultipleSelectFilter, "MultipleSelectFilter", fallbackValues$10);
 
 var TextWrapStyles = css(["word-wrap:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;"]);
-var Container$1 = styled(Box).withConfig({
+var Container = styled(Box).withConfig({
   displayName: "ContactCardstyled__Container",
   componentId: "sc-1v62a1n-0"
 })(["height:fit-content;display:flex;padding:1rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:8px;", ""], function (_ref) {
@@ -50957,7 +50957,7 @@ var ContactCard = function ContactCard(_ref) {
     externalLinkColor: ROYAL_BLUE_VIVID
   };
   var linkThemeValues = createThemeValues(themeContext, linkFallbackValues, "Link", linkVariant);
-  return /*#__PURE__*/React__default.createElement(Container$1, {
+  return /*#__PURE__*/React__default.createElement(Container, {
     borderRadius: "8px",
     background: WHITE,
     boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
@@ -51135,7 +51135,7 @@ var fallbackValues$11 = {
   justifyContent: justifyContent
 };
 
-var _excluded$S = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
+var _excluded$T = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
   _excluded2$2 = ["theme", "isMobile"],
   _excluded3 = ["theme", "isMobile"],
   _excluded4 = ["theme", "isMobile"];
@@ -51158,7 +51158,7 @@ var HeroContainer = styled(function (_ref2) {
     isMobile = _ref2.isMobile,
     theme = _ref2.theme,
     extraStyles = _ref2.extraStyles,
-    props = _objectWithoutProperties(_ref2, _excluded$S);
+    props = _objectWithoutProperties(_ref2, _excluded$T);
   return /*#__PURE__*/React__default.createElement(Box, props);
 }).withConfig({
   displayName: "HeroImagestyled__HeroContainer",