@thecb/components 8.3.1-beta.14 → 8.3.1-beta.3

package/dist/index.cjs.js

@@ -19714,11 +19714,13 @@ var fontFamily$2 = {
 };
 var hoverColor$2 = SAPPHIRE_BLUE;
 var activeColor$3 = PEACOCK_BLUE;
+var activeBackgroundColor$1 = INFO_BLUE;
 var externalLinkColor = MATISSE_BLUE;
 var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
   activeColor: activeColor$3,
+  activeBackgroundColor: activeBackgroundColor$1,
   externalLinkColor: externalLinkColor
 };
 
@@ -19832,7 +19834,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:", ";&: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;
@@ -19859,7 +19861,10 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
   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 */
@@ -21510,11 +21515,15 @@ _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", "activeBackgroundColor", "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$activeBackground = _ref.activeBackgroundColor,
+      activeBackgroundColor = _ref$activeBackground === void 0 ? undefined : _ref$activeBackground,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$fileLink = _ref.fileLink,
@@ -21529,6 +21538,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
         url = _ref2.url,
+        active = _ref2.active,
+        activeBackgroundColor = _ref2.activeBackgroundColor,
         disabled = _ref2.disabled,
         newTab = _ref2.newTab,
         dataQa = _ref2.dataQa,
@@ -21546,6 +21557,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       dataQa: dataQa
     }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null))) : /*#__PURE__*/React__default.createElement(InternalLink, {
       to: url,
+      active: active,
+      activeBackgroundColor: activeBackgroundColor,
       tabIndex: "-1",
       dataQa: dataQa,
       extraStyles: extraStyles
@@ -21554,6 +21567,8 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
 
   return /*#__PURE__*/React__default.createElement(ButtonWithLinkWrapper, {
     url: url,
+    active: active,
+    activeBackgroundColor: activeBackgroundColor,
     disabled: disabled,
     newTab: newTab,
     extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }"),
@@ -47519,11 +47534,11 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
-var activeBackgroundColor$1 = WHITE;
+var activeBackgroundColor$2 = WHITE;
 var activeColor$9 = MATISSE_BLUE;
 var fallbackValues$L = {
   activeColor: activeColor$9,
-  activeBackgroundColor: activeBackgroundColor$1,
+  activeBackgroundColor: activeBackgroundColor$2,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
   numberColor: numberColor