@thecb/components 8.3.1-beta.13 → 8.3.1-beta.2

package/dist/index.d.ts

@@ -698,285 +698,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-type Color = string;
-
-type ColorSet = {
-  background: Color;
-  border: Color;
-  iconBackground: Color;
-  iconFill: Color;
-};
-
-declare const BLACK: Color; 
-declare const TRANSPARENT:Color; 
-// WHITE
-declare const WHITE: Color; 
-declare const SOLITUDE_WHITE: Color; 
-declare const SEASHELL_WHITE: Color; 
-declare const ALABASTER_WHITE: Color; 
-declare const AQUA_HAZE_WHITE: Color; 
-declare const BLEACH_WHITE: Color; 
-declare const CATSKILL_WHITE: Color; 
-declare const HALF_COLONIAL_WHITE: Color; 
-// GREY
-declare const ATHENS_GREY: Color; 
-declare const ALTO_GREY: Color; 
-declare const SILVER_GREY: Color; 
-declare const PEWTER_GREY: Color; 
-declare const ASH_GREY: Color; 
-declare const IRON_GREY: Color; 
-declare const GHOST_GREY: Color; 
-declare const DUSTY_GREY: Color; 
-declare const REGENT_GREY: Color; 
-declare const STORM_GREY: Color; 
-declare const TROUT_GREY: Color; 
-declare const MINESHAFT_GREY: Color; 
-declare const SOOT_GREY: Color; 
-declare const FIREFLY_GREY: Color; 
-declare const BRIGHT_GREY: Color; 
-declare const CHARADE_GREY: Color; 
-declare const GRECIAN_GREY: Color; 
-declare const BLACK_SQUEEZE: Color; 
-declare const GREY_CHATEAU: Color; 
-declare const COOL_GREY_05: Color; 
-// BLUE
-declare const CLOUDBURST_BLUE: Color; 
-declare const ZODIAC_BLUE: Color; 
-declare const CONGRESS_BLUE: Color; 
-declare const SCIENCE_BLUE: Color; 
-declare const MARINER_BLUE: Color; 
-declare const CURIOUS_BLUE: Color; 
-declare const SELAGO_BLUE: Color; 
-declare const ONAHAU_BLUE: Color; 
-declare const PICKLED_BLUE: Color; 
-declare const CERULEAN_BLUE: Color; 
-declare const FOAM_BLUE: Color; 
-declare const CELLO_BLUE: Color; 
-declare const BOSTON_BLUE: Color; 
-declare const INFO_BLUE: Color; 
-declare const CORNFLOWER_BLUE: Color; 
-declare const HOVER_LIGHT_BLUE: Color; 
-declare const MATISSE_BLUE: Color; 
-declare const ROYAL_BLUE: Color; 
-declare const ROYAL_BLUE_VIVID: Color; 
-declare const ASTRAL_BLUE: Color; 
-declare const SAPPHIRE_BLUE: Color; 
-declare const PEACOCK_BLUE: Color; 
-// GREEN
-declare const FOREST_GREEN: Color; 
-declare const MEADOW_GREEN: Color; 
-declare const POLAR_GREEN: Color; 
-declare const ICE_GREEN: Color; 
-declare const HAZE_GREEN: Color; 
-declare const EMERALD_GREEN: Color; 
-declare const HINT_GREEN: Color; 
-declare const SEA_GREEN: Color; 
-// YELLOW
-declare const SELECTIVE_YELLOW: Color; 
-declare const MUSTARD_YELLOW: Color; 
-declare const FIRE_YELLOW: Color; 
-// ORANGE
-declare const CARROT_ORANGE: Color; 
-declare const ZEST_ORANGE: Color; 
-declare const APRICOT_ORANGE: Color; 
-// RED
-declare const RED: Color; 
-declare const CRIMSON_RED: Color; 
-declare const THUNDERBIRD_RED: Color; 
-declare const RAZZMATAZZ_RED: Color; 
-declare const RASPBERRY: Color; 
-declare const FANTASY_RED: Color; 
-declare const COSMOS_RED: Color; 
-declare const BLUSH_RED: Color; 
-
-declare const ERROR_COLOR: Color;
-
-declare const ALERT_COLORS: {
-  warn: ColorSet;
-  info: ColorSet;
-  error: ColorSet;
-  success: ColorSet;
-  text: Color;
-  link: Color;
-};
-
-declare const PILL_COLORS: {
-  danger: {
-    background: Color;
-    text: Color;
-  };
-  neutral: {
-    background: Color;
-    text: Color;
-  };
-  success: {
-    background: Color;
-    text: Color;
-  };
-  warning: {
-    background: Color;
-    text: Color;
-  };
-};
-
-declare const colors_d_BLACK: typeof BLACK;
-declare const colors_d_TRANSPARENT: typeof TRANSPARENT;
-declare const colors_d_WHITE: typeof WHITE;
-declare const colors_d_SOLITUDE_WHITE: typeof SOLITUDE_WHITE;
-declare const colors_d_SEASHELL_WHITE: typeof SEASHELL_WHITE;
-declare const colors_d_ALABASTER_WHITE: typeof ALABASTER_WHITE;
-declare const colors_d_AQUA_HAZE_WHITE: typeof AQUA_HAZE_WHITE;
-declare const colors_d_BLEACH_WHITE: typeof BLEACH_WHITE;
-declare const colors_d_CATSKILL_WHITE: typeof CATSKILL_WHITE;
-declare const colors_d_HALF_COLONIAL_WHITE: typeof HALF_COLONIAL_WHITE;
-declare const colors_d_ATHENS_GREY: typeof ATHENS_GREY;
-declare const colors_d_ALTO_GREY: typeof ALTO_GREY;
-declare const colors_d_SILVER_GREY: typeof SILVER_GREY;
-declare const colors_d_PEWTER_GREY: typeof PEWTER_GREY;
-declare const colors_d_ASH_GREY: typeof ASH_GREY;
-declare const colors_d_IRON_GREY: typeof IRON_GREY;
-declare const colors_d_GHOST_GREY: typeof GHOST_GREY;
-declare const colors_d_DUSTY_GREY: typeof DUSTY_GREY;
-declare const colors_d_REGENT_GREY: typeof REGENT_GREY;
-declare const colors_d_STORM_GREY: typeof STORM_GREY;
-declare const colors_d_TROUT_GREY: typeof TROUT_GREY;
-declare const colors_d_MINESHAFT_GREY: typeof MINESHAFT_GREY;
-declare const colors_d_SOOT_GREY: typeof SOOT_GREY;
-declare const colors_d_FIREFLY_GREY: typeof FIREFLY_GREY;
-declare const colors_d_BRIGHT_GREY: typeof BRIGHT_GREY;
-declare const colors_d_CHARADE_GREY: typeof CHARADE_GREY;
-declare const colors_d_GRECIAN_GREY: typeof GRECIAN_GREY;
-declare const colors_d_BLACK_SQUEEZE: typeof BLACK_SQUEEZE;
-declare const colors_d_GREY_CHATEAU: typeof GREY_CHATEAU;
-declare const colors_d_COOL_GREY_05: typeof COOL_GREY_05;
-declare const colors_d_CLOUDBURST_BLUE: typeof CLOUDBURST_BLUE;
-declare const colors_d_ZODIAC_BLUE: typeof ZODIAC_BLUE;
-declare const colors_d_CONGRESS_BLUE: typeof CONGRESS_BLUE;
-declare const colors_d_SCIENCE_BLUE: typeof SCIENCE_BLUE;
-declare const colors_d_MARINER_BLUE: typeof MARINER_BLUE;
-declare const colors_d_CURIOUS_BLUE: typeof CURIOUS_BLUE;
-declare const colors_d_SELAGO_BLUE: typeof SELAGO_BLUE;
-declare const colors_d_ONAHAU_BLUE: typeof ONAHAU_BLUE;
-declare const colors_d_PICKLED_BLUE: typeof PICKLED_BLUE;
-declare const colors_d_CERULEAN_BLUE: typeof CERULEAN_BLUE;
-declare const colors_d_FOAM_BLUE: typeof FOAM_BLUE;
-declare const colors_d_CELLO_BLUE: typeof CELLO_BLUE;
-declare const colors_d_BOSTON_BLUE: typeof BOSTON_BLUE;
-declare const colors_d_INFO_BLUE: typeof INFO_BLUE;
-declare const colors_d_CORNFLOWER_BLUE: typeof CORNFLOWER_BLUE;
-declare const colors_d_HOVER_LIGHT_BLUE: typeof HOVER_LIGHT_BLUE;
-declare const colors_d_MATISSE_BLUE: typeof MATISSE_BLUE;
-declare const colors_d_ROYAL_BLUE: typeof ROYAL_BLUE;
-declare const colors_d_ROYAL_BLUE_VIVID: typeof ROYAL_BLUE_VIVID;
-declare const colors_d_ASTRAL_BLUE: typeof ASTRAL_BLUE;
-declare const colors_d_SAPPHIRE_BLUE: typeof SAPPHIRE_BLUE;
-declare const colors_d_PEACOCK_BLUE: typeof PEACOCK_BLUE;
-declare const colors_d_FOREST_GREEN: typeof FOREST_GREEN;
-declare const colors_d_MEADOW_GREEN: typeof MEADOW_GREEN;
-declare const colors_d_POLAR_GREEN: typeof POLAR_GREEN;
-declare const colors_d_ICE_GREEN: typeof ICE_GREEN;
-declare const colors_d_HAZE_GREEN: typeof HAZE_GREEN;
-declare const colors_d_EMERALD_GREEN: typeof EMERALD_GREEN;
-declare const colors_d_HINT_GREEN: typeof HINT_GREEN;
-declare const colors_d_SEA_GREEN: typeof SEA_GREEN;
-declare const colors_d_SELECTIVE_YELLOW: typeof SELECTIVE_YELLOW;
-declare const colors_d_MUSTARD_YELLOW: typeof MUSTARD_YELLOW;
-declare const colors_d_FIRE_YELLOW: typeof FIRE_YELLOW;
-declare const colors_d_CARROT_ORANGE: typeof CARROT_ORANGE;
-declare const colors_d_ZEST_ORANGE: typeof ZEST_ORANGE;
-declare const colors_d_APRICOT_ORANGE: typeof APRICOT_ORANGE;
-declare const colors_d_RED: typeof RED;
-declare const colors_d_CRIMSON_RED: typeof CRIMSON_RED;
-declare const colors_d_THUNDERBIRD_RED: typeof THUNDERBIRD_RED;
-declare const colors_d_RAZZMATAZZ_RED: typeof RAZZMATAZZ_RED;
-declare const colors_d_RASPBERRY: typeof RASPBERRY;
-declare const colors_d_FANTASY_RED: typeof FANTASY_RED;
-declare const colors_d_COSMOS_RED: typeof COSMOS_RED;
-declare const colors_d_BLUSH_RED: typeof BLUSH_RED;
-declare const colors_d_ERROR_COLOR: typeof ERROR_COLOR;
-declare const colors_d_ALERT_COLORS: typeof ALERT_COLORS;
-declare const colors_d_PILL_COLORS: typeof PILL_COLORS;
-declare namespace colors_d {
-  export {
-    colors_d_BLACK as BLACK,
-    colors_d_TRANSPARENT as TRANSPARENT,
-    colors_d_WHITE as WHITE,
-    colors_d_SOLITUDE_WHITE as SOLITUDE_WHITE,
-    colors_d_SEASHELL_WHITE as SEASHELL_WHITE,
-    colors_d_ALABASTER_WHITE as ALABASTER_WHITE,
-    colors_d_AQUA_HAZE_WHITE as AQUA_HAZE_WHITE,
-    colors_d_BLEACH_WHITE as BLEACH_WHITE,
-    colors_d_CATSKILL_WHITE as CATSKILL_WHITE,
-    colors_d_HALF_COLONIAL_WHITE as HALF_COLONIAL_WHITE,
-    colors_d_ATHENS_GREY as ATHENS_GREY,
-    colors_d_ALTO_GREY as ALTO_GREY,
-    colors_d_SILVER_GREY as SILVER_GREY,
-    colors_d_PEWTER_GREY as PEWTER_GREY,
-    colors_d_ASH_GREY as ASH_GREY,
-    colors_d_IRON_GREY as IRON_GREY,
-    colors_d_GHOST_GREY as GHOST_GREY,
-    colors_d_DUSTY_GREY as DUSTY_GREY,
-    colors_d_REGENT_GREY as REGENT_GREY,
-    colors_d_STORM_GREY as STORM_GREY,
-    colors_d_TROUT_GREY as TROUT_GREY,
-    colors_d_MINESHAFT_GREY as MINESHAFT_GREY,
-    colors_d_SOOT_GREY as SOOT_GREY,
-    colors_d_FIREFLY_GREY as FIREFLY_GREY,
-    colors_d_BRIGHT_GREY as BRIGHT_GREY,
-    colors_d_CHARADE_GREY as CHARADE_GREY,
-    colors_d_GRECIAN_GREY as GRECIAN_GREY,
-    colors_d_BLACK_SQUEEZE as BLACK_SQUEEZE,
-    colors_d_GREY_CHATEAU as GREY_CHATEAU,
-    colors_d_COOL_GREY_05 as COOL_GREY_05,
-    colors_d_CLOUDBURST_BLUE as CLOUDBURST_BLUE,
-    colors_d_ZODIAC_BLUE as ZODIAC_BLUE,
-    colors_d_CONGRESS_BLUE as CONGRESS_BLUE,
-    colors_d_SCIENCE_BLUE as SCIENCE_BLUE,
-    colors_d_MARINER_BLUE as MARINER_BLUE,
-    colors_d_CURIOUS_BLUE as CURIOUS_BLUE,
-    colors_d_SELAGO_BLUE as SELAGO_BLUE,
-    colors_d_ONAHAU_BLUE as ONAHAU_BLUE,
-    colors_d_PICKLED_BLUE as PICKLED_BLUE,
-    colors_d_CERULEAN_BLUE as CERULEAN_BLUE,
-    colors_d_FOAM_BLUE as FOAM_BLUE,
-    colors_d_CELLO_BLUE as CELLO_BLUE,
-    colors_d_BOSTON_BLUE as BOSTON_BLUE,
-    colors_d_INFO_BLUE as INFO_BLUE,
-    colors_d_CORNFLOWER_BLUE as CORNFLOWER_BLUE,
-    colors_d_HOVER_LIGHT_BLUE as HOVER_LIGHT_BLUE,
-    colors_d_MATISSE_BLUE as MATISSE_BLUE,
-    colors_d_ROYAL_BLUE as ROYAL_BLUE,
-    colors_d_ROYAL_BLUE_VIVID as ROYAL_BLUE_VIVID,
-    colors_d_ASTRAL_BLUE as ASTRAL_BLUE,
-    colors_d_SAPPHIRE_BLUE as SAPPHIRE_BLUE,
-    colors_d_PEACOCK_BLUE as PEACOCK_BLUE,
-    colors_d_FOREST_GREEN as FOREST_GREEN,
-    colors_d_MEADOW_GREEN as MEADOW_GREEN,
-    colors_d_POLAR_GREEN as POLAR_GREEN,
-    colors_d_ICE_GREEN as ICE_GREEN,
-    colors_d_HAZE_GREEN as HAZE_GREEN,
-    colors_d_EMERALD_GREEN as EMERALD_GREEN,
-    colors_d_HINT_GREEN as HINT_GREEN,
-    colors_d_SEA_GREEN as SEA_GREEN,
-    colors_d_SELECTIVE_YELLOW as SELECTIVE_YELLOW,
-    colors_d_MUSTARD_YELLOW as MUSTARD_YELLOW,
-    colors_d_FIRE_YELLOW as FIRE_YELLOW,
-    colors_d_CARROT_ORANGE as CARROT_ORANGE,
-    colors_d_ZEST_ORANGE as ZEST_ORANGE,
-    colors_d_APRICOT_ORANGE as APRICOT_ORANGE,
-    colors_d_RED as RED,
-    colors_d_CRIMSON_RED as CRIMSON_RED,
-    colors_d_THUNDERBIRD_RED as THUNDERBIRD_RED,
-    colors_d_RAZZMATAZZ_RED as RAZZMATAZZ_RED,
-    colors_d_RASPBERRY as RASPBERRY,
-    colors_d_FANTASY_RED as FANTASY_RED,
-    colors_d_COSMOS_RED as COSMOS_RED,
-    colors_d_BLUSH_RED as BLUSH_RED,
-    colors_d_ERROR_COLOR as ERROR_COLOR,
-    colors_d_ALERT_COLORS as ALERT_COLORS,
-    colors_d_PILL_COLORS as PILL_COLORS,
-  };
-}
-
-export { AddValidatorAction, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, colors_d as colors };
+export { AddValidatorAction, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -12725,7 +12725,7 @@ var hoverColor = {
   whiteSecondary: WHITE,
   whitePrimary: WHITE
 };
-var activeBackgroundColor = {
+var activeBackgroundColor$1 = {
   primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
   back: TRANSPARENT,
@@ -12779,7 +12779,7 @@ var fallbackValues$1 = {
   hoverBackgroundColor: hoverBackgroundColor,
   hoverBorderColor: hoverBorderColor,
   hoverColor: hoverColor,
-  activeBackgroundColor: activeBackgroundColor,
+  activeBackgroundColor: activeBackgroundColor$1,
   activeBorderColor: activeBorderColor,
   activeColor: activeColor
 };
@@ -19700,17 +19700,27 @@ var fallbackValues$9 = {
   hover: hover
 };
 
+
+
+var index$4 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
 var fontFamily$2 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
-var hoverColor$2 = SAPPHIRE_BLUE;
-var activeColor$3 = PEACOCK_BLUE;
-var externalLinkColor = MATISSE_BLUE;
+var hoverColor$2 = "#116285";
+var activeColor$3 = "#0E506D";
+var activeBackgroundColor$2 = INFO_BLUE;
+var externalLinkColor = "#15749D";
 var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
+  activeBackgroundColor: activeBackgroundColor$2,
   externalLinkColor: externalLinkColor
 };
 
@@ -19824,7 +19834,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:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;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:", ";background-color:", ";}", ""], function (_ref2) {
   var color = _ref2.color,
       active = _ref2.active,
       activeColor = _ref2.activeColor;
@@ -19851,7 +19861,10 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var activeColor = _ref9.activeColor;
   return activeColor;
 }, function (_ref10) {
-  var extrastyles = _ref10.extrastyles;
+  var activeBackgroundColor = _ref10.activeBackgroundColor;
+  return activeBackgroundColor ? activeBackgroundColor : 'transparent';
+}, function (_ref11) {
+  var extrastyles = _ref11.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */
@@ -21502,11 +21515,13 @@ _curry2(function test(pattern, 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 _excluded$m = ["url", "active", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
 
 var ButtonWithLink = function ButtonWithLink(_ref) {
   var _ref$url = _ref.url,
       url = _ref$url === void 0 ? "/" : _ref$url,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$fileLink = _ref.fileLink,
@@ -21521,6 +21536,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
         url = _ref2.url,
+        active = _ref2.active,
         disabled = _ref2.disabled,
         newTab = _ref2.newTab,
         dataQa = _ref2.dataQa,
@@ -21538,6 +21554,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       dataQa: dataQa
     }, safeChildren(children, /*#__PURE__*/React.createElement("span", null))) : /*#__PURE__*/React.createElement(InternalLink, {
       to: url,
+      active: active,
+      activeBackgroundColor: activeBackgroundColor,
       tabIndex: "-1",
       dataQa: dataQa,
       extraStyles: extraStyles
@@ -21546,6 +21564,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
 
   return /*#__PURE__*/React.createElement(ButtonWithLinkWrapper, {
     url: url,
+    active: active,
+    activeBackgroundColor: activeBackgroundColor,
     disabled: disabled,
     newTab: newTab,
     extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }"),
@@ -25359,7 +25379,7 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
 
 
 
-var index$4 = /*#__PURE__*/Object.freeze({
+var index$5 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   formats: formats,
   general: general,
@@ -38183,14 +38203,6 @@ 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",
@@ -47511,11 +47523,11 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
-var activeBackgroundColor$1 = WHITE;
+var activeBackgroundColor$3 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$L = {
   activeColor: activeColor$9,
-  activeBackgroundColor: activeBackgroundColor$1,
+  activeBackgroundColor: activeBackgroundColor$3,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
   numberColor: numberColor
@@ -50132,5 +50144,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$T));
 
-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, 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, 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, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, 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, 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, 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, index$4 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, 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, 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, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, 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, 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, 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, index$5 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map