@laerdal/life-react-components 6.0.0-dev.2 → 6.0.0-dev.20.full

package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenuHeader.test.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import {act, fireEvent, render} from '../../../test-utils';
+import MobileMenuHeader, {MobileMenuHeaderActions, MobileMenuHeaderWrapper} from '../MobileMenuHeader';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import {MobileMenuButtonTypes, ProfileMenu} from '../../types';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+
+
+
+
+
+describe('MobileMenuHeader', () => {
+  const backSpy = jest.fn();
+  const closeSpy = jest.fn();
+  const subMenuOpenSpy = jest.fn();
+  const profileSpy = jest.fn();
+  const buttonSpy = jest.fn();
+
+  const profileButton: MobileMenuButtonTypes = {
+    type: 'profile',
+    action: profileSpy
+  }
+
+  const subMenuButton: MobileMenuButtonTypes = {
+    type: 'submenu',
+    menu: {
+      type: 'custom',
+      custom: () => <div>custom</div>,
+    },
+    icon: <i></i>
+  }
+
+  const leftButton: MobileMenuButtonTypes = {
+    type: 'action',
+    action: buttonSpy,
+    icon: <i></i>,
+    placement: 'left'
+  };
+
+  const rightButton: MobileMenuButtonTypes = {
+    type: 'action',
+    action: buttonSpy,
+    icon: <i></i>,
+    placement: 'right'
+  };
+
+  beforeEach(() => {
+    backSpy.mockReset();
+    closeSpy.mockReset();
+    subMenuOpenSpy.mockReset();
+    buttonSpy.mockReset();
+    profileSpy.mockReset();
+  });
+
+  it('should render', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    expect(wrapper.container.querySelector(`${MobileMenuHeaderWrapper}`)).toBeDefined();
+  });
+
+  it('should render only close button', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render label', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} label={'label'}/>)
+
+    expect(wrapper.queryByText('label')).toBeDefined();
+  });
+
+  it('should render close button and back button', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(2);
+  });
+
+  it('should render profile button', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
+      {
+        user:{
+          firstName: "name",
+          lastName: "last",
+          email: "mail",
+        },
+        sections:[]
+      }
+    } buttons={[profileButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+  });
+
+  it('should render button on the left', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render button on the right', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[rightButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(2);
+  });
+
+  it('should call onClose function when close button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelector(`${IconButtonStyled}`)!);
+    });
+
+    expect(closeSpy).toHaveBeenCalled();
+  });
+
+  it('should call onGoBack function when back button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(backSpy).toHaveBeenCalled();
+  });
+
+  it('should call onSubMenuOpen function when submenu button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[subMenuButton]}
+                                             onSubMenuOpen={subMenuOpenSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(subMenuOpenSpy).toHaveBeenCalled();
+  });
+
+  it('should call action when icon button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(buttonSpy).toHaveBeenCalled();
+  });
+
+  it('should call profile button action when profile button is clicked', () => {
+
+      const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
+        {
+          user:{
+            firstName: "name",
+            lastName: "last",
+            email: "mail",
+          },
+          sections:[]
+        }
+      } buttons={[profileButton]}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(profileSpy).toHaveBeenCalled();
+  });
+
+  it('should call onSubMenuOpen when profile button is clicked and action is not provided', () => {
+    const profile = {
+      label: 'profile label',
+      sections: [],
+      user: {
+        lastName: 'lastname',
+        firstName: 'firstname',
+        email: 'email@email.com'
+      },
+    } as ProfileMenu;
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}
+                                             buttons={[{...profileButton, action: undefined}]}
+                                             profile={profile}
+                                             onSubMenuOpen={subMenuOpenSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(subMenuOpenSpy).toHaveBeenCalled();
+  });
+
+
+});

package/dist/HyperLink/HyperLink.cjs

@@ -11,8 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styling = require("./styling");
+var _Navigation = require("../Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "target", "variant"];
+const _excluded = ["children", "margin", "target", "variant"];
 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; }
