{"version":3,"sources":["webpack:///./node_modules/react-use/esm/misc/util.js","webpack:///./src/stories/Widgets/SignpostCardsSection/SignpostCardsSection.styles.ts","webpack:///./src/stories/Widgets/SignpostCardsSection/SignpostCardsSection.tsx","webpack:///./node_modules/react-use/esm/useMedia.js"],"names":["on","obj","args","_i","arguments","length","addEventListener","apply","off","removeEventListener","isBrowser","window","SignpostCardsSectionStyles","Container","styled","SectionWrapper","CarouselWrapper","div","CarouselSpacing","from","Device","TabletSmall","SimpleTrackStyles","Track","Desktop","Item","li","until","MobileLarge","ControlsWrapper","SignpostCardsSection","anchorId","cards","columnCount","rest","imgSizes","TabletLarge","DesktopLarge","enableCarousel","useMedia","React","CarouselProvider","count","S","id","SectionHeader","Connected","carousel","SimpleTrack","initCarousel","mobileOnly","map","card","i","key","activeIndex","SignpostCard","Controls","paginationTitle","wrap","query","defaultState","_a","undefined","matchMedia","matches","getInitialState","state","setState","mounted","mql","onChange","addListener","removeListener"],"mappings":"wFAAA,sGACO,SAASA,EAAGC,GAEf,IADA,IAAIC,EAAO,GACFC,EAAK,EAAGA,EAAKC,UAAUC,OAAQF,IACpCD,EAAKC,EAAK,GAAKC,UAAUD,GAEzBF,GAAOA,EAAIK,kBACXL,EAAIK,iBAAiBC,MAAMN,EAAKC,GAGjC,SAASM,EAAIP,GAEhB,IADA,IAAIC,EAAO,GACFC,EAAK,EAAGA,EAAKC,UAAUC,OAAQF,IACpCD,EAAKC,EAAK,GAAKC,UAAUD,GAEzBF,GAAOA,EAAIQ,qBACXR,EAAIQ,oBAAoBF,MAAMN,EAAKC,GAGpC,IAAIQ,EAA8B,oBAAXC,Q,0IC8CfC,MANoB,CAC/BC,UAvDcC,YAAOC,KAAV,2FAAGD,CAAH,qDAwDXE,gBApDoBF,IAAOG,IAAV,iGAAGH,CAAH,uPAGHI,EACCA,EAERC,YAAKC,IAAOC,aAIjBC,IAAkBC,MAObJ,YAAKC,IAAOI,SACjBF,IAAkBC,OAmCpBE,KA1BSX,IAAOY,GAAV,sFAAGZ,CAAH,oJAIKI,EAIJS,YAAMP,IAAOQ,aAMbT,YAAKC,IAAOC,cAanBQ,gBAToBf,IAAOG,IAAV,iGAAGH,CAAH,8BACVK,YAAKC,IAAOC,eC9BRS,UAfc,IAAmD,IAAlD,SAAEC,EAAF,MAAYC,EAAZ,YAAmBC,EAAc,KAAMC,GAAW,EAC5E,MAAMC,EAAY,GAAER,YAAMP,IAAOC,uBAAuBM,YAAMP,IAAOgB,sBAAsC,IAAhBH,EACpF,GAAEN,YAAMP,IAAOI,oBAAoBG,YAAMP,IAAOiB,4BAC9CV,YAAMP,IAAOiB,cAAf,mBAEDC,EAAiBC,YAASZ,YAAMP,IAAOC,cAAc,GAC3D,OAAQmB,gBAAoBC,IAAkB,CAAEC,MAAOV,EAAM3B,QACzDmC,gBAAoBG,EAAE9B,UAAW,CAAE+B,GAAIb,EAAU,oBAAqBE,GAClEO,gBAAoBK,IAAe,IAAKX,IACxCM,gBAAoBG,EAAE3B,gBAAiB,KACnCwB,gBAAoBM,IAAW,KAAOC,GAAcP,gBAAoBQ,IAAa,CAAEC,aAAcX,EAAgBY,YAAY,GAAQlB,EAAMmB,IAAI,CAACC,EAAMC,IAAOb,gBAAoBG,EAAElB,KAAM,CAAE6B,IAAM,iBAAgBF,EAAKR,GAAM,mBAAoBG,EAASQ,cAAgBF,GACzQb,gBAAoBgB,IAAc,IAAKJ,EAAMjB,SAAUA,SAC/DK,gBAAoBG,EAAEd,gBAAiB,KACnCW,gBAAoBiB,IAAU,CAAEC,gBAAiB,2CAA4CC,MAAM,S,gCCvBnH,oBAoCe,IApBA,SAAUC,EAAOC,GAC5B,IAAIC,EAAK,mBAfS,SAAUF,EAAOC,GAEnC,YAAqBE,IAAjBF,EACOA,IAEP,KACOlD,OAAOqD,WAAWJ,GAAOK,QASlBC,CAAgBN,EAAOC,IAAgBM,EAAQL,EAAG,GAAIM,EAAWN,EAAG,GAiBtF,OAhBA,qBAAU,WACN,IAAIO,GAAU,EACVC,EAAM3D,OAAOqD,WAAWJ,GACxBW,EAAW,WACNF,GAGLD,IAAWE,EAAIL,UAInB,OAFAK,EAAIE,YAAYD,GAChBH,EAASE,EAAIL,SACN,WACHI,GAAU,EACVC,EAAIG,eAAeF,MAExB,CAACX,IACGO","file":"118-740eef735ffb584b9593.js","sourcesContent":["export var noop = function () { };\nexport function on(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.addEventListener) {\n        obj.addEventListener.apply(obj, args);\n    }\n}\nexport function off(obj) {\n    var args = [];\n    for (var _i = 1; _i < arguments.length; _i++) {\n        args[_i - 1] = arguments[_i];\n    }\n    if (obj && obj.removeEventListener) {\n        obj.removeEventListener.apply(obj, args);\n    }\n}\nexport var isBrowser = typeof window !== 'undefined';\nexport var isNavigator = typeof navigator !== 'undefined';\n","import { Device, from, until } from '@helpers/media';\r\nimport SimpleTrackStyles from '@stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack.styles';\r\nimport SectionWrapper from '@stories/Components/SectionWrapper/SectionWrapper';\r\nimport styled from 'styled-components';\r\nconst CarouselSpacing = 12;\r\nconst Container = styled(SectionWrapper) `\r\n  margin: var(--sectionSpacing) 0;\r\n  overflow: hidden;\r\n`;\r\nconst CarouselWrapper = styled.div `\r\n  /* Adjust the left/right margin of the carousel wrapper by the amount of padding \r\n  added to cards and track wrapper to ensure that the width is correct */\r\n  margin-left: -${CarouselSpacing / 2}px;\r\n  margin-right: -${CarouselSpacing / 2}px;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n\r\n    ${SimpleTrackStyles.Track} {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 32px 30px;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    ${SimpleTrackStyles.Track} {\r\n      gap: 45px 40px;\r\n\r\n      [data-column-count='3'] & {\r\n        grid-template-columns: repeat(3, 1fr);\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst Item = styled.li `\r\n  flex: 0 0 100%;\r\n\r\n  /* Ensure spacing between cards */\r\n  padding: 0 ${CarouselSpacing / 2}px;\r\n\r\n  /* Required to ensure that item stays visible while carousel animates */\r\n  transition: visibility 0.5s ease;\r\n  @media ${until(Device.MobileLarge)} {\r\n    &[data-active-item='false'] {\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    padding: 0;\r\n  }\r\n`;\r\nconst ControlsWrapper = styled.div `\r\n  @media ${from(Device.TabletSmall)} {\r\n    display: none;\r\n  }\r\n`;\r\nconst SignpostCardsSectionStyles = {\r\n    Container,\r\n    CarouselWrapper,\r\n    Item,\r\n    ControlsWrapper,\r\n};\r\nexport default SignpostCardsSectionStyles;\r\n","import { Device, until } from '@helpers/media';\r\nimport CarouselProvider from '@stories/Components/Misc/Carousel/CarouselProvider/CarouselProvider';\r\nimport Connected from '@stories/Components/Misc/Carousel/Connected/Connected';\r\nimport Controls from '@stories/Components/Misc/Carousel/Controls/Controls';\r\nimport SimpleTrack from '@stories/Components/Misc/Carousel/SimpleTrack/SimpleTrack';\r\nimport SectionHeader from '@stories/Components/SectionHeader/SectionHeader';\r\nimport SignpostCard from '@stories/Components/SignpostCard/SignpostCard';\r\nimport * as React from 'react';\r\nimport useMedia from 'react-use/esm/useMedia';\r\nimport S from './SignpostCardsSection.styles';\r\nconst SignpostCardsSection = ({ anchorId, cards, columnCount = 2, ...rest }) => {\r\n    const imgSizes = `${until(Device.TabletSmall)} 100vw, ${until(Device.TabletLarge)} 50vw, ${columnCount === 3\r\n        ? `${until(Device.Desktop)} 37.5vw, ${until(Device.DesktopLarge)} 25vw, 388px`\r\n        : `${until(Device.DesktopLarge)} 37.5vw, 601px`}`;\r\n    // Only want carousel behavior on mobile layout.\r\n    const enableCarousel = useMedia(until(Device.TabletSmall), false);\r\n    return (React.createElement(CarouselProvider, { count: cards.length },\r\n        React.createElement(S.Container, { id: anchorId, \"data-column-count\": columnCount },\r\n            React.createElement(SectionHeader, { ...rest }),\r\n            React.createElement(S.CarouselWrapper, null,\r\n                React.createElement(Connected, null, (carousel) => (React.createElement(SimpleTrack, { initCarousel: enableCarousel, mobileOnly: true }, cards.map((card, i) => (React.createElement(S.Item, { key: `signpost-card-${card.id}`, \"data-active-item\": carousel.activeIndex === i },\r\n                    React.createElement(SignpostCard, { ...card, imgSizes: imgSizes })))))))),\r\n            React.createElement(S.ControlsWrapper, null,\r\n                React.createElement(Controls, { paginationTitle: \"Signpost Cards Section carousel controls\", wrap: false })))));\r\n};\r\nexport default SignpostCardsSection;\r\n","import { useEffect, useState } from 'react';\nimport { isBrowser } from './misc/util';\nvar getInitialState = function (query, defaultState) {\n    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.\n    if (defaultState !== undefined) {\n        return defaultState;\n    }\n    if (isBrowser) {\n        return window.matchMedia(query).matches;\n    }\n    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.\n    if (process.env.NODE_ENV !== 'production') {\n        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');\n    }\n    return false;\n};\nvar useMedia = function (query, defaultState) {\n    var _a = useState(getInitialState(query, defaultState)), state = _a[0], setState = _a[1];\n    useEffect(function () {\n        var mounted = true;\n        var mql = window.matchMedia(query);\n        var onChange = function () {\n            if (!mounted) {\n                return;\n            }\n            setState(!!mql.matches);\n        };\n        mql.addListener(onChange);\n        setState(mql.matches);\n        return function () {\n            mounted = false;\n            mql.removeListener(onChange);\n        };\n    }, [query]);\n    return state;\n};\nexport default useMedia;\n"],"sourceRoot":""}