@thecb/components 10.2.1-beta.2 → 10.2.2-beta.0

package/dist/index.d.ts

@@ -290,47 +290,11 @@ declare namespace colors_d {
   };
 }
 
-type StyleDeclaration = string;
-
-declare const HEADER_HEIGHT: StyleDeclaration;
-declare const FOOTER_HEIGHT: StyleDeclaration;
-declare const SPACER_HEIGHT: StyleDeclaration;
-declare const JUMBO_HEIGHT: StyleDeclaration;
-declare const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
-declare const FONT_WEIGHT_REGULAR: StyleDeclaration;
-declare const FONT_WEIGHT_BOLD: StyleDeclaration;
-declare const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
-declare const LINK_TEXT_DECORATION: StyleDeclaration;
-
-declare const style_constants_d_HEADER_HEIGHT: typeof HEADER_HEIGHT;
-declare const style_constants_d_FOOTER_HEIGHT: typeof FOOTER_HEIGHT;
-declare const style_constants_d_SPACER_HEIGHT: typeof SPACER_HEIGHT;
-declare const style_constants_d_JUMBO_HEIGHT: typeof JUMBO_HEIGHT;
-declare const style_constants_d_COMPACT_JUMBO_HEIGHT: typeof COMPACT_JUMBO_HEIGHT;
-declare const style_constants_d_FONT_WEIGHT_REGULAR: typeof FONT_WEIGHT_REGULAR;
-declare const style_constants_d_FONT_WEIGHT_BOLD: typeof FONT_WEIGHT_BOLD;
-declare const style_constants_d_FONT_WEIGHT_SEMIBOLD: typeof FONT_WEIGHT_SEMIBOLD;
-declare const style_constants_d_LINK_TEXT_DECORATION: typeof LINK_TEXT_DECORATION;
-declare namespace style_constants_d {
-  export {
-    style_constants_d_HEADER_HEIGHT as HEADER_HEIGHT,
-    style_constants_d_FOOTER_HEIGHT as FOOTER_HEIGHT,
-    style_constants_d_SPACER_HEIGHT as SPACER_HEIGHT,
-    style_constants_d_JUMBO_HEIGHT as JUMBO_HEIGHT,
-    style_constants_d_COMPACT_JUMBO_HEIGHT as COMPACT_JUMBO_HEIGHT,
-    style_constants_d_FONT_WEIGHT_REGULAR as FONT_WEIGHT_REGULAR,
-    style_constants_d_FONT_WEIGHT_BOLD as FONT_WEIGHT_BOLD,
-    style_constants_d_FONT_WEIGHT_SEMIBOLD as FONT_WEIGHT_SEMIBOLD,
-    style_constants_d_LINK_TEXT_DECORATION as LINK_TEXT_DECORATION,
-  };
-}
-
 
 
 declare namespace index_d {
   export {
     colors_d as colors,
-    style_constants_d as styleConstants,
   };
 }
 

package/dist/index.esm.js

@@ -4908,7 +4908,6 @@ var COMPACT_JUMBO_HEIGHT = "65px";
 var FONT_WEIGHT_REGULAR = "400";
 var FONT_WEIGHT_BOLD = "700";
 var FONT_WEIGHT_SEMIBOLD = "600";