@@ -25,11 +26,25 @@ const StyledLink = exports.StyledLink = _styledComponents.default.a`
 const HyperLink = _ref => {
   let {
       children,
+      margin,
       target = '_blank',
       variant = 'default'
     } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const {
+    isActiveRoute,
+    navigate
+  } = (0, _Navigation.useNavigation)();
+  const onClick = e => {
+    if (!props.external && navigate) {
+      navigate(props.href, false);
+      e?.preventDefault();
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLink, _objectSpread(_objectSpread({}, props), {}, {
+    className: props?.className + (isActiveRoute && isActiveRoute(props?.href, true) ? ' active' : ''),
+    onClick: onClick,
+    $margin: margin,
     $variant: variant,
     target: target,
     rel: "noopener noreferrer",
@@ -44,7 +59,8 @@ HyperLink.propTypes = {
   margin: _propTypes.default.string,
   children: _propTypes.default.any,
   className: _propTypes.default.string,
-  ref: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object])
+  ref: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),
+  external: _propTypes.default.bool
 };
 var _default = exports.default = HyperLink;
 //# sourceMappingURL=HyperLink.cjs.map

package/dist/HyperLink/HyperLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HyperLink.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styling","_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","StyledLink","exports","styled","props","$variant","invertedStyle","defaultStyle","$margin","HyperLink","_ref","children","target","variant","_objectWithoutProperties2","jsx","rel","propTypes","id","_propTypes","string","oneOf","isRequired","href","disabled","bool","margin","any","className","ref","oneOfType","func","object","_default"],"sources":["../../src/HyperLink/HyperLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { defaultStyle, invertedStyle } from './styling';\r\n\r\nexport const StyledLink = styled.a<{\r\n  $variant: 'default' | 'inverted' | 'styleless';\r\n  $margin?: string;\r\n}>`\r\n  cursor: pointer;\r\n  ${(props) => (props.$variant === 'styleless' || !props.$variant ? '' : (props.$variant == 'inverted' ? invertedStyle : defaultStyle))}\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\n\r\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n  /** Id of the link component. */\r\n  id?: string;\r\n  /** Style variant of the link */\r\n  variant: 'default' | 'inverted' | 'styleless';\r\n  /** Href of the link component */\r\n  href: string;\r\n  /** If set then user can not interact with the link. */\r\n  disabled?: boolean;\r\n  /** Custom value of margin style. */\r\n  margin?: string;\r\n  /** Content of the Hyperlink */\r\n  children?: any;\r\n  /** Custom className to set to the link.   */\r\n  className?: string;\r\n  /** Ref for Hyperlink. */\r\n  ref?: React.Ref<HTMLAnchorElement>;\r\n}\r\n\r\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  return (\r\n    <StyledLink {...props} $variant={variant} target={target} rel=\"noopener noreferrer\">\r\n      {children}\r\n    </StyledLink>\r\n  );\r\n};\r\n\r\nexport default HyperLink;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HyperLink.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styling","_Navigation","_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","StyledLink","exports","styled","props","$variant","invertedStyle","defaultStyle","$margin","HyperLink","_ref","children","margin","target","variant","_objectWithoutProperties2","isActiveRoute","navigate","useNavigation","onClick","external","href","preventDefault","jsx","className","rel","propTypes","id","_propTypes","string","oneOf","isRequired","disabled","bool","any","ref","oneOfType","func","object","_default"],"sources":["../../src/HyperLink/HyperLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { defaultStyle, invertedStyle } from './styling';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport const StyledLink = styled.a<{\r\n  $variant: 'default' | 'inverted' | 'styleless';\r\n  $margin?: string;\r\n}>`\r\n  cursor: pointer;\r\n  ${(props) => (props.$variant === 'styleless' || !props.$variant ? '' : (props.$variant == 'inverted' ? invertedStyle : defaultStyle))}\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\n\r\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n  /** Id of the link component. */\r\n  id?: string;\r\n  /** Style variant of the link */\r\n  variant: 'default' | 'inverted' | 'styleless';\r\n  /** Href of the link component */\r\n  href: string;\r\n  /** If set then user can not interact with the link. */\r\n  disabled?: boolean;\r\n  /** Custom value of margin style. */\r\n  margin?: string;\r\n  /** Content of the Hyperlink */\r\n  children?: any;\r\n  /** Custom className to set to the link.   */\r\n  className?: string;\r\n  /** Ref for Hyperlink. */\r\n  ref?: React.Ref<HTMLAnchorElement>;\r\n  /** If this flag is set, then Hyperlink will behave like anchor tag, otherwise it will use 'navigate' method of NavigationProvider */\r\n  external?: boolean;\r\n}\r\n\r\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, margin, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  const {isActiveRoute, navigate} = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigate)\r\n    {\r\n      navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <StyledLink {...props} className={props?.className + (isActiveRoute && isActiveRoute(props?.href, true) ? ' active' : '')} onClick={onClick} $margin={margin} $variant={variant} target={target} rel=\"noopener noreferrer\">\r\n      {children}\r\n    </StyledLink>\r\n  );\r\n};\r\n\r\nexport default HyperLink;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/HyperLink/HyperLink.d.ts

@@ -20,6 +20,8 @@ export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorEle
     className?: string;
     /** Ref for Hyperlink. */
     ref?: React.Ref<HTMLAnchorElement>;
+    /** If this flag is set, then Hyperlink will behave like anchor tag, otherwise it will use 'navigate' method of NavigationProvider */
+    external?: boolean;
 }
 declare const HyperLink: React.FunctionComponent<HyperlinkProps>;
 export default HyperLink;

