{"version":3,"file":"9405-74e8098d8d9b14603a02.js","mappings":"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","sources":["webpack://brc/./src/helpers/srOnly.ts","webpack://brc/./src/hoc/withMotion.tsx","webpack://brc/./src/stories/Components/Buttons/Button/Button.styles.ts","webpack://brc/./src/stories/Components/Buttons/Button/Button.tsx","webpack://brc/./src/stories/Widgets/Global/ScrollArrow/ScrollArrow.styles.ts","webpack://brc/./src/stories/Widgets/Global/ScrollArrow/ScrollArrow.tsx","webpack://brc/./src/hooks/useScrollDirection.ts"],"sourcesContent":["import { css } from 'styled-components';\r\n/**\r\n * Show only for screen readers.\r\n * @description Sourced from https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034\r\n */\r\nconst srOnly = css `\r\n  border: 0 !important;\r\n  clip: rect(1px, 1px, 1px, 1px) !important;\r\n  -webkit-clip-path: inset(50%) !important;\r\n  clip-path: inset(50%) !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  overflow: hidden !important;\r\n  padding: 0 !important;\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  white-space: nowrap !important;\r\n`;\r\nexport default srOnly;\r\n","import { domAnimation, LazyMotion } from 'framer-motion';\r\nimport React from 'react';\r\nexport function withMotion(WrappedComponent) {\r\n    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';\r\n    const ComponentWithMotion = (props) => {\r\n        return (React.createElement(LazyMotion, { features: domAnimation, strict: true },\r\n            React.createElement(WrappedComponent, { ...props })));\r\n    };\r\n    ComponentWithMotion.displayName = `withMotion(${displayName})`;\r\n    return ComponentWithMotion;\r\n}\r\n","import { transition } from '@helpers/animate';\r\nimport brand, { BrandColours } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { InterfaceIcon } from '@helpers/icons';\r\nimport { Device, until } from '@helpers/media';\r\nimport srOnly from '@helpers/srOnly';\r\nimport { BackgroundVariant } from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport { rgba } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nexport const CommonButtonTextStyles = css `\r\n  ${transition('color', 0.25)};\r\n  ${fonts.lato.bold};\r\n\r\n  color: currentColor;\r\n  font-size: var(--fontSize);\r\n  line-height: 1.5;\r\n  text-decoration: none;\r\n`;\r\nconst Text = styled.span `\r\n  ${CommonButtonTextStyles};\r\n\r\n  [data-icon-only='true'] & {\r\n    ${srOnly};\r\n  }\r\n`;\r\nconst IconWrapper = styled.div `\r\n  ${transition('color', 0.25)};\r\n\r\n  --iconHeight: 24px;\r\n\r\n  display: grid;\r\n  place-content: center;\r\n  color: currentColor;\r\n  height: var(--iconHeight);\r\n  aspect-ratio: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  > svg {\r\n    display: block;\r\n    height: var(--iconHeight);\r\n  }\r\n\r\n  [data-icon-position='left'] & {\r\n    order: -1;\r\n  }\r\n\r\n  [data-icon-position='right'] & {\r\n    order: 1;\r\n  }\r\n\r\n  [data-icon-type=${InterfaceIcon.ArrowRight}] & {\r\n    ${transition('transform, color', 0.25)};\r\n  }\r\n\r\n  [data-icon-type=${InterfaceIcon.Close}] & {\r\n    --iconHeight: 12px;\r\n  }\r\n\r\n  [data-icon-position='left'][data-icon-type=${InterfaceIcon.ArrowRight}] & {\r\n    svg {\r\n      transform: scale(-1);\r\n    }\r\n  }\r\n`;\r\nconst IconHoverStyles = css `\r\n  &[data-icon-type=${InterfaceIcon.ArrowRight}] {\r\n    ${IconWrapper} {\r\n      transform: translateX(4px);\r\n    }\r\n  }\r\n\r\n  &[data-icon-position='left'][data-icon-type=${InterfaceIcon.ArrowRight}] {\r\n    ${IconWrapper} {\r\n      transform: translateX(-4px);\r\n    }\r\n  }\r\n`;\r\nexport const DefaultButtonStyles = css `\r\n  ${ButtonReset};\r\n  ${transition('background-color, color', 0.25)};\r\n\r\n  --bgColour: ${brand.secondary.yellow.light};\r\n  --bgColourActive: var(--bgColourHover);\r\n  --bgColourDisabled: ${brand.grey.light};\r\n  --bgColourHover: ${brand.secondary.yellow.dark};\r\n  --borderColorActive: var(--bgColourActive);\r\n  --borderColorHover: var(--bgColourHover);\r\n  --borderColour: var(--bgColour);\r\n  --borderColourDisabled: var(--bgColourDisabled);\r\n  --borderRadius: 50px;\r\n  --borderWidth: 1px;\r\n  --buttonHeight: ${fluid(44, 64)};\r\n  --colourText: ${brand.global.black};\r\n  --colourTextDisabled: ${brand.grey.dark};\r\n  --colourTextHover: var(--colourText);\r\n  --fontSize: ${fluid(15, 16)};\r\n\r\n  display: inline-flex;\r\n  gap: ${fluid(8, 12)};\r\n  align-items: center;\r\n  border: var(--borderWidth) solid var(--borderColour);\r\n  background: none;\r\n  background-color: var(--bgColour);\r\n  background-position: top center;\r\n  color: var(--colourText);\r\n  min-height: var(--buttonHeight);\r\n  padding: 8px ${fluid(16, 20)};\r\n  text-decoration: none;\r\n  user-select: none;\r\n  width: auto;\r\n  border-radius: var(--borderRadius);\r\n\r\n  /* Mobile click styles - button should mimic press */\r\n  @media ${until(Device.TabletLarge)} {\r\n    ${transition('background-color, color, transform', 0.15)};\r\n\r\n    &:active {\r\n      transform: translateY(1.5px);\r\n    }\r\n  }\r\n\r\n  span& {\r\n    .focus-ring & {\r\n      outline: auto;\r\n      outline-offset: 3px;\r\n      outline-width: 2px;\r\n    }\r\n\r\n    .focus-ring &,\r\n    button:hover &,\r\n    a:hover &,\r\n    label:hover & {\r\n      ${IconHoverStyles};\r\n\r\n      color: var(--colourTextHover);\r\n      background-color: var(--bgColourHover);\r\n      border-color: var(--borderColorHover);\r\n    }\r\n\r\n    button:active &,\r\n    a:active & {\r\n      background-color: var(--bgColourActive);\r\n      border-color: var(--borderColorActive);\r\n      color: var(--colourTextHover);\r\n    }\r\n  }\r\n\r\n  &:not(span) {\r\n    cursor: pointer;\r\n\r\n    &:focus-visible,\r\n    &.focus-ring {\r\n      outline: auto;\r\n      outline-offset: 3px;\r\n      outline-width: 2px;\r\n    }\r\n\r\n    &:focus-visible,\r\n    &.focus-ring,\r\n    &:hover {\r\n      ${IconHoverStyles};\r\n\r\n      color: var(--colourTextHover);\r\n      background-color: var(--bgColourHover);\r\n      border-color: var(--borderColorHover);\r\n    }\r\n\r\n    &:active {\r\n      background-color: var(--bgColourActive);\r\n      border-color: var(--borderColorActive);\r\n      color: var(--colourTextHover);\r\n    }\r\n  }\r\n\r\n  /* Increase specificity to override :not(span) style */\r\n  &[aria-disabled='true'][aria-disabled='true'][aria-disabled='true'],\r\n  &:disabled:disabled:disabled {\r\n    color: var(--colourTextDisabled);\r\n    background-color: var(--bgColourDisabled);\r\n    border-color: var(--borderColourDisabled);\r\n\r\n    cursor: not-allowed;\r\n\r\n    ${IconWrapper} {\r\n      transform: none;\r\n    }\r\n  }\r\n`;\r\nexport const SecondaryButtonStyles = css `\r\n  --bgColour: transparent;\r\n  --bgColourActive: ${brand.primary.purple.dark};\r\n  --bgColourDisabled: transparent;\r\n  --bgColourHover: var(--colourText);\r\n  --borderColorActive: var(--bgColourActive);\r\n  --borderColorHover: var(--bgColourHover);\r\n  --borderColour: var(--colourText);\r\n  --borderColourDisabled: var(--colourTextDisabled);\r\n  --colourText: ${brand.primary.purple.light};\r\n  --colourTextDisabled: ${brand.grey.dark};\r\n  --colourTextHover: ${brand.global.white};\r\n\r\n  [data-variant=${BrandColours.OrangeMid}] &,\r\n  [data-variant=${BrandColours.OrangeDark}] &,\r\n  [data-variant=${BrandColours.GreenDark}] &,\r\n  [data-variant=${BrandColours.PinkDark}] &,\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --bgColourActive: ${brand.primary.grey};\r\n    --colourText: ${brand.global.white};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeDark}] &,\r\n  [data-variant=${BrandColours.GreenDark}] &,\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BrandColours.PinkDark}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --colourTextDisabled: ${brand.grey.light};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Purple}] & {\r\n    --colourTextDisabled: ${brand.grey.lightest};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --colourTextHover: ${brand.primary.purple.light};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Blue}] & {\r\n    --colourTextHover: ${brand.primary.blue.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.GreenDark}] & {\r\n    --colourTextHover: ${brand.secondary.green.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeDark}] & {\r\n    --colourTextHover: ${brand.secondary.orange.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeMid}] & {\r\n    --colourTextHover: ${brand.secondary.orange.mid};\r\n  }\r\n\r\n  [data-variant=${BrandColours.PinkDark}] & {\r\n    --colourTextHover: ${brand.secondary.pink.mid};\r\n  }\r\n\r\n  [data-variant=${BrandColours.BlueLight}] &,\r\n  [data-variant=${BrandColours.GreenLight}] &,\r\n  [data-variant=${BrandColours.OrangeLight}] &,\r\n  [data-variant=${BrandColours.PinkLight}] & {\r\n    --colourText: ${brand.global.black};\r\n  }\r\n\r\n  [data-variant=${BrandColours.BlueLight}] & {\r\n    --bgColourActive: ${brand.primary.blue.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.GreenLight}] & {\r\n    --bgColourActive: ${brand.secondary.green.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.OrangeLight}] & {\r\n    --bgColourActive: ${brand.secondary.orange.dark};\r\n  }\r\n\r\n  [data-variant=${BrandColours.PinkLight}] & {\r\n    --bgColourActive: ${brand.secondary.pink.dark};\r\n  }\r\n`;\r\nexport const TertiaryButtonStyles = css `\r\n  --bgColour: ${brand.primary.purple.light};\r\n  --bgColourActive: ${brand.grey.lightest};\r\n  --bgColourDisabled: ${brand.grey.grey40};\r\n  --bgColourHover: transparent;\r\n  --borderColorActive: var(--bgColour);\r\n  --borderColorHover: var(--bgColour);\r\n  --borderColour: var(--colourText);\r\n  --borderColourDisabled: var(--bgColourDisabled);\r\n  --colourText: ${brand.global.white};\r\n  --colourTextDisabled: ${brand.grey.lightest};\r\n  --colourTextHover: var(--bgColour);\r\n\r\n  [data-variant=${BackgroundVariant.Blue}] &,\r\n  [data-variant=${BackgroundVariant.Purple}] &,\r\n  [data-variant=${BackgroundVariant.PurpleDark}] & {\r\n    --bgColour: ${brand.global.white};\r\n    --colourText: ${brand.primary.purple.light};\r\n    --bgColourActive: ${rgba(brand.global.white, 0.2)};\r\n  }\r\n\r\n  [data-variant=${BackgroundVariant.Grey}] & {\r\n    --bgColourActive: ${rgba(brand.global.black, 0.1)};\r\n  }\r\n`;\r\nconst Container = styled.button `\r\n  ${DefaultButtonStyles};\r\n\r\n  &[data-type='secondary'] {\r\n    ${SecondaryButtonStyles};\r\n  }\r\n\r\n  &[data-type='tertiary'] {\r\n    ${TertiaryButtonStyles};\r\n  }\r\n\r\n  &[data-icon-only='true'] {\r\n    height: var(--buttonHeight);\r\n    justify-content: center;\r\n    padding: 0;\r\n    width: var(--buttonHeight);\r\n  }\r\n`;\r\nconst ButtonStyles = {\r\n    Container,\r\n    IconWrapper,\r\n    Text,\r\n};\r\nexport default ButtonStyles;\r\n","import { InterfaceIcon, getSvgIcon } from '@helpers/icons';\r\nimport { FocusRing } from '@react-aria/focus';\r\nimport * as React from 'react';\r\nimport S from './Button.styles';\r\nconst Button = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.Container, { ref: ref, \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n            React.createElement(S.Text, null, children),\r\n            icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight))))));\r\n});\r\nButton.displayName = 'Button';\r\nconst FakeButton = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(S.Container, { ref: ref, as: \"span\", \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n        React.createElement(S.Text, null, children),\r\n        icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight)))));\r\n});\r\nFakeButton.displayName = 'Fake Button';\r\nconst LinkButton = React.forwardRef(({ buttonType, children, fillDirection = 'right', icon, iconOnly, iconPosition = 'right', ...otherProps }, ref) => {\r\n    return (React.createElement(FocusRing, { focusRingClass: \"focus-ring\" },\r\n        React.createElement(S.Container, { ref: ref, as: \"a\", \"data-fill\": fillDirection, \"data-icon-only\": iconOnly, \"data-icon-position\": iconPosition, \"data-icon-type\": icon ?? InterfaceIcon.ArrowRight, \"data-type\": buttonType, ...otherProps },\r\n            React.createElement(S.Text, null, children),\r\n            icon !== InterfaceIcon.None && (React.createElement(S.IconWrapper, null, getSvgIcon(icon) ?? getSvgIcon(InterfaceIcon.ArrowRight))))));\r\n});\r\nLinkButton.displayName = 'Link Button';\r\nexport { FakeButton, LinkButton, Button as default };\r\n","import brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { Layers } from '@helpers/layers';\r\nimport { Device, from } from '@helpers/media';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport { m } from 'framer-motion';\r\nimport styled from 'styled-components';\r\nconst Container = styled(m.div) `\r\n  --xOffset: var(--sitePadding);\r\n  --yOffset: 20dvh;\r\n\r\n  position: fixed;\r\n  z-index: ${Layers.ScrollArrow};\r\n  bottom: var(--yOffset);\r\n  right: var(--xOffset);\r\n\r\n  @media ${from(Device.ActualDesktop)} {\r\n    --xOffset: calc((100vw - var(--siteWidth) - 18px) / 2);\r\n  }\r\n\r\n  ${ButtonStyles.Container}[data-scroll] {\r\n    --bgColour: ${brand.secondary.yellow.light};\r\n    --bgColourActive: var(--bgColourHover);\r\n    --bgColourDisabled: ${brand.grey.light};\r\n    --bgColourHover: ${brand.secondary.yellow.dark};\r\n    --borderColorActive: var(--bgColourActive);\r\n    --borderColorHover: var(--bgColourHover);\r\n    --borderColour: var(--bgColour);\r\n    --borderColourDisabled: var(--bgColourDisabled);\r\n    --buttonHeight: ${fluid(48, 80)};\r\n    --colourText: ${brand.global.black};\r\n    --colourTextDisabled: ${brand.grey.dark};\r\n    --colourTextHover: var(--colourText);\r\n\r\n    filter: drop-shadow(0px 0px 6px rgba(000, 000, 000, 0.4));\r\n\r\n    ${ButtonStyles.IconWrapper} {\r\n      transform: rotate(-90deg);\r\n    }\r\n\r\n    &:hover,\r\n    &:focus-visible,\r\n    &.focus-ring {\r\n      ${ButtonStyles.IconWrapper} {\r\n        transform: translateY(-4px) rotate(-90deg);\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-hidden='true'] {\r\n    pointer-events: none;\r\n  }\r\n\r\n  &[data-scroll-direction='down'] {\r\n    ${ButtonStyles.Container}[data-scroll] {\r\n      ${ButtonStyles.IconWrapper} {\r\n        transform: rotate(90deg);\r\n      }\r\n\r\n      &:hover,\r\n      &:focus-visible,\r\n      &.focus-ring {\r\n        ${ButtonStyles.IconWrapper} {\r\n          transform: translateY(4px) rotate(90deg);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst ScrollArrowStyles = {\r\n    Container,\r\n};\r\nexport default ScrollArrowStyles;\r\n","import { withMotion } from '@hoc/withMotion';\r\nimport { useScrollDirection } from '@hooks/useScrollDirection';\r\nimport Button from '@stories/Components/Buttons/Button/Button';\r\nimport SkipLinkStyles from '@stories/Components/Misc/SkipLink/SkipLink.styles';\r\nimport * as React from 'react';\r\nimport S from './ScrollArrow.styles';\r\nconst ScrollArrow = (props) => {\r\n    const [scrollVisible, setScrollVisible] = React.useState(false);\r\n    const [overrideToTop, setOverrideToTop] = React.useState(false);\r\n    const [currentStep, setCurrentStep] = React.useState(0); // Track the current skip section\r\n    const scrollDirection = useScrollDirection();\r\n    const scrollVariants = {\r\n        hidden: {\r\n            opacity: 0,\r\n            y: 20,\r\n        },\r\n        visible: {\r\n            opacity: 1,\r\n            y: 0,\r\n        },\r\n    };\r\n    // Track scroll position and update currentStep\r\n    React.useEffect(() => {\r\n        const handleScroll = () => {\r\n            const scrollY = window.scrollY;\r\n            const windowHeight = window.innerHeight;\r\n            const docHeight = document.documentElement.scrollHeight;\r\n            setScrollVisible(scrollY > 250);\r\n            // Override to \"Scroll to Top\" if near the bottom of the page\r\n            setOverrideToTop(scrollY + windowHeight >= docHeight - 400);\r\n            // Update currentStep based on scroll position\r\n            const skipButtons = Array.from(document.querySelectorAll(SkipLinkStyles.Button));\r\n            let step = 0;\r\n            for (let i = 0; i < skipButtons.length; i++) {\r\n                const button = skipButtons[i];\r\n                const rect = button.getBoundingClientRect();\r\n                const sectionTop = rect.top + window.scrollY;\r\n                if (sectionTop <= scrollY + windowHeight / 2) {\r\n                    step = i;\r\n                }\r\n            }\r\n            setCurrentStep(step);\r\n        };\r\n        window.addEventListener('scroll', handleScroll, { passive: true });\r\n        return () => {\r\n            window.removeEventListener('scroll', handleScroll);\r\n        };\r\n    }, []);\r\n    return (React.createElement(S.Container, { variants: scrollVariants, initial: \"hidden\", animate: scrollVisible ? 'visible' : 'hidden', \"data-hidden\": !scrollVisible, \"data-scroll-direction\": overrideToTop ? 'up' : scrollDirection },\r\n        React.createElement(Button, { buttonType: \"primary\", iconOnly: true, \"data-scroll\": true, onClick: handleScrollDirectionClick }, getAccessibleText())));\r\n    /**\r\n     * Handles the click event for the scroll arrow button.\r\n     */\r\n    function handleScrollDirectionClick() {\r\n        if (overrideToTop || scrollDirection === 'up') {\r\n            scrollToTop();\r\n        }\r\n        else {\r\n            scrollToNextSection();\r\n        }\r\n    }\r\n    /**\r\n     * Scrolls to the next section on the page.\r\n     * This is done by finding the next skip link button and scrolling to its section.\r\n     */\r\n    function scrollToNextSection() {\r\n        const skipButtons = Array.from(document.querySelectorAll(SkipLinkStyles.Button));\r\n        // Prevent scrolling past the last section\r\n        if (currentStep >= skipButtons.length - 1) {\r\n            scrollToBottom();\r\n            return;\r\n        }\r\n        const nextButton = skipButtons[currentStep + 1]; // Get the next section button\r\n        if (nextButton) {\r\n            const rect = nextButton.getBoundingClientRect();\r\n            const sectionTop = rect.top + window.scrollY;\r\n            window.scrollTo({ top: sectionTop - 49, behavior: 'smooth' });\r\n            setCurrentStep(currentStep + 1); // Update step after scroll\r\n        }\r\n    }\r\n    /**\r\n     * Scrolls to the bottom of the page.\r\n     */\r\n    function scrollToBottom() {\r\n        window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });\r\n    }\r\n    /**\r\n     * Scrolls to the top of the page.\r\n     */\r\n    function scrollToTop() {\r\n        window.scrollTo({ top: 0, behavior: 'smooth' });\r\n        setCurrentStep(0); // Reset to first section\r\n    }\r\n    /**\r\n     * Gets the accessible text for the scroll arrow button.\r\n     * @returns The accessible text for the scroll arrow button.\r\n     */\r\n    function getAccessibleText() {\r\n        if (overrideToTop) {\r\n            return props.translations?.['global.scrollTop'] ?? '';\r\n        }\r\n        switch (scrollDirection) {\r\n            case 'up':\r\n                return props.translations?.['global.scrollTop'] ?? '';\r\n            case 'down':\r\n                return props.translations?.['global.scrollToNextSection'] ?? '';\r\n            default:\r\n                return '';\r\n        }\r\n    }\r\n};\r\nexport default withMotion(ScrollArrow);\r\n","import * as React from 'react';\r\nconst THRESHOLD = 10; // Avoid unnecessary small scroll updates\r\nconst useScrollDirection = () => {\r\n    const [scrollDirection, setScrollDirection] = React.useState('up');\r\n    const prevScrollY = React.useRef(window.pageYOffset);\r\n    const blocking = React.useRef(false);\r\n    React.useEffect(() => {\r\n        const updateScrollDirection = () => {\r\n            const scrollY = window.pageYOffset;\r\n            const difference = scrollY - prevScrollY.current;\r\n            if (Math.abs(difference) >= THRESHOLD) {\r\n                setScrollDirection(difference > 0 ? 'down' : 'up');\r\n                prevScrollY.current = scrollY;\r\n            }\r\n            blocking.current = false;\r\n        };\r\n        const onScroll = () => {\r\n            if (!blocking.current) {\r\n                blocking.current = true;\r\n                window.requestAnimationFrame(updateScrollDirection);\r\n            }\r\n        };\r\n        window.addEventListener('scroll', onScroll, { passive: true });\r\n        return () => window.removeEventListener('scroll', onScroll);\r\n    }, []);\r\n    return scrollDirection;\r\n};\r\nexport { useScrollDirection };\r\n"],"names":["css","withMotion","WrappedComponent","displayName","name","ComponentWithMotion","props","React","LazyMotion","features","domAnimation","strict","CommonButtonTextStyles","transition","fonts","lato","bold","Text","styled","span","withConfig","componentId","srOnly","IconWrapper","div","InterfaceIcon","ArrowRight","Close","IconHoverStyles","DefaultButtonStyles","ButtonReset","brand","secondary","yellow","light","grey","dark","fluid","global","black","until","Device","TabletLarge","SecondaryButtonStyles","primary","purple","white","BrandColours","OrangeMid","OrangeDark","GreenDark","PinkDark","BackgroundVariant","Blue","Purple","PurpleDark","lightest","blue","green","orange","mid","pink","BlueLight","GreenLight","OrangeLight","PinkLight","TertiaryButtonStyles","grey40","rgba","Grey","Container","button","Button","_ref","ref","_getSvgIcon","buttonType","children","fillDirection","icon","iconOnly","iconPosition","otherProps","FocusRing","focusRingClass","S","None","getSvgIcon","FakeButton","_ref2","_getSvgIcon2","as","LinkButton","_ref3","_getSvgIcon3","m","Layers","ScrollArrow","from","ActualDesktop","ButtonStyles","scrollVisible","setScrollVisible","overrideToTop","setOverrideToTop","currentStep","setCurrentStep","scrollDirection","useScrollDirection","setScrollDirection","prevScrollY","window","pageYOffset","blocking","updateScrollDirection","scrollY","difference","current","Math","abs","onScroll","requestAnimationFrame","addEventListener","passive","removeEventListener","handleScroll","windowHeight","innerHeight","docHeight","document","documentElement","scrollHeight","skipButtons","Array","querySelectorAll","SkipLinkStyles","step","i","length","getBoundingClientRect","top","variants","hidden","opacity","y","visible","initial","animate","onClick","scrollTo","behavior","nextButton","sectionTop","scrollToNextSection","_props$translations$g2","_props$translations2","_props$translations$g3","_props$translations3","_props$translations$g","_props$translations","translations","getAccessibleText"],"sourceRoot":""}