{"version":3,"file":"6037-78ab146ae4ea9d142d8a.js","mappings":"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","sources":["webpack://eploy/./src/hooks/useMedia.ts","webpack://eploy/./src/stories/Components/Misc/Pagination/Pagination.styles.ts","webpack://eploy/./src/stories/Components/Misc/Pagination/Pagination.tsx","webpack://eploy/./src/stories/Components/Cards/CategoryCard/CategoryCard.styles.ts","webpack://eploy/./src/stories/Components/Cards/CategoryCard/CategoryCard.tsx","webpack://eploy/./src/stories/Widgets/CategoryListCards/CategoryListCards.styles.ts","webpack://eploy/./src/stories/Widgets/CategoryListCards/CategoryListCards.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\n/**\r\n * Store a value in state based on the specified media queries.\r\n * @param {Array} queries\r\n * @param {Array} values\r\n * @param {T} defaultValue\r\n */\r\nfunction useMedia(queries, values, defaultValue) {\r\n // Function that gets value based on matching media query\r\n const getValue = () => {\r\n // Get index of first media query that matches\r\n const index = mediaQueryLists.findIndex((mql) => mql.matches);\r\n // Return related value or defaultValue if none\r\n return typeof values[index] !== 'undefined' ? values[index] : defaultValue;\r\n };\r\n // State and setter for matched value\r\n const [value, setValue] = useState(defaultValue);\r\n const [mediaQueryLists, setMediaQueryLists] = useState([]);\r\n useEffect(() => {\r\n // Array containing a media query list for each query\r\n setMediaQueryLists(queries.map((query) => window.matchMedia(query)));\r\n }, []);\r\n useEffect(() => {\r\n setValue(getValue);\r\n // Event listener callback\r\n // Note: By defining getValue outside of useEffect we ensure that it has ...\r\n // ... current values of hook args (as this hook callback is created once on mount).\r\n const handler = () => setValue(getValue);\r\n // Set a listener for each media query with above handler as callback.\r\n mediaQueryLists.forEach((mql) => mql.addListener(handler));\r\n // Remove listeners on cleanup\r\n return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));\r\n }, [mediaQueryLists]); // Empty array ensures effect is only run on mount and unmount\r\n return value;\r\n}\r\nexport default useMedia;\r\n","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 { ButtonReset } from '@helpers/global';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n\r\n @media ${until(Device.MobileLarge)} {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n @media ${from(Device.MobileLarge)} {\r\n justify-content: space-between;\r\n }\r\n`;\r\nconst PaginationControls = styled.div `\r\n display: flex;\r\n align-items: center;\r\n gap: ${fluid(0, 30)};\r\n\r\n @media ${until(Device.MobileLarge)} {\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n ul.pagination {\r\n display: flex;\r\n align-items: center;\r\n gap: ${fluid(6, 8)};\r\n\r\n li {\r\n --borderColour: transparent;\r\n --bgColour: ${brand.primary.stone};\r\n\r\n [data-disabled='true'] & {\r\n opacity: 0.75;\r\n pointer-events: none;\r\n }\r\n\r\n a {\r\n --size: ${fluid(33, 42)};\r\n width: var(--size);\r\n height: var(--size);\r\n\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n cursor: pointer;\r\n user-select: none;\r\n border-radius: 6px;\r\n\r\n ${fonts.poppins.extraBold};\r\n font-size: ${fluid(19, 23)};\r\n line-height: ${fluid(25, 30)};\r\n\r\n &.selected {\r\n --borderColour: ${brand.tertiary.teal};\r\n --bgColour: ${brand.primary.white};\r\n }\r\n\r\n &.break {\r\n --bgColour: transparent;\r\n }\r\n\r\n border: 3px solid var(--borderColour);\r\n background-color: var(--bgColour);\r\n\r\n ${transition('border, background-color, opacity', 0.25, 'ease-out')}\r\n }\r\n\r\n li.previous,\r\n li.next {\r\n display: none;\r\n }\r\n }\r\n`;\r\nconst PageDisplay = styled.small `\r\n font-size: 16px;\r\n line-height: 24px;\r\n user-select: none;\r\n\r\n ${fonts.poppins.regular};\r\n span {\r\n ${fonts.poppins.bold};\r\n }\r\n`;\r\nconst PageButton = styled.button `\r\n ${ButtonReset}\r\n\r\n &:disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n }\r\n\r\n &:first-child {\r\n transform: rotate(180deg);\r\n }\r\n\r\n ${ButtonStyles.Container} {\r\n --buttonHeight: ${fluid(38, 48)};\r\n --colourText: ${brand.primary.white};\r\n --bgColour: ${brand.tertiary.teal};\r\n\r\n --colourTextHover: ${brand.primary.black};\r\n --borderColour: ${brand.tertiary.teal};\r\n --borderWidth: 3px;\r\n }\r\n`;\r\nexport const PaginationStyles = {\r\n Container,\r\n PageButton,\r\n PageDisplay,\r\n PaginationControls,\r\n};\r\n","import { Device, until } from '@helpers/media';\r\nimport useMedia from '@hooks/useMedia';\r\nimport { FakeButton } from '@stories/Components/Buttons/Button/Button';\r\nimport React from 'react';\r\nimport ReactPaginate from 'react-paginate';\r\nimport { PaginationStyles as S } from './Pagination.styles';\r\nconst Pagination = ({ currentPage, pageCount, onChange, disabled, translations, }) => {\r\n const isMobile = useMedia([`${until(Device.MobileLarge)}`], [true], false);\r\n return (React.createElement(S.Container, { \"data-disabled\": disabled },\r\n React.createElement(S.PageDisplay, null,\r\n \"Page \",\r\n React.createElement(\"span\", null, currentPage),\r\n \" of \",\r\n React.createElement(\"span\", null, pageCount)),\r\n React.createElement(S.PaginationControls, null,\r\n React.createElement(S.PageButton, { disabled: currentPage === 1 || disabled, onClick: () => onChange(currentPage - 1), \"aria-label\": translations?.['listings.previousPage'] ?? 'Previous Page' },\r\n React.createElement(FakeButton, { buttonType: \"solid-white\", iconOnly: true })),\r\n React.createElement(ReactPaginate, { pageCount: pageCount, forcePage: currentPage - 1, pageRangeDisplayed: isMobile ? 1 : 2, marginPagesDisplayed: 1, breakLabel: \"...\", onPageChange: (s) => onChange(s.selected + 1), className: \"pagination\" }),\r\n React.createElement(S.PageButton, { disabled: currentPage === pageCount || disabled, onClick: () => onChange(currentPage + 1), \"aria-label\": translations?.['listings.nextPage'] ?? 'Next Page' },\r\n React.createElement(FakeButton, { buttonType: \"solid-white\", iconOnly: true })))));\r\n};\r\nexport default Pagination;\r\n","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 { contentStyles, paragraphSmall } from '@helpers/typography';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.a `\r\n padding: ${fluid(16, 24)};\r\n background-color: ${brand.primary.stone};\r\n color: ${brand.primary.black};\r\n border-radius: ${fluid(16, 24)};\r\n text-decoration: none;\r\n height: 100%;\r\n max-width: 504px;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n ${ButtonStyles.Container} {\r\n --bgColourHover: transparent;\r\n --buttonHeight: auto;\r\n }\r\n\r\n ${ButtonStyles.IconWrapper} {\r\n --iconHeight: ${fluid(24, 32)};\r\n\r\n svg {\r\n width: var(--iconHeight);\r\n }\r\n }\r\n`;\r\nconst ImageWrapper = styled.div `\r\n width: 100%;\r\n aspect-ratio: 312 / 208;\r\n border-radius: ${fluid(12, 16)};\r\n overflow: hidden;\r\n margin-bottom: 16px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center center;\r\n }\r\n\r\n @media ${from(Device.TabletLarge)} {\r\n aspect-ratio: 456 / 304;\r\n }\r\n`;\r\nconst TopSection = styled.div `\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 16px;\r\n gap: 15px;\r\n`;\r\nconst IconTitle = styled.div `\r\n display: flex;\r\n align-items: center;\r\n gap: ${fluid(8, 16)};\r\n overflow: hidden;\r\n`;\r\nconst Icon = styled.div `\r\n --size: ${fluid(40, 56)};\r\n\r\n width: var(--size);\r\n height: var(--size);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: ${brand.primary.white};\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n\r\n svg {\r\n --size: ${fluid(24, 40)};\r\n width: var(--size);\r\n height: var(--size);\r\n }\r\n`;\r\nconst Title = styled.span `\r\n ${transition('text-decoration-color', 0.25)};\r\n ${fonts.poppins.extraBold};\r\n\r\n font-size: ${fluid(18, 24)};\r\n line-height: 1.25;\r\n color: ${brand.primary.black};\r\n flex-grow: 1;\r\n text-overflow: ellipsis;\r\n text-decoration: underline;\r\n text-decoration-color: transparent;\r\n text-decoration-thickness: 2px;\r\n text-underline-offset: ${fluid(3, 4)};\r\n\r\n ${Container}:focus-visible &,\r\n ${Container}:hover & {\r\n text-decoration-color: currentColor;\r\n }\r\n`;\r\nconst Description = styled.div `\r\n ${contentStyles};\r\n\r\n p,\r\n li {\r\n ${paragraphSmall};\r\n }\r\n\r\n ul:not([style*='list-style-type']) li::before {\r\n top: ${fluid(5, 7.5)};\r\n }\r\n\r\n ol,\r\n ul {\r\n margin-top: ${fluid(14, 20)};\r\n margin-bottom: ${fluid(14, 20)};\r\n }\r\n`;\r\nexport const CategoryCardStyles = {\r\n Container,\r\n ImageWrapper,\r\n IconTitle,\r\n Icon,\r\n Title,\r\n TopSection,\r\n Description,\r\n};\r\n","import { Icon, getSvgIcon } from '@helpers/icons';\r\nimport { Device, until } from '@helpers/media';\r\nimport { FakeButton } from '@stories/Components/Buttons/Button/Button';\r\nimport React from 'react';\r\nimport { CategoryCardStyles as S } from './CategoryCard.styles';\r\nconst CategoryCard = ({ image, icon, heading, cta, summaryText, srcs, }) => {\r\n const sizes = `${until(Device.Tablet)} 90vw, 456px`;\r\n return (React.createElement(S.Container, { href: cta.url, target: '_blank' },\r\n React.createElement(S.ImageWrapper, null,\r\n React.createElement(\"img\", { src: srcs.src, srcSet: srcs.srcSet, sizes: sizes, loading: \"lazy\", alt: image?.altText, role: !image?.altText ? 'presentation' : undefined })),\r\n React.createElement(S.TopSection, null,\r\n React.createElement(S.IconTitle, null,\r\n React.createElement(S.Icon, null, getSvgIcon(icon)),\r\n React.createElement(S.Title, { title: heading }, heading)),\r\n React.createElement(FakeButton, { buttonType: \"text\", iconOnly: true, icon: Icon.ArrowThin })),\r\n summaryText && React.createElement(S.Description, { dangerouslySetInnerHTML: { __html: summaryText } })));\r\n};\r\nexport default CategoryCard;\r\n","import { verticalFadeIn } from '@helpers/animate';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { PaginationStyles } from '@stories/Components/Misc/Pagination/Pagination.styles';\r\nimport SectionWrapper from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport { m } from 'framer-motion';\r\nimport styled from 'styled-components';\r\nconst MotionWrapper = styled(m.div).attrs((props) => ({\r\n initial: 'hidden',\r\n animate: props['data-in-view'] ? 'visible' : 'hidden',\r\n transition: {\r\n staggerChildren: 0.1,\r\n },\r\n})) `\r\n display: contents;\r\n`;\r\nconst Container = styled(SectionWrapper) `\r\n ${PaginationStyles.Container} {\r\n margin-top: ${fluid(32, 44)};\r\n }\r\n`;\r\nconst CardMotionWrapper = styled(m.div).attrs(() => ({ variants: verticalFadeIn(20) })) `\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n`;\r\nexport const CategoryListCardsStyles = {\r\n Container,\r\n CardMotionWrapper,\r\n MotionWrapper,\r\n};\r\n","import { rootMargin } from '@helpers/animate';\r\nimport { getSrcs } from '@helpers/image';\r\nimport { withMotion } from '@hoc/withMotion';\r\nimport { useInView } from '@hooks/useInView';\r\nimport CardGrid from '@stories/Components/Cards/CardGrid/CardGrid';\r\nimport CategoryCard from '@stories/Components/Cards/CategoryCard/CategoryCard';\r\nimport Pagination from '@stories/Components/Misc/Pagination/Pagination';\r\nimport React from 'react';\r\nimport { CategoryListCardsStyles as S } from './CategoryListCards.styles';\r\nconst PAGE_SIZE = 9;\r\nconst CategoryListCards = ({ cards, pageContext, translations, }) => {\r\n const [containerRef, inView] = useInView({ rootMargin }, false, pageContext?.isEditMode);\r\n const [page, setPage] = React.useState(1);\r\n const pageCards = React.useMemo(() => {\r\n const start = (page - 1) * PAGE_SIZE;\r\n const end = start + PAGE_SIZE;\r\n return cards.slice(start, end);\r\n }, [cards, page]);\r\n return (React.createElement(S.MotionWrapper, { \"data-in-view\": inView },\r\n React.createElement(S.Container, { ref: containerRef, \"data-will\": true },\r\n React.createElement(CardGrid, { cardsPerRow: cards.length <= 3 ? cards.length : 3 }, pageCards.map((card, i) => {\r\n const srcs = cards.length >= 3\r\n ? getSrcs(card.image, 504, 344, 3, 504 / 356)\r\n : getSrcs(card.image, 636, 356, 3, 636 / 356);\r\n return (React.createElement(S.CardMotionWrapper, { key: `CategoryCard_${card.heading}_${i}` },\r\n React.createElement(CategoryCard, { ...card, srcs: srcs })));\r\n })),\r\n cards.length > PAGE_SIZE && (React.createElement(Pagination, { currentPage: page, pageCount: Math.ceil(cards.length / PAGE_SIZE), onChange: (p) => {\r\n setPage(p);\r\n /** timeout required to ensure scrolling occurs on prev/next buttons */\r\n setTimeout(() => containerRef.current?.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start',\r\n inline: 'start',\r\n }), 50);\r\n }, translations: translations })))));\r\n};\r\nexport default withMotion(CategoryListCards);\r\n"],"names":["queries","values","defaultValue","getValue","index","mediaQueryLists","findIndex","mql","matches","value","setValue","useState","setMediaQueryLists","useEffect","map","query","window","matchMedia","handler","forEach","addListener","removeListener","Container","styled","div","withConfig","displayName","componentId","until","Device","MobileLarge","from","PaginationControls","fluid","brand","primary","stone","fonts","poppins","extraBold","tertiary","teal","white","transition","PageDisplay","small","regular","bold","PaginationStyles","PageButton","button","ButtonReset","ButtonStyles","black","_ref","_translations$listing","_translations$listing2","currentPage","pageCount","onChange","disabled","translations","isMobile","useMedia","React","S","onClick","FakeButton","buttonType","iconOnly","ReactPaginate","forcePage","pageRangeDisplayed","marginPagesDisplayed","breakLabel","onPageChange","s","selected","className","a","IconWrapper","ImageWrapper","TabletLarge","TopSection","CategoryCardStyles","IconTitle","Icon","Title","span","Description","contentStyles","paragraphSmall","image","icon","heading","cta","summaryText","srcs","sizes","Tablet","href","url","target","src","srcSet","loading","alt","altText","role","undefined","getSvgIcon","title","ArrowThin","dangerouslySetInnerHTML","__html","MotionWrapper","m","attrs","props","initial","animate","staggerChildren","CategoryListCardsStyles","SectionWrapper","CardMotionWrapper","variants","verticalFadeIn","withMotion","cards","pageContext","containerRef","inView","useInView","rootMargin","isEditMode","page","setPage","pageCards","start","end","slice","ref","CardGrid","cardsPerRow","length","card","i","getSrcs","key","CategoryCard","Pagination","Math","ceil","p","setTimeout","_containerRef$current","current","scrollIntoView","behavior","block","inline"],"sourceRoot":""}