{"version":3,"file":"876-6263d4d3aa8f45448f83.js","mappings":"mQAQA,MAAMA,GAAYC,EAAAA,EAAAA,IAAOC,EAAAA,GAAe,uFAAtBD,CAAsB,yBAGlCE,EAAQF,EAAAA,GAAAA,GAAAA,WAAS,wEAATA,CAAS,0DACnBG,EAAAA,GAEAC,EAAAA,EAAAA,OAAAA,MACWC,EAAAA,EAAAA,IAAM,GAAI,KACRA,EAAAA,EAAAA,IAAM,GAAI,KACXA,EAAAA,EAAAA,IAAM,GAAI,KAEpBC,EAAaN,EAAAA,GAAAA,GAAAA,WAAS,6EAATA,CAAS,qOAejBO,EAAAA,EAAAA,IAAKC,EAAAA,GAAAA,cAiCHC,EAAyB,CAClCC,WA5BeV,EAAAA,GAAAA,GAAAA,WAAS,6EAATA,CAAS,4PAEbK,EAAAA,EAAAA,IAAM,GAAI,IAErBD,EAAAA,EAAAA,OAAAA,SAKSG,EAAAA,EAAAA,IAAKC,EAAAA,GAAAA,cAOHH,EAAAA,EAAAA,IAAM,GAAI,IAGDM,EAAAA,EAAAA,KAAAA,QAClBC,EAAAA,EAAAA,IAAW,oBAGSD,EAAAA,EAAAA,KAAAA,QAMtBL,aACAP,YACAG,SC/DJ,EANyB,IAAsB,IAArB,MAAEW,EAAK,MAAEC,GAAO,EACtC,OAAQC,EAAAA,cAAoBC,EAAAA,UAAa,CAAEC,WAAY,SAAUC,MAAO,QACpEJ,GAASC,EAAAA,cAAoBC,EAAAA,MAAS,KAAMF,GAC5CD,GAAUE,EAAAA,cAAoBC,EAAAA,WAAc,KAAMH,EAAMM,KAAI,CAACC,EAAMC,IAAWN,EAAAA,cAAoBC,EAAAA,WAAc,CAAEM,IAAM,UAASD,KAC7HN,EAAAA,cAAoB,IAAK,CAAEQ,KAAO,IAAGH,EAAKI,YAAcJ,EAAKK,UAAW,C","sources":["webpack://royal-geographical-society/./src/stories/Components/Global/InPageNavigation/InPageNavigation.styles.ts","webpack://royal-geographical-society/./src/stories/Components/Global/InPageNavigation/InPageNavigation.tsx"],"sourcesContent":["import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport { headingStyles } from '@helpers/typography';\r\nimport styled from 'styled-components';\r\nimport SectionWrapper from '../SectionWrapper/SectionWrapper';\r\nconst Container = styled(SectionWrapper) `\r\n  margin-bottom: 30px;\r\n`;\r\nconst Title = styled.h2 `\r\n  ${headingStyles};\r\n\r\n  ${fonts.agBook.bold};\r\n  font-size: ${fluid(22, 38)};\r\n  line-height: ${fluid(28, 46)};\r\n  margin: 0 0 ${fluid(17, 20)};\r\n`;\r\nconst AnchorList = styled.ul `\r\n  list-style: none;\r\n  font-size: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  white-space: nowrap;\r\n  max-width: 100%;\r\n  overflow: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n\r\n  &::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 4px;\r\n  }\r\n`;\r\nconst AnchorItem = styled.li `\r\n  display: inline-block;\r\n  font-size: ${fluid(18, 20)};\r\n  line-height: 24px;\r\n  ${fonts.agBook.regular};\r\n\r\n  &:not(:last-child) {\r\n    margin-right: 4px;\r\n\r\n    @media ${from(Device.TabletSmall)} {\r\n      margin-right: 0;\r\n    }\r\n  }\r\n\r\n  > a {\r\n    display: block;\r\n    padding: ${fluid(12, 13)} 20px;\r\n    color: inherit;\r\n    text-decoration: none;\r\n    background-color: ${brand.grey.grey91};\r\n    ${transition('background-color')};\r\n\r\n    &:hover {\r\n      background-color: ${brand.grey.grey80};\r\n    }\r\n  }\r\n`;\r\nexport const InPageNavigationStyles = {\r\n    AnchorItem,\r\n    AnchorList,\r\n    Container,\r\n    Title,\r\n};\r\n","import React from 'react';\r\nimport { InPageNavigationStyles as S } from './InPageNavigation.styles';\r\nconst InPageNavigation = ({ items, title }) => {\r\n    return (React.createElement(S.Container, { innerWidth: \"narrow\", flush: \"both\" },\r\n        title && React.createElement(S.Title, null, title),\r\n        items && (React.createElement(S.AnchorList, null, items.map((item, index) => (React.createElement(S.AnchorItem, { key: `anchor-${index}` },\r\n            React.createElement(\"a\", { href: `#${item.anchorId}` }, item.text))))))));\r\n};\r\nexport default InPageNavigation;\r\n"],"names":["Container","styled","SectionWrapper","Title","headingStyles","fonts","fluid","AnchorList","from","Device","InPageNavigationStyles","AnchorItem","brand","transition","items","title","React","S","innerWidth","flush","map","item","index","key","href","anchorId","text"],"sourceRoot":""}