{"version":3,"file":"RichText-660f3b28a951985ee02b.js","mappings":"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","sources":["webpack://james-fisher/./src/helpers/animate.ts","webpack://james-fisher/./src/helpers/brand.ts","webpack://james-fisher/./src/helpers/cssVar.ts","webpack://james-fisher/./src/helpers/fluid.ts","webpack://james-fisher/./src/helpers/fonts.ts","webpack://james-fisher/./src/helpers/grid.ts","webpack://james-fisher/./src/helpers/media.ts","webpack://james-fisher/./src/helpers/typography.ts","webpack://james-fisher/./src/hooks/useIntersectionObserver.ts","webpack://james-fisher/./src/hooks/useInView.ts","webpack://james-fisher/./src/stories/Components/SectionWrapper/SectionWrapper.styles.ts","webpack://james-fisher/./src/stories/Components/SectionWrapper/SectionWrapper.tsx","webpack://james-fisher/./src/stories/Widgets/RichText/RichText.styles.ts","webpack://james-fisher/./src/stories/Widgets/RichText/RichText.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\nexport const preView10 = '0px 0px 10% 0px';\r\nexport const inViewMargin = '0px 0px -35% 0px';\r\nexport const inView30 = '0px 0px -30% 0px';\r\nexport const inView20 = '0px 0px -20% 0px';\r\nexport const inView50 = '0px 0px -50% 0px';\r\nexport const inView75 = '0px 0px -75% 0px';\r\nexport const inView100 = '0px 0px -100% 0px';\r\nexport const cubicEaseOut = `cubic-bezier(0.33, 1, 0.68, 1)`;\r\nexport function fadeUp(params) {\r\n    return css `\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: opacity, transform;\r\n    transition-delay: ${params.delay}s;\r\n    transition-duration: ${params.duration}s;\r\n    transition-timing-function: ${cubicEaseOut};\r\n\r\n    [data-animate='true'] & {\r\n      opacity: 1;\r\n      transform: translateY(0px);\r\n    }\r\n  `;\r\n}\r\nexport function inViewFade(params) {\r\n    return css `\r\n    transition: opacity;\r\n    transition-delay: ${params.delay}s;\r\n    transition-duration: ${params.duration}s;\r\n    transition-timing-function: ${cubicEaseOut};\r\n\r\n    [data-inview='false'] & {\r\n      opacity: 0;\r\n    }\r\n\r\n    [data-inview='true'] & {\r\n      opacity: 1;\r\n    }\r\n  `;\r\n}\r\nexport function inViewFadeUp(params) {\r\n    return css `\r\n    transition: opacity, transform;\r\n    transition-delay: ${params.delay}s;\r\n    transition-duration: ${params.duration}s;\r\n    transition-timing-function: ${cubicEaseOut};\r\n\r\n    [data-inview='false'] & {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n    }\r\n\r\n    [data-inview='true'] & {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  `;\r\n}\r\nexport const shouldAnimate = (innerCss) => {\r\n    return css `\r\n    @media (prefers-reduced-motion: no-preference) {\r\n      ${innerCss}\r\n    }\r\n  `;\r\n};\r\nexport const transition = (properties, duration = 0.35, timing = cubicEaseOut) => {\r\n    return shouldAnimate(css `\r\n    transition: ${properties};\r\n    transition-duration: ${typeof duration === 'string' ? duration : `${duration}s`};\r\n    transition-timing-function: ${timing};\r\n    will-change: ${properties};\r\n  `);\r\n};\r\nexport function inViewChangeColour(params, initialColor, endColor) {\r\n    return css `\r\n    transition: color;\r\n    transition-delay: ${params.delay}s;\r\n    transition-duration: ${params.duration}s;\r\n    transition-timing-function: ${cubicEaseOut};\r\n\r\n    [data-inview='false'] & {\r\n      color: ${initialColor};\r\n    }\r\n\r\n    [data-inview='true'] & {\r\n      color: ${endColor};\r\n    }\r\n  `;\r\n}\r\n","export default {\r\n    black: '#04040F',\r\n    blue: {\r\n        base: '#0065A4',\r\n    },\r\n    grey: {\r\n        grey1: '#E7E8E9',\r\n        grey2: '#707070',\r\n        grey3: '#8A8A8A',\r\n        grey4: '#4D4D4D',\r\n        grey5: '#4D555A',\r\n        grey6: '#1C1D1E',\r\n        grey7: '#575756',\r\n        grey8: '#EBECEC',\r\n        cta: '#252829',\r\n        // Undocumented grey used in the designs.\r\n        otherGrey: '#B1B3B5',\r\n        borderGrey: '#C8CACD',\r\n    },\r\n    sectors: {\r\n        oilGasGrey: '#708A97',\r\n        marineBlue: '#55BCCA',\r\n        defencePurple: '#8B5EA0',\r\n        energyGreen: '#4BA559',\r\n        nuclearOrange: '#E3772E',\r\n        transportRed: '#D34E55',\r\n    },\r\n    sectorsAlt: {\r\n        oilGasGreen: '#00AE4D',\r\n        marineBlue: '#16BECF',\r\n        nuclearPurple: '#A978B4',\r\n        defenceGrey: '#6B8D9B',\r\n        renewableYellow: '#FFDD00',\r\n        portsTerminalsOrange: '#F37032',\r\n        transportRed: '#E44151',\r\n        constructionCream: '#EDDF98',\r\n    },\r\n    validation: {\r\n        invalid: '#DA291C',\r\n        valid: '#008C15',\r\n    },\r\n    white: '#FFFFFF',\r\n    yellow: {\r\n        base: '#FFDD00',\r\n    },\r\n};\r\n","const variables = ['gutterWidth', 'sectionMargin', 'sitePadding', 'siteWidth'];\r\nfunction cssVar(name) {\r\n    return `var(--${name})`;\r\n}\r\nfunction setCssVar(name, value) {\r\n    return `--${name}: ${value}`;\r\n}\r\nexport { cssVar, setCssVar };\r\n","import { Device } from './media';\r\n/**\r\n * Base pixel value for the \"rem\" unit.\r\n */\r\nexport const PIXELS_PER_REM = 16;\r\n/**\r\n * Default pixel value for the min width.\r\n */\r\nexport const DEFAULT_MIN_VALUE = Device.TabletSmall;\r\n/**\r\n * Default pixel value for the max width.\r\n */\r\nexport const DEFAULT_MAX_VALUE = Device.DesktopLarge;\r\n/**\r\n * Define a fluid value between the min/max values at the min/max widths.\r\n */\r\nexport function fluid(min, max, minWidth = DEFAULT_MIN_VALUE, maxWidth = DEFAULT_MAX_VALUE) {\r\n    const minRem = min / PIXELS_PER_REM;\r\n    const maxRem = max / PIXELS_PER_REM;\r\n    const minWidthRem = minWidth / PIXELS_PER_REM;\r\n    const maxWidthRem = maxWidth / PIXELS_PER_REM;\r\n    const slope = (maxRem - minRem) / (maxWidthRem - minWidthRem);\r\n    const yAxisIntersection = -minWidthRem * slope + minRem;\r\n    const clampMin = `${round(minRem)}rem`;\r\n    const clampVal = `${round(yAxisIntersection)}rem + ${round(slope * 100)}vw`;\r\n    const clampMax = `${round(maxRem)}rem`;\r\n    return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;\r\n}\r\n/**\r\n * Round to nearest hundredth.\r\n */\r\nfunction round(num) {\r\n    return Math.round(num * 100) / 100;\r\n}\r\n","import { css } from 'styled-components';\r\nexport default {\r\n    helvetica: {\r\n        light: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 300;\r\n    `,\r\n        lightItalic: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-weight: 300;\r\n      font-style: italic;\r\n    `,\r\n        regular: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n    `,\r\n        regularItalic: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-weight: 400;\r\n      font-style: italic;\r\n    `,\r\n        medium: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 500;\r\n    `,\r\n        mediumItalic: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-weight: 500;\r\n      font-style: italic;\r\n    `,\r\n        bold: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n    `,\r\n        boldItalic: css `\r\n      font-family: 'Helvetica', sans-serif;\r\n      font-weight: 700;\r\n      font-style: italic;\r\n    `,\r\n    },\r\n};\r\n","import { css } from 'styled-components';\r\nimport { cssVar, setCssVar } from './cssVar';\r\nimport { Device, from } from './media';\r\nexport const SitePadding = 18;\r\nexport const SiteWidth = 1604;\r\nexport const SiteWidthBreakpoint = SiteWidth + SitePadding * 2;\r\nexport const siteWide = css `\r\n  ${setCssVar('sitePadding', `${SitePadding}px`)};\r\n  ${setCssVar('siteWidth', `${SiteWidth}px`)};\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 0 auto;\r\n  max-width: min(\r\n    calc(${cssVar('siteWidth')} + ${cssVar('sitePadding')} + ${cssVar('sitePadding')}),\r\n    100vw\r\n  );\r\n  padding: 0 ${cssVar('sitePadding')};\r\n  width: 100%;\r\n`;\r\nexport const baseGrid = css `\r\n  ${setCssVar('gutterWidth', '10px')};\r\n\r\n  display: grid;\r\n  column-gap: ${cssVar('gutterWidth')};\r\n  grid-template-columns: repeat(12, 1fr);\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    ${setCssVar('gutterWidth', '32px')};\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    ${setCssVar('gutterWidth', '64px')};\r\n  }\r\n`;\r\n","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[\"TabletSmall\"] = 568] = \"TabletSmall\";\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[\"SubActualDesktop\"] = 1800] = \"SubActualDesktop\";\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\nexport function between(start, end) {\r\n    return `${from(start)} and ${until(end)}`;\r\n}\r\n","import { mix } from 'polished';\r\nimport { css } from 'styled-components';\r\nimport { cubicEaseOut } from './animate';\r\nimport brand from './brand';\r\nimport fonts from './fonts';\r\nimport { Device, from } from './media';\r\nconst headingStyles = css `\r\n  color: currentColor;\r\n  ${fonts.helvetica.bold};\r\n  margin: 0 0 1em;\r\n`;\r\nexport const h1 = css `\r\n  ${headingStyles};\r\n  font-size: 42px;\r\n  line-height: 50px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 56px;\r\n    line-height: 66px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 68px;\r\n    line-height: 78px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 72px;\r\n    line-height: 82px;\r\n  }\r\n`;\r\nexport const h2 = css `\r\n  ${headingStyles};\r\n  font-size: 36px;\r\n  line-height: 44px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 45px;\r\n    line-height: 55px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 52px;\r\n    line-height: 62px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 56px;\r\n    line-height: 68px;\r\n  }\r\n`;\r\nexport const h3 = css `\r\n  ${headingStyles};\r\n  font-size: 30px;\r\n  line-height: 38px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 33px;\r\n    line-height: 43px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 35px;\r\n    line-height: 45px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 40px;\r\n    line-height: 52px;\r\n  }\r\n`;\r\nexport const h4 = css `\r\n  ${headingStyles};\r\n  font-size: 25px;\r\n  line-height: 33px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 28px;\r\n    line-height: 38px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 30px;\r\n    line-height: 40px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 32px;\r\n    line-height: 44px;\r\n  }\r\n`;\r\nexport const h5 = css `\r\n  ${headingStyles};\r\n  font-size: 20px;\r\n  line-height: 28px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 23px;\r\n    line-height: 33px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 25px;\r\n    line-height: 35px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 28px;\r\n    line-height: 40px;\r\n  }\r\n`;\r\nexport const h6 = css `\r\n  ${headingStyles};\r\n  ${fonts.helvetica.regular};\r\n  font-size: 16px;\r\n  line-height: 24px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 20px;\r\n    line-height: 30px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 22px;\r\n    line-height: 34px;\r\n  }\r\n`;\r\nexport const h6Bold = css `\r\n  ${headingStyles};\r\n  font-size: 16px;\r\n  line-height: 24px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 20px;\r\n    line-height: 30px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 22px;\r\n    line-height: 34px;\r\n  }\r\n`;\r\nexport const subhead = css `\r\n  ${headingStyles};\r\n  ${fonts.helvetica.regular};\r\n  font-size: 22px;\r\n  line-height: 30px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 24px;\r\n    line-height: 32px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 24px;\r\n    line-height: 32px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 28px;\r\n    line-height: 40px;\r\n  }\r\n`;\r\nexport const headingUnderline = css `\r\n  position: relative;\r\n  padding-bottom: 16px;\r\n\r\n  &::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    display: block;\r\n    background: ${brand.yellow.base};\r\n    height: 10px;\r\n    width: 80px;\r\n    transform: scaleX(0);\r\n    transform-origin: 0 0;\r\n    will-change: transform;\r\n    transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1);\r\n\r\n    [data-inview='true'] & {\r\n      transform: scaleX(1);\r\n    }\r\n  }\r\n`;\r\nconst paragraphStyles = css `\r\n  color: currentColor;\r\n  ${fonts.helvetica.regular};\r\n  margin: 0 0 1em;\r\n`;\r\nexport const paragraphHero = css `\r\n  ${paragraphStyles};\r\n  font-size: 20px;\r\n  line-height: 28px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 18px;\r\n    line-height: 32px;\r\n  }\r\n`;\r\nexport const paragraph = css `\r\n  ${paragraphStyles};\r\n  font-size: 18px;\r\n  line-height: 26px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 18px;\r\n    line-height: 28px;\r\n  }\r\n`;\r\nexport const paragraphSmall = css `\r\n  ${paragraphStyles};\r\n  font-size: 16px;\r\n  line-height: 26px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 16px;\r\n    line-height: 28px;\r\n  }\r\n`;\r\nexport const micro = css `\r\n  ${fonts.helvetica.bold};\r\n  font-size: 14px;\r\n  line-height: 22px;\r\n  letter-spacing: -0.01em;\r\n\r\n  @media ${from(Device.TabletSmall)} {\r\n    font-size: 14px;\r\n    line-height: 24px;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 14px;\r\n    line-height: 24px;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    font-size: 14px;\r\n    line-height: 26px;\r\n  }\r\n`;\r\nexport const contentSub = css `\r\n  ${fonts.helvetica.regular};\r\n  font-size: 14px;\r\n  line-height: 26px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n`;\r\nexport const link = css `\r\n  color: currentColor;\r\n  background: linear-gradient(\r\n    to right,\r\n    var(--accentColor, ${brand.blue.base}),\r\n    var(--accentColor, ${brand.blue.base})\r\n  );\r\n  background-repeat: no-repeat;\r\n  background-size: 0% 100%;\r\n  padding: 0.25em 4px;\r\n  text-decoration: underline;\r\n  text-underline-position: under;\r\n  transition: background-size 0.15s ${cubicEaseOut}, color 0.15s ${cubicEaseOut};\r\n  box-decoration-break: clone;\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &:focus,\r\n  &:hover {\r\n    background-size: 100% 100%;\r\n    color: ${brand.white};\r\n  }\r\n`;\r\nexport const tag = css `\r\n  ${fonts.helvetica.regular};\r\n  font-size: 12px;\r\n  letter-spacing: 0.1em;\r\n  line-height: 1em;\r\n  text-transform: uppercase;\r\n`;\r\nexport const blockquote = css `\r\n  ${paragraph};\r\n  position: relative;\r\n  padding: 8px 0 8px 20px;\r\n\r\n  &:before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 4px;\r\n    height: 100%;\r\n    background-color: ${brand.grey.grey1};\r\n  }\r\n`;\r\nexport const tagBold = css `\r\n  ${tag};\r\n  ${fonts.helvetica.bold};\r\n`;\r\nexport const table = css `\r\n  background: ${brand.white};\r\n  border-collapse: collapse;\r\n  color: ${brand.black};\r\n  margin-bottom: 1em;\r\n  width: 100%;\r\n\r\n  thead {\r\n    tr {\r\n      background: ${brand.blue.base};\r\n\r\n      td,\r\n      th {\r\n        border: 2px solid ${brand.white};\r\n        color: ${brand.white};\r\n        ${fonts.helvetica.bold};\r\n        font-size: 18px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 22px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n\r\n  tbody {\r\n    tr {\r\n      &:nth-child(odd) {\r\n        background: ${mix(0.48, brand.grey.grey1, brand.white)};\r\n      }\r\n\r\n      &:nth-child(even) {\r\n        background: ${mix(0.48, brand.grey.otherGrey, brand.white)};\r\n      }\r\n\r\n      th {\r\n        border: 2px solid ${brand.white};\r\n        color: ${brand.white};\r\n        ${fonts.helvetica.bold};\r\n        font-size: 18px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 22px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n      }\r\n\r\n      td {\r\n        border: 2px solid ${brand.white};\r\n        ${fonts.helvetica.regular};\r\n        font-size: 16px;\r\n        letter-spacing: -0.01em;\r\n        line-height: 20px;\r\n        padding: 12px 16px;\r\n        text-align: left;\r\n      }\r\n    }\r\n  }\r\n`;\r\nexport const contentStyles = css `\r\n  h1,\r\n  .h1-styles {\r\n    ${h1}\r\n  }\r\n\r\n  h2,\r\n  .h2-styles {\r\n    ${h2}\r\n  }\r\n\r\n  h3,\r\n  .h3-styles {\r\n    ${h3}\r\n  }\r\n\r\n  h4,\r\n  .h4-styles {\r\n    ${h4}\r\n  }\r\n\r\n  h5,\r\n  .h5-styles {\r\n    ${h5}\r\n  }\r\n\r\n  h6,\r\n  .h6-styles {\r\n    ${h6}\r\n  }\r\n\r\n  .h6-bold-styles {\r\n    ${h6Bold}\r\n  }\r\n\r\n  p {\r\n    ${paragraph}\r\n  }\r\n\r\n  p.subhead,\r\n  span.subhead {\r\n    ${subhead}\r\n  }\r\n\r\n  p.hero,\r\n  span.hero {\r\n    ${paragraphHero}\r\n  }\r\n\r\n  p.small,\r\n  span.small {\r\n    ${paragraphSmall}\r\n  }\r\n\r\n  p.micro,\r\n  span.micro {\r\n    ${micro}\r\n  }\r\n\r\n  p.content-sub {\r\n    ${contentSub}\r\n  }\r\n\r\n  a {\r\n    ${link}\r\n  }\r\n\r\n  ol,\r\n  ul {\r\n    ${paragraphStyles};\r\n    font-size: 18px;\r\n    line-height: 26px;\r\n    letter-spacing: -0.01em;\r\n    margin: 0 0 0.5em;\r\n\r\n    @media ${from(Device.TabletSmall)} {\r\n      font-size: 18px;\r\n      line-height: 28px;\r\n    }\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      font-size: 18px;\r\n      line-height: 28px;\r\n    }\r\n\r\n    @media ${from(Device.DesktopLarge)} {\r\n      font-size: 18px;\r\n      line-height: 36px;\r\n    }\r\n  }\r\n\r\n  ol {\r\n    list-style: decimal;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  ul {\r\n    list-style: disc;\r\n    padding-left: 1.2em;\r\n  }\r\n\r\n  li span {\r\n    display: inline;\r\n  }\r\n\r\n  blockquote {\r\n    ${blockquote};\r\n  }\r\n\r\n  hr {\r\n    display: block;\r\n    background: currentColor;\r\n    border: 0;\r\n    height: 4px;\r\n    margin: 40px 0;\r\n    padding: 0;\r\n    width: 100%;\r\n\r\n    @media ${from(Device.Tablet)} {\r\n      margin: 80px 0;\r\n    }\r\n  }\r\n\r\n  table {\r\n    ${table};\r\n  }\r\n\r\n  .responsive-table {\r\n    position: relative;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  .brand-black {\r\n    color: ${brand.black};\r\n  }\r\n\r\n  .brand-blue {\r\n    color: ${brand.blue.base};\r\n  }\r\n\r\n  .brand-sectors-defence-purple {\r\n    color: ${brand.sectors.defencePurple};\r\n  }\r\n\r\n  .brand-sectors-energy-green {\r\n    color: ${brand.sectors.energyGreen};\r\n  }\r\n\r\n  .brand-sectors-marine-blue {\r\n    color: ${brand.sectors.marineBlue};\r\n  }\r\n\r\n  .brand-sectors-nuclear-orange {\r\n    color: ${brand.sectors.nuclearOrange};\r\n  }\r\n\r\n  .brand-sectors-oil-gas-grey {\r\n    color: ${brand.sectors.oilGasGrey};\r\n  }\r\n\r\n  .brand-sectors-transport-red {\r\n    color: ${brand.sectors.transportRed};\r\n  }\r\n\r\n  .brand-white {\r\n    color: ${brand.white};\r\n  }\r\n\r\n  .brand-yellow {\r\n    color: ${brand.yellow.base};\r\n  }\r\n\r\n  > *:first-child {\r\n    margin-top: 0;\r\n  }\r\n\r\n  > *:last-child {\r\n    margin-bottom: 0;\r\n  }\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","import { fluid } from '@helpers/fluid';\r\nimport { siteWide } from '@helpers/grid';\r\nimport styled from 'styled-components';\r\nconst Container = styled.section `\r\n  --introSpacing: ${fluid(32, 64)};\r\n  --sectionSpacing: ${fluid(48, 96)};\r\n\r\n  scroll-margin: var(--headerHeight) 0 0;\r\n`;\r\nconst Inner = styled.div `\r\n  ${siteWide}\r\n`;\r\nconst SectionWrapperStyles = {\r\n    Container,\r\n    Inner,\r\n};\r\nexport default SectionWrapperStyles;\r\n","import * as React from 'react';\r\nimport S from './SectionWrapper.styles';\r\nconst SectionWrapper = React.forwardRef(({ children, layout = 'default', ...otherProps }, ref) => {\r\n    switch (layout) {\r\n        case 'fullWidth':\r\n            return (React.createElement(S.Container, { ref: ref, ...otherProps }, children));\r\n        case 'default':\r\n        default:\r\n            return (React.createElement(S.Container, { ref: ref, ...otherProps },\r\n                React.createElement(S.Inner, null, children)));\r\n    }\r\n});\r\nSectionWrapper.displayName = 'SectionWrapper';\r\nexport default SectionWrapper;\r\n","import { inViewFadeUp } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { baseGrid } from '@helpers/grid';\r\nimport { Device, from } from '@helpers/media';\r\nimport { contentStyles, h3, headingUnderline } from '@helpers/typography';\r\nimport SectionWrapper from '@stories/Components/SectionWrapper/SectionWrapper';\r\nimport { mix } from 'polished';\r\nimport styled, { css } from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  background: var(--bgColor);\r\n  color: var(--fgColor);\r\n\r\n  &[data-bg='white'] {\r\n    --bgColor: ${brand.white};\r\n    --fgColor: ${brand.black};\r\n    margin: var(--sectionSpacing) 0;\r\n  }\r\n\r\n  &:not([data-bg='white']) {\r\n    padding: var(--sectionSpacing) 0;\r\n\r\n    blockquote:before {\r\n      background-color: currentColor;\r\n    }\r\n  }\r\n\r\n  &[data-bg='lightGrey'] {\r\n    --bgColor: ${mix(0.25, brand.grey.otherGrey, brand.white)};\r\n    --fgColor: ${brand.black};\r\n  }\r\n\r\n  &[data-bg='grey'] {\r\n    --bgColor: ${brand.grey.grey3};\r\n    --fgColor: ${brand.black};\r\n  }\r\n\r\n  &[data-bg='black'] {\r\n    --bgColor: ${brand.grey.grey6};\r\n    --fgColor: ${brand.white};\r\n  }\r\n\r\n  &[data-align='center'] {\r\n    text-align: center;\r\n\r\n    blockquote {\r\n      display: inline-block;\r\n    }\r\n  }\r\n\r\n  &[data-width='narrow'] {\r\n    background-color: ${brand.white};\r\n  }\r\n`;\r\nconst Inner = styled.div `\r\n  [data-align='left'] & {\r\n    ${baseGrid};\r\n  }\r\n`;\r\nfunction underlineDelay() {\r\n    let styles = '';\r\n    for (let i = 0; i < 6; i += 1) {\r\n        styles += `\r\n        &:is(h${i + 1})::after {\r\n          transition-delay: ${i * 0.3}s;\r\n        }\r\n     `;\r\n    }\r\n    return css `\r\n    ${styles}\r\n  `;\r\n}\r\nconst Content = styled.div `\r\n  ${contentStyles}\r\n  margin: 0 auto;\r\n  width: 100%;\r\n\r\n  ${inViewFadeUp({ delay: 0.15, duration: 0.3 })};\r\n\r\n  [data-align='center'] & {\r\n    max-width: 1048px;\r\n  }\r\n\r\n  [data-width='narrow'] & {\r\n    max-width: 770px;\r\n  }\r\n\r\n  [data-align='left'] & {\r\n    grid-row: 2;\r\n    grid-column: 1 / span 12;\r\n\r\n    @media ${from(Device.DesktopSmall)} {\r\n      grid-column: 2 / span 10;\r\n    }\r\n  }\r\n\r\n  .heading-underline {\r\n    ${headingUnderline};\r\n    ${underlineDelay()};\r\n  }\r\n\r\n  ${({ styles }) => styles &&\r\n    css `\r\n      ${styles}\r\n    `}\r\n`;\r\nconst IntroContent = styled.div `\r\n  ${baseGrid};\r\n  width: 100%;\r\n  margin-bottom: var(--introSpacing);\r\n\r\n  [data-align='left'] & {\r\n    grid-row: 1;\r\n    grid-column: 1 / span 12;\r\n\r\n    @media ${from(Device.DesktopSmall)} {\r\n      grid-column: 2 / span 10;\r\n    }\r\n  }\r\n`;\r\nconst Title = styled.h2 `\r\n  ${h3}\r\n  margin-bottom: 16px;\r\n  grid-column: 1 / span 12;\r\n  grid-row: 1;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 1 / span 6;\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  ${inViewFadeUp({ delay: 0, duration: 0.3 })};\r\n`;\r\nconst TopContent = styled.div `\r\n  ${contentStyles};\r\n  grid-column: 1 / span 12;\r\n  grid-row: 2;\r\n  margin: -8px 0 0;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 7 / span 6;\r\n    grid-row: 1;\r\n    margin: 0;\r\n  }\r\n\r\n  ${inViewFadeUp({ delay: 0, duration: 0.6 })};\r\n`;\r\nconst RichTextStyles = {\r\n    Container,\r\n    Content,\r\n    Inner,\r\n    IntroContent,\r\n    Title,\r\n    TopContent,\r\n};\r\nexport default RichTextStyles;\r\n","import { inView30 } from '@helpers/animate';\r\nimport { useInView } from '@hooks/useInView';\r\nimport * as React from 'react';\r\nimport S from './RichText.styles';\r\nconst RichText = ({ title = '', introContent = '', bgColor = '', content, alignment = 'left', width = 'default', styles, ...otherProps }) => {\r\n    const [refContainer, inView] = useInView({ rootMargin: inView30 });\r\n    return (React.createElement(S.Container, { ref: refContainer, \"data-align\": alignment, \"data-bg\": bgColor, \"data-inview\": inView, \"data-width\": width, ...otherProps },\r\n        React.createElement(S.Inner, null,\r\n            (title || content) && (React.createElement(S.IntroContent, null,\r\n                title && (React.createElement(S.Title, { id: title.replaceAll(/[\\W_]+/g, '-').toLowerCase() }, title)),\r\n                introContent && (React.createElement(S.TopContent, { dangerouslySetInnerHTML: { __html: introContent } })))),\r\n            React.createElement(S.Content, { dangerouslySetInnerHTML: { __html: content }, styles: styles }))));\r\n};\r\nexport default RichText;\r\n"],"names":["preView10","inViewMargin","inView30","inView20","inView50","cubicEaseOut","inViewFade","params","css","delay","duration","inViewFadeUp","shouldAnimate","innerCss","transition","properties","timing","inViewChangeColour","initialColor","endColor","black","blue","base","grey","grey1","grey2","grey3","grey4","grey5","grey6","grey7","grey8","cta","otherGrey","borderGrey","sectors","oilGasGrey","marineBlue","defencePurple","energyGreen","nuclearOrange","transportRed","sectorsAlt","oilGasGreen","nuclearPurple","defenceGrey","renewableYellow","portsTerminalsOrange","constructionCream","validation","invalid","valid","white","yellow","cssVar","name","setCssVar","value","PIXELS_PER_REM","DEFAULT_MIN_VALUE","Device","DEFAULT_MAX_VALUE","fluid","min","max","minWidth","maxWidth","minRem","maxRem","minWidthRem","maxWidthRem","slope","yAxisIntersection","clampMin","round","clampVal","clampMax","num","Math","helvetica","light","lightItalic","regular","regularItalic","medium","mediumItalic","bold","boldItalic","SitePadding","SiteWidth","SiteWidthBreakpoint","siteWide","baseGrid","from","size","until","headingStyles","fonts","h1","h2","h3","h4","h5","h6","h6Bold","subhead","headingUnderline","brand","paragraphStyles","paragraphHero","paragraph","paragraphSmall","micro","contentSub","link","tag","blockquote","tagBold","table","mix","contentStyles","callback","options","observerRef","useRef","rootRef","elementRef","useEffect","current","IntersectionObserver","root","observe","disconnect","useInView","reverse","isEditMode","inView","setInView","useState","useIntersectionObserver","entries","isIntersecting","Container","styled","Inner","SectionWrapper","React","ref","children","layout","otherProps","S","displayName","Content","styles","i","underlineDelay","IntroContent","Title","TopContent","title","introContent","bgColor","content","alignment","width","refContainer","rootMargin","id","replaceAll","toLowerCase","dangerouslySetInnerHTML","__html"],"sourceRoot":""}