{"version":3,"sources":["webpack:///./src/helpers/media.ts","webpack:///./src/hooks/useIntersectionObserver.ts","webpack:///./src/hooks/useInView.ts","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/brand.js","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/fonts.js","webpack:///./node_modules/@tti/brand-empire/dist/esm/helpers/grids.js","webpack:///./src/helpers/columns.ts","webpack:///./src/stories/Widgets/Navigation/Breadcrumb/Breadcrumb.styles.ts","webpack:///./src/stories/Widgets/Navigation/Breadcrumb/Breadcrumb.tsx","webpack:///./src/helpers/animation.ts","webpack:///./src/helpers/grids.ts"],"names":["Device","from","size","until","useIntersectionObserver","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","useState","inView","setInView","entries","isIntersecting","blue","base","light","dark","white","black","grey","11","7","1","helveticaConfig","family","weight","style","font","helvetica","ls","value","sitePadding","Default","FullWidth","css","Content","Tablet","DesktopLarge","ContentWide","BreadcrumbStyles","Container","styled","section","grids","Items","div","columns","fadeInUp","animation","easeInOutCubic","ItemWrapper","fonts","brand","Item","a","Breadcrumb","items","pageContext","threshold","React","createElement","s","ref","map","item","index","key","href","url","dangerouslySetInnerHTML","__html","name","keyframes","fadeIn","duration","delay","easingFunc","amount","slideUp","order","animateOnExit","baseFixed","SitePadding","TabletLarge","DesktopSmall","SitePaddingBreakoutLeft","SitePaddingBreakoutRight","SitePaddingBreakout","Fixed"],"mappings":"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","file":"Breadcrumb-6d0884759150ebda73bb.js","sourcesContent":["export var Device;\r\n(function (Device) {\r\n    Device[Device[\"MobileSmall\"] = 320] = \"MobileSmall\";\r\n    Device[Device[\"Mobile\"] = 375] = \"Mobile\";\r\n    Device[Device[\"MobileLarge\"] = 480] = \"MobileLarge\";\r\n    Device[Device[\"Tablet\"] = 768] = \"Tablet\";\r\n    Device[Device[\"TabletLarge\"] = 1024] = \"TabletLarge\";\r\n    Device[Device[\"DesktopSmall\"] = 1280] = \"DesktopSmall\";\r\n    Device[Device[\"Desktop\"] = 1366] = \"Desktop\";\r\n    Device[Device[\"DesktopLarge\"] = 1600] = \"DesktopLarge\";\r\n    Device[Device[\"ActualDesktop\"] = 1920] = \"ActualDesktop\";\r\n    Device[Device[\"DesktopXL\"] = 2560] = \"DesktopXL\";\r\n})(Device || (Device = {}));\r\nexport function from(size) {\r\n    return `(min-width: ${size}px)`;\r\n}\r\nexport function until(size) {\r\n    return `(max-width: ${size - 1}px)`;\r\n}\r\n","import { useEffect, useRef } from 'react';\r\n/**\r\n * Use the IntersectionObserver to track visibility of an element in the viewport.\r\n * @param {IntersectionObserverCallback} callback\r\n * @param {IntersectionObserverInit} options\r\n * @returns {UseIntersectionObserverReturn}\r\n */\r\nfunction useIntersectionObserver(callback, options = {}) {\r\n    const observerRef = useRef(null);\r\n    const rootRef = useRef(null);\r\n    const elementRef = useRef(null);\r\n    useEffect(() => {\r\n        if (!elementRef.current) {\r\n            return undefined;\r\n        }\r\n        observerRef.current = new IntersectionObserver(callback, {\r\n            root: rootRef.current,\r\n            ...options,\r\n        });\r\n        observerRef.current.observe(elementRef.current);\r\n        return () => {\r\n            if (observerRef.current === null) {\r\n                return;\r\n            }\r\n            observerRef.current.disconnect();\r\n        };\r\n    }, [callback, options]);\r\n    return { elementRef, observerRef, rootRef };\r\n}\r\nexport default useIntersectionObserver;\r\n","import { useState } from 'react';\r\nimport useIntersectionObserver from './useIntersectionObserver';\r\nexport function useInView(options, reverse = false, isEditMode = false) {\r\n    const [inView, setInView] = useState(false);\r\n    const { elementRef } = useIntersectionObserver((entries) => {\r\n        if (entries[0].isIntersecting) {\r\n            setInView(true);\r\n        }\r\n        else if (reverse === true) {\r\n            setInView(false);\r\n        }\r\n    }, options);\r\n    return [elementRef, isEditMode ? true : inView];\r\n}\r\n","export default {\r\n    blue: {\r\n        base: '#006eaf',\r\n        light: '#007cf9',\r\n        dark: '#00578b',\r\n    },\r\n    white: '#fff',\r\n    black: '#2c2a29',\r\n    grey: {\r\n        11: '#53565a',\r\n        7: '#97999b',\r\n        1: '#EDEDED',\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nexport const helveticaConfig = {\r\n    ['57-condensed']: {\r\n        family: 'Helvetica Neue LT W05_57 Cond',\r\n        weight: 400,\r\n        style: 'normal',\r\n    },\r\n    ['77-condensed-bold']: {\r\n        family: 'Helvetica Neue LT W05_77 Bd Cn',\r\n        weight: 700,\r\n        style: 'normal',\r\n    },\r\n    ['87-condensed-heavy']: {\r\n        family: 'Helvetica Neue LT W05_87 Hv Cn',\r\n        weight: 900,\r\n        style: 'normal',\r\n    },\r\n};\r\n// TODO: I can't for the life of me get the return type of this function to play nicely with styled components when importing, leaving this for now\r\nfunction font(family, weight, style) {\r\n    return css `\r\n    font-family: ${family};\r\n    font-weight: ${weight};\r\n    font-style: ${style};\r\n  `;\r\n}\r\nexport default {\r\n    helvetica: {\r\n        ['57-condensed']: font(helveticaConfig['57-condensed'].family, helveticaConfig['57-condensed'].weight, helveticaConfig['57-condensed'].style),\r\n        ['77-condensed-bold']: font(helveticaConfig['77-condensed-bold'].family, helveticaConfig['77-condensed-bold'].weight, helveticaConfig['77-condensed-bold'].style),\r\n        ['87-condensed-heavy']: font(helveticaConfig['87-condensed-heavy'].family, helveticaConfig['87-condensed-heavy'].weight, helveticaConfig['87-condensed-heavy'].style),\r\n    },\r\n    ls: (value) => {\r\n        return `calc(${value / 1000} * 1em)`;\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nconst base = css `\r\n  display: grid;\r\n  grid-gap: 16px;\r\n  width: 100%;\r\n`;\r\nconst sitePadding = css `\r\n  padding: 18px 0px;\r\n\r\n  @media (min-width: 768px) {\r\n    padding: 170px;\r\n  }\r\n`;\r\nconst Default = css `\r\n  ${base};\r\n  ${sitePadding};\r\n`;\r\nexport default {\r\n    Default,\r\n};\r\n","import { css } from 'styled-components';\r\nimport { from, Device } from './media';\r\nconst FullWidth = css `\r\n  grid-column: span 12;\r\n`;\r\nconst Content = css `\r\n  grid-column: span 12;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    grid-column: 3 / span 8;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 4 / span 6;\r\n  }\r\n`;\r\nconst ContentWide = css `\r\n  grid-column: span 12;\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 3 / span 8;\r\n  }\r\n`;\r\nexport default {\r\n    FullWidth,\r\n    Content,\r\n    ContentWide,\r\n};\r\n","import animation, { fadeInUp } from '@helpers/animation';\r\nimport columns from '@helpers/columns';\r\nimport grids from '@helpers/grids';\r\nimport { from, Device } from '@helpers/media';\r\nimport { brand, fonts } from '@tti/brand-empire';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  ${grids.Default};\r\n`;\r\nconst Items = styled.div `\r\n  ${columns.FullWidth};\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  padding: 16px 0;\r\n  gap: 8px 4px;\r\n\r\n  ${({ inView }) => fadeInUp(inView, 20, 600, 0, animation.easeInOutCubic)};\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    gap: 8px;\r\n    padding: 24px 0;\r\n  }\r\n`;\r\nconst ItemWrapper = styled.div `\r\n  ${fonts.helvetica['57-condensed']};\r\n  font-size: 14px;\r\n  line-height: 20px;\r\n  color: ${brand.grey[11]};\r\n  display: flex;\r\n  gap: 4px;\r\n\r\n  &::after {\r\n    content: '|';\r\n    display: inline-block;\r\n    color: ${brand.grey[11]};\r\n  }\r\n\r\n  &:last-child {\r\n    ${fonts.helvetica['77-condensed-bold']};\r\n\r\n    &::after {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    font-size: 16px;\r\n    line-height: 22px;\r\n    gap: 8px;\r\n  }\r\n`;\r\nconst Item = styled.a `\r\n  text-decoration: none;\r\n  color: inherit;\r\n  position: relative;\r\n\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: -1px;\r\n    width: 100%;\r\n    height: 0px;\r\n    border-bottom: 1px solid ${brand.black};\r\n    transition: transform 0.25s ${animation.easeInOutCubic};\r\n    transform: scaleX(0);\r\n  }\r\n\r\n  &:hover {\r\n    &::after {\r\n      transform: scaleX(1);\r\n    }\r\n  }\r\n`;\r\nexport const BreadcrumbStyles = {\r\n    Container,\r\n    Items,\r\n    ItemWrapper,\r\n    Item,\r\n};\r\n","import { useInView } from '@hooks/useInView';\r\nimport React from 'react';\r\nimport { BreadcrumbStyles as s } from './Breadcrumb.styles';\r\nconst Breadcrumb = ({ items, pageContext: { isEditMode } }) => {\r\n    const [elementRef, inView] = useInView({ threshold: 0.35 }, false, isEditMode);\r\n    return (React.createElement(s.Container, { ref: elementRef },\r\n        React.createElement(s.Items, { inView: inView }, items.map((item, index) => (React.createElement(s.ItemWrapper, { key: `breadcrumb-item-${index}` },\r\n            React.createElement(s.Item, { href: item.url, dangerouslySetInnerHTML: { __html: item.name } })))))));\r\n};\r\nexport default Breadcrumb;\r\n","import { css, keyframes } from 'styled-components';\r\nconst easeInOutCubic = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\r\nexport default {\r\n    easeInOutCubic,\r\n};\r\nconst reset = keyframes `\r\n  100% {\r\n    transform: translate(0%, 0%);\r\n    opacity: 1;\r\n  }\r\n`;\r\nexport function fadeInLeft(amount, duration, delay, easingFunc) {\r\n    return css `\r\n    opacity: 0;\r\n    transform: translateX(-${amount}px);\r\n    animation: ${reset} ${duration}ms ${delay}ms ${easingFunc} forwards;\r\n  `;\r\n}\r\nexport function fadeIn(inView, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n        `}\r\n  `;\r\n}\r\nexport function fadeInUp(inView, amount, duration, delay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc}, transform ${duration}ms ${delay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          transform: none;\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          transform: translateY(${amount}px);\r\n        `}\r\n  `;\r\n}\r\nexport function slideUp(inView, order, delay = 300, easingFunc = easeInOutCubic, animateOnExit = true) {\r\n    if (inView) {\r\n        return css `\r\n      transform: translateY(0%);\r\n      transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n    `;\r\n    }\r\n    else if (animateOnExit) {\r\n        return css `\r\n      transform: translateY(120%);\r\n      transition: transform 650ms ${delay + order * 100}ms ${easingFunc};\r\n    `;\r\n    }\r\n    else {\r\n        return css `\r\n      transform: translateY(120%);\r\n    `;\r\n    }\r\n}\r\nexport function greyscaleImgFade(inView, duration, delay, filterDelay, easingFunc) {\r\n    return css `\r\n    transition: opacity ${duration}ms ${delay}ms ${easingFunc}, filter ${duration}ms ${filterDelay}ms ${easingFunc};\r\n\r\n    ${inView\r\n        ? css `\r\n          opacity: 1;\r\n          filter: grayscale(0);\r\n        `\r\n        : css `\r\n          opacity: 0;\r\n          filter: grayscale(1);\r\n        `}\r\n  `;\r\n}\r\n","import { css } from 'styled-components';\r\nimport { Device, from } from './media';\r\nconst base = css `\r\n  display: grid;\r\n  grid-gap: 16px;\r\n  width: 100%;\r\n  grid-template-columns: repeat(12, 1fr);\r\n`;\r\nconst baseFixed = css `\r\n  display: grid;\r\n  grid-gap: 16px;\r\n  width: 100%;\r\n  // 78px being the width of one column at 375 of the base grid above\r\n  grid-auto-columns: 78px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    // 117px being the width of one column at 1920 of the base grid above\r\n    grid-auto-columns: 117px;\r\n  }\r\n`;\r\nexport const SitePadding = css `\r\n  padding-left: 18px;\r\n  padding-right: 18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    padding-left: 40px;\r\n    padding-right: 40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 70px;\r\n    padding-right: 70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    padding-left: 130px;\r\n    padding-right: 130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    padding-left: 170px;\r\n    padding-right: 170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakoutLeft = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-left: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-left: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-left: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-left: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-left: -170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakoutRight = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-right: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-right: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-right: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-right: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-right: -170px;\r\n  }\r\n`;\r\nconst SitePaddingBreakout = css `\r\n  left: 0;\r\n  right: 0px;\r\n  grid-column: span 12;\r\n  margin-left: -18px;\r\n  margin-right: -18px;\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    margin-left: -40px;\r\n    margin-right: -40px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    margin-left: -70px;\r\n    margin-right: -70px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    margin-left: -130px;\r\n    margin-right: -130px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    margin-left: -170px;\r\n    margin-right: -170px;\r\n  }\r\n`;\r\nconst Default = css `\r\n  ${base};\r\n  ${SitePadding};\r\n`;\r\nconst Fixed = css `\r\n  ${baseFixed};\r\n`;\r\nexport default {\r\n    Default,\r\n    Fixed,\r\n    SitePaddingBreakout,\r\n    SitePaddingBreakoutLeft,\r\n    SitePaddingBreakoutRight,\r\n    base,\r\n};\r\n"],"sourceRoot":""}