package/dist/HyperLink/HyperLink.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-const _excluded = ["children", "target", "variant"];
+const _excluded = ["children", "margin", "target", "variant"];
 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 styled from 'styled-components';
 import { defaultStyle, invertedStyle } from './styling';
+import { useNavigation } from '../Navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StyledLink = styled.a`
   cursor: pointer;
@@ -16,11 +17,25 @@ export const StyledLink = styled.a`
 const HyperLink = _ref => {
   let {
       children,
+      margin,
       target = '_blank',
       variant = 'default'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    isActiveRoute,
+    navigate
+  } = useNavigation();
+  const onClick = e => {
+    if (!props.external && navigate) {
+      navigate(props.href, false);
+      e?.preventDefault();
+    }
+  };
   return /*#__PURE__*/_jsx(StyledLink, _objectSpread(_objectSpread({}, props), {}, {
+    className: props?.className + (isActiveRoute && isActiveRoute(props?.href, true) ? ' active' : ''),
+    onClick: onClick,
+    $margin: margin,
     $variant: variant,
     target: target,
     rel: "noopener noreferrer",
@@ -35,7 +50,8 @@ HyperLink.propTypes = {
   margin: _pt.string,
   children: _pt.any,
   className: _pt.string,
-  ref: _pt.oneOfType([_pt.string, _pt.func, _pt.object])
+  ref: _pt.oneOfType([_pt.string, _pt.func, _pt.object]),
+  external: _pt.bool
 };
 export default HyperLink;
 //# sourceMappingURL=HyperLink.js.map

package/dist/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"HyperLink.js","names":["React","styled","defaultStyle","invertedStyle","jsx","_jsx","StyledLink","a","props","$variant","$margin","HyperLink","_ref","children","target","variant","_objectWithoutProperties","_excluded","_objectSpread","rel","propTypes","id","_pt","string","oneOf","isRequired","href","disabled","bool","margin","any","className","ref","oneOfType","func","object"],"sources":["../../src/HyperLink/HyperLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { defaultStyle, invertedStyle } from './styling';\r\n\r\nexport const StyledLink = styled.a<{\r\n  $variant: 'default' | 'inverted' | 'styleless';\r\n  $margin?: string;\r\n}>`\r\n  cursor: pointer;\r\n  ${(props) => (props.$variant === 'styleless' || !props.$variant ? '' : (props.$variant == 'inverted' ? invertedStyle : defaultStyle))}\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\n\r\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n  /** Id of the link component. */\r\n  id?: string;\r\n  /** Style variant of the link */\r\n  variant: 'default' | 'inverted' | 'styleless';\r\n  /** Href of the link component */\r\n  href: string;\r\n  /** If set then user can not interact with the link. */\r\n  disabled?: boolean;\r\n  /** Custom value of margin style. */\r\n  margin?: string;\r\n  /** Content of the Hyperlink */\r\n  children?: any;\r\n  /** Custom className to set to the link.   */\r\n  className?: string;\r\n  /** Ref for Hyperlink. */\r\n  ref?: React.Ref<HTMLAnchorElement>;\r\n}\r\n\r\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  return (\r\n    <StyledLink {...props} $variant={variant} target={target} rel=\"noopener noreferrer\">\r\n      {children}\r\n    </StyledLink>\r\n  );\r\n};\r\n\r\nexport default HyperLink;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,YAAY,EAAEC,aAAa,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,OAAO,MAAMC,UAAU,GAAGL,MAAM,CAACM,CAG/B;AACF;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,QAAQ,KAAK,WAAW,IAAI,CAACD,KAAK,CAACC,QAAQ,GAAG,EAAE,GAAID,KAAK,CAACC,QAAQ,IAAI,UAAU,GAAGN,aAAa,GAAGD,YAAc;AACvI,IAAKM,KAAK,IAAMA,KAAK,CAACE,OAAO,GAAG,WAAWF,KAAK,CAACE,OAAO,GAAG,GAAG,EAAG;AACjE,CAAC;AAqBD,MAAMC,SAAkD,GAAGC,IAAA,IAAoF;EAAA,IAAnF;MAAEC,QAAQ;MAAEC,MAAM,GAAG,QAAQ;MAAEC,OAAO,GAAG;IAAoC,CAAC,GAAAH,IAAA;IAAvBJ,KAAK,GAAAQ,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACtH,oBACEZ,IAAA,CAACC,UAAU,EAAAY,aAAA,CAAAA,aAAA,KAAKV,KAAK;IAAEC,QAAQ,EAAEM,OAAQ;IAACD,MAAM,EAAEA,MAAO;IAACK,GAAG,EAAC,qBAAqB;IAAAN,QAAA,EAChFA;EAAQ,EACC,CAAC;AAEjB,CAAC;AAACF,SAAA,CAAAS,SAAA;EAvBAC,EAAE,EAAAC,GAAA,CAAAC,MAAA;EAEFR,OAAO,EAAAO,GAAA,CAAAE,KAAA,EAAE,SAAS,EAAG,UAAU,EAAG,WAAW,GAAAC,UAAA;EAE7CC,IAAI,EAAAJ,GAAA,CAAAC,MAAA,CAAAE,UAAA;EAEJE,QAAQ,EAAAL,GAAA,CAAAM,IAAA;EAERC,MAAM,EAAAP,GAAA,CAAAC,MAAA;EAENV,QAAQ,EAAAS,GAAA,CAAAQ,GAAA;EAERC,SAAS,EAAAT,GAAA,CAAAC,MAAA;EAETS,GAAG,EAAAV,GAAA,CAAAW,SAAA,EAAAX,GAAA,CAAAC,MAAA,EAAAD,GAAA,CAAAY,IAAA,EAAAZ,GAAA,CAAAa,MAAA;AAAA;AAWL,eAAexB,SAAS","ignoreList":[]}
+{"version":3,"file":"HyperLink.js","names":["React","styled","defaultStyle","invertedStyle","useNavigation","jsx","_jsx","StyledLink","a","props","$variant","$margin","HyperLink","_ref","children","margin","target","variant","_objectWithoutProperties","_excluded","isActiveRoute","navigate","onClick","e","external","href","preventDefault","_objectSpread","className","rel","propTypes","id","_pt","string","oneOf","isRequired","disabled","bool","any","ref","oneOfType","func","object"],"sources":["../../src/HyperLink/HyperLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { defaultStyle, invertedStyle } from './styling';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport const StyledLink = styled.a<{\r\n  $variant: 'default' | 'inverted' | 'styleless';\r\n  $margin?: string;\r\n}>`\r\n  cursor: pointer;\r\n  ${(props) => (props.$variant === 'styleless' || !props.$variant ? '' : (props.$variant == 'inverted' ? invertedStyle : defaultStyle))}\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\n\r\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\r\n  /** Id of the link component. */\r\n  id?: string;\r\n  /** Style variant of the link */\r\n  variant: 'default' | 'inverted' | 'styleless';\r\n  /** Href of the link component */\r\n  href: string;\r\n  /** If set then user can not interact with the link. */\r\n  disabled?: boolean;\r\n  /** Custom value of margin style. */\r\n  margin?: string;\r\n  /** Content of the Hyperlink */\r\n  children?: any;\r\n  /** Custom className to set to the link.   */\r\n  className?: string;\r\n  /** Ref for Hyperlink. */\r\n  ref?: React.Ref<HTMLAnchorElement>;\r\n  /** If this flag is set, then Hyperlink will behave like anchor tag, otherwise it will use 'navigate' method of NavigationProvider */\r\n  external?: boolean;\r\n}\r\n\r\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, margin, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  const {isActiveRoute, navigate} = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigate)\r\n    {\r\n      navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <StyledLink {...props} className={props?.className + (isActiveRoute && isActiveRoute(props?.href, true) ? ' active' : '')} onClick={onClick} $margin={margin} $variant={variant} target={target} rel=\"noopener noreferrer\">\r\n      {children}\r\n    </StyledLink>\r\n  );\r\n};\r\n\r\nexport default HyperLink;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,YAAY,EAAEC,aAAa,QAAQ,WAAW;AACvD,SAASC,aAAa,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9C,OAAO,MAAMC,UAAU,GAAGN,MAAM,CAACO,CAG/B;AACF;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,QAAQ,KAAK,WAAW,IAAI,CAACD,KAAK,CAACC,QAAQ,GAAG,EAAE,GAAID,KAAK,CAACC,QAAQ,IAAI,UAAU,GAAGP,aAAa,GAAGD,YAAc;AACvI,IAAKO,KAAK,IAAMA,KAAK,CAACE,OAAO,GAAG,WAAWF,KAAK,CAACE,OAAO,GAAG,GAAG,EAAG;AACjE,CAAC;AAuBD,MAAMC,SAAkD,GAAGC,IAAA,IAA4F;EAAA,IAA3F;MAAEC,QAAQ;MAAEC,MAAM;MAAEC,MAAM,GAAG,QAAQ;MAAEC,OAAO,GAAG;IAAoC,CAAC,GAAAJ,IAAA;IAAvBJ,KAAK,GAAAS,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC9H,MAAM;IAACC,aAAa;IAAEC;EAAQ,CAAC,GAAGjB,aAAa,CAAC,CAAC;EACjD,MAAMkB,OAAO,GAAIC,CAAM,IAAK;IAC1B,IAAG,CAACd,KAAK,CAACe,QAAQ,IAAIH,QAAQ,EAC9B;MACEA,QAAQ,CAACZ,KAAK,CAACgB,IAAI,EAAE,KAAK,CAAC;MAC3BF,CAAC,EAAEG,cAAc,CAAC,CAAC;IACrB;EACF,CAAC;EAED,oBACEpB,IAAA,CAACC,UAAU,EAAAoB,aAAA,CAAAA,aAAA,KAAKlB,KAAK;IAAEmB,SAAS,EAAEnB,KAAK,EAAEmB,SAAS,IAAIR,aAAa,IAAIA,aAAa,CAACX,KAAK,EAAEgB,IAAI,EAAE,IAAI,CAAC,GAAG,SAAS,GAAG,EAAE,CAAE;IAACH,OAAO,EAAEA,OAAQ;IAACX,OAAO,EAAEI,MAAO;IAACL,QAAQ,EAAEO,OAAQ;IAACD,MAAM,EAAEA,MAAO;IAACa,GAAG,EAAC,qBAAqB;IAAAf,QAAA,EACvNA;EAAQ,EACC,CAAC;AAEjB,CAAC;AAACF,SAAA,CAAAkB,SAAA;EAlCAC,EAAE,EAAAC,GAAA,CAAAC,MAAA;EAEFhB,OAAO,EAAAe,GAAA,CAAAE,KAAA,EAAE,SAAS,EAAG,UAAU,EAAG,WAAW,GAAAC,UAAA;EAE7CV,IAAI,EAAAO,GAAA,CAAAC,MAAA,CAAAE,UAAA;EAEJC,QAAQ,EAAAJ,GAAA,CAAAK,IAAA;EAERtB,MAAM,EAAAiB,GAAA,CAAAC,MAAA;EAENnB,QAAQ,EAAAkB,GAAA,CAAAM,GAAA;EAERV,SAAS,EAAAI,GAAA,CAAAC,MAAA;EAETM,GAAG,EAAAP,GAAA,CAAAQ,SAAA,EAAAR,GAAA,CAAAC,MAAA,EAAAD,GAAA,CAAAS,IAAA,EAAAT,GAAA,CAAAU,MAAA;EAEHlB,QAAQ,EAAAQ,GAAA,CAAAK;AAAA;AAoBV,eAAezB,SAAS","ignoreList":[]}

package/dist/HyperLink/styling.cjs

@@ -16,31 +16,57 @@ const defaultStyle = exports.defaultStyle = (0, _styledComponents.css)`
 
   &:link {
     font-weight: 700;
-    color: ${props => _.COLORS.getColor('primary_600', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:visited {
-    color: ${props => _.COLORS.getColor('primary_800', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &:hover,
   &.hover-state {
-    color: ${props => _.COLORS.getColor('primary_700', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     text-decoration-line: underline;
   }
 
   &:focus,
   &.focus-state {
     border-radius: 2px;
-    background: ${props => _.COLORS.getColor('primary_800', props.theme)};
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    background: ${props => _.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:active,
   &.active-state {
     border-radius: 2px;
-    background: ${props => _.COLORS.getColor('primary_800', props.theme)};
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    background: ${props => _.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
 
@@ -49,7 +75,11 @@ const defaultStyle = exports.defaultStyle = (0, _styledComponents.css)`
   &.active-state:hover,
   &.focus-state:hover{
     text-decoration-line: none;
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     opacity: 0.9;
   }
 `;

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","getColor","theme","invertedStyle"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,CAAA,GAAAD,OAAA;AAEO,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,qBAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA,CAAC;AAEM,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,IAAAL,qBAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/HyperLink/styling.js

@@ -10,31 +10,57 @@ export const defaultStyle = css`
 
   &:link {
     font-weight: 700;
-    color: ${props => COLORS.getColor('primary_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:visited {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &:hover,
   &.hover-state {
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     text-decoration-line: underline;
   }
 
   &:focus,
   &.focus-state {
     border-radius: 2px;
-    background: ${props => COLORS.getColor('primary_800', props.theme)};
-    color: ${props => COLORS.getColor('white', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:active,
   &.active-state {
     border-radius: 2px;
-    background: ${props => COLORS.getColor('primary_800', props.theme)};
-    color: ${props => COLORS.getColor('white', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
 
@@ -43,7 +69,11 @@ export const defaultStyle = css`
   &.active-state:hover,
   &.focus-state:hover{
     text-decoration-line: none;
-    color: ${props => COLORS.getColor('white', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     opacity: 0.9;
   }
 `;

package/dist/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","getColor","theme","invertedStyle"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,MAAM,QAAQ,IAAI;AAE3B,OAAO,MAAMC,YAAY,GAAGF,GAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGN,GAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAChE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAChE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}