@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/Tabs/TabLink.cjs

@@ -7,34 +7,156 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
-var _reactRouterDom = require("react-router-dom");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _NotificationDot = require("../NotificationDot");
 var _types = require("../types");
 var _styles = require("../styles");
 var _zIndexes = require("../styles/z-indexes");
 var _common = require("../common");
+var _HyperLink = require("../HyperLink");
+var _NavigationProvider = require("../Navigation/NavigationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const _excluded = ["href", "tabIndex", "role", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-const TopWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-const TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-const StyledNotification = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
-const EndLineIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
-const OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
+const OptionalLineWrapperWithIcon = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+
+  span {
+    margin: 0 0 0 4px !important;
+    font-size: 12px;
+    line-height: 16px;
+  }
+`;
+const TopWrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+
+  span:not(:only-child) {
+    width: calc(100% - 32px);
+  }
+`;
+const TextContainer = _styledComponents.default.div`
+  width: 100%;
+  margin: auto 0 auto 16px !important;
+`;
+const StyledNotification = _styledComponents.default.div`
+  margin: 0 15px 0 0 !important;
+`;
+const EndLineIcon = _styledComponents.default.div`
+  margin: 0 15px 0 0 !important;
+`;
+const OptionalLineWrapper = _styledComponents.default.div`
+  font-size: 12px;
+`;
 //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-const Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme), props => props.$disabled ? _styles.COLORS.getColor('neutral_100', props.theme) : 'transparent', props => props.$disabled ? 'not-allowed' : 'pointer', _styles.focusStyles, _zIndexes.Z_INDEXES.active, props => _styles.COLORS.getColor('neutral_20', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), _zIndexes.Z_INDEXES.hover, props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_600', props.theme), _zIndexes.Z_INDEXES.active, props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('primary_600', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+const Wrapper = _styledComponents.default.div`
+  position: relative;
+  &.disabled {
+    cursor: not-allowed;
+
+    a {
+      pointer-events: none;
+    }
+  }
+
+  a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    font-size: 16px;
+    line-height: 120%;
+    color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+
+    background-color: ${props => props.$disabled ? _styles.COLORS.getColor('neutral_100', props.theme) : 'transparent'};
+    cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
+    border-left: 1px solid transparent;
+    text-decoration: none;
+    position: relative;
+    border-radius: 2px;
+
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+
+    &:focus {
+      ${_styles.focusStyles}
+    }
+
+    &.active {
+      z-index: ${_zIndexes.Z_INDEXES.active};
+      background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+    }
+
+    &.active:hover, &.active.dropdown-hover {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    }
+
+    &:hover, &.dropdown-hover {
+      z-index: ${_zIndexes.Z_INDEXES.hover};
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+    }
+
+    &:active {
+      z-index: ${_zIndexes.Z_INDEXES.active};
+      background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+
+    &.active {
+      &::after {
+        position: absolute;
+        content: ' ';
+        width: 4px;
+        top: 6px;
+        bottom: 6px;
+        left: 3px;
+        background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+
+        border-radius: 4px;
+      }
+    }
+
+    &.active:hover, &.active.dropdown-hover {
+      &::after {
+        background-color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+      }
+    }
+
+    &.active:active {
+      background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+
+      &::after {
+        background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      }
+    }
+
+    &.disabled {
+      background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+
+      span {
+        color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      }
+
+      &::after {
+        background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      }
+    }
+  }
+`;
 const TabLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-      to,
+      href,
+      tabIndex,
+      role,
       disabled = false,
       requiredLine,
       optionalLine,
@@ -54,27 +176,33 @@ const TabLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const [activeState, setActiveState] = (0, _react.useState)(false);
+  const [useActiveClassName, setUseActiveClassName] = (0, _react.useState)('');
+  const {
+    currentPath,
+    isActiveRoute
+  } = (0, _NavigationProvider.useNavigation)();
+  React.useEffect(() => {
+    setActiveState(!!isActiveRoute && !!href && isActiveRoute(href, true));
+  }, [currentPath]);
+  React.useEffect(() => {
+    setUseActiveClassName(`${!forceDeactivate && activeState ? 'active' : ''} ${disabled ? 'disabled' : ''}`);
+  }, [activeState, disabled, forceDeactivate]);
+  React.useEffect(() => {
+    onActiveStateChanged && onActiveStateChanged(activeState);
+  }, [activeState]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     $disabled: disabled,
     className: disabled ? 'disabled' : '',
     onMouseEnter: containerOnMouseEnter,
     onMouseLeave: containerOnMouseLeave,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
-        to: forceDeactivate ? 'invalid' : to.toString()
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({
+        variant: "styleless",
+        target: "_self",
+        href: forceDeactivate ? 'invalid' : href?.toString() ?? ''
         //disabled={disabled}
         ,
-        className: _ref2 => {
-          let {
-            isActive
-          } = _ref2;
-          onActiveStateChanged && onActiveStateChanged(activeState);
-          if (forceDeactivate) {
-            if (disabled) return 'disabled';else return '';
-          }
-          if (isActive != activeState) setActiveState(isActive);
-          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-        },
+        className: useActiveClassName,
         onMouseDown: _common.defaultOnMouseDownHandler,
         tabIndex: disabled ? -1 : 0,
         role: "tab",

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["_react","_interopRequireWildcard","require","React","_reactRouterDom","_styledComponents","_interopRequireDefault","_NotificationDot","_types","_styles","_zIndexes","_common","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OptionalLineWrapperWithIcon","styled","div","_taggedTemplateLiteral2","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","props","COLORS","getColor","theme","$disabled","focusStyles","Z_INDEXES","active","hover","TabLink","forwardRef","_ref","ref","to","disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties2","activeState","setActiveState","useState","jsx","onMouseEnter","onMouseLeave","jsxs","Fragment","NavLink","toString","_ref2","isActive","onMouseDown","defaultOnMouseDownHandler","tabIndex","role","onClick","NotificationDot","_default","exports"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ $disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    background-color: ${(props) => (props.$disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent')};\r\n    cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      span {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper $disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TabLink.cjs","names":["_react","_interopRequireWildcard","require","React","_styledComponents","_interopRequireDefault","_NotificationDot","_types","_styles","_zIndexes","_common","_HyperLink","_NavigationProvider","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","props","COLORS","getColor","theme","$disabled","focusStyles","Z_INDEXES","active","hover","TabLink","forwardRef","_ref","ref","href","tabIndex","role","disabled","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","_objectWithoutProperties2","activeState","setActiveState","useState","useActiveClassName","setUseActiveClassName","currentPath","isActiveRoute","useNavigation","useEffect","jsx","onMouseEnter","onMouseLeave","jsxs","Fragment","HyperLink","target","toString","onMouseDown","defaultOnMouseDownHandler","onClick","NotificationDot","_default","exports"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\nimport { HyperLink } from '../HyperLink';\r\nimport { useNavigation } from '../Navigation/NavigationProvider';\r\n\r\nexport type TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & React.AnchorHTMLAttributes<HTMLAnchorElement>;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ $disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n\r\n    background-color: ${(props) => (props.$disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent')};\r\n    cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n      span {\r\n        color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  href,\r\n  tabIndex,\r\n  role,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n  const [useActiveClassName, setUseActiveClassName] = useState<string>('');\r\n  const {currentPath, isActiveRoute} = useNavigation();\r\n\r\n  React.useEffect(() => {\r\n    setActiveState(!!isActiveRoute && !!href && isActiveRoute(href, true));\r\n  }, [currentPath]);\r\n\r\n  React.useEffect(() => {\r\n    setUseActiveClassName(`${!forceDeactivate && activeState ? 'active' : ''} ${disabled ? 'disabled':''}`);\r\n  }, [activeState, disabled, forceDeactivate]);\r\n\r\n  React.useEffect(() => {\r\n    onActiveStateChanged && onActiveStateChanged(activeState);\r\n  }, [activeState]);\r\n\r\n  return (\r\n    <Wrapper $disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <HyperLink\r\n          variant='styleless'\r\n          target='_self'\r\n          href={forceDeactivate ? 'invalid' : href?.toString() ?? ''}\r\n          //disabled={disabled}\r\n          className={useActiveClassName}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </HyperLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/TabLink.d.ts

@@ -1,20 +1,35 @@
-import * as React from 'react';
-import { NavLinkProps } from 'react-router-dom';
-import { Size } from '../types';
-declare const TabLink: React.ForwardRefExoticComponent<{
-    disabled?: boolean | undefined;
-    forceDeactivate?: boolean | undefined;
-    requiredLine: string;
-    optionalLine?: string | undefined;
-    OptionalLineIcon?: React.ReactNode;
-    endLineIcon?: React.ReactNode;
-    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
-    testId?: string | undefined;
-    onActiveStateChanged?: ((state: boolean) => void) | undefined;
-    showNotificationDot?: boolean | undefined;
-    size?: Size.Small | Size.Medium | Size.Large | undefined;
-    variant?: "critical" | "positive" | undefined;
-    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
-} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export default TabLink;
+import * as React from 'react';
+import { Size } from '../types';
+export type TabLinkProps = {
+    disabled?: boolean;
+    forceDeactivate?: boolean;
+    requiredLine: string;
+    optionalLine?: string;
+    OptionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
+    onLinkClick?: (e: React.MouseEvent) => void;
+    testId?: string;
+    onActiveStateChanged?: (state: boolean) => void;
+    showNotificationDot?: boolean;
+    size?: Size.Small | Size.Medium | Size.Large;
+    variant?: 'positive' | 'critical';
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+declare const TabLink: React.ForwardRefExoticComponent<{
+    disabled?: boolean;
+    forceDeactivate?: boolean;
+    requiredLine: string;
+    optionalLine?: string;
+    OptionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
+    onLinkClick?: (e: React.MouseEvent) => void;
+    testId?: string;
+    onActiveStateChanged?: (state: boolean) => void;
+    showNotificationDot?: boolean;
+    size?: Size.Small | Size.Medium | Size.Large;
+    variant?: "positive" | "critical";
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+export default TabLink;

package/dist/Tabs/TabLink.js

@@ -1,12 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-const _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const _excluded = ["href", "tabIndex", "role", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { NotificationDot } from '../NotificationDot';
 import { Size } from '../types';
@@ -14,18 +11,143 @@ import { COLORS, focusStyles } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { defaultOnMouseDownHandler } from '../common';
 import { useState } from 'react';
+import { HyperLink } from '../HyperLink';
+import { useNavigation } from '../Navigation/NavigationProvider';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const OptionalLineWrapperWithIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-const TopWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-const TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-const StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-const EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-const OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
+const OptionalLineWrapperWithIcon = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  span {
+    margin: 0 0 0 4px !important;
+    font-size: 12px;
+    line-height: 16px;
+  }
+`;
+const TopWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  span:not(:only-child) {
+    width: calc(100% - 32px);
+  }
+`;
+const TextContainer = styled.div`
+  width: 100%;
+  margin: auto 0 auto 16px !important;
+`;
+const StyledNotification = styled.div`
+  margin: 0 15px 0 0 !important;
+`;
+const EndLineIcon = styled.div`
+  margin: 0 15px 0 0 !important;
+`;
+const OptionalLineWrapper = styled.div`
+  font-size: 12px;
+`;
 //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-const Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => COLORS.getColor('neutral_600', props.theme), props => props.$disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent', props => props.$disabled ? 'not-allowed' : 'pointer', focusStyles, Z_INDEXES.active, props => COLORS.getColor('neutral_20', props.theme), props => COLORS.getColor('primary_20', props.theme), Z_INDEXES.hover, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_600', props.theme), Z_INDEXES.active, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_500', props.theme), props => COLORS.getColor('primary_600', props.theme), props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+const Wrapper = styled.div`
+  position: relative;
+  &.disabled {
+    cursor: not-allowed;
+
+    a {
+      pointer-events: none;
+    }
+  }
+
+  a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    font-size: 16px;
+    line-height: 120%;
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+
+    background-color: ${props => props.$disabled ? COLORS.getColor('neutral_100', props.theme) : 'transparent'};
+    cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
+    border-left: 1px solid transparent;
+    text-decoration: none;
+    position: relative;
+    border-radius: 2px;
+
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+
+    &:focus {
+      ${focusStyles}
+    }
+
+    &.active {
+      z-index: ${Z_INDEXES.active};
+      background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+    }
+
+    &.active:hover, &.active.dropdown-hover {
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    }
+
+    &:hover, &.dropdown-hover {
+      z-index: ${Z_INDEXES.hover};
+      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+      color: ${props => COLORS.getColor('primary_600', props.theme)};
+    }
+
+    &:active {
+      z-index: ${Z_INDEXES.active};
+      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+
+    &.active {
+      &::after {
+        position: absolute;
+        content: ' ';
+        width: 4px;
+        top: 6px;
+        bottom: 6px;
+        left: 3px;
+        background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+
+        border-radius: 4px;
+      }
+    }
+
+    &.active:hover, &.active.dropdown-hover {
+      &::after {
+        background-color: ${props => COLORS.getColor('primary_600', props.theme)};
+      }
+    }
+
+    &.active:active {
+      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+
+      &::after {
+        background-color: ${props => COLORS.getColor('primary_800', props.theme)};
+      }
+    }
+
+    &.disabled {
+      background-color: ${props => COLORS.getColor('white', props.theme)};
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+
+      span {
+        color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      }
+
+      &::after {
+        background-color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      }
+    }
+  }
+`;
 const TabLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-      to,
+      href,
+      tabIndex,
+      role,
       disabled = false,
       requiredLine,
       optionalLine,
@@ -45,27 +167,33 @@ const TabLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [activeState, setActiveState] = useState(false);
+  const [useActiveClassName, setUseActiveClassName] = useState('');
+  const {
+    currentPath,
+    isActiveRoute
+  } = useNavigation();
+  React.useEffect(() => {
+    setActiveState(!!isActiveRoute && !!href && isActiveRoute(href, true));
+  }, [currentPath]);
+  React.useEffect(() => {
+    setUseActiveClassName(`${!forceDeactivate && activeState ? 'active' : ''} ${disabled ? 'disabled' : ''}`);
+  }, [activeState, disabled, forceDeactivate]);
+  React.useEffect(() => {
+    onActiveStateChanged && onActiveStateChanged(activeState);
+  }, [activeState]);
   return /*#__PURE__*/_jsx(Wrapper, {
     $disabled: disabled,
     className: disabled ? 'disabled' : '',
     onMouseEnter: containerOnMouseEnter,
     onMouseLeave: containerOnMouseLeave,
     children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
-        to: forceDeactivate ? 'invalid' : to.toString()
+      children: [/*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({
+        variant: "styleless",
+        target: "_self",
+        href: forceDeactivate ? 'invalid' : href?.toString() ?? ''
         //disabled={disabled}
         ,
-        className: _ref2 => {
-          let {
-            isActive
-          } = _ref2;
-          onActiveStateChanged && onActiveStateChanged(activeState);
-          if (forceDeactivate) {
-            if (disabled) return 'disabled';else return '';
-          }
-          if (isActive != activeState) setActiveState(isActive);
-          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-        },
+        className: useActiveClassName,
         onMouseDown: defaultOnMouseDownHandler,
         tabIndex: disabled ? -1 : 0,
         role: "tab",