@laerdal/life-react-components 6.0.0-dev.14.full → 6.0.0-dev.16.full

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.cjs","names":["_styledComponents","_interopRequireWildcard","require","_styles","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RowLayout","exports","styled","div","Button","button","props","COLORS","getColor","theme","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","focus","focusStyles","active","flowDown","MobileMenuWrapper","ScrollableContainer","scrollBarStyling","Size","Small","MobileHeaderText","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","MobileHeaderNote","ComponentXSStyling","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {StyledLink} from '../../HyperLink/HyperLink';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAWA,IAAAE,MAAA,GAAAF,OAAA;AAAiC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAG1B,MAAMW,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,GAAG;AACnC;AACA;AACA,CAAC;AAEM,MAAMC,MAAM,GAAAH,OAAA,CAAAG,MAAA,GAAGF,yBAAM,CAACG,MAAM;AACnC,sBAAsBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA,CAAC;AAED,MAAMC,QAAQ,GAAG,IAAAC,2BAAS;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,IAAAD,2BAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAGM,MAAME,OAAO,GAAAZ,OAAA,CAAAY,OAAA,GAAG,IAAAF,2BAAS;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,MAAM,GAAAb,OAAA,CAAAa,MAAA,GAAG,IAAAH,2BAAS;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,IAAI,GAAAd,OAAA,CAAAc,IAAA,GAAGb,yBAAM,CAACC,GAAG;AAC9B;AACA,sBAAsBG,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA,aAAaO,iBAAS,CAACC,UAAU;AACjC;AACA;AACA;AACA;AACA,IAAIC,mBAAW,CAACC,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBT,QAAQ;AACzB;AACA;AACA;AACA;AACA,iBAAiBE,SAAS;AAC1B;AACA,CAAC;AAEM,MAAMQ,KAAK,GAAAnB,OAAA,CAAAmB,KAAA,GAAGlB,yBAAM,CAACC,GAAG;AAC/B;AACA;AACA,CAAC;AAEM,MAAMkB,QAAQ,GAAApB,OAAA,CAAAoB,QAAA,GAAGnB,yBAAM,CAACoB,IAAI;AACnC,WAAWhB,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/D;AACA;AACA;AACA,CAAC;AAEM,MAAMc,WAAW,GAAAtB,OAAA,CAAAsB,WAAA,GAAGrB,yBAAM,CAACsB,EAAE;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,eAAe,GAAAxB,OAAA,CAAAwB,eAAA,GAAGvB,yBAAM,CAACwB,EAAE;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,0BAA0B,GAAA1B,OAAA,CAAA0B,0BAAA,GAAG,IAAAC,qBAAG;AAC7C;AACA;AACA;AACA;AACA;AACA,eAAeZ,iBAAS,CAACa,KAAK;AAC9B,wBAAwBvB,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3E;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,eAAeO,iBAAS,CAACc,KAAK;AAC9B;AACA,MAAMC,mBAAW;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,eAAef,iBAAS,CAACgB,MAAM;AAC/B,kBAAkB1B,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA,wBAAwBH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA,CAAC;AAGM,MAAMwB,QAAQ,GAAAhC,OAAA,CAAAgC,QAAA,GAAG,IAAAtB,2BAAS;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMuB,iBAAiB,GAAAjC,OAAA,CAAAiC,iBAAA,GAAGhC,yBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMgC,mBAAmB,GAAAlC,OAAA,CAAAkC,mBAAA,GAAGjC,yBAAM,CAACC,GAAG;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,IAAAiC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC;AAChC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAtC,OAAA,CAAAsC,gBAAA,GAAGrC,yBAAM,CAACC,GAAG;AAC1C,IAAIG,KAAK,IAAI,IAAAkC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEnC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACpG,IAAIS,mBAAW,CAACC,KAAK;AACrB,MAAMb,KAAK,IAAI,IAAAqC,yBAAiB,EAACF,0BAAkB,CAACC,IAAI,EAAEnC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA,CAAC;AACM,MAAMmC,gBAAgB,GAAA3C,OAAA,CAAA2C,gBAAA,GAAG1C,yBAAM,CAACC,GAAG;AAC1C;AACA,IAAIG,KAAK,IAAI,IAAAuC,0BAAkB,EAACJ,0BAAkB,CAACK,OAAO,EAAEvC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG,CAAC;AAEM,MAAMsC,qBAAqB,GAAA9C,OAAA,CAAA8C,qBAAA,GAAG7C,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,6BAA6BG,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjF;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"CommonStyles.cjs","names":["_styledComponents","_interopRequireWildcard","require","_styles","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RowLayout","exports","styled","div","Button","button","props","COLORS","getColor","theme","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","focus","focusStyles","active","flowDown","MobileMenuWrapper","ScrollableContainer","scrollBarStyling","Size","Small","MobileHeaderText","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","MobileHeaderNote","ComponentXSStyling","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","Size","RowLayout","div","Button","button","props","getColor","theme","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","focus","active","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\nimport {StyledLink} from '../../HyperLink/HyperLink';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CommonStyles.js","names":["styled","css","keyframes","BREAKPOINTS","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","scrollBarStyling","Z_INDEXES","Size","RowLayout","div","Button","button","props","getColor","theme","flowLeft","flowRight","fadeOut","fadeIn","Menu","off_canvas","SMALL","Right","SiteName","span","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","hover","focus","active","flowDown","MobileMenuWrapper","ScrollableContainer","Small","MobileHeaderText","Bold","MobileHeaderNote","Regular","MobileHeaderContainer"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\r\nimport {\r\n  BREAKPOINTS,\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling,\r\n  focusStyles,\r\n  scrollBarStyling,\r\n  Z_INDEXES\r\n} from '../../styles';\r\nimport {Size} from '../../types';\r\n\r\nexport const RowLayout = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  font-weight: bold;\r\n  border: 0;\r\n`;\r\n\r\nconst flowLeft = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateX(100%);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n`;\r\n\r\nconst flowRight = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(100%);\r\n  }\r\n`;\r\n\r\n\r\nexport const fadeOut = keyframes`\r\n  0% {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n`;\r\n\r\nexport const fadeIn = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    visibility: hidden;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n`;\r\n\r\nexport const Menu = styled.div`\r\n  height: 100%;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  box-sizing: border-box;\r\n  right: 0;\r\n  top: 0;\r\n  position: absolute;\r\n  z-index: ${Z_INDEXES.off_canvas};\r\n  align-items: center;\r\n\r\n  width: 320px;\r\n\r\n  ${BREAKPOINTS.SMALL} {\r\n    width: 400px;\r\n  }\r\n\r\n  .open & {\r\n    visibility: visible;\r\n    display: flex;\r\n    animation: ${flowLeft} 0.3s ease-in-out;\r\n  }\r\n\r\n  .closed & {\r\n    visibility: hidden;\r\n    animation: ${flowRight} 0.3s ease-in-out;\r\n  }\r\n`;\r\n\r\nexport const Right = styled.div`\r\n  display: flex;\r\n  margin-left: auto;\r\n`;\r\n\r\nexport const SiteName = styled.span`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  margin-left: 4px;\r\n`;\r\n\r\nexport const MenuSection = styled.li`\r\n  margin-top: 16px;\r\n\r\n  .disabled-link {\r\n    color: #21212150;\r\n    pointer-events: none;\r\n    key-events: none;\r\n  }\r\n`;\r\n\r\nexport const MenuSectionList = styled.ul`\r\n  list-style: none;\r\n  padding: 0;\r\n\r\n  li {\r\n    width: 80%;\r\n    height: 48px;\r\n    margin: 0 auto 0 12px;\r\n\r\n    a {\r\n      height: 100%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport const UserMenuSectionListStyling = css`\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  li:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  li:focus-within:not(.disabled) {\r\n    z-index: ${Z_INDEXES.focus};\r\n\r\n    ${focusStyles}\r\n    a {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  li:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    a {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  .disabled {\r\n    a {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const flowDown = keyframes`\r\n  0% {\r\n    opacity: 0;\r\n    transform: translateY(-10px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n`;\r\n\r\nexport const MobileMenuWrapper = styled.div`\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  flex-flow: column;\r\n  display: flex;\r\n  flex: 1;\r\n  overflow: hidden;\r\n`;\r\n\r\nexport const ScrollableContainer = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow-y: auto;\r\n  max-height: 100%;\r\n\r\n  &.scrollable {\r\n    margin-right: 6px;\r\n    padding-right: 10px;\r\n  }\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar-track {\r\n    margin: 8px;\r\n  }\r\n`;\r\n\r\nexport const MobileHeaderText = styled.div`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  ${BREAKPOINTS.SMALL} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\nexport const MobileHeaderNote = styled.div`\r\n  word-break: break-all;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const MobileHeaderContainer = styled.div`\r\n  margin: 0 24px;\r\n  padding-bottom: 8px;\r\n  box-sizing: border-box;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  display: flex;\r\n  flex-direction: column;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/HyperLink/HyperLink.cjs

@@ -13,7 +13,7 @@ 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; }
@@ -26,6 +26,7 @@ const StyledLink = exports.StyledLink = _styledComponents.default.a`
 const HyperLink = _ref => {
   let {
       children,
+      margin,
       target = '_blank',
       variant = 'default'
     } = _ref,
@@ -39,6 +40,7 @@ const HyperLink = _ref => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLink, _objectSpread(_objectSpread({}, props), {}, {
     onClick: onClick,
+    $margin: margin,
     $variant: variant,
     target: target,
     rel: "noopener noreferrer",

package/dist/HyperLink/HyperLink.cjs.map

@@ -1 +1 @@
-{"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","target","variant","_objectWithoutProperties2","navigationContext","useNavigation","onClick","external","navigate","href","preventDefault","jsx","rel","propTypes","id","_propTypes","string","oneOf","isRequired","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\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, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  const navigationContext = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigationContext?.navigate)\r\n    {\r\n      navigationContext?.navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n  return (\r\n    <StyledLink {...props} onClick={onClick} $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,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAA8C,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAEvC,MAAMkC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAGE,yBAAM,CAAC1B,CAG/B;AACF;AACA,IAAK2B,KAAK,IAAMA,KAAK,CAACC,QAAQ,KAAK,WAAW,IAAI,CAACD,KAAK,CAACC,QAAQ,GAAG,EAAE,GAAID,KAAK,CAACC,QAAQ,IAAI,UAAU,GAAGC,sBAAa,GAAGC,qBAAc;AACvI,IAAKH,KAAK,IAAMA,KAAK,CAACI,OAAO,GAAG,WAAWJ,KAAK,CAACI,OAAO,GAAG,GAAG,EAAG;AACjE,CAAC;AAuBD,MAAMC,SAAkD,GAAGC,IAAA,IAAoF;EAAA,IAAnF;MAAEC,QAAQ;MAAEC,MAAM,GAAG,QAAQ;MAAEC,OAAO,GAAG;IAAoC,CAAC,GAAAH,IAAA;IAAvBN,KAAK,OAAAU,yBAAA,CAAA1C,OAAA,EAAAsC,IAAA,EAAA7C,SAAA;EACtH,MAAMkD,iBAAiB,GAAG,IAAAC,yBAAa,EAAC,CAAC;EACzC,MAAMC,OAAO,GAAIlD,CAAM,IAAK;IAC1B,IAAG,CAACqC,KAAK,CAACc,QAAQ,IAAIH,iBAAiB,EAAEI,QAAQ,EACjD;MACEJ,iBAAiB,EAAEI,QAAQ,CAACf,KAAK,CAACgB,IAAI,EAAE,KAAK,CAAC;MAC9CrD,CAAC,EAAEsD,cAAc,CAAC,CAAC;IACrB;EACF,CAAC;EACD,oBACE,IAAAzD,WAAA,CAAA0D,GAAA,EAACrB,UAAU,EAAAP,aAAA,CAAAA,aAAA,KAAKU,KAAK;IAAEa,OAAO,EAAEA,OAAQ;IAACZ,QAAQ,EAAEQ,OAAQ;IAACD,MAAM,EAAEA,MAAO;IAACW,GAAG,EAAC,qBAAqB;IAAAZ,QAAA,EAClGA;EAAQ,EACC,CAAC;AAEjB,CAAC;AAACF,SAAA,CAAAe,SAAA;EAjCAC,EAAE,EAAAC,UAAA,CAAAtD,OAAA,CAAAuD,MAAA;EAEFd,OAAO,EAAAa,UAAA,CAAAtD,OAAA,CAAAwD,KAAA,EAAE,SAAS,EAAG,UAAU,EAAG,WAAW,GAAAC,UAAA;EAE7CT,IAAI,EAAAM,UAAA,CAAAtD,OAAA,CAAAuD,MAAA,CAAAE,UAAA;EAEJC,QAAQ,EAAAJ,UAAA,CAAAtD,OAAA,CAAA2D,IAAA;EAERC,MAAM,EAAAN,UAAA,CAAAtD,OAAA,CAAAuD,MAAA;EAENhB,QAAQ,EAAAe,UAAA,CAAAtD,OAAA,CAAA6D,GAAA;EAERC,SAAS,EAAAR,UAAA,CAAAtD,OAAA,CAAAuD,MAAA;EAETQ,GAAG,EAAAT,UAAA,CAAAtD,OAAA,CAAAgE,SAAA,EAAAV,UAAA,CAAAtD,OAAA,CAAAuD,MAAA,EAAAD,UAAA,CAAAtD,OAAA,CAAAiE,IAAA,EAAAX,UAAA,CAAAtD,OAAA,CAAAkE,MAAA;EAEHpB,QAAQ,EAAAQ,UAAA,CAAAtD,OAAA,CAAA2D;AAAA;AAAA,IAAAQ,QAAA,GAAArC,OAAA,CAAA9B,OAAA,GAmBKqC,SAAS","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","navigationContext","useNavigation","onClick","external","navigate","href","preventDefault","jsx","rel","propTypes","id","_propTypes","string","oneOf","isRequired","disabled","bool","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\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 navigationContext = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigationContext?.navigate)\r\n    {\r\n      navigationContext?.navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n  return (\r\n    <StyledLink {...props} 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.js

@@ -1,7 +1,7 @@
 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';
@@ -17,6 +17,7 @@ export const StyledLink = styled.a`
 const HyperLink = _ref => {
   let {
       children,
+      margin,
       target = '_blank',
       variant = 'default'
     } = _ref,
@@ -30,6 +31,7 @@ const HyperLink = _ref => {
   };
   return /*#__PURE__*/_jsx(StyledLink, _objectSpread(_objectSpread({}, props), {}, {
     onClick: onClick,
+    $margin: margin,
     $variant: variant,
     target: target,
     rel: "noopener noreferrer",

package/dist/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"HyperLink.js","names":["React","styled","defaultStyle","invertedStyle","useNavigation","jsx","_jsx","StyledLink","a","props","$variant","$margin","HyperLink","_ref","children","target","variant","_objectWithoutProperties","_excluded","navigationContext","onClick","e","external","navigate","href","preventDefault","_objectSpread","rel","propTypes","id","_pt","string","oneOf","isRequired","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\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, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\r\n  const navigationContext = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigationContext?.navigate)\r\n    {\r\n      navigationContext?.navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n  return (\r\n    <StyledLink {...props} onClick={onClick} $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,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,MAAMC,iBAAiB,GAAGf,aAAa,CAAC,CAAC;EACzC,MAAMgB,OAAO,GAAIC,CAAM,IAAK;IAC1B,IAAG,CAACZ,KAAK,CAACa,QAAQ,IAAIH,iBAAiB,EAAEI,QAAQ,EACjD;MACEJ,iBAAiB,EAAEI,QAAQ,CAACd,KAAK,CAACe,IAAI,EAAE,KAAK,CAAC;MAC9CH,CAAC,EAAEI,cAAc,CAAC,CAAC;IACrB;EACF,CAAC;EACD,oBACEnB,IAAA,CAACC,UAAU,EAAAmB,aAAA,CAAAA,aAAA,KAAKjB,KAAK;IAAEW,OAAO,EAAEA,OAAQ;IAACV,QAAQ,EAAEM,OAAQ;IAACD,MAAM,EAAEA,MAAO;IAACY,GAAG,EAAC,qBAAqB;IAAAb,QAAA,EAClGA;EAAQ,EACC,CAAC;AAEjB,CAAC;AAACF,SAAA,CAAAgB,SAAA;EAjCAC,EAAE,EAAAC,GAAA,CAAAC,MAAA;EAEFf,OAAO,EAAAc,GAAA,CAAAE,KAAA,EAAE,SAAS,EAAG,UAAU,EAAG,WAAW,GAAAC,UAAA;EAE7CT,IAAI,EAAAM,GAAA,CAAAC,MAAA,CAAAE,UAAA;EAEJC,QAAQ,EAAAJ,GAAA,CAAAK,IAAA;EAERC,MAAM,EAAAN,GAAA,CAAAC,MAAA;EAENjB,QAAQ,EAAAgB,GAAA,CAAAO,GAAA;EAERC,SAAS,EAAAR,GAAA,CAAAC,MAAA;EAETQ,GAAG,EAAAT,GAAA,CAAAU,SAAA,EAAAV,GAAA,CAAAC,MAAA,EAAAD,GAAA,CAAAW,IAAA,EAAAX,GAAA,CAAAY,MAAA;EAEHpB,QAAQ,EAAAQ,GAAA,CAAAK;AAAA;AAmBV,eAAevB,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","navigationContext","onClick","e","external","navigate","href","preventDefault","_objectSpread","rel","propTypes","id","_pt","string","oneOf","isRequired","disabled","bool","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\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 navigationContext = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if(!props.external && navigationContext?.navigate)\r\n    {\r\n      navigationContext?.navigate(props.href, false);\r\n      e?.preventDefault();\r\n    }\r\n  };\r\n  return (\r\n    <StyledLink {...props} 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,MAAMC,iBAAiB,GAAGhB,aAAa,CAAC,CAAC;EACzC,MAAMiB,OAAO,GAAIC,CAAM,IAAK;IAC1B,IAAG,CAACb,KAAK,CAACc,QAAQ,IAAIH,iBAAiB,EAAEI,QAAQ,EACjD;MACEJ,iBAAiB,EAAEI,QAAQ,CAACf,KAAK,CAACgB,IAAI,EAAE,KAAK,CAAC;MAC9CH,CAAC,EAAEI,cAAc,CAAC,CAAC;IACrB;EACF,CAAC;EACD,oBACEpB,IAAA,CAACC,UAAU,EAAAoB,aAAA,CAAAA,aAAA,KAAKlB,KAAK;IAAEY,OAAO,EAAEA,OAAQ;IAACV,OAAO,EAAEI,MAAO;IAACL,QAAQ,EAAEO,OAAQ;IAACD,MAAM,EAAEA,MAAO;IAACY,GAAG,EAAC,qBAAqB;IAAAd,QAAA,EACnHA;EAAQ,EACC,CAAC;AAEjB,CAAC;AAACF,SAAA,CAAAiB,SAAA;EAjCAC,EAAE,EAAAC,GAAA,CAAAC,MAAA;EAEFf,OAAO,EAAAc,GAAA,CAAAE,KAAA,EAAE,SAAS,EAAG,UAAU,EAAG,WAAW,GAAAC,UAAA;EAE7CT,IAAI,EAAAM,GAAA,CAAAC,MAAA,CAAAE,UAAA;EAEJC,QAAQ,EAAAJ,GAAA,CAAAK,IAAA;EAERrB,MAAM,EAAAgB,GAAA,CAAAC,MAAA;EAENlB,QAAQ,EAAAiB,GAAA,CAAAM,GAAA;EAERC,SAAS,EAAAP,GAAA,CAAAC,MAAA;EAETO,GAAG,EAAAR,GAAA,CAAAS,SAAA,EAAAT,GAAA,CAAAC,MAAA,EAAAD,GAAA,CAAAU,IAAA,EAAAV,GAAA,CAAAW,MAAA;EAEHnB,QAAQ,EAAAQ,GAAA,CAAAK;AAAA;AAmBV,eAAexB,SAAS","ignoreList":[]}

package/dist/MiniProductCard/MiniProductCard.cjs

@@ -12,6 +12,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _icons = require("../icons");
 var _HyperLink = require("../HyperLink/HyperLink");
+var _Navigation = require("../Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -80,11 +81,23 @@ const RightIconWrapper = _styledComponents.default.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
+  const {
+    navigate
+  } = (0, _Navigation.useNavigation)();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -109,7 +122,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _propTypes.default.string,
-  target: _propTypes.default.string
+  target: _propTypes.default.string,
+  external: _propTypes.default.bool
 };
 var _default = exports.default = MiniProductCard;
 //# sourceMappingURL=MiniProductCard.cjs.map

package/dist/MiniProductCard/MiniProductCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_jsxRuntime","_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","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","useTheme","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":";;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAGA,IAAAI,UAAA,GAAAJ,OAAA;AAAoD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAOpD,MAAMkC,WAAW,GAAG,IAAAC,yBAAM,EAACC,KAAK,iBAAI,IAAAtC,WAAA,CAAAuC,GAAA,EAACxC,UAAA,CAAAyC,UAAU,EAAAX,aAAA,KAAKS,KAAK,CAAG,CAAC,CAAC;AAC9D;AACA;AACA;AACA,WAAWA,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACzD;AACA;AACA,IAAIC,mBAAW,CAACC,MAAM;AACtB;AACA;AACA,CAAC;AAED,MAAMC,YAAY,GAAGT,yBAAM,CAACU,GAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBT,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACrE;AACA;AACA,cAAcL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAClE;AACA;AACA;AACA,kBAAkBL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACtE;AACA;AACA,cAAcL,KAAK,IAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAClE;AACA;AACA,CAAC;AAED,MAAMK,YAAY,GAAGX,yBAAM,CAACY,GAAG;AAC/B;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGb,yBAAM,CAACc,EAAE;AAC7B,IAAIb,KAAK,IAAI,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEb,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjG;AACA;AACA,CAAC;AAED,MAAMY,WAAW,GAAGlB,yBAAM,CAACmB,IAAI;AAC/B,IAAIlB,KAAK,IAAI,IAAAmB,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEb,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjG;AACA,CAAC;AAED,MAAMe,mBAAmB,GAAGrB,yBAAM,CAACU,GAAG;AACtC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMY,gBAAgB,GAAGtB,yBAAM,CAACU,GAAG;AACnC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMa,eAA8D,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,GAAG;IAAEC,OAAO;IAAEC,MAAM,GAAG;EAA8B,CAAC,GAAAH,IAAA;EAC9H,MAAMlB,KAAK,GAAG,IAAAsB,0BAAQ,EAAC,CAAC;EACxB,oBACE,IAAAjE,WAAA,CAAAuC,GAAA,EAACH,WAAW;IAAC8B,QAAQ,EAAC,WAAW;IAACC,IAAI,EAAEL,GAAG,IAAI,EAAG;IAACE,MAAM,EAAEA,MAAO;IAAAI,QAAA,eAChE,IAAApE,WAAA,CAAAqE,IAAA,EAACvB,YAAY;MAAAsB,QAAA,GACVL,OAAO,CAACO,KAAK,iBAAI,IAAAtE,WAAA,CAAAuC,GAAA,EAACS,YAAY;QAACuB,GAAG,EAAER,OAAO,CAACO;MAAM,CAAE,CAAC,eACtD,IAAAtE,WAAA,CAAAqE,IAAA,EAACX,mBAAmB;QAAAU,QAAA,gBAClB,IAAApE,WAAA,CAAAuC,GAAA,EAACW,WAAW;UAAAkB,QAAA,EAAEL,OAAO,CAACS;QAAI,CAAc,CAAC,eACzC,IAAAxE,WAAA,CAAAuC,GAAA,EAACgB,WAAW;UAAAa,QAAA,EAAEL,OAAO,CAACU;QAAI,CAAc,CAAC;MAAA,CACtB,CAAC,eACtB,IAAAzE,WAAA,CAAAuC,GAAA,EAACoB,gBAAgB;QAAAS,QAAA,eACf,IAAApE,WAAA,CAAAuC,GAAA,EAACzC,MAAA,CAAA4E,WAAW,CAACC,YAAY;UAACC,KAAK,EAAEnC,cAAM,CAACC,QAAQ,CAAC,SAAS,EAAEC,KAAK,CAAE;UAACkC,SAAS,EAAE,uBAAwB;UAACC,IAAI,EAAE;QAAO,CAAE;MAAC,CACxG,CAAC;IAAA,CACP;EAAC,CACJ,CAAC;AAElB,CAAC;AAAClB,eAAA,CAAAmB,SAAA;EAtFAjB,GAAG,EAAAkB,UAAA,CAAAzE,OAAA,CAAA0E,MAAA;EACHjB,MAAM,EAAAgB,UAAA,CAAAzE,OAAA,CAAA0E;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAA5E,OAAA,GAuFOqD,eAAe","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_Navigation","_jsxRuntime","_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","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","useTheme","navigate","useNavigation","onClick","preventDefault","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","bool","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -4,6 +4,7 @@ export type MiniProductCardProps = {
     product: Product;
     url?: string;
     target?: string;
+    external?: boolean;
 };
 declare const MiniProductCard: React.FunctionComponent<MiniProductCardProps>;
 export default MiniProductCard;

package/dist/MiniProductCard/MiniProductCard.js

@@ -8,6 +8,7 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { SystemIcons } from '../icons';
 import { ComponentMStyling, ComponentSStyling } from '../styles';
 import { StyledLink } from '../HyperLink/HyperLink';
+import { useNavigation } from '../Navigation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ProductLink = styled(props => /*#__PURE__*/_jsx(StyledLink, _objectSpread({}, props)))`
   display: flex;
@@ -72,11 +73,23 @@ const RightIconWrapper = styled.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = useTheme();
+  const {
+    navigate
+  } = useNavigation();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/_jsx(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -101,7 +114,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _pt.string,
-  target: _pt.string
+  target: _pt.string,
+  external: _pt.bool
 };
 export default MiniProductCard;
 //# sourceMappingURL=MiniProductCard.js.map

package/dist/MiniProductCard/MiniProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","useNavigation","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","navigate","onClick","e","preventDefault","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string","bool"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/NavItem/NavItem.cjs

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _zIndexes = require("../styles/z-indexes");
+var _Navigation = require("src/Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -91,7 +92,12 @@ const NavItemDiv = exports.NavItemDiv = _styledComponents.default.div`
   }
 `;
 const NavItem = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread({}, props));
+  const {
+    isActiveRoute
+  } = (0, _Navigation.useNavigation)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
+    className: props?.className + (isActiveRoute && isActiveRoute(props?.to, false) ? ' active' : '')
+  }));
 };
 var _default = exports.default = NavItem;
 //# sourceMappingURL=NavItem.cjs.map

package/dist/NavItem/NavItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","getColor","hover","focusStyles","NavItem","jsx","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\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_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\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    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"NavItem.cjs","names":["_styledComponents","_interopRequireDefault","require","_react","_styles","_typography","_zIndexes","_Navigation","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","NavItemDiv","exports","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","BREAKPOINTS","LARGE","Z_INDEXES","active","getColor","hover","focusStyles","NavItem","isActiveRoute","useNavigation","jsx","className","to","_default"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport { useNavigation } from 'src/Navigation';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\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_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\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    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  const {isActiveRoute} = useNavigation();\r\n  return (\r\n    <NavItemDiv {...props} className={props?.className + (isActiveRoute && isActiveRoute(props?.to, false) ? ' active' : '')} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/NavItem/NavItem.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentMStyling, ComponentTextStyle } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
+import { useNavigation } from 'src/Navigation';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NavItemDiv = styled.div`
   ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
@@ -84,7 +85,12 @@ export const NavItemDiv = styled.div`
   }
 `;
 const NavItem = props => {
-  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread({}, props));
+  const {
+    isActiveRoute
+  } = useNavigation();
+  return /*#__PURE__*/_jsx(NavItemDiv, _objectSpread(_objectSpread({}, props), {}, {
+    className: props?.className + (isActiveRoute && isActiveRoute(props?.to, false) ? ' active' : '')
+  }));
 };
 export default NavItem;
 //# sourceMappingURL=NavItem.js.map

package/dist/NavItem/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","jsx","_jsx","NavItemDiv","div","props","Regular","generateToken","componentType","defaultVariant","theme","LARGE","active","getColor","hover","NavItem","_objectSpread"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\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_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\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    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  return (\r\n    <NavItemDiv {...props} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":";;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C,OAAO,MAAMC,UAAU,GAAGV,MAAM,CAACW,GAAG;AACpC,IAAIC,KAAK,IAAIP,iBAAiB,CAACC,kBAAkB,CAACO,OAAO,EAAEV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC7I;AACA;AACA;AACA;AACA;AACA,IAAIf,WAAW,CAACgB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACY,MAAM;AAC/B,wBAAwBP,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,YAAY,EAAER,KAAK,CAACK,KAAK,CAAC;AAC3E,aAAaL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,aAAaL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE,wBAAwBL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC5E;AACA;AACA,0BAA0BL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeV,SAAS,CAACc,KAAK;AAC9B,wBAAwBT,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,YAAY,EAAER,KAAK,CAACK,KAAK,CAAC;AAC3E,aAAaL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeV,SAAS,CAACY,MAAM;AAC/B,wBAAwBP,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC5E,aAAaL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIT,MAAM,CAACiB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,MAAMb,WAAW;AACjB;AACA;AACA,CAAC;AAGD,MAAMkB,OAAO,GAAIV,KAAU,IAAK;EAC9B,oBACEH,IAAA,CAACC,UAAU,EAAAa,aAAA,KAAKX,KAAK,CAAG,CAAC;AAE7B,CAAC;AAED,eAAeU,OAAO","ignoreList":[]}
+{"version":3,"file":"NavItem.js","names":["styled","React","BREAKPOINTS","COLORS","focusStyles","ComponentMStyling","ComponentTextStyle","Z_INDEXES","useNavigation","jsx","_jsx","NavItemDiv","div","props","Regular","generateToken","componentType","defaultVariant","theme","LARGE","active","getColor","hover","NavItem","isActiveRoute","_objectSpread","className","to"],"sources":["../../src/NavItem/NavItem.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport React from 'react';\r\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\r\nimport {ComponentMStyling, ComponentTextStyle} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport { useNavigation } from 'src/Navigation';\r\n\r\nexport const NavItemDiv = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  margin: 0;\r\n  padding: 0 21px 0 21px;\r\n  height: 64px;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    height: 80px;\r\n  }\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    background-color: transparent;\r\n    height: 3px;\r\n    border-radius: 3px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled) {\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_700', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\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    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles}\r\n    outline-offset: -4px;\r\n  }\r\n`;\r\n\r\n\r\nconst NavItem = (props: any) => {\r\n  const {isActiveRoute} = useNavigation();\r\n  return (\r\n    <NavItemDiv {...props} className={props?.className + (isActiveRoute && isActiveRoute(props?.to, false) ? ' active' : '')} />\r\n  );\r\n};\r\n\r\nexport default NavItem;\r\n"],"mappings":";;;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAQC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC1D,SAAQC,iBAAiB,EAAEC,kBAAkB,QAAO,sBAAsB;AAC1E,SAAQC,SAAS,QAAO,qBAAqB;AAE7C,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,UAAU,GAAGX,MAAM,CAACY,GAAG;AACpC,IAAIC,KAAK,IAAIR,iBAAiB,CAACC,kBAAkB,CAACQ,OAAO,EAAEX,MAAM,CAACY,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC7I;AACA;AACA;AACA;AACA;AACA,IAAIhB,WAAW,CAACiB,KAAK;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeZ,SAAS,CAACa,MAAM;AAC/B,wBAAwBP,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,YAAY,EAAER,KAAK,CAACK,KAAK,CAAC;AAC3E,aAAaL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,aAAaL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE,wBAAwBL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC5E;AACA;AACA,0BAA0BL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACe,KAAK;AAC9B,wBAAwBT,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,YAAY,EAAER,KAAK,CAACK,KAAK,CAAC;AAC3E,aAAaL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACa,MAAM;AAC/B,wBAAwBP,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC5E,aAAaL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,0BAA0BL,KAAK,IAAIV,MAAM,CAACkB,QAAQ,CAAC,aAAa,EAAER,KAAK,CAACK,KAAK,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA,MAAMd,WAAW;AACjB;AACA;AACA,CAAC;AAGD,MAAMmB,OAAO,GAAIV,KAAU,IAAK;EAC9B,MAAM;IAACW;EAAa,CAAC,GAAGhB,aAAa,CAAC,CAAC;EACvC,oBACEE,IAAA,CAACC,UAAU,EAAAc,aAAA,CAAAA,aAAA,KAAKZ,KAAK;IAAEa,SAAS,EAAEb,KAAK,EAAEa,SAAS,IAAIF,aAAa,IAAIA,aAAa,CAACX,KAAK,EAAEc,EAAE,EAAE,KAAK,CAAC,GAAG,SAAS,GAAG,EAAE;EAAE,EAAE,CAAC;AAEhI,CAAC;AAED,eAAeJ,OAAO","ignoreList":[]}