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

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import React, { createContext, createElement, PureComponent, forwardRef, Component, cloneElement, Children, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, memo, useEffect as useEffect$1, useMemo, useCallback, isValidElement, createRef } from 'react';
 import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
 import theme from 'styled-theming';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useMatch, Link, useNavigate, useLocation } from 'react-router-dom';
 import reactDom from 'react-dom';
 
 function ownKeys(object, enumerableOnly) {
@@ -19820,13 +19820,16 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
       extrastyles = _ref.extrastyles,
       props = _objectWithoutProperties(_ref, _excluded$l);
 
+  var match = useMatch();
+  console.log("🚀 ~ file: InternalLink.styled.js:18 ~ match:", match);
   return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+    match: match,
     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:", ";background-color:", ";}", ""], function (_ref2) {
+})(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";background-color:", ";&: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;
@@ -19847,16 +19850,19 @@ var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var margin = _ref7.margin;
   return margin;
 }, function (_ref8) {
-  var hoverColor = _ref8.hoverColor;
+  var match = _ref8.match;
+  return match ? INFO_BLUE : 'transparent';
+}, function (_ref9) {
+  var hoverColor = _ref9.hoverColor;
   return hoverColor;
-}, ROYAL_BLUE, function (_ref9) {
-  var activeColor = _ref9.activeColor;
+}, ROYAL_BLUE, function (_ref10) {
+  var activeColor = _ref10.activeColor;
   return activeColor;
-}, function (_ref10) {
-  var activeBackgroundColor = _ref10.activeBackgroundColor;
-  return activeBackgroundColor ? activeBackgroundColor : 'transparent';
 }, function (_ref11) {
-  var extrastyles = _ref11.extrastyles;
+  var activeBackgroundColor = _ref11.activeBackgroundColor;
+  return activeBackgroundColor ? activeBackgroundColor : 'transparent';
+}, function (_ref12) {
+  var extrastyles = _ref12.extrastyles;
   return extrastyles;
 });
 /* eslint-enable no-unused-vars */