-var LINK_TEXT_DECORATION = "underline solid 1px";
 
 var style_constants = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4919,8 +4918,7 @@ var style_constants = /*#__PURE__*/Object.freeze({
   COMPACT_JUMBO_HEIGHT: COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
-  LINK_TEXT_DECORATION: LINK_TEXT_DECORATION
+  FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD
 });
 
 /*
@@ -5157,7 +5155,7 @@ var colors = /*#__PURE__*/Object.freeze({
 var TextSpan = styled.span.withConfig({
   displayName: "Textstyled__TextSpan",
   componentId: "sc-1oy97we-0"
-})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";text-decoration:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
+})(["--font-size:", ";font-size:var(--font-size);line-height:calc(1.5 * var(--font-size));font-weight:", ";font-family:", ";color:", ";white-space:", ";&:hover{", "}&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
   var fontSize = _ref.fontSize;
   return fontSize;
 }, function (_ref2) {
@@ -5169,8 +5167,6 @@ var TextSpan = styled.span.withConfig({
 }, function (_ref4) {
   var color = _ref4.color;
   return color;
-}, function (textDecoration) {
-  return textDecoration;
 }, function (_ref5) {
   var $textWrap = _ref5.$textWrap;
   return $textWrap ? "initial" : "nowrap";
@@ -12552,43 +12548,6 @@ var Reel = function Reel(_ref) {
   }), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
-var ACH_METHOD = "BANK_ACCOUNT";
-var CC_METHOD = "CREDIT_CARD";
-var CASH_METHOD = "CASH";
-
-var general$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ACH_METHOD: ACH_METHOD,
-  CC_METHOD: CC_METHOD,
-  CASH_METHOD: CASH_METHOD
-});
-
-var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
-
-var regex_constants = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  URL_TEST: URL_TEST
-});
-
-
-
-var index$4 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  general: general$1,
-  regexConstants: regex_constants,
-  styleConstants: style_constants,
-  fontWeights: style_constants
-});
-
-var WHITE$1 = WHITE,
-  TRANSPARENT$1 = TRANSPARENT,
-  SAPPHIRE_BLUE$1 = SAPPHIRE_BLUE,
-  PEACOCK_BLUE$1 = PEACOCK_BLUE,
-  MATISSE_BLUE$1 = MATISSE_BLUE,
-  RASPBERRY$1 = RASPBERRY,
-  ERROR_COLOR$1 = ERROR_COLOR;
-var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -12604,18 +12563,18 @@ var padding = {
   whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: WHITE$1,
-  secondary: MATISSE_BLUE$1,
-  back: MATISSE_BLUE$1,
-  smallPrimary: WHITE$1,
-  smallSecondary: MATISSE_BLUE$1,
-  smallGhost: MATISSE_BLUE$1,
-  ghost: MATISSE_BLUE$1,
-  tertiary: MATISSE_BLUE$1,
-  danger: WHITE$1,
-  dangerSecondary: ERROR_COLOR$1,
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12673,131 +12632,117 @@ var minWidth = {
   whiteSecondary: "160px",
   whitePrimary: "130px"
 };
-var textDecoration = {
-  primary: "none",
-  secondary: "none",
-  back: "none",
-  smallPrimary: "none",
-  smallSecondary: "none",
-  smallGhost: LINK_TEXT_DECORATION$1,
-  ghost: LINK_TEXT_DECORATION$1,
-  tertiary: "none",
-  danger: "none",
-  dangerSecondary: "none",
-  whiteSecondary: "none",
-  whitePrimary: "none"
-};
 var backgroundColor = {
-  primary: MATISSE_BLUE$1,
-  secondary: TRANSPARENT$1,
-  back: TRANSPARENT$1,
-  smallPrimary: MATISSE_BLUE$1,
-  smallSecondary: TRANSPARENT$1,
-  smallGhost: TRANSPARENT$1,
-  ghost: TRANSPARENT$1,
-  tertiary: TRANSPARENT$1,
-  danger: RASPBERRY$1,
-  dangerSecondary: TRANSPARENT$1,
-  whiteSecondary: TRANSPARENT$1,
-  whitePrimary: TRANSPARENT$1
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var border = {
-  primary: "2px solid " + MATISSE_BLUE$1,
-  secondary: "2px solid " + MATISSE_BLUE$1,
-  back: "2px solid " + MATISSE_BLUE$1,
-  smallPrimary: "2px solid " + MATISSE_BLUE$1,
-  smallSecondary: "2px solid " + MATISSE_BLUE$1,
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid " + RASPBERRY$1,
-  dangerSecondary: "2px solid " + ERROR_COLOR$1,
-  whiteSecondary: "2px solid " + WHITE$1,
-  whitePrimary: "2px solid " + TRANSPARENT$1
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverBackgroundColor = {
-  primary: SAPPHIRE_BLUE$1,
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: TRANSPARENT$1,
-  smallPrimary: SAPPHIRE_BLUE$1,
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: TRANSPARENT$1,
-  ghost: TRANSPARENT$1,
-  tertiary: TRANSPARENT$1,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT$1,
-  whitePrimary: TRANSPARENT$1
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var hoverBorderColor = {
-  primary: SAPPHIRE_BLUE$1,
-  secondary: MATISSE_BLUE$1,
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: SAPPHIRE_BLUE$1,
-  smallSecondary: MATISSE_BLUE$1,
-  smallGhost: TRANSPARENT$1,
-  ghost: TRANSPARENT$1,
-  tertiary: TRANSPARENT$1,
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid " + TRANSPARENT$1,
-  whitePrimary: "2px solid " + TRANSPARENT$1
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverColor = {
-  primary: WHITE$1,
-  secondary: SAPPHIRE_BLUE$1,
-  back: SAPPHIRE_BLUE$1,
-  smallPrimary: WHITE$1,
-  smallSecondary: SAPPHIRE_BLUE$1,
-  smallGhost: SAPPHIRE_BLUE$1,
-  ghost: SAPPHIRE_BLUE$1,
-  tertiary: SAPPHIRE_BLUE$1,
-  danger: WHITE$1,
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var activeBackgroundColor = {
-  primary: PEACOCK_BLUE$1,
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: TRANSPARENT$1,
-  smallPrimary: PEACOCK_BLUE$1,
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: TRANSPARENT$1,
-  ghost: TRANSPARENT$1,
-  tertiary: TRANSPARENT$1,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
-  whiteSecondary: TRANSPARENT$1,
-  whitePrimary: TRANSPARENT$1
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var activeBorderColor = {
-  primary: PEACOCK_BLUE$1,
-  secondary: MATISSE_BLUE$1,
-  back: PEACOCK_BLUE$1,
-  smallPrimary: PEACOCK_BLUE$1,
-  smallSecondary: MATISSE_BLUE$1,
-  smallGhost: TRANSPARENT$1,
-  ghost: TRANSPARENT$1,
-  tertiary: TRANSPARENT$1,
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid " + TRANSPARENT$1,
-  whitePrimary: "2px solid " + TRANSPARENT$1
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var activeColor = {
-  primary: WHITE$1,
-  secondary: MATISSE_BLUE$1,
-  back: PEACOCK_BLUE$1,
-  smallPrimary: WHITE$1,
-  smallSecondary: PEACOCK_BLUE$1,
-  smallGhost: PEACOCK_BLUE$1,
-  ghost: PEACOCK_BLUE$1,
-  tertiary: PEACOCK_BLUE$1,
-  danger: WHITE$1,
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: WHITE$1,
-  whitePrimary: WHITE$1
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -12806,7 +12751,6 @@ var fallbackValues$1 = {
   fontWeight: fontWeight,
   height: height,
   minWidth: minWidth,
-  textDecoration: textDecoration,
   backgroundColor: backgroundColor,
   border: border,
   hoverBackgroundColor: hoverBackgroundColor,
@@ -12930,7 +12874,7 @@ var Spinner = function Spinner(_ref) {
 
   Note: the children prop is only used if contentOverride is set to true, in which case
   the text prop is ignored.
-
+  
 */
 
 var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
@@ -12961,8 +12905,8 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var themeContext = useContext(ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   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    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  ");
+  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-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      outline: 3px solid #6D717E;\n      outline-offset: 2px;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React.createElement(Box, _extends({
     ref: ref,
@@ -12993,7 +12937,6 @@ var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
-    textDecoration: themeValues.textDecoration,
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
@@ -20436,23 +20379,20 @@ var BoxWithShadow = function BoxWithShadow(_ref) {
 var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackValues$8);
 
 // import theme from "styled-theming";
-var MATISSE_BLUE$2 = MATISSE_BLUE,
-  STORM_GREY$1 = STORM_GREY;
-var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
   for colors/values that should be used here instead
 */
 
-var color$5 = "".concat(MATISSE_BLUE$2);
-var activeColor$2 = "".concat(STORM_GREY$1);
-var activeBreadcrumbColor = "".concat(STORM_GREY$1);
+var color$5 = "".concat(MATISSE_BLUE);
+var activeColor$2 = "".concat(STORM_GREY);
+var activeBreadcrumbColor = "".concat(STORM_GREY);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
 var fontWeight$1 = "400";
 var margin = "0.5rem";
-var hover = "text-decoration: ".concat(LINK_TEXT_DECORATION$2, ";");
+var hover = "text-decoration: none;";
 var fallbackValues$9 = {
   color: color$5,
   activeColor: activeColor$2,
@@ -20479,9 +20419,6 @@ var fallbackValues$a = {
 };
 
 var _excluded$k = ["hoverColor", "activeColor", "extrastyles"];
-var ROYAL_BLUE$1 = ROYAL_BLUE;
-var LINK_TEXT_DECORATION$3 = LINK_TEXT_DECORATION;
-
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -20499,7 +20436,7 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "ExternalLinkstyled__StyledExternalLink",
   componentId: "sc-m1q2m2-0"
-})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
+})(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
   var size = _ref2.size;
   return size;
 }, function (_ref3) {
@@ -20514,10 +20451,10 @@ var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref6) {
   var lineheight = _ref6.lineheight;
   return lineheight;
-}, LINK_TEXT_DECORATION$3, function (_ref7) {
+}, function (_ref7) {
   var hoverColor = _ref7.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE$1, function (_ref8) {
+}, ROYAL_BLUE, function (_ref8) {
   var activeColor = _ref8.activeColor;
   return activeColor;
 }, function (_ref9) {
@@ -20568,9 +20505,6 @@ var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 
 var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
-var ROYAL_BLUE$2 = ROYAL_BLUE;
-var LINK_TEXT_DECORATION$4 = LINK_TEXT_DECORATION;
-
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -20590,7 +20524,7 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 })).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
-})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";text-decoration:", ";&:hover{color:", ";}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{color:", ";}", ""], function (_ref2) {
+})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
   var color = _ref2.color,
     active = _ref2.active,
     activeColor = _ref2.activeColor;
@@ -20610,10 +20544,10 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
 }, function (_ref7) {
   var margin = _ref7.margin;
   return margin;
-}, LINK_TEXT_DECORATION$4, function (_ref8) {
+}, function (_ref8) {
   var hoverColor = _ref8.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE$2, function (_ref9) {
+}, ROYAL_BLUE, function (_ref9) {
   var activeColor = _ref9.activeColor;
   return activeColor;
 }, function (_ref10) {
@@ -20686,7 +20620,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       lineheight: themeValues.lineHeight,
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
-      extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "color: ".concat(themeValues.activeBreadcrumbColor, ";\n                             pointer-events: none;\n                             text-decoration: none;\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, ";\n                          }")
+      extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "pointer-events: none;\n                             color: ".concat(themeValues.activeBreadcrumbColor, ";\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, "; \n                          }")
     }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React.createElement(IconChevron, null) : /*#__PURE__*/React.createElement(Fragment$1, null));
   })));
 };
