@laerdal/life-react-components 1.11.0-dev.17 → 1.11.0-dev.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tabs/TabLink.cjs +11 -15
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.d.ts +1 -1
- package/dist/Tabs/TabLink.js +11 -14
- package/dist/Tabs/TabLink.js.map +1 -1
- package/package.json +1 -1
package/dist/Tabs/TabLink.cjs
CHANGED
|
@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports.default = void 0;
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
15
|
|
|
16
16
|
var React = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
|
@@ -70,8 +70,13 @@ var TabLink = function TabLink(_ref) {
|
|
|
70
70
|
size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
|
|
71
71
|
_ref$variant = _ref.variant,
|
|
72
72
|
variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
|
|
73
|
-
//const location = useLocation();
|
|
74
73
|
var ref = React.useRef(null);
|
|
74
|
+
|
|
75
|
+
var _useState = (0, React.useState)(false),
|
|
76
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
77
|
+
activeState = _useState2[0],
|
|
78
|
+
setActiveState = _useState2[1];
|
|
79
|
+
|
|
75
80
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
|
|
76
81
|
className: disabled ? 'disabled' : '',
|
|
77
82
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabLink, {
|
|
@@ -79,12 +84,13 @@ var TabLink = function TabLink(_ref) {
|
|
|
79
84
|
disabled: disabled,
|
|
80
85
|
className: function className(_ref2) {
|
|
81
86
|
var isActive = _ref2.isActive;
|
|
87
|
+
if (isActive != activeState) setActiveState(isActive);
|
|
82
88
|
return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
|
|
83
89
|
},
|
|
84
90
|
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
85
91
|
tabIndex: disabled ? -1 : 0,
|
|
86
|
-
role: "tab"
|
|
87
|
-
,
|
|
92
|
+
role: "tab",
|
|
93
|
+
"aria-selected": activeState,
|
|
88
94
|
onClick: function onClick(e) {
|
|
89
95
|
return !disabled && onLinkClick && onLinkClick(e);
|
|
90
96
|
},
|
|
@@ -115,16 +121,6 @@ var TabLink = function TabLink(_ref) {
|
|
|
115
121
|
});
|
|
116
122
|
};
|
|
117
123
|
|
|
118
|
-
TabLink.propTypes = {
|
|
119
|
-
disabled: _propTypes.default.bool,
|
|
120
|
-
requiredLine: _propTypes.default.string.isRequired,
|
|
121
|
-
optionalLine: _propTypes.default.string,
|
|
122
|
-
OptionalLineIcon: _propTypes.default.node,
|
|
123
|
-
onLinkClick: _propTypes.default.func,
|
|
124
|
-
testId: _propTypes.default.string,
|
|
125
|
-
showNotificationDot: _propTypes.default.bool,
|
|
126
|
-
variant: _propTypes.default.oneOf(['positive', 'critical'])
|
|
127
|
-
};
|
|
128
124
|
var _default = TabLink;
|
|
129
125
|
exports.default = _default;
|
|
130
126
|
//# sourceMappingURL=TabLink.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink, NavLinkProps} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {NotificationDot} from '../NotificationDot';\nimport {BaseProps} from '../icons';\nimport {Size} from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.ReactNode
|
|
1
|
+
{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n onLinkClick?: (e: React.MouseEvent) => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\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 ${focusStyles}\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_300};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.neutral_300};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\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`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n &.disabled {\n cursor: not-allowed;\n\n ${StyledTabLink} {\n pointer-events: none;\n }\n }\n`;\n\nconst TabLink = ({\n to,\n disabled = false,\n requiredLine,\n optionalLine,\n OptionalLineIcon,\n onLinkClick,\n testId,\n showNotificationDot = false,\n size = Size.Small,\n variant = 'critical',\n}: TabLinkProps) => {\n const ref = React.useRef<any>(null);\n const [activeState, setActiveState] = useState<boolean>(false);\n return (\n <Wrapper className={disabled ? 'disabled' : ''}>\n <StyledTabLink\n to={to.toString()}\n disabled={disabled}\n className={({ isActive }) => {\n if(isActive != activeState)\n setActiveState(isActive);\n return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n }}\n onMouseDown={defaultOnMouseDownHandler}\n tabIndex={disabled ? -1 : 0}\n role=\"tab\"\n aria-selected={activeState}\n onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n ref={ref}\n data-testid={testId}>\n <TextContainer>\n <TopWrapper>\n <span>{requiredLine}</span>\n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon}\n {!!optionalLine && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n </StyledTabLink>\n </Wrapper>\n );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
|
package/dist/Tabs/TabLink.d.ts
CHANGED
|
@@ -12,5 +12,5 @@ declare type TabLinkProps = {
|
|
|
12
12
|
size?: Size.Small | Size.Medium | Size.Large;
|
|
13
13
|
variant?: 'positive' | 'critical';
|
|
14
14
|
} & NavLinkProps;
|
|
15
|
-
declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant }: TabLinkProps) => JSX.Element;
|
|
15
|
+
declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant, }: TabLinkProps) => JSX.Element;
|
|
16
16
|
export default TabLink;
|
package/dist/Tabs/TabLink.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
1
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
import _pt from "prop-types";
|
|
3
3
|
|
|
4
4
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
5
5
|
|
|
@@ -11,6 +11,7 @@ import { Size } from '../types';
|
|
|
11
11
|
import { COLORS, focusStyles } from '../styles';
|
|
12
12
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
13
13
|
import { defaultOnMouseDownHandler } from '../common';
|
|
14
|
+
import { useState } from 'react';
|
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
17
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -41,8 +42,13 @@ var TabLink = function TabLink(_ref) {
|
|
|
41
42
|
size = _ref$size === void 0 ? Size.Small : _ref$size,
|
|
42
43
|
_ref$variant = _ref.variant,
|
|
43
44
|
variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
|
|
44
|
-
//const location = useLocation();
|
|
45
45
|
var ref = React.useRef(null);
|
|
46
|
+
|
|
47
|
+
var _useState = useState(false),
|
|
48
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
49
|
+
activeState = _useState2[0],
|
|
50
|
+
setActiveState = _useState2[1];
|
|
51
|
+
|
|
46
52
|
return /*#__PURE__*/_jsx(Wrapper, {
|
|
47
53
|
className: disabled ? 'disabled' : '',
|
|
48
54
|
children: /*#__PURE__*/_jsxs(StyledTabLink, {
|
|
@@ -50,12 +56,13 @@ var TabLink = function TabLink(_ref) {
|
|
|
50
56
|
disabled: disabled,
|
|
51
57
|
className: function className(_ref2) {
|
|
52
58
|
var isActive = _ref2.isActive;
|
|
59
|
+
if (isActive != activeState) setActiveState(isActive);
|
|
53
60
|
return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
|
|
54
61
|
},
|
|
55
62
|
onMouseDown: defaultOnMouseDownHandler,
|
|
56
63
|
tabIndex: disabled ? -1 : 0,
|
|
57
|
-
role: "tab"
|
|
58
|
-
,
|
|
64
|
+
role: "tab",
|
|
65
|
+
"aria-selected": activeState,
|
|
59
66
|
onClick: function onClick(e) {
|
|
60
67
|
return !disabled && onLinkClick && onLinkClick(e);
|
|
61
68
|
},
|
|
@@ -86,15 +93,5 @@ var TabLink = function TabLink(_ref) {
|
|
|
86
93
|
});
|
|
87
94
|
};
|
|
88
95
|
|
|
89
|
-
TabLink.propTypes = {
|
|
90
|
-
disabled: _pt.bool,
|
|
91
|
-
requiredLine: _pt.string.isRequired,
|
|
92
|
-
optionalLine: _pt.string,
|
|
93
|
-
OptionalLineIcon: _pt.node,
|
|
94
|
-
onLinkClick: _pt.func,
|
|
95
|
-
testId: _pt.string,
|
|
96
|
-
showNotificationDot: _pt.bool,
|
|
97
|
-
variant: _pt.oneOf(['positive', 'critical'])
|
|
98
|
-
};
|
|
99
96
|
export default TabLink;
|
|
100
97
|
//# sourceMappingURL=TabLink.js.map
|
package/dist/Tabs/TabLink.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport {NavLink, NavLinkProps} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {NotificationDot} from '../NotificationDot';\nimport {BaseProps} from '../icons';\nimport {Size} from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.ReactNode
|
|
1
|
+
{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n onLinkClick?: (e: React.MouseEvent) => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\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 ${focusStyles}\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_300};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.neutral_300};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\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`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n &.disabled {\n cursor: not-allowed;\n\n ${StyledTabLink} {\n pointer-events: none;\n }\n }\n`;\n\nconst TabLink = ({\n to,\n disabled = false,\n requiredLine,\n optionalLine,\n OptionalLineIcon,\n onLinkClick,\n testId,\n showNotificationDot = false,\n size = Size.Small,\n variant = 'critical',\n}: TabLinkProps) => {\n const ref = React.useRef<any>(null);\n const [activeState, setActiveState] = useState<boolean>(false);\n return (\n <Wrapper className={disabled ? 'disabled' : ''}>\n <StyledTabLink\n to={to.toString()}\n disabled={disabled}\n className={({ isActive }) => {\n if(isActive != activeState)\n setActiveState(isActive);\n return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n }}\n onMouseDown={defaultOnMouseDownHandler}\n tabIndex={disabled ? -1 : 0}\n role=\"tab\"\n aria-selected={activeState}\n onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n ref={ref}\n data-testid={testId}>\n <TextContainer>\n <TopWrapper>\n <span>{requiredLine}</span>\n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon}\n {!!optionalLine && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n </StyledTabLink>\n </Wrapper>\n );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
|