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

package/README.md

@@ -1,6 +1,6 @@
-# CityBase Components
+# Citybase Components
 
-This library contains CityBase React components for use across all current and future CB applications (NFE, RMD, Kiosk, POS).
+This library contains Citybase React components for use across all current and future CB applications (NFE, RMD, Kiosk, POS).
 
 <!-- TOC -->
 

package/dist/index.cjs.js

@@ -4916,7 +4916,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,
@@ -4927,8 +4926,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
 });
 
 /*
@@ -5165,7 +5163,7 @@ var colors = /*#__PURE__*/Object.freeze({
 var TextSpan = styled__default.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) {
@@ -5178,20 +5176,17 @@ var TextSpan = styled__default.span.withConfig({
   var color = _ref4.color;
   return color;
 }, function (_ref5) {
-  var textDecoration = _ref5.textDecoration;
-  return textDecoration;
-}, function (_ref6) {
-  var $textWrap = _ref6.$textWrap;
+  var $textWrap = _ref5.$textWrap;
   return $textWrap ? "initial" : "nowrap";
-}, function (_ref7) {
-  var hoverStyles = _ref7.hoverStyles;
+}, function (_ref6) {
+  var hoverStyles = _ref6.hoverStyles;
   return styled.css(["", ""], hoverStyles);
-}, ROYAL_BLUE, function (_ref8) {
-  var disabled = _ref8.disabled,
-    disabledStyles = _ref8.disabledStyles;
+}, ROYAL_BLUE, function (_ref7) {
+  var disabled = _ref7.disabled,
+    disabledStyles = _ref7.disabledStyles;
   return disabled && styled.css(["", ""], disabledStyles);
-}, function (_ref9) {
-  var extraStyles = _ref9.extraStyles;
+}, function (_ref8) {
+  var extraStyles = _ref8.extraStyles;
   return extraStyles;
 });
 
@@ -12561,43 +12556,6 @@ var Reel = function Reel(_ref) {
   }), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, 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",
@@ -12613,18 +12571,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",
@@ -12682,131 +12640,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,
@@ -12815,7 +12759,6 @@ var fallbackValues$1 = {
   fontWeight: fontWeight,
   height: height,
   minWidth: minWidth,
-  textDecoration: textDecoration,
   backgroundColor: backgroundColor,
   border: border,
   hoverBackgroundColor: hoverBackgroundColor,
@@ -12939,7 +12882,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__*/React.forwardRef(function (_ref2, ref) {
@@ -12970,8 +12913,8 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var themeContext = React.useContext(styled.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__default.createElement(Box, _extends({
     ref: ref,
@@ -13002,7 +12945,6 @@ var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     weight: themeValues.fontWeight,
     variant: themeValues.fontSizeVariant,
     color: themeValues.color,
-    textDecoration: themeValues.textDecoration,
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
@@ -20445,23 +20387,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,
@@ -20488,9 +20427,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.
@@ -20508,7 +20444,7 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 })).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) {
@@ -20523,10 +20459,10 @@ var StyledExternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, 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) {
@@ -20577,9 +20513,6 @@ var ExternalLink = /*#__PURE__*/React.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.
@@ -20599,7 +20532,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 })).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;
@@ -20619,10 +20552,10 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
 }, 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) {
@@ -20695,7 +20628,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__default.createElement(IconChevron, null) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
   })));
 };
@@ -22275,6 +22208,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,
@@ -22283,10 +22218,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,
@@ -25890,7 +25823,7 @@ var useToastNotification = function useToastNotification() {
 
 
 
-var index$5 = /*#__PURE__*/Object.freeze({
+var index$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   useOutsideClick: useOutsideClickHook,
   useScrollTo: useScrollTo,
@@ -39069,6 +39002,14 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
 var shineFrames = styled.keyframes(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled__default.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -46499,6 +46440,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,
@@ -46583,17 +46528,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);
@@ -47416,7 +47361,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,
@@ -47436,10 +47380,11 @@ var Pagination = function Pagination(_ref3) {
     pageNext = _ref3.pageNext,
     pagePrevious = _ref3.pagePrevious,
     setCurrentPage = _ref3.setCurrentPage,
+    ariaLabel = _ref3.ariaLabel,
     themeValues = _ref3.themeValues;
   var _useContext = React.useContext(styled.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__default.createElement(Cluster, {
     justify: "center",
@@ -49587,7 +49532,7 @@ var TabSidebar = function TabSidebar(_ref) {
     return /*#__PURE__*/React__default.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__default.createElement(Box, {
       padding: isMobile ? "6px 4px" : "18px 16px",
       background: active ? themeValues.activeTabBackground : "transparent",
@@ -50297,10 +50242,10 @@ exports.WorkflowTile = WorkflowTile;
 exports.XCircleIconMedium = XCircleIconMedium;
 exports.XCircleIconSmall = XCircleIconSmall;
 exports.cardRegistry = cardRegistry;
-exports.constants = index$4;
+exports.constants = index$5;
 exports.createPartialAmountFormState = createPartialAmountFormState;
 exports.createPartialAmountFormValidators = createPartialAmountFormValidators;
-exports.hooks = index$5;
+exports.hooks = index$4;
 exports.util = index$6;
 exports.withWindowSize = withWindowSize;
 //# sourceMappingURL=index.cjs.js.map