@@ -22266,6 +22200,8 @@ _curry2(function test(pattern, str) {
   return _cloneRegExp(pattern).test(str);
 });
 
+var URL_TEST = /(([a-z]{3,6}:\/\/)|(^|\s))([a-zA-Z0-9\-]+\.)+[a-z]{2,13}[\.\?\=\&\%\/\w\-]*\b([^@]|$)/;
+
 var _excluded$m = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
@@ -22274,10 +22210,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$fileLink = _ref.fileLink,
     fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
-    _ref$extraStyles = _ref.extraStyles,
-    extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-    _ref$linkExtraStyles = _ref.linkExtraStyles,
-    linkExtraStyles = _ref$linkExtraStyles === void 0 ? "" : _ref$linkExtraStyles,
+    extraStyles = _ref.extraStyles,
+    linkExtraStyles = _ref.linkExtraStyles,
     _ref$newTab = _ref.newTab,
     newTab = _ref$newTab === void 0 ? false : _ref$newTab,
     dataQa = _ref.dataQa,
@@ -25881,7 +25815,7 @@ var useToastNotification = function useToastNotification() {
 
 
 
-var index$5 = /*#__PURE__*/Object.freeze({
+var index$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
@@ -39060,6 +38994,14 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
 var shineFrames = keyframes$3(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -46490,6 +46432,10 @@ var NavMenuMobile = function NavMenuMobile(_ref2) {
 };
 var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$K, "profile");
 
+var ACH_METHOD = "BANK_ACCOUNT";
+var CC_METHOD = "CREDIT_CARD";
+var CASH_METHOD = "CASH";
+
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
     iconDefault = _ref.iconDefault,
@@ -46574,17 +46520,17 @@ var AutopayModal = function AutopayModal(_ref) {
     var allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
     var allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
     var methodRequired = allowsCard && !allowsACH ? "debit or credit card payment method" : !allowsCard && allowsACH ? "checking account payment method" : "payment method";
-    return "To setup ".concat(planText, " you must have a saved ").concat(methodRequired, " and address. Do you want to save these now?");
+    return "To set up ".concat(planText, " you must have a saved ").concat(methodRequired, " and address. Do you want to save these now?");
   };
   var plan = isPaymentPlan ? "your payment plan" : "autopay";
   var shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
-  var deactivateText = "deactivate ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
-  var activateText = "Set Up ".concat(shortPlan, " for ").concat(description, ": ").concat(subDescription);
+  var deactivateText = "Stop ".concat(shortPlan.toLowerCase(), " for ").concat(titleCaseString(description), ": ").concat(titleCaseString(subDescription));
+  var activateText = "Set Up ".concat(shortPlan.toLowerCase(), " for ").concat(titleCaseString(description), ": ").concat(titleCaseString(subDescription));
   var nextDate = dueDate || nextAutopayDate;
   var modalExtraProps = {
-    modalHeaderText: autoPayActive ? titleCaseString(deactivateText) : titleCaseString(activateText),
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(plan, "? ").concat(!inactive && nextDate ? "Your next payment will be due on ".concat(nextDate, ".") : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? "Disable ".concat(shortPlan) : "Add",
+    modalHeaderText: autoPayActive ? deactivateText : activateText,
+    modalBodyText: autoPayActive ? "Are you sure you want to stop ".concat(plan, "? ").concat(!inactive && nextDate && nextDate !== "On" ? "Your next payment will be due on " + nextDate + "." : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
+    continueButtonText: autoPayActive ? "Stop ".concat(shortPlan) : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
       deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
@@ -47407,7 +47353,6 @@ var getPagesPanel = function getPagesPanel(page, pagesCount) {
 var Pagination = function Pagination(_ref3) {
   var _ref3$activeBorderWid = _ref3.activeBorderWidth,
     activeBorderWidth = _ref3$activeBorderWid === void 0 ? "3px" : _ref3$activeBorderWid,
-    ariaLabel = _ref3.ariaLabel,
     arrowColor = _ref3.arrowColor,
     _ref3$borderRadius = _ref3.borderRadius,
     borderRadius = _ref3$borderRadius === void 0 ? "3px" : _ref3$borderRadius,
@@ -47427,10 +47372,11 @@ var Pagination = function Pagination(_ref3) {
     pageNext = _ref3.pageNext,
     pagePrevious = _ref3.pagePrevious,
     setCurrentPage = _ref3.setCurrentPage,
+    ariaLabel = _ref3.ariaLabel,
     themeValues = _ref3.themeValues;
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
-  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
+  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    &:hover, &:focus {\n      text-decoration: none;\n      > * > span {\n        text-decoration: none;\n      }\n    }\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
   var currentPageStyles = "\n    border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n    color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n    background-color: ").concat(themeValues.activeBackgroundColor, ";\n    &:focus {\n      box-shadow: none;\n    }\n    &:hover {\n      background-color: initial;\n      border: ").concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n      background-color: ").concat(themeValues.activeBackgroundColor, ";\n    }\n  ");
   return /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
@@ -49578,7 +49524,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React.createElement(InternalLink, {
       to: route,
       key: "".concat(route, "-").concat(index),
-      extraStyles: "&:hover {\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.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -50078,5 +50024,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useToastNotification: useToastNotification